0. 🔖 목차
- HTML
1-1 개념
1-2 HTML의 기본 구조
1-3 HTML 태그 목록 - CSS
2-1 개념
2-2 사용법
2-3 CSS 속성
2-4 선택자
2-5 속성 선택자
1. HTML
1-1. 개념
HTML은 웹 페이지의 구조를 정의하는 마크업 언어다.
웹 페이지의 콘텐츠와 구조를 만드는 데 사용되며, 텍스트, 이미지, 링크 등 다양한 요소를 웹 페이지에 표시하기 위한 태그를 제공한다.
모든 웹 페이지는 HTML을 기반으로 구축되며, 다른 기술들(CSS, JavaScript)과 함께 사용되어 브라우저를 통해 사용자에게 화면을 표시한다(렌더링).
1-2 HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<!-- 안보이는 부분 -->
<title>문서 제목</title>
</head>
<body>
<!-- 보여지는 부분 -->
</body>
</html><!DOCTYPE html>: 문서 타입 선언, HTML5 문서임을 나타냄
<html>: 페이지의 루트(root) 요소
<head>: 문서의 메타데이터(문서 제목, 문자 집합, css 링크 및 스크립트(ref) 등)를 포함
<title>: 브라우저 탭에 표시되는 문서 제목을 정의
<body>: 실제 페이지 콘텐츠(텍스트, 이미지, 비디오 등)를 포함
1-3 HTML 태그 목록
-
구조적 태그
<h1>, <h2>, ..., <h6>: 제목 태그.
<p>: 단락(paragraph) 정의
<div>: 컨텐츠를 그룹화(division)할 때 사용. 스타일링이나 레이아웃 목적
<span>: 텍스트를 그룹화할 때 사용, 주로 스타일을 적용하기 위해 사용 -
리스트 태그
<ul>: 순서 없는 리스트(unordered list). 항목들은<li>태그로 표시.
<ol>: 순서 있는 리스트(ordered list). 항목들은<li>태그로 표시. -
링크 및 이미지
<a href="URL">: 하이퍼링크를 생성. href 속성에는 이동할 URL을 지정.
<img src="이미지 URL" alt="대체 텍스트">: 이미지를 삽입. src는 이미지 위치, alt는 이미지를 설명하는 대체 텍스트. -
폼 관련 태그
<form>: 사용자 입력을 위한 폼을 정의.
<input>: 사용자 데이터 입력 필드를 정의. type 속성으로 다양한 입력 타입(텍스트, 비밀번호, 체크박스 등)을 지정할 수 있음.
<label>:<input>요소의 라벨을 정의.
<button>: 클릭할 수 있는 버튼을 정의. 폼 제출 버튼이나 일반 버튼으로 사용. -
기타 유용한 태그
<br>: 줄 바꿈.
<hr>: 수평선을 생성하여 내용 구분에 사용.
<meta>: 문서의 메타데이터(예: 문자 집합 등)<head>에 정의됨.
2 CSS
2-1 개념
CSS는 웹 페이지의 스타일을 지정하는 스타일 시트 언어다.
HTML로 만든 웹 페이지의 레이아웃, 색상, 글꼴 등을 꾸밀 때 사용된다.
CSS는 웹 페이지의 시각적 표현을 향상시켜 사용자 경험을 개선하며, CSS를 통해 웹 사이트의 디자인을 쉽게 변경하고, 반응형 웹 디자인을 구현하여 다양한 디바이스에서의 호환성을 보장할 수 있다.
2-2 사용법
내부 스타일 시트(Internal Style Sheet)
<head>
...
<style>
body {
background-color: lightblue;
}
</style>
</head><head> 태그 내에 <style> 요소를 사용하여, 같은 HTML 문서 내에서 스타일을 정의.
단일 페이지에만 특정 스타일을 적용할 때 적합
외부 스타일 시트(External Style Sheet)
<link rel="stylesheet" href="styles.css">CSS 규칙을 별도의 파일에 저장하고, HTML 문서에서 링크를 통해 불러오는 방법.
여러 페이지에서 같은 스타일을 적용할 때 적합
인라인 스타일(Inline Style)
<p style="color: red;"></p>HTML 요소의 style 속성을 사용하여 직접 스타일을 적용.
간단한 스타일 변경에 사용할 수 있으나, 유지 관리 측면에서는 권장되지 않음.
2-3 CSS 속성
-
레이아웃 관련 속성
display: 요소의 표시 방법을 결정. (block, inline, flex, grid 등)
position: 요소의 위치를 결정하는 방법을 지정. (static, relative, absolute, fixed 등)
margin: 요소의 외부 여백을 설정.
padding: 요소의 내부 여백을 설정.
border: 요소의 테두리 스타일을 정의. -
색상 및 배경
color: 텍스트 색상을 지정.
background-color: 배경색을 지정.
background-image: 배경 이미지를 설정. -
글꼴 및 텍스트
font-family: 텍스트의 글꼴을 지정.
font-size: 글꼴 크기를 설정.
text-align: 텍스트 정렬 방법을 지정. (left, right, center, justify 등)
2-4 선택자
특정 태그의 스타일을 지정할 때 그 특정 태그를 선택하는 방법을 나타냄.
- 요소 선택자: 태그 이름을 직접 지정(body, p, div 등)
- 클래스 선택자: .을 사용하여 클래스 이름을 지정. 여러 요소에 같은 스타일을 적용할 때 사용.
- ID 선택자: #을 사용하여 ID를 지정. 유일한 요소에 스타일을 적용할 때 사용.
- 속성 선택자: 요소의 특정 속성을 기반으로 선택. (
[type="text"]등)
2-5 속성 선택자
-
[속성]: 해당 속성을 가진 모든 요소를 선택
a[target] { color: red; }
target 속성을 가진 모든<a>태그의 텍스트 색상을 빨간색으로 지정 -
[속성="값"]: 속성 값이 정확히 일치하는 요소를 선택
input[type="text"] { background-color: yellow; }
type 속성의 값이 "text"인 모든<input>요소의 배경색을 노란색으로 지정 -
[속성~="값"]: 속성 값이 공백으로 구분된 여러 값 중 하나와 일치하는 요소를 선택
div[class~="warning"] { font-weight: bold; }
class 속성 값 중 "warning"이라는 단어를 포함하는 모든<div>요소의 글꼴을 굵게 지정 -
[속성|="값"]: 속성 값이 정확히 "값"이거나 "값-"으로 시작하는 요소를 선택
p[lang|="en"] { color: blue; }
lang 속성의 값이 "en" 또는 "en-"으로 시작하는 모든<p>요소의 텍스트 색상을 파란색으로 지정 -
[속성^="값"]: 속성 값이 "값"으로 시작하는 요소를 선택
a[href^="https://"] { background-color: lightblue; }
href 속성의 값이"https://"로 시작하는 모든<a>요소의 배경색을 연한 파란색으로 지정 -
[속성$="값"]: 속성 값이 "값"으로 끝나는 요소를 선택
a[href$=".pdf"] { font-weight: bold; }
href 속성의 값이 ".pdf"로 끝나는 모든<a>요소의 글꼴을 굵게 지정 -
[속성*="값"]: 속성 값에 "값"이 포함되는 요소를 선택
div[class*="test"] { border: 1px solid black; }
class 속성 값에 "test"라는 문자열을 포함하는 모든<div>요소에 테두리를 추가
