HTML 기본 문법 구조
1️⃣
- HTML5 문서임을 선언하는 태그입니다. 문서의 첫 번째 줄에 위치하며, 웹 브라우저가 문서를 올바르게 해석하도록 돕습니다.
2️⃣ html 태그
- 전체 HTML 문서를 감싸는 루트(root) 요소입니다.
- lang="en" 속성은 문서의 언어를 지정합니다(예: en은 영어, ko는 한국어).
3️⃣ head 태그
- 문서에 대한 메타데이터를 포함하는 부분입니다. 이 부분에는 문서의 제목, 문자 인코딩, 스타일시트, 스크립트, SEO 관련 정보 등이 포함됩니다.
<head>
<meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 설정 -->
<title>Document Title</title> <!-- 브라우저 탭에 표시될 문서 제목 -->
</head>4️⃣ body 태그
- 실제 웹 페이지에 표시될 콘텐츠가 들어가는 부분입니다. 모든 텍스트, 이미지, 링크, 표 등은 body 태그 안에 작성됩니다.
<body>
<h1>Heading 1</h1> <!-- 큰 제목을 표시 -->
<p>This is a paragraph.</p> <!-- 단락(문장)을 표시 -->
</body> 5️⃣ HTML 요소 구조
- HTML 요소는 기본적으로 아래와 같은 구조로 이루어져 있습니다.
<태그명 속성="값">내용</태그명>- 태그명: 요소의 종류를 나타냅니다. 예: p 는 단락(문장)을 나타냅니다.
- 속성: 요소에 대한 추가 정보를 제공합니다. 예: lang="en"은 언어를 영어로 설정합니다.
- 내용: 요소 안에 들어가는 텍스트나 다른 HTML 요소입니다.
- 닫는 태그: 대부분의 HTML 태그는 닫는 태그가 필요합니다. 닫는 태그는 /로 시작합니다. 예: </태그>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page. I'm learning how to structure a web page using HTML.</p>
</body>
</html>CSS의 기본 문법 구조
CSS는 선택자와 선언 블록으로 구성됩니다.
선택자 {
속성1: 값1;
속성2: 값2;
...
}- 선택자: 스타일을 적용할 HTML 요소를 지정합니다.
- 선언: 스타일의 속성과 값을 정의합니다.
- 속성: 어떤 스타일을 적용할지 결정합니다.
- 값: 속성에 적용할 구체적인 스타일을 정의합니다.
1️⃣ 선택자
- 선택자는 스타일을 적용할 HTML 요소를 지정합니다.
- 예를 들어, p 선택자는 p 요소에 스타일을 적용합니다.
p {
color: blue;
font-size: 16px;
}이 코드는 모든 p 요소의 텍스트 색상을 파란색(blue)으로, 글자 크기를 16픽셀(16px)로 설정합니다.
2️⃣ 속성
- 속성은 스타일의 특정 측면을 정의합니다. 예를 들어, color, font-size, background-color 등이 있습니다.
- 각 속성은 :로 구분되고, 해당 속성에 대한 값을 지정합니다.
p {
color: blue;
font-size: 16px;
}여기서 color는 텍스트 색상, font-size는 글자 크기를 의미합니다.
3️⃣ 값
- 값은 속성에 적용할 구체적인 스타일을 정의합니다.
- 예를 들어, color 속성의 값은 blue, font-size 속성의 값은 16px입니다.
p {
color: blue;
font-size: 16px;
}이 예에서 blue와 16px은 각각 텍스트 색상과 글자 크기를 정의하는 값입니다.
4️⃣ 선언
- 선언은 속성과 값의 쌍으로 이루어져 있으며, 하나의 스타일 규칙을 의미합니다.
- 선언은 {} 안에 작성하며, 여러 개의 선언을 사용할 때는 ;로 구분합니다.
p {
color: blue;
font-size: 16px;
background-color: yellow;
}이 코드에서 세 개의 선언(color, font-size, background-color)이 사용되었습니다.
5️⃣ 적용 예시
h1 {
color: red;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}- h1 선택자는 모든
요소의 텍스트를 빨간색(red)으로 설정하고, 텍스트를 가운데 정렬(center)합니다.
- p 선택자는 모든
요소의 글자 크기를 18픽셀(18px)로, 줄 간격을 1.6으로 설정합니다.
김개발의 개발여정