네이버 html 구현하기_ 04. ZeroCho 3강 정리

티스토리 뷰

WEB/html.css

네이버 html 구현하기_ 04. ZeroCho 3강 정리

SOo • 2022. 12. 4. 14:39

🎉오늘도 완성본 먼저 🎉

header-search 부분의 css가 채워지는 지점이라고 생각하면 될 것 같다.

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">
                    <a href="https://www.naver.com">
                    <h1>
                        <span>네이버</span>
                    </h1>
                    </a>
                    <h2 class="blind">검색창</h2>
                    <fieldset>
                        <legend class="blind">검색</legend>
                        <input />
                        <button>
                            <span class="blind">검색</span>
                            <span id="search-image"></span>
                        </button>
                    </fieldset> 
                </div>
            </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>
        <main>
            <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>
        </main>
        <footer>
            <div>공지사항</div>
            <div>creators</div>
            <div>회사소개</div>
        </footer>
    </body>
</html>

CSS

*{
    box-sizing:border-box;
}

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

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

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

#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: -6px
}

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

/*자식선택자*/

#header-search h2 {
    display: none;
}

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

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

#header-search fieldset button {
    height: 49px; 
    width: 49px;
    border: none;
    padding: 0;
    background: #03cf5d; /*background에 다른 이미지도 넣을 수 있지만 컬러도 넣을 수 있음*/
   /*background-size: 30px 30px; 하려고 했더니 이미지 자체의 크기가 작아짐*/
   position: absolute;
   right: -2px;
   top: -2px;
}

#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;
}

[HTML,CSS] 클래스(class) 속성

1. html에서의 클래스

클래스(class)는 요소들을 특정 클래스로 묶는 속성이다.

html에서 클래스 속성은 주로 동일한 클래스에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용된다.

✔ id와 class 차이

먼저, id 속성은 태그에 유일한 이름을 붙이고 싶을 때 사용한다. 그러나 class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 쓴다.

즉, id 속성은 단 하나의 요소에만 쓸 수 있기 때문에 중복이 불가능하나 class 속성은 유형별로 동일한 class를 쓸 수 있기 때문에 중복이 가능하다.

2. css에서의 클래스

CSS에서 클래스에 따라서 요소를 선택하려면 요소와 클래스를 점(.)으로 이어 클래스 선택자를 만들면 된다.

✔ 형식

클래스(class)에 속한 요소 중 특정 요소만 선택 : 요소명.클래스명

특정 클래스(class)에 속한 요소들을 모두 선택: 는 앞의 요소명을 생략하여 .클래스명 형식으로 작성

p.sohyunee /*sohyunee클래스의 p요소*/
.sohyunee /*sohyunee클래스의 모든 요소*/

✔id와 class의 차이점

id	class
#으로 선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

네이버 홈페이지에서 검색창 부분의 글씨들은 웹 접근성을 위한 blind 처리가 필요하기 때문에 blind 라는 클래스로 미리 묶어준다. 여기서 웹 접근성을 위한 blind 처리는 시각장애인 유저들을 위해 css에는 안보이지만 스크린 리더에는 읽히게끔 하는 것을 의미한다.

                    <h2 class="blind">검색창</h2>
                    <fieldset>
                        <legend class="blind">검색</legend>
                        <input />
                        <button>
                            <span class="blind">검색</span>
                            <span id="search-image"></span>
                        </button>
                    </fieldset>

[CSS] 웹 접근성을 위한 CSS blind 처리

콘텐츠를 숨기는 방법 중

display: none / visibility: hidden / font-size:0 / line-height: 0 / width:0 / height:0 과 같이 콘텐츠를 숨길 수 있지만 스크린 리더로 읽을 수 없기 때문에 접근성에 문제가 있다. 왜냐하면 시각장애인들과 같은 유저들이 존재하기 때문이다.

즉, 스크린 리더에는 보이되 눈에는 안보이게하는 웹 접근성을 고려한 콘텐츠 숨기는데 문제가없는 clip 속성을 활용해야 한다.

✔ 그러나 clip 속성을 활용한다고 무조건 스크린 리더가 읽을 수 있는 것이 아니라, 엘리먼트의 사이즈를 최소 1px 이상으로 적용해야 한다. (1px보다 작으면 스크린 리더가 못읽음)

[CSS] clip 속성

clip 속성은 요소의 특정 부분만 보이게 하는 속성이다.

이미지들을 각자 쪼개 보내면 브라우저에서 지원을 하지 않는 등의 한계가 있기 때문에 한방에 요청이 가는 한장의 이미지를 이용하는 것을 이미지 스프라이트라고 한다. 밑에 있는 이미지 전체에서 header-search 에서 활용할 부분은 일부이기 때문에 clip 속성을 활용해서 이미지를 잘라준다.

럼

✔문법: clip: auto/ shape / inital / inherit

auto: 요소의 모든 부분

shape: 특정 부분이 나오도록 설정

특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정한다.
rect (<top>, <right>, <bottom>, <left>)

<top> : 위를 기준으로 시작하는 위치

<right> : 왼쪽을 기준으로 끝나는 위치

<bottom> : 위를 기준으로 끝나는 위치

<left>: 왼쪽을 기준으로 시작하는 위치

initial: 기본값으로 설정

inherit: 부모 요소의 속성값을 상속받음

/* 접근성에 문제가 있음 */
.blind {
	display: none; /*화면에 보이지 않고 스크린 리더도 읽어주지 않음*/
} 

.blind { 
	visibility: hidden; /* 화면에 보이지 않고 스크린 리더도 읽어주지 않음*/ 
}

/* 접근성에 문제 없음 */ 
.blind { 
	position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

접근성에 문제가 없는 코드를 하나하나 살펴보자면,

[CSS] position 속성

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 즉, 태그들을 배치해주는 역할이라고 생각하면 될 것 같다.

🤦‍♀️ 이해하기 어렵고 글도 많아서 따로 글 업로드 했으니 참고 🤦‍♀️

링크 : https://sohyxzn.tistory.com/5

[CSS] position (포지션) 속성

position은 문서 상에 요소를 배치하는 방식이다. top, right, bottom, left 속성이 요소를 배치할 위치를 결정한다. position 개념을 이해하기 전에 알아야할 특징은 position 속성은 상속되지 않는다는 것이

sohyxzn.tistory.com

[CSS] overflow 속성

CSS의 overflow는 요소내의 콘텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정한다.

즉, 특정 요소의 자식 요소가 부모 요소의 범위를 초과할 때 어떻게 처리할 지를 결정할 수 있는 속성이다.

자식 요소가 부모요소의 범위를 초과할 때 어떻게 처리할 지를 결정함으로 부모요소의 overflow 속성 값을 결정해주어야 한다.

-문법

overflow: visible / hidden / scroll / auto

visible

특정 요소가 박스를 넘어 가더라도, 그대로 보여준다

hidden

부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않게된다

scroll

부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만 사용자가 확인할 수 있도록 스크롤바를 표시해준다.

auto

부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고 사용자가 해당 부분을 확인할 수 있도록 스크롤바를 표시한다

아까전에 blind의 클래스로 묶어둔 것들을 모두 blind 처리 해준다. blind 속성들 암기해두기

.blind { 
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

네이버 검색창을 적용할 때 우리는 콘텐츠 + 보더 + 패딩까지 합한거를 원하지만 실제로 브라우저가 나타내는 것은 오직 콘텐츠일 뿐인 시행착오를 겪을 수 있다. 이때 필요한 개념이 바로 박스 모델이다.

[CSS] 박스 모델

https://sohyxzn.tistory.com/7

[CSS] 박스 모델(Box-Model)

👀 박스 모델 HTML의 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box 가 생기고 그 박스에 style을 주어 문서를 꾸밀 수 있게 되는 것이다. 브라우저는 박스 모델의 크기

sohyxzn.tistory.com

[CSS] box - sizing 속성

: box-sizing 속성은 width, height 속성의 대상 영역을 변경할 수 있다.

box-sizing 속성의 기본 값은 content-box이다. 이는 width, height 속성의 대상영역이 content 영역을 의미한다.

즉, box-sizing 속성의 값을 border-box로 지정하면 마진을 제외한 박스 모델 전체를 width,height 속성의 대상 영역으로 지정할 수 있게 한다.

우리가 원했던 것처럼 네이버 검색창을 적용하기 위해 모든 css에 borderbox를 입력해준다.

*{
    box-sizing:border-box;
}

형제태그임에도 css의 높낮이가 안맞을 수 있다. 왜냐하면 height 값이 다르기 때문이다.

(a 태그 안에 있는 fieldset 정렬 같게할때 적용)

이때는 vertical-align 속성을 활용해주면 된다.

[CSS] vertical-align 속성

vertical-align 은 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다.

적용대상은 인라인 요소와 테이블 셀이다.

유의사항:

1) inline이나 inline-block 요소에만 적용이 된다. 따라서 block 요소인 <div>는 적용되지 않는다.

2) 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않는다. 단, table cell에 적용할때는 영향을 미침

3) vertical - align 은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬하기 때문에 같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있고 또 그 줄에 있는 line-height 설정에 따라서도 달라질 수 있다.

#header-search h1 {
    width: 198px;
    height: 48px;
    display: inline-block;
    background: url(./sp_search.png) -4px -4px no-repeat;
    vertical-align: middle;
    position: relative;
    top: -6px
}

여기서 설정한 verical - align: middle; 은 부모 요소 중앙에 위치하라는 뜻이므로 header-search 의 부모인 header-center의 중앙에 위치되겠다. vertical-align 속성을 사용하고도 맞지 않는 경우에는 position을 활용하면 된다.

이제 버튼은 보이게하고 버튼이라는 글자는 안보이게 해야하니 보이지 않고 싶은 부분 (타겟)에 blind를 넣어준다.

                       <button>
                            <span class="blind">검색</span>
                            <span id="search-image"></span>
                        </button>

이에 따라서 버튼에도 기본 css가 적용되어 있기 때문에 이를 없애준다.

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

사진에서 원하는 부분을 넣기 위해 background-size를 시도해보니 사진 자체의 크기가 바뀔 뿐 잘리지 않는다.

따라서, span을 활용해 검색용 이미지를 따로 둔다. 원래대로 이름을 붙이자면 # header - search fieldset button.search-image 인데 너무 길어 가독성이 좋지 않다. 따라서 html의 id를 통해 간략히 이름을 search-image 라고 지어준다.

HTML

<button>
                            <span class="blind">검색</span>
                            <span id="search-image"></span>
                        </button>

CSS

#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;
}

여기서 display를 inline-block으로 바꿔 width와 height를 조절할 수 있게 하고 background-position을 활용해 위치를 잡아준다.

'WEB > html.css' 카테고리의 다른 글

네이버 html 구현하기 _ 03. ZeroCho 2강 정리 (1)	2022.11.29
네이버 html 구현하기 _ 02. ZeroCho 1강 정리 (1)	2022.11.24
네이버 html 구현하기 _ 01. HTML/CSS란 ? (0)	2022.11.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				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

글 보관함

thgusnee _

티스토리 뷰

네이버 html 구현하기_ 04. ZeroCho 3강 정리

'WEB > html.css' 카테고리의 다른 글

티스토리툴바