본문 바로가기

💻 Frontend3

CSS로 스타일링 시작하기 HTML만으로는 웹 페이지가 너무 밋밋하죠.그래서 우리는 CSS(Cascading Style Sheets)를 사용해 글꼴, 색상, 레이아웃 등 웹의 시각적인 스타일을 입힐 수 있어요.이 글에서는 CSS의 기본 개념부터 꼭 알아야 할 핵심 속성들까지 정리해볼게요.1️⃣ CSS 기본 문법과 구조CSS는 HTML에 다음과 같은 방식으로 스타일을 적용합니다.선택자 { 속성: 값;} 예시:p { color: blue; font-size: 16px;}선택자(Selector)는 어떤 요소에 스타일을 적용할지를 지정속성(Property)은 적용할 스타일 종류값(Value)은 속성에 대한 구체적인 설정CSS 적용 방식인라인 스타일: HTML 요소에 직접 style 속성 사용내부 스타일: 태그를 안에 작성외부 스.. 2025. 4. 10.
HTML 기본기 다지기 웹 개발을 시작할 때 가장 먼저 배우는 것이 HTML입니다.HTML은 웹 페이지의 뼈대를 구성하는 언어로, 모든 웹 사이트는 결국 HTML 위에 쌓여 있어요.이번 글에서는 HTML의 기본 구조부터 주요 태그, 시맨틱 태그, 그리고 폼 태그까지 깔끔하게 정리해 볼게요.✅ HTML의 기본 구조 이해하기HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있어요. Hello, HTML!    태그  설명    HTML5 문서임을 선언    HTML 문서의 시작과 끝을 감쌈    문서 정보를 담는 영역 (제목, 인코딩, 메타정보 등)    화면에 실제로 보여지는 콘텐츠 영역 🏷️ 주요 HTML 태그 소개HTML에는 정말 다양한 태그가 있지만, 자주 쓰이는 기본 태그 몇 가지만 먼저 익혀볼게요.?.. 2025. 4. 9.
웹은 어떻게 작동할까? 웹 개발을 처음 시작할 때, 가장 먼저 알아야 할 것은 웹이 어떻게 작동하는가입니다. 단순히 브라우저에 URL을 입력하면 페이지가 열리는 그 과정을 조금 더 자세히 들여다보면, 웹 개발의 기본 원리를 이해할 수 있어요.1. 브라우저와 서버, 그리고 그 사이의 이야기우리가 흔히 쓰는 크롬(Chrome), 사파리(Safari), 엣지(Edge) 같은 브라우저는 단순히 정보를 보여주는 도구가 아닙니다.사용자가 URL을 입력하면 브라우저는 다음과 같은 과정을 거칩니다. DNS 조회 – 도메인 이름을 IP 주소로 변환서버에 요청 전송 – 해당 IP 주소의 서버로 요청(Request)을 보냄서버 응답 – 서버는 HTML, CSS, JS 등의 파일을 브라우저에 응답(Response)으로 전달브라우저 렌더링 – 받은 .. 2025. 4. 8.
반응형