Notice
Recent Posts
Recent Comments
Link
«   2026/07   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

꽃 같은 인생

HTML&CSS🌟 HTML5 & CSS3 정리 노트 🌟 본문

oz코딩스쿨/HTML, CSS

HTML&CSS🌟 HTML5 & CSS3 정리 노트 🌟

flo-jee 2025. 2. 12. 22:03

🌟 HTML5 & CSS3 정리 노트 🌟

HTML5와 CSS3는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업과 스타일링을 제공한다.

🔍 HTML5 마크업 정리

🔖 HTML5의 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 기본 구조</title>
</head>
<body>
    <header>
        <h1>웹사이트 제목</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <article>
                <h2>HTML5 소개</h2>
                <p>HTML5는 웹 표준의 최신 버전입니다.</p>
            </article>
        </section>
        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="#">HTML5 문서</a></li>
                <li><a href="#">CSS3 가이드</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

🎨 CSS3 스타일링 정리

📌 CSS 기본 문법

선택자 {
    속성: 값;
}

🎯 기본 선택자

  • * {} : 전체 선택자
  • 태그명 {} : 태그 선택자 (예: h1 { color: red; })
  • .클래스명 {} : 클래스 선택자 (예: .box { width: 100px; })
  • #아이디명 {} : 아이디 선택자 (예: #header { background: blue; })

🎯 CSS 박스 모델

  • margin : 바깥 여백
  • border : 테두리
  • padding : 내부 여백
  • width & height : 가로, 세로 크기
.box {
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 2px solid black;
}

🎯 텍스트 스타일링

p {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.5;
}

🎯 배경 및 색상

body {
    background-color: #f0f0f0;
    color: #333;
}

🎯 레이아웃 & Flexbox

.container {
    display: flex;
    justify-content: center;  /* 중앙 정렬 */
    align-items: center;  /* 세로 정렬 */
    height: 100vh;
}

🎯 반응형 웹 (미디어 쿼리)

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}



'oz코딩스쿨 > HTML, CSS' 카테고리의 다른 글

HTML&CSS🌟 HTML5 마크업 언어 정리 🌟  (0) 2025.02.12
HTML&CSS🌟 웹 개발 기초 정리 🌟  (0) 2024.12.31
'oz코딩스쿨/HTML, CSS' Related Articles more