오늘은 예전에 배웠던 HTML, CSS 문법에 대해 복습 겸 정리를 해보려고 합니다.
HTML이란?
HTML은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.
HTML은 .htm, .html 확장자 포맷을 가지고 있으며 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View를 통해 접하게 됩니다.
시멘틱 마크업이란?
시멘틱 마크업(Semantic Markup)은 평범하고 오래된 의미론적인 HTML을 의미합니다.
HTML은 웹 사이트 컨텐츠를 설명하는데 사용되는 마크업 언어이므로 컨텐츠의 의미를 설명하는데 유일한 목적을 가지고 있습니다. 해당 목적으로 사용되는 시멘틱 태그(Semantic tag)는 단순히 문서의 구조를 정의하는 것이 아니라, 그 구조가 어떤 의미를 가지는지에 대해서도 나타냅니다.
시멘틱 태그는 웹 접근성을 향상시키고, 개발자들이 문서의 구조를 쉽게 이해할 수 있도록 돕습니다.
시멘틱 태그의 종류
HTML5에서 도입된 주요 시멘틱 태그에 대해서 알아봅시다.
-
<header>: 페이지나 섹션의 헤더를 나타냅니다. -
<nav>: 페이지의 주요 네비게이션 링크를 나타냅니다. -
<main>: 문서의 주요 내용을 나타냅니다. 한 페이지에 하나의<main>요소만 있어야 합니다. -
<article>: 독립적으로 구분해서 배포하거나 재사용할 수 있는 문서나 애플리케이션의 메인 부분을 나타냅니다. 예를 들어 포럼 글, 블로그 글, 뉴스 스토리 등이 여기에 해당합니다. -
<section>: HTML 문서의 독립적인 섹션을 나타냅니다. 보통 헤딩(h1~h6)과 함께 사용합니다. -
<aside>: 페이지의 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바나 콜아웃 박스로 사용합니다. -
<footer>: 페이지나 섹션의 푸터를 나타냅니다. -
<figure>와<figcaption>: 이미지, 다이어그램, 차트, 코드 등의 컨텐츠와 그 설명을 나타냅니다.
CSS란?
CSS는 Cascading Style Sheets 약자로, HTML, XHTML, XML 같은 문서의 스타일 꾸밀 때 사용하는 스타일 시트 언어입니다.
HTML가 문서의 기본 뼈대를 설계하는 것이라면 CSS는 해당 문서에 스타일을 입히는 작업이라고 보시면 됩니다.
글꼴, 배경색, 너비, 높이, 위치 등을 지정하고 웹 브라우저, 스크린 크기, 장치에 따라 화면을 다르게 보이도록 지정할 수 있습니다.
CSS는 문서의 내용(content)과 표현(presentation)을 분리하여 CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정되는 장점이 있습니다.
CSS 스타일 적용 방법
CSS 스타일을 적용하는 방법은 아래 세 가지가 있습니다.
1.속성처럼 style 적용(In-line)
<!DOCTYPE html>
<html>
<head>
<title>속성처럼 style 적용 예시</title>
</head>
<body>
<h1 style="color: blue;">블루 색상의 제목</h1>
<p style="font-size: 20px;">20픽셀 크기의 문단</p>
</body>
</html>
2. style tag 사용(Internal)
<!DOCTYPE html>
<html>
<head>
<title>style tag 사용 예시</title>
<style>
h1 {
color: red;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>레드 색상의 제목</h1>
<p>16픽셀 크기의 문단</p>
</body>
</html>
3. CSS 파일을 생성하여 HTML 문서에 연결(External)
<style.css>
h1 {
color: green;
}
p {
font-size: 18px;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS 파일 적용 예시</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>그린 색상의 제목</h1>
<p>18픽셀 크기의 문단</p>
</body>
</html>
여러 HTML 문서를 한꺼번에 수정하기 위해서는 CSS 파일을 생성하여 스타일을 적용하는 것이 가장 좋습니다. 참고로 style css 적용 시 태그에서 직접 css를 적용할 때보다 우선순위가 높게 css 적용이 일어납니다.
CSS 기본 구성요소
CSS를 기본 구성요소는 다음과 같습니다.
1. 선택자(Selector) : HTML 요소를 선택하는 패턴입니다. 이 선택자가 어떤 요소에 스타일을 적용할 지 결정합니다.
2. 속성(Property) : 스타일을 지정할 특성을 의미합니다. Ex) color, font-size, margin 등
3. 값(Value) : 속성에 설정할 값입니다. Ex) color : red, #FF0000, rgb(255,0,0) 등 적용
선택자의 종류는 아래와 같습니다.
1. 요소 선택자 : 태그 이름을 직접 사용하여 해당 태그를 가진 모든 요소를 선택합니다.
p {
color: blue;
}2. 클래스 선택자 : 점(.) 다음에 클래스 이름을 지정합니다. 해당 클래스를 가진 요소들이 선택됩니다.
.menu {
font-size: 18px;
}3. ID 선택자 : 샾(#) 다음에 ID를 지정합니다. 해당 ID를 가진 단일 요소를 선택합니다.
#header {
background-color: gray;
}4. 속성 선택자 : 요소의 특정 속성을 기반으로 선택합니다.
input[type="text"] {
border: 1px solid black;
}5. 가상 클래스 선택자 : 요소의 특정 상태(hover 등)를 기반으로 선택합니다.
a:hover {
color: red;
}6. 자식 및 후손 선택자 : 요소의 자식이나 후손을 대상으로 선택할 수 있습니다.
div > p { /* div의 직접적인 자식인 p를 선택 */
color: green;
}
div p { /* div의 모든 후손인 p를 선택 */
color: green;
}CSS 작성 방법
CSS는 선택자를 사용하여 스타일을 적용할 HTML 요소를 지정하고, 중괄호 {} 안에 속성과 값을 속성: 값; 형태로 지정합니다.
선택자 {
속성1: 값1;
속성2: 값2;
...
}CSS 부모, 자식 태그 상속
CSS에서 상속은 특정 속성 값이 부모 요소에서 자식 요소로 자동으로 전달되는 과정을 말합니다. 상속되는 속성은 자식 요소에서 명시적으로 다른 값이 지정되지 않았을 때 부모의 값을 받아 사용합니다.
상속되는 속성에는 color, font-family, font-size, line-height, text-align 등이 있으며 기본적으로 부모 요소에서 설정된 값이 자식 요소에도 적용됩니다.
상속되지 않는 속성에는 margin, border, padding, width, height 등이 있으며 각 요소에 대해 개별적으로 정의해야 하며, 부모 요소의 해당 속성 값이 자동으로 자식 요소에 적용되지 않습니다.
CSS에서 inherit 키워드를 사용하여 일반적으로 상속되지 않는 속성에 대해 명시적으로 상속을 강제할 수 있습니다.
.parent {
border: 2px solid black;
}
.child {
border: inherit;
}또한 자식 요소에 대한 스타일 규칙을 명시적으로 작성하면 상속을 통제하거나 오버라이드할 수 있습니다.
.parent {
color: blue;
}
.child {
color: red; /* 부모로부터 상속받은 색상을 덮어씌움 */
}