[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(1) N사 오늘의 키친 layout only버전

과제 몰아닥친 css까지의 사이트 마크업 시간이 지나고,
개인 PT 24회도 이제 슬슬 끝물이 다 되어가고.

1월 10일부터 담임 강사가 사정 상 3주 자리를 비우고 대타 강사에게서 디자인 수업을 들은 관계로
명절 동안 시간이 많이 생겨서

드디어!!

12월 13일부터 1월 7일까지 밀린 모든 코딩 기록들을 업로드해보고자 한다.

만, 1월 10일 직전 며칠간은 기업 사이트 ( S사 계열 전기 마크업 )만 마크업 했던지라 상세 특징들은 올리지 않을 듯.
다만 내가 당시에 클론하면서 생각하기에 의문점이 들었고, 태그의 의미 상으로도 이건 이렇게 해야 할 것 같은데 싶었던 파트만 나중에 집어서 올리려고 함

( 디자인 기간의 내용은 업로드 하지 않을 예정.
디자이너/퍼블리셔 진출은 생각도 하지 않습니다.
쇤네는 1인 2역 할 수 있는 체력이 못 되옵니다. )

언제 적 오늘의 키친이냐 싶고....?

주 : 우리 강사는 Semantic 태그보다 div태그를 더 사랑하시는 느낌. N사 너무 애정 하시는 듯함.
구닥다리 마크업이라는 거 이젠 저도 알아요.. div남발 안 좋은 것도 이제 알아요..

하단의 코드는 그분이 애정 하시는 div로 기본 틀을 잡을 때의 방식이다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document<title>
</head>
<body>
    <!-- 본문 바로가기 -->
    <div id="skipNavi"><a href="#containor">본문 바로가기</a></div>
    <!-- //본문 바로가기 -->
    <hr>
    <div id="wrap">
        <!-- header -->
        <div id="header">
            우리 강사님은 hr/ 을 필수로 집어넣으시는 분
        </div>
        <!-- //header -->
        <hr>
        <!-- container -->
        <div id="container">
            <!-- snb -->
            <div class="snb">
          	이거는 사이드바 영역
            </div>
            <!-- //snb -->
            <hr>
            <!-- content -->
            <div id="content">
			본문 영역
            </div>
            <!-- //content -->
            <hr>
        </div>
        <!-- //container -->
        <hr>
        <!-- footer -->
        <div id="footer">
		하단 영역
        </div>
        <!-- //footer -->
    </div>
</body>
</html>

이 코드가 만약 Semantic이라면..?

하단은 개인적으로 이렇게 쓰지 않을까 대입시켜 본 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 본문 바로가기 -->
    <div id="skipNavi"><a href="#containor">본문 바로가기</a></div>
    <!-- //본문 바로가기 -->
    <div id="wrap">
        <!-- header -->
        <header>
            여기가 보통 일반적인 사이트의 로고, 메인메뉴가 배치되는 영역임
            우리 강사님은 무조건 hr 넣어주시는 분인데
            나는 안 넣는 파.
        </header>
        <!-- //header -->
        <!-- main -->
        <main>
            <!-- nav -->
            <nav class="snb">
                nav는 main 안에 포함 시켜도 되고 header에 포함시켜도 되고
                같은 사이트 내에서의 이동, 또는 다른 사이트로의 이동 메뉴에 써먹을 때 씀
            </nav>
            <!-- //nav -->
            <!-- section -->
            <section>
            	<article>
                 	본문 내의 내용 파트
                </article>
            </section>
            <!-- //section -->
        </main>
        <!-- //main -->
        <!-- footer -->
        <footer>
           하단 영역
        </footer>
        <!-- //footer -->
    </div>
</body>
</html>

Semantic 태그의 정의와 그 종류를 더 알고 싶으면
이 분의 티스토리 블로그를 보시면 좋습니다.

검색하다 알았는데, 4년 전 글이긴 하지만
정말 정리를 잘해주셨어요.

https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바