개발 참고
html, css 기본 설명
태태개발자
2025. 3. 31. 17:21
반응형
HTML란?
HTML 요소들은 웹 페이지를 구성하는 기본적인 블록이야. HTML 문서에서 요소(Element)는 **태그(Tag)**와 **콘텐츠(Content)**로 구성돼.
📌 HTML 요소의 기본 구조
<태그 속성="값">콘텐츠</태그>
예제:
<p class="text">안녕하세요!</p>
- <p> → 시작 태그 (Opening Tag)
- class="text" → 속성(Attribute)
- 안녕하세요! → 콘텐츠(Content)
- </p> → 종료 태그 (Closing Tag)
📌 HTML 요소의 주요 종류
1. 기본 텍스트 요소
태그 설명 예제
| <h1> ~ <h6> | 제목 (Heading) | <h1>제목</h1> |
| <p> | 문단 (Paragraph) | <p>문장입니다.</p> |
| <span> | 인라인 텍스트 그룹 | <span>강조</span> |
| <br> | 줄바꿈 (Self-closing) | 줄바꿈<br>됩니다. |
| <hr> | 가로줄 (Self-closing) | <hr> |
2. 목록 요소
태그 설명 예제
| <ul> | 순서 없는 목록 (Unordered List) | <ul><li>항목 1</li><li>항목 2</li></ul> |
| <ol> | 순서 있는 목록 (Ordered List) | <ol><li>첫 번째</li><li>두 번째</li></ol> |
| <li> | 목록 아이템 | <li>항목</li> |
3. 링크 & 미디어 요소
태그 설명 예제
| <a> | 하이퍼링크 (Anchor) | 클릭 |
| <img> | 이미지 (Self-closing) | <img src="image.jpg" alt="이미지"> |
| <video> | 비디오 삽입 | <video src="video.mp4" controls></video> |
| <audio> | 오디오 삽입 | <audio src="audio.mp3" controls></audio> |
4. 입력 요소 (폼 관련)
태그 설명 예제
| <form> | 폼 태그 | <form action="/submit" method="post"></form> |
| <input> | 사용자 입력 필드 | <input type="text" placeholder="이름"> |
| <textarea> | 여러 줄 입력 필드 | <textarea rows="4"></textarea> |
| <button> | 버튼 요소 | <button>클릭</button> |
| <select> | 드롭다운 리스트 | <select><option>옵션1</option></select> |
5. 테이블 요소
태그 설명 예제
| <table> | 테이블 요소 | <table><tr><td>데이터</td></tr></table> |
| <tr> | 행 (Table Row) | <tr><td>값</td></tr> |
| <td> | 열 (Table Data) | <td>셀 내용</td> |
| <th> | 제목 셀 | <th>제목</th> |
6. 레이아웃 관련 요소
태그 설명 예제
| <div> | 블록 레벨 컨테이너 | <div>내용</div> |
| <span> | 인라인 컨테이너 | <span>텍스트</span> |
| <section> | 의미 있는 콘텐츠 그룹 | <section>섹션</section> |
| <article> | 독립적인 콘텐츠 블록 | <article>글</article> |
| <header> | 페이지 헤더 | <header>로고</header> |
| <footer> | 페이지 푸터 | <footer>저작권</footer> |
💡 정리
- 텍스트 요소: <h1>, <p>, <span>, <br> 등
- 목록 요소: <ul>, <ol>, <li>
- 링크 & 미디어 요소: <a>, <img>, <video>, <audio>
- 폼 요소: <form>, <input>, <button>, <textarea>, <select>
- 테이블 요소: <table>, <tr>, <td>, <th>
- 레이아웃 요소: <div>, <span>, <section>, <article>, <header>, <footer>
웹 페이지를 만들 때 이 요소들을 잘 활용하면 돼! 🚀
📌 CSS란?
CSS(🎨 Cascading Style Sheets)는 HTML 요소들의 스타일을 지정하는 언어야.
즉, 색상, 글꼴, 크기, 위치, 애니메이션 등을 정의하는 데 사용돼.
📌 CSS 기본 문법
선택자 {
속성: 값;
}
예제:
p {
color: blue;
font-size: 16px;
}
➡️ 모든 <p> 태그의 글씨 색을 파란색, 크기를 16px로 변경.
📌 CSS 적용 방법
✅ 1. 인라인 스타일 (HTML 태그 내부)
<p style="color: red; font-weight: bold;">이 텍스트는 빨간색입니다.</p>
✅ 장점: 간단한 스타일 지정 가능
❌ 단점: 유지보수가 어려움
✅ 2. 내부 스타일 (HTML <style> 태그)
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 텍스트는 파란색입니다.</p>
</body>
✅ 장점: 여러 요소에 한 번에 적용 가능
❌ 단점: HTML 파일과 스타일이 섞여 가독성이 떨어짐
✅ 3. 외부 스타일 (CSS 파일 연결)
<head>
<link rel="stylesheet" href="styles.css">
</head>
📄 styles.css 파일:
p {
color: green;
font-size: 20px;
}
✅ 장점: HTML과 분리되어 유지보수가 쉬움
❌ 단점: 별도 파일 관리 필요
📌 CSS 선택자 (Selectors)
선택자는 특정 HTML 요소를 선택할 때 사용돼.
선택자 설명 예제
| * | 전체 선택 | * { margin: 0; } |
| 태그 | 특정 태그 선택 | p { color: red; } |
| #id | 특정 id 선택 | #main { width: 100%; } |
| .class | 특정 class 선택 | .title { font-size: 24px; } |
| , | 여러 요소 선택 | h1, h2 { font-weight: bold; } |
| > | 자식 요소 선택 | div > p { color: blue; } |
| hover | 마우스 오버 효과 | a:hover { color: red; } |
📌 CSS 속성
✅ 1. 글꼴 및 텍스트 스타일
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
text-align: center;
text-decoration: underline;
}
🔹 font-family: 글꼴 설정
🔹 font-size: 글씨 크기
🔹 color: 글자 색
🔹 text-align: 정렬 (left, center, right)
🔹 text-decoration: 밑줄, 취소선 등
✅ 2. 배경 (Background)
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-size: cover;
}
🔹 background-color: 배경색
🔹 background-image: 배경 이미지
🔹 background-size: 이미지 크기 조절
✅ 3. 레이아웃 (크기, 위치)
.box {
width: 200px;
height: 100px;
margin: 20px auto;
padding: 10px;
border: 2px solid black;
}
🔹 width: 너비
🔹 height: 높이
🔹 margin: 바깥 여백 (auto: 가운데 정렬)
🔹 padding: 안쪽 여백
🔹 border: 테두리
✅ 4. 디스플레이 & 정렬
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
🔹 display: 요소의 표시 방식 (block, inline, flex, grid 등)
🔹 justify-content: 가로 정렬 (center, space-between 등)
🔹 align-items: 세로 정렬
✅ 5. 반응형 디자인 (미디어쿼리)
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
🔹 화면 너비가 600px 이하일 때 배경색을 변경
🔹 모바일 대응할 때 필수
📌 정리
✅ CSS는 웹 페이지 스타일을 정의하는 언어
✅ 3가지 적용 방식 → 인라인, 내부 스타일, 외부 스타일
✅ 선택자를 사용해 요소를 스타일링
✅ 레이아웃, 반응형 디자인도 가능
이제 CSS를 활용해서 더 예쁜 웹페이지를 만들 수 있어! 🚀💡
기본 웹사이트 레이아웃 구조
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 사이트</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="#">watcher</a>
</div>
<ul id="menu">
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
<div class="start-btn">
<a href="#">시작하기</a>
</div>
<div class="menu-toggle" id="menu-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<main>
<section class="intro">
<h1>환영합니다!</h1>
<p>이것은 반응형 웹사이트의 예시입니다.</p>
</section>
<section class="content">
<h2>메인 콘텐츠</h2>
<p>여기에 웹사이트의 주요 내용을 배치합니다.</p>
</section>
</main>
<footer>
<p>© 2025 반응형 웹사이트</p>
</footer>
</body>
</html>
<script>
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('menu');
menu.classList.toggle('active'); // 메뉴 열기/닫기
});
</script>
css
/* 기본 스타일 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
}
nav {
display: flex;
justify-content: space-between; /* 왼쪽, 오른쪽 배치 */
align-items: center; /* 수직 정렬 */
max-width: 1200px;
margin: 0 auto;
}
nav .logo a {
color: white;
font-size: 24px;
text-decoration: none;
font-weight: bold;
}
nav ul {
display: flex;
list-style-type: none;
gap: 20px; /* 메뉴 아이템 간격 */
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
nav .start-btn a {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 18px;
}
.menu-toggle {
display: none; /* 모바일에서는 숨기기 */
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.menu-toggle .bar {
width: 30px;
height: 3px;
background-color: white;
}
main {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.intro {
text-align: center;
margin-bottom: 30px;
}
.content {
margin-top: 30px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
/* 미디어쿼리: 모바일 화면 (최대 600px) */
@media (max-width: 600px) {
nav {
justify-content: space-between; /* 로고, 햄버거 아이콘, 시작하기 버튼 배치 */
}
nav ul {
display: none; /* 모바일에서는 메뉴 숨기기 */
flex-direction: column; /* 메뉴 항목을 세로로 정렬 */
width: 100%;
text-align: center;
gap: 15px;
position: absolute;
top: 50px;
left: 0;
background-color: #333;
padding: 20px 0;
}
nav ul.active {
display: flex; /* 메뉴가 열릴 때 표시 */
}
.menu-toggle {
display: flex; /* 햄버거 메뉴 아이콘 보이기 */
}
nav .start-btn {
margin-left: auto; /* "시작하기" 버튼 오른쪽 정렬 */
}
main {
padding: 15px;
}
footer {
font-size: 14px;
}
}
/* 미디어쿼리: 태블릿 화면 (최대 1024px) */
@media (max-width: 1024px) {
nav ul {
justify-content: space-around; /* 메뉴 항목을 균등하게 배치 */
}
footer {
font-size: 16px;
}
}반응형