ch.5 | html-css-naver

oltmddn123·2023년 4월 3일
프론트엔드

html-css-naver

목록 보기
5/5


float과 블록 포맷 컨텍스트

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context

  • 블록 서식 문맥( Block_formatting_context ) 을 만드는 방법
  1. float
  2. 인라인블록 ( display:inline-block 인 요소 )
  3. overflow가 visible이 아닌 요소
  4. position이 absolute나 fixed

  • 네이버를 시작페이지로, 쥬니어네이버, 해피빈 오른쪽으로 옮기는법

    1번째 방법. text-align : right;
    2번째 방법. position : absolute; ( position : relative가 있어야 그 위치 오른쪽에 활성화 )
    3번째 방법. float : right;

  • float을 썼을 때는 둥둥 떠져있어서 그 다음 컨텐츠가 float을 차지하는 공간은 피해서 쏙 들어간다.

  • 부모가 자식을 다 감싸주진 않음

  • 부모가 자식을 다 감싸게 하려면

overflow : visible -> 기본값 ==> 위 그림처럼 보이게 됨
overflow : auto; -> 밑 그림 처럼 보임
overflow : hidden; -> 자식이 부모보다 길다 ==> 짤라버림 -> 밑 그림 처럼 보임

clear와 class 이름 짓기, 글자 크기

  • clear
// 겹쳐지는 곳에 clear사용
clear : both; // left, right 둘 다 float : left, float : right 해제
clear : left; // left 해제
clear : right // right 해제
  • id는 한 번 쓰니까 두단어로 하는게 좋고 ( ex. header-search ) class는 여러번 쓰니까 한 단어로 하는게 일반적으로 좋음
  • 글자 크기
letter-spacing :-1px; /* 글자간격 */
font-size : 11px; /* 글자 사이즈 */
line-height : 22px; /* 라인 높이 조절 */

검색창 따라 만들기

  • 미세 픽셀 조정

메뉴 따라 만들기, nth-of-type

  • 커서 올릴 때 색 바뀌는 것은 html,css에서 할 수 있다.

  • 클릭 했을 때 색 바뀌는 것은 javascript에서 할 수 있다.

  • inline-block끼리 vertical-align : middle; 을 통해 각 블록끼리 가운데 정렬이 가능하다.

  • nth-child vs nth-of-type

<main>

        <h3>연합뉴스</h3>
        <ol>
            <li>프론트엔드</li>
            <li>할수있다</li>
            <li>굿굿</li>
        </ol>
        <h3>언론사 목록</h3>
// <h3>언론사 목록을 찾는다 가정하였을 때
main h3:nth-child(2) {}이 아니고 main h3:nth-child(3) {}이다.
nth-child는 중간에 껴있는 ol태그도 자식태그로 카운트 세어준다.
반면 nth-of-type은 <h3>해당태그만 개수를 세어준다. 즉 main h3:nth-of-type(2) {}이다.

전체코드

  • naver.html
<!DOCTYPE html>
<html lang="ko">

<head>
    <!-- meta태그는 문서에 대한 정보를 나타냄 -->
    <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>네이버</title>
    <!-- 파비콘 -->
    <link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
    <link rel="stylesheet" href="./naver.css">
</head>

<body>
    <header>
        <div class="center-align"> <!-- 가운데 정렬용 div -->
            <!-- 속성명: 속성값; 속성명2: 속성값2 -->
            <div id="header-top">
                <span>네이버를 시작페이지로 > | </span>
                <span>쥬니어네이버 | </span>
                <span>해피빈</span>
            </div>
            <!-- <div style="display : inline-block">네이버를 시작페이지로</div>
            <div style="display : inline-block">쥬니어네이버</div>
            <div style="display : inline-block">해피빈</div> -->
            <div id="header-search">
                <!-- href 는 a태그의 부가정보 속성(attribute) -->
                <a href="https://www.naver.com">
                    <h1>
                        <span>네이버</span>
                    </h1>
                </a>
                <h2 class="blind">검색창</h2>
                <fieldset>
                    <legend class="blind">검색</legend>
                    <input type="text">
                    <span id="search-keyboard"></span>
                    <span id="search-history"></span>
                    <button>
                        <span class="blind">검색</span>
                        <span id="search-image"></span>
                    </button>
                </fieldset>
            </div>
        </div>
    </header>
    <nav>
        <div class="center-align">
            <div id="search-ranking">
                <h2 class="blind">실시간 검색어</h2>
                <div>
                    <span id="rank-number">1</span>
                    <span>제로초</span>
                </div>
            </div>
            <ul> <!-- unordered list --> <!-- ol태그도 있음 ordered list -->
                <li><a href=""><span></span><span class="blind">메일</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">카페</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">블로그</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">지식인</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">네이버쇼핑</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">네이버페이</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">네이버TV</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">사전</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">뉴스</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">증권</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">부동산</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">지도</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">영화</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">뮤직</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">책</span></a></li> <!-- list item -->
                <li><a href=""><span></span><span class="blind">웹툰</span></a></li> <!-- list item -->
            </ul>
            <div class="nav-divider"></div>
            <ul>
                <li><a href=""><span></span><span class="blind">더보기</span></a></li> <!-- list item -->
            </ul>
        </div>
    </nav>

    <main>

        <h3>연합뉴스</h3>
        <ol>
            <li>프론트엔드</li>
            <li>할수있다</li>
            <li>굿굿</li>
        </ol>
        <h3>언론사 목록</h3>
        <ul>
            <li><img src="image/서울신문.png" alt="서울신문"></li>
            <li><img src="image/스포티비.png" alt="스포티비"></li>
        </ul>
        <h3>로그인</h3>
        <h3>뉴스</h3>
        <h3>법률</h3>
        <h3>쇼핑</h3>
    </main>
    <footer>
        <div>공지</div>
        <div>creaters</div>
        <div>회사소개</div>
    </footer>
</body>

</html>
  • naver.css
/* *은 모든 태그 의미  */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Dotum,'돋움',Helvetica,"Apple SD gothic Neo",sans-serif;
}

/* 선택자 (selector) */
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.center-align {
    margin: 0 auto;
    width: 1080px;

}
header {
    height: 170px;
}
#header-top {
    float:right;
    margin-top: 8px;
    height: 21px;
}
#header-search {
    clear : both;
    padding-top: 9px;
}
#header-top span {
    color: #888;
    letter-spacing :-1px; /* 글자간격 */
    font-size : 11px;
    line-height : 22px; /* 라인 높이 조절 */
}
/* 자식 선택자 */
div#header-search h1 {
    width: 198px;
    height: 48px;
    display: inline-block;
    /* background-image: url('./sp_search.png');
    background-position: -4px -10px;
    background-repeat: no-repeat; */
    background: url('./sp_search.png') -4px -4px no-repeat;
    vertical-align: middle;
    position: relative;
    top: -5px;
    left : 1px;
}

#header-search a {
    text-decoration: none;
    vertical-align: middle;
}

#header-search h1 span {
    display: none;
}

div#header-search h2 {
    display: none;
}

div#header-search fieldset {
    margin-left: 15px;
    padding: 12px 0px 12px 10px;
    border: 2px solid #03cf5d;
    width: 521px;
    height: 49px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

#header-search fieldset input {
    border: none;
    padding: 0;
    outline: none;
    width: 395px;
    height: 23px;
    vertical-align: top;
}

#header-search fieldset button {
    width: 49px;
    height: 49px;
    border: none;
    padding: 0;
    background: #03cf5d;
    position: absolute;
    right: -2px;
    top: -1px;
}

#search-keyboard {
    background-image: url(./sp_search.png);
    background-repeat: no-repeat;
    background-position: -33px -60px;
    width: 19px;
    height: 11px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
    
}

#search-history {
    background-image: url(./sp_search.png);
    background-repeat: no-repeat;
    background-position: -87px -60px;
    width: 9px;
    height: 4px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
}
#search-image {
    background-image: url(./sp_search.png);
    background-position: -3px -60px;
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
    display: inline-block;
    margin: 14px;
}
nav {
    height : 46px;
    border-top: 1px solid #f1f3f6;
    border-bottom: 1px solid #d1d8e4;
}
nav ul {
    margin: 0;
    padding: 16px 0 0 4px;
    list-style: none;
    display: inline-block;
}
nav .center-align {
    position: relative;
}
nav li {
    display: inline-block;
}

nav li span:first-child {
    display: inline-block;
    background-image: url("./sp_nav.png");
    background-repeat: no-repeat;
    height: 16px;
    margin-left: 10px;
}

nav li:first-child span:first-child {
    width: 25px;
    background-position: 0 -285px;
    margin-left: 0;
}

nav li:nth-child(2) span:first-child {
    width: 27px;
    background-position: -279px -52px;
}

nav li:nth-child(3) span:first-child {
    width: 40px;
    background-position: -100px -182px;
}

nav li:nth-child(4) span:first-child {
    width: 40px;
    background-position: -101px -156px;
}

nav li:nth-child(5) span:first-child {
    width: 26px;
    background-position: -279px -156px;
}

nav li:nth-child(6) span:first-child {
    width: 25px;
    background-position: -70px -285px;
}
nav li:nth-child(7) span:first-child {
    width: 35px;
    background-position: -125px -130px;
}
.nav-divider {
    display: inline-block;
    margin:18px 16px 0;
    width : 1px;
    height:  14px;
    background: #ebeef3;;
}

#search-ranking {
    position: absolute;
    top:16px;
    right:100px;
}

#rank-number {
    margin-top: -9px;
    color : #00ab33;
    font-size : 16px;
}
/* 
div#header-center h1 {
    자손 선택자
}
*/
profile
oltmddn123
안녕하세요
이전 포스트

ch.4 | html-css-naver

0개의 댓글