1. HTML 기본 문법
HTML은 웹 콘텐츠를 구조화하는 마크업 언어입니다. 태그(tag)를 사용하여 요소(element)를 감싸는 방식으로 작성됩니다. 기본 골격은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>제목</h1>
<p>본문 단락</p>
</body>
</html>
2. 텍스트 관련 태그
텍스트 스타일과 구조를 정의하는 데 사용되는 태그입니다.
<h1>~<h6> : 제목(레벨 1~6)
<p> : 단락
<br> : 줄바꿈
<hr> : 수평선
<strong> : 굵은 텍스트(의미 강조)
<em> : 기울임 텍스트(강조)
<sub> : 아래첨자
<sup> : 위첨자
3. 리소스 경로 지정
외부 이미지, 스타일시트, 스크립트 등을 연결할 때 경로를 사용합니다.
<img src="/images/photo.png" alt="설명">
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
4. 멀티미디어 삽입
이미지, 오디오, 비디오를 포함할 수 있습니다.
<img src="photo.jpg" alt="사진">
<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls width="640"></video>
5. 하이퍼링크
다른 페이지나 리소스로 이동하는 링크를 만듭니다.
<a href="https://example.com" target="_blank">방문하기</a>
6. 목록 만들기
순서 없는 목록(unordered), 순서 있는 목록(ordered), 정의 목록(definition)을 지원합니다.
<ul>
<li>항목 A</li>
<li>항목 B</li>
</ul>
<ol>
<li>첫 번째</li>
<li>두 번째</li>
</ol>
<dl>
<dt>용어</dt>
<dd>설명</dd>
</dl>
7. 표(테이블) 작성
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>95</td>
</tr>
</tbody>
</table>
8. 폼(Form) 요소
<form action="/submit" method="post">
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">전송</button>
</form>
9. 시맨틱 레이아웃 태그
의미론적 태그를 사용하여 페이지 구조를 명확히 합니다.
<header>헤더 영역</header>
<nav>네비게이션</nav>
<main>
<article>독립적인 콘텐츠</article>
<section>주제별 그룹</section>
</main>
<aside>사이드바</aside>
<footer>푸터 정보</footer>
10. 특수 문자(엔티티)
< → <
> → >
& → &
" → "
© → ©
11. CSS 선택자
h1 { color: blue; } /* 태그 선택자 */
.card { border: 1px solid; } /* 클래스 선택자 */
#logo { width: 200px; } /* ID 선택자 */
12. CSS 기본 속성
.box {
color: #333;
font-size: 16px;
border: 1px solid #ccc;
background-color: #f5f5f5;
text-align: center;
line-height: 1.6;
text-decoration: none;
}
13. 배경 스타일
.bg-sample {
background-color: #fff;
background-image: url('pattern.png');
background-repeat: no-repeat;
background-size: cover;
}
14. 일반 흐름(Normal Flow)
요소가 HTML에 작성된 순서대로 위에서 아래로 쌓이는 기본 배치 방식입니다. 블록 요소는 세로로, 인라인 요소는 가로로 배치됩니다.
15. CSS 박스 모델
모든 요소는 내용(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성됩니다.
.box-model-demo {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
16. 가상 요소(Pseudo-elements)
.card::before {
content: "★ ";
color: gold;
}
.card::after {
content: " ★";
color: gold;
}
17. 플로트(Float) 레이아웃
.float-left {
float: left;
margin-right: 10px;
}
18. 가상 클래스(Pseudo-classes)
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #eee; }
input:focus { border-color: blue; }
19. 포지셔닝(Positioning)
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
.absolute-box {
position: absolute;
top: 0;
right: 0;
}
.fixed-box {
position: fixed;
bottom: 0;
width: 100%;
}
20. 둥근 모서리
.rounded {
border-radius: 10px;
}
.circle {
border-radius: 50%;
}
21. 반응형 웹 디자인
미디어 쿼리(media query)와 유연한 그리드(flexible grid)를 사용하여 다양한 화면 크기에 대응합니다.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
22. 부트스트랩(Bootstrap) 활용
부트스트랩은 반응형 그리드 시스템, 사전 정의된 컴포넌트, 유틸리티 클래스를 제공하는 CSS 프레임워크입니다.
<div class="container">
<div class="row">
<div class="col-sm-6">왼쪽</div>
<div class="col-sm-6">오른쪽</div>
</div>
</div>
23. CSS 전처리기(Preprocessor)
Sass, Less 같은 전처리기는 변수, 믹스인(mixin), 중첩 규칙 등을 지원하여 CSS 작성 효율을 높입니다.
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover { opacity: 0.8; }
}
24. 프런트엔드 프레임워크/라이브러리
React, Vue, Angular 등은 UI를 컴포넌트 기반으로 구성하고 상태 관리를 효율적으로 처리합니다.
25. SEO(검색 엔진 최적화)
의미론적 HTML 사용, 메타 태그 활용, 적절한 제목 구조, 이미지 alt 속성, 빠른 로딩 속도 등이 SEO에 영향을 줍니다.
26. 반응형 이미지
<img srcset="small.jpg 400w, large.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
src="fallback.jpg" alt="반응형 이미지">
27. 점진적 향상과 우아한 성능 저하
- 점진적 향상(Progressive Enhancement): 기본 기능을 모든 브라우저에 제공하고, 최신 브라우저에서 추가 기능을 활성화.
- 우아한 성능 저하(Graceful Degradation): 최신 브라우저 기준으로 제작 후, 오래된 브라우저에서도 기본 동작이 유지되도록 처리.