1️⃣ HTML & HTML태그
HTML(하이퍼텍스트 마크업 언어)의 기본 구조로 HTML은 웹 페이지의 내용을 구조화하고 표현하기 위한 마크업 언어입니다. 또한 html은 태그로 구성되어 있으며 각 태그는 특정한 의미와 기능을 가지고 있습니다.
-
HTML
< !DOCTYPE html>: HTML 문서의 문서 유형 선언(Doctype Declaration)을 의미합니다.
이 선언은 웹 브라우저에게 현재 문서가 어떤 HTML 버전으로 작성되었는지를 알려주는 역할을 합니다
예전에는 다양한 HTML 버전에 대한 다양한 Doctype이 존재했지만, HTML5에서는 단순한 형태로 통일되어 사용하지 않아도 정상적으로 해석은 되지만 이 선언을 사용함으로써 HTML5의 표준 모드(Standards Mode)로 설정되어 문서의 렌더링을 일관되게 유지하는 데 도움을줍니다< html lang="en">: HTML 문서의 시작을 나타냅니다. lang 속성은 문서의 언어를 정의합니다.
< head>: 문서의 메타데이터를 담고 있습니다. 예를 들면, 문자 인코딩, viewport 설정, 문서 제목 등이 여기에 포함됩니다.
< meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.
< meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 웹 페이지가 올바르게 표시되도록 하는 viewport 설정입니다.
< title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
< body>: 웹 페이지의 본문이 시작되는 곳입니다. 여러 HTML 요소들이 이 부분에 들어가게 됩니다.
html 태그
< html>: HTML 문서의 루트 요소를 나타냅니다.
< head>: 문서의 메타데이터를 담고 있는 부분으로, 제목, 문자 인코딩, 스타일시트 등을 정의합니다.
< title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
< body>: 문서의 본문을 포함하는 부분으로, 텍스트, 이미지, 링크 등이 들어갑니다.
< h1>, < h2>, ..., < h6>: 제목을 나타내는 태그로, < h1>이 가장 큰 제목이고, < h6>이 가장 작은 제목입니다.
< p>: 단락을 나타냅니다.
< a>: 하이퍼링크를 생성하는 태그로, href 속성에 링크 주소를 지정합니다.
< img>: 이미지를 삽입하는 태그로, src 속성에 이미지 경로를 지정합니다.
< ul>, < ol>, < li>: 각각 순서가 없는 목록(ul), 순서가 있는 목록(ol), 목록 항목(li)을 나타냅니다.
< div>: 구역을 정의하는 태그로, 주로 CSS 스타일링이나 JavaScript 이벤트를 적용하기 위해 사용됩니다.
< span>: 텍스트의 일부를 감싸서 스타일을 적용하거나 JavaScript에서 조작하기 위해 사용됩니다.
2️⃣ CSS & CSS속성
CSS(Cascading Style Sheets)는 "계단식 스타일 시트"를 의미하며,
HTML 문서의 스타일, 레이아웃, 디자인을 정의하는 스타일 시트 언어입니다.
HTML은 문서의 구조를 정의하고, CSS는 그 구조에 스타일을 적용하여 웹 페이지를 더 멋지게 꾸밀 수 있습니다.
-
스타일시트 기본 구조
선택자 { ... }: 선택자는 HTML 요소를 지정하고, 중괄호 내에 스타일 규칙을 정의합니다.
속성: 값;: 각 스타일 규칙은 속성과 값의 쌍으로 이루어져 있습니다. 속성은 스타일을 정의하고, 값은 그 속성의 특정 설정값입니다.
위의 코드에서 body, h1, .my-class, #my-id는 각각 다른 종류의 선택자를 나타냅니다.
*body:** HTML 문서의 < body> 요소를 선택하는 선택자로, 전체 페이지에 스타일을 적용합니다.
h1: HTML 문서의 < h1> 요소를 선택하는 선택자로, 제목에 스타일을 적용합니다.
my-class: HTML 문서에서 클래스가 my-class인 요소를 선택하는 선택자로, 해당 클래스에 스타일을 적용합니다.
my-id: HTML 문서에서 아이디가 my-id인 요소를 선택하는 선택자로, 해당 아이디에 스타일을 적용합니다.
-
css속성
CSS는 선택자와 속성-값 쌍을 통해 HTML 요소에 스타일을 적용합니다.
색상 관련 속성:
color: 텍스트 색상 지정.
background-color: 배경 색상 지정.폰트 관련 속성:
font-family: 글꼴 지정.
font-size: 글꼴 크기 지정.
font-weight: 글꼴 굵기 지정.
line-height: 행 간격 설정.레이아웃 관련 속성:
width, height: 너비와 높이 지정.
margin, padding: 외부 여백과 내부 여백 지정.
display: 요소의 표시 방법(블록, 인라인 등) 지정.테두리 및 여백 관련 속성:
border: 테두리 지정.
border-radius: 테두리의 둥근 정도 지정.
margin, padding: 여백 지정.위치와 정렬 관련 속성:
position: 요소의 위치 지정.
top, right, bottom, left: 위치 조절.
text-align: 텍스트 정렬 지정.텍스트 관련 속성
text-decoration: 텍스트의 장식(밑줄, 취소선 등) 지정.
text-transform: 텍스트의 대문자 및 소문자 변환 설정.
line-height: 텍스트 줄 간격 지정.그 외 속성:
background-image: 배경 이미지 지정.
opacity: 투명도 조절.
transition: 전환 효과 지정.
