해보자고

[견고한 기본기 HTML&CSS]HTML 골격 만들어 보기 본문

프로그래밍/html & css

[견고한 기본기 HTML&CSS]HTML 골격 만들어 보기

초코맛동산 2025. 2. 12. 00:05

 

1. 개념을 잡기 위한 중간 실습! (섹션2)

 

클론 코딩이나 다름 없지만 CSS없이 구조만 잡아보며 HTML을 어떤 태그를 사용해서 어떤 식으로 구조 있게 형성할 수 있는지 중간점검 할 수 있었던 좋은 파트 였습니다. 

 

어떤 페이지를 클론코딩했는지 첨부하고 싶었으나 캡처를 할 수 없어(넷플릭스처럼).. 추후 CSS 실습까지 끝내면 총체적으로 올리러 다시 오겠습니다!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모두의 HTML/CSS</title>
</head>
<body>
    <header>
        <h1></h1>
        <nav>
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">JavaScript</a></li>
            </ul>
        </nav>
        <label for="inp-search">검색어 입력</label> <!--사용자 인터페이스 항목의 설명, for는 라벨과 결합될 요소의 id 속성값.-->
        <input id="inp-search" type="search"> <!--label과 input이 연결됨.-->
        <button>검색어 찾기</button>
    </header>
    <main>
        <section>
            <img src="" alt="손을 흔들고 있는 라이캣">
            <h2>모두의 HTML/CSS</h2>
            <strong>Hello World! :D</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum cumque ducimus, sapiente quae temporibus ratione minus quod 
                deserunt eligendi perspiciatis ipsam repellendus, nostrum ad quis a porro repudiandae asperiores necessitatibus!</p>
                <button type="button">회원가입</button>
                <button type="button">로그인인</button>
                <aside>
                    <a href="">MBTI 강의 보러가기</a>
                    <a href="">30분 요약강좌 보러가기</a>
                </aside>
        </section>
        <section>
            <h2>웹 언어와 즐거운 회사생활 하기</h2>
            <dl>
                <dt>HTML</dt>
                <dd>HTML 설명입니다~</dd>
                <dt>CSS</dt>
                <dd>CSS 설명입니다~</dd>
                <dt>Javascript</dt>
                <dd>Javascript 설명입니다~</dd>
            </dl>
            <figure>
                <img src="" alt="땀 흘리며 운동하는 미어캣 뮤라">
                <figcaption>
                    <time datetime="05:00">오전 5:00</time> <!---->
                    <strong>헛둘셋넷 열심히 운동하기</strong>
                    <p>dummy dummy dummy dummy dummy</p>
                </figcaption>
            </figure>
            <figure>
                <img src="" alt="출근하다가 지렁이를 바라보는 소울곰">
                <figcaption>
                    <time datetime="09:00">오전 9:00</time> <!---->
                    <strong>지친몸 이끌고 출근하기</strong>
                    <p>dummy dummy dummy dummy dummy</p>
                </figcaption>
            </figure>
            <figure>
                <img src="" alt="치킨을 손에 들고 신나게 퇴근하는 개구리 개리">
                <figcaption>
                    <time datetime="18:00">오후 6:00</time> <!---->
                    <strong>치킨과 함께 씐나는 퇴근</strong>
                    <p>dummy dummy dummy dummy dummy</p>
                </figcaption>
            </figure>
        </section>
        <section>
            <h2>Lorem ipsum dolor sit amet</h2>
            <ul>
                <li><button type="button">Tab1</button></li>
                <li><button type="button">Tab2</button></li>
                <li><button type="button">Tab3</button></li>
            </ul>
            <section>
                <h3>탭1 데이터 목록</h3>
                <ol>
                    <li>
                        <a href="">
                            <span>10</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>9</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>8</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>7</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>6</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                </ol>
            </section>
            <section>
                <h3>탭2 데이터 목록</h3>
                <ol>
                    <li>
                        <a href="">
                            <span>10</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>9</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>8</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>7</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>6</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                </ol>
            </section>
            <section>
                <h3>탭3 데이터 목록</h3>
                <ol>
                    <li>
                        <a href="">
                            <span>10</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>9</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>8</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>7</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>6</span>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum inventore</p>
                            <time datetime="2025-02-11">2025.02.11</time>
                        </a>
                    </li>
                </ol>
            </section>
            <a href="">more +</a>
        </section>
    </main>
    <footer>
        <address>
            <a href="abc@naver.com">abc@naver.com</a>
            <a href="tel:+8201012341234">010-1234-1234</a>
            제주도 애월읍 아주 좋아리, 2층
        </address>
        <small>Copyright @ 어쩌고 저쩌고고</small>
    </footer>
</body>
</html>

 

HTML 골격 확인

 

 

'프로그래밍 > html & css' 카테고리의 다른 글

[견고한 기본기 HTML&CSS] Text-level semantics  (0) 2024.12.31
[견고한 기본기 HTML&CSS] Grouping tag  (0) 2024.12.13
[견고한 기본기 HTML&CSS] document element, metadata  (1) 2024.12.10
'프로그래밍/html & css' Related Articles more