네이버 html 구현하기 _ 03. ZeroCho 2강 정리

WEB/html.css

네이버 html 구현하기 _ 03. ZeroCho 2강 정리

SOo • 2022. 11. 29. 01:59

🎶먼저 오늘의 최종본 먼저 🎶

html 코드

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8"> 
        <title>네이버</title> <!--상단바에 뜨는 이름 표시-->
        <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/> 
        <link rel="stylesheet" href="./naver.css">
    </head>
    <body>
        <header>
            <div id="header-center"> <!--가운데 정렬용 div -->
                <div>
                    <span>네이버를 시작페이지로</span>
                    <span>쥬니어네이버</span>
                    <span>해피빈</span>
                </div>
                <div id="header-search">
                    <h1>
                    <a href="https://www.naver.com">네이버</a> 
                    <!-- 주석(comment)입니다 -->
                    <!-- 속성(attribute)입니다 -->
                    </h1>
                    <h2>검색창</h2>
                    <fieldset>
                        <legend>검색</legend>
                        <input />
                        <button>소현</button>
                        <textarea></textarea> 
                    </fieldset> 
            </div>
        </header>
        <nav>
            <ul> <!-- unordered list 정렬되지 않은 리스트--> <!--ol은 정렬 숫자-->
                <li>메일</li> <!--list item리스트 아이템-->
                <li>카페</li> <!--list item리스트 아이템-->
                <li>블로그</li> <!--list item리스트 아이템-->
                <li>지식인</li> <!--list item리스트 아이템-->
                <li>쇼핑</li> <!--list item리스트 아이템-->
                <li>네이버페이</li> <!--list item리스트 아이템-->
                <li>네이버쇼핑</li>
            </ul> 
        </nav>
        <h2>실시간 검색어</h2>
        <h3>연합뉴스</h3>
        <ol>
            <li> 충격) 배소현 공부 하기 싫어 ...</li>
            <li> 속보) 11월달 안에는 html 끝내야 .. </li>
        </ol>
        <h3>언론사 목록</h3>
        <ul>
            <li><img src="./공감언론 뉴시스.png" alt="뉴시스" /></li>
            <li><img src="./국민일보.png" alt="국민일보"></li>
        </ul>
        <h3>로그인</h3>
        <h3>뉴스</h3>
        <h3>쇼핑</h3>
        <footer>
            <div>공지사항</div>
            <div>creators</div>
            <div>회사소개</div>
        </footer>
    </body>
</html>

css

/* 선택자 (selector)*/

#header-center{
    margin:0 auto;
    width:1080px;
}

div#header-search > h1{
    width: 280px;
    display: inline-block;
}
/*자식선택자*/

#header-search h2{
    display: inline-block;

}

#header-search fieldset {
    width:520px;
    display: inline-block;
}

HTML 레이아웃 (배치) 하는 법

1) 가로선 구역으로 나눠준다.

2) 가로로 나눠진 구역들 중 가로로 나눌 수 있는 부분을 또 나누어준다.

3) 가로로 나누어질 수 있는게 없으면 세로로 나누어준다.

예를 들어 그림판으로 간략하게 그려보면 저렇게 가로줄로 1 2 3 의 큰 틀로 나누어주고 나눈 구역에 적절한 div 태그를 입력한다. 그 다음에 또 가로로 나누어질 수 있는 부분을 나누어준다. 만약 1의 구역이 나누어진다면 1-2는 1의 자식태그가 될 것이다.

<div> 태그

div태그는 division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용한다. div는 웹페이지에서 논리적 구분을 정의하는 태그다. div 태그를 사용하여 각각의 구역을 배치하고 css를 활용하여 스타일을 적용한다. 그러나 구역을 나눌때마다 단순히 <div></div> 를 사용하게 되면 구별이 안된다는 단점을 지닌다. 그래서 div의 값에 id를 붙여준다.

<div id="header"></div>

이렇게 정형화된 어떤 구역인지 알려주는 태그들을 시맨틱 구조 태그라고 부른다.

시맨틱 구조 태그 (Semantic Tag)

Semantic은 '의미론적인' 이라는 뜻을 지닌 형용사다. 따라서 시맨틱 태그는 의미가 있는 태그를 의미한다.

시맨틱 태그 사용의 장점

1. 검색엔진최적화(SEO): 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다.

2. 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할때 도움이 된다.

시멘틱 태그를 정하는 팁, 유의사항

사용할 태그를 결정하기 전 "채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일지 ? " 자문해보기
사용할 HTML 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야 한다.
✨ 어떻게 보여야 할지는 CSS의 책임 !

header

헤더 영역에 사용하는 태그. 로고 등이 들어있다.
페이지의 제목과 같은 소개 내용을 포함한다.

nav

네비게이션 바(메뉴) 영역에 사용하는 태그
보통 메뉴,목차 등에 사용된다.

main

지배적인 콘텐츠 영역을 나타내는 태그

section

article보다 큰 영역을 나타낼 때 사용하는 태그
구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
항상 제목이 있는 것이 일반적이다.

article

보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그
게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있다.

aside

사이드 영역에 사용하는 태그.
보통 top버튼이나 본문 영역과 별개의 내용을 포함
간접적으로 문서와 관련된 내용을 나타낸다. 사이드바 또는 콜아웃 상자로 사용된다.

footer

풋터 영역에 사용하는 태그. 회사의 정보 등이 들어있다.
일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함한다.

<div> 태그 가운데 정렬하기

가운데 정렬해야 할 콘텐츠 구역을 먼저 묶어주는것이 중요하다. <div>태그 전체가 header 태그를 기반으로 가운데 정렬된다는 점이 중요하다. 즉, 콘텐츠들이 가운데 정렬되는 것이 아닌 구역 자체가, div 태그 자체가 가운데 정렬된다는 것이다. 그래서 div의 너비를 줄여주면 자동적으로 div가 가운데 정렬이 된다.

<div style = "margin: 0 auto; width: 1080px;"> 
<!-- 가운데 정렬용 div-->

위의 코드와 같이 html에다 css를 쓰는 방식을 인라인 스타일이라고 한다. (권장 X)

따라서 CSS파일을 따로 생성해준다. 위와 같은 코드(가운데 정렬하고 너비를 1080px)를 CSS에 적으려 하는데 CSS에 적힌 코드의 태그가 뭔지 모르는 불상사를 해결하기 위해 만들어진게 선택자(selector)이다.

먼저 html 태그의 id 즉, 이름을 정해준다. 위 코드는 네이버 가장 상단의 검색창 부분을 만드려는 목적이기 때문에 head-center이 좋겠다.

 <div id="header-center">

그런 다음 CSS에 코드를 적어준다.

div#header-center{
    margin:0 auto;
    width:1080px;
}
/*div 생략가능*/

cf) 만약 html 코드의 header-search 안의 h1을 선택하고 싶다면 #header-center > h1을 이용해 적어준다.

자손은 주석 참고 / 자식도 자손이니 같은 효과를 지닌다.

header-search > h1 {
    width: 280px;
    display: inline-block;
}

/*
#header-center h1 {
  자손 선택자
}
*/

근데 여기서 html은 css의 존재를 모르니 css파일의 존재를 코드에 적어준다. (7번째 줄)

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8"> 
        <title>네이버</title> <!--상단바에 뜨는 이름 표시-->
        <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/> 
        <link rel="stylesheet" href="./naver.css">
    </head>

이 색칠된 부분은 user agent stylesheet 다. 즉, 브라우저가 기본적으로 정해주는 css !

html에 적용된 태그가 div태그에도 영향을 미친다는 것도 중요한 점이다.

✔ 조상에 적용된 태그가 자식태그가 덮어 씌어지는 관계가 헷갈리기 때문에 기억해둘 것

✔ css의 선택자와 속성을 외우는게 굉장히 중요하므로 따로 정리해둘 것

여기서 왜 네이버 옆에 검색창이 나란히 안오는 이유는 기본값으로 설정되어 있는 display: block;은 항상 마진을 가지고 있기 때문이다. 즉, 기본적으로 주어지는 마진을 없애기 위해 dispaly: block;을 바꿔주면된다. 가장 간단한게 display를 inline-block로 바꿔주는 것이다. 그러나 마진이 있는 공간에 아무것도 넣을 수 없는 건 아니다. 포지션 배울 때 공부하면 된다. 간단히 알고만 있을 것 !

#header-search > h1 {
    width: 280px;
    display: inline-block;
    
#header-search fieldset {
    width: 520px;
    display: inline-block;
}

마찬가지로 글자를 쓸때도 마진 때문에 글자가 가로로 쓰여지기 때문에 세로로 쓰고싶다면 같은 방식을 사용하면 된다.

<div style="display: inline-block">네이버를 시작페이지로</div>
<div style="display: inline-block">쥬니어네이버</div>
<div style="display: inline-block">해피빈</div>

span 태그

또, span이란 태그를 통해 더 간단히 바꿀 수 있다. span의 display는 inline이다.

<span>네이버를 시작페이지로</span>
<span>쥬니어네이버</span>
<span>해피빈</span>

inline	inline-block	display-block
자기 콘텐츠만 차치	너비와 높이 지정 가능	100% 차지
빈공간을 만들기 어렵다는 단점		나란히 나열이 안된다는 단점