네이버 클론 코딩(2)

이글은 첫번째 부분은 아래링크에서 확인할수있습니다.

https://kjh0811.tistory.com/35

 

 

 

 

네이버 클론 코딩(1) 포스팅에서는 상단 아이콘과 검색창을 클론해봤습니다. 

 

 

 

이번 포스팅에서는  검색창 하단에있는 아이콘들과 메인창 섹션을 나눠볼 예정입니다.

 

  <div id="nav">
                <ul>
                    <li>
                        <a href="">
                            <div></div>
                            <span>메일</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>카페</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>블로그</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>쇼핑</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>뉴스</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>증권</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>부동산</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span>지도</span>
                        </a>
                    </li>
                  
                    <li>
                        <a href="">
                            <div></div>
                            <span>웹툰</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div></div>
                            <span></span>
                        </a>
                    </li>
                </ul>
            </div>

위 코드와 같이 html에서
li태그 , a태그, div태그 ,span태그를 활용하여  html 구조를 만들었습니다.

 

주요 css 정리

 

**display**

display 속성은 요소의 렌더링 방법을 지정합니다. display 속성의 값은 다음과 같습니다.

* block: 요소를 블록으로 렌더링합니다. 블록은 줄 바꿈을 생성하는 요소로, 화면의 너비를 가득 채웁니다.
* inline: 요소를 인라인으로 렌더링합니다. 인라인은 줄 바꿈을 생성하지 않는 요소로, 다른 요소와 함께 한 줄에 표시됩니다.
* inline-block: 요소를 인라인 블록으로 렌더링합니다. 인라인 블록은 인라인 요소의 특성과 블록 요소의 특성을 모두 갖는 요소입니다.
* none: 요소를 렌더링하지 않습니다.



**list-style-type**

list-style-type 속성은 목록의 항목 앞에 표시되는 마커의 유형을 지정합니다. list-style-type 속성의 값은 다음과 같습니다.

* disc: 둥근 마커
* circle: 원형 마커
* square: 사각형 마커
* none: 마커를 표시하지 않습니다.




**justify-content**

justify-content 속성은 컨테이너의 내용을 수평으로 정렬하는 방법을 지정합니다. justify-content 속성의 값은 다음과 같습니다.

* flex-start: 컨테이너의 시작 부분에 내용을 정렬합니다.
* flex-end: 컨테이너의 끝 부분에 내용을 정렬합니다.
* center: 컨테이너의 가운데에 내용을 정렬합니다.
* space-between: 컨테이너의 내용을 균등하게 간격을 두고 정렬합니다.
* space-around: 컨테이너의 내용을 균등하게 간격을 두고 정렬하고, 양쪽 끝에 여백을 추가합니다.





**font-size**

font-size 속성은 요소의 글자 크기를 지정합니다. font-size 속성의 값은 다음과 같습니다.

* px: 픽셀 단위
* em: 상대 단위로, 부모 요소의 글자 크기에 따라 크기가 조정됩니다.
* rem: 절대 단위로, 루트 요소의 글자 크기에 따라 크기가 조정됩니다.





**line-height**

line-height 속성은 요소의 줄 간격을 지정합니다. line-height 속성의 값은 다음과 같습니다.

* px: 픽셀 단위
* em: 상대 단위로, 부모 요소의 글자 크기에 따라 크기가 조정됩니다.
* rem: 절대 단위로, 루트 요소의 글자 크기에 따라 크기가 조정됩니다.





**position**

position 속성은 요소의 위치를 지정합니다. position 속성의 값은 다음과 같습니다.

* static: 요소의 위치를 기본값으로 설정합니다.
* relative: 요소의 위치를 기준점으로 지정하고, 요소의 위치를 조정할 수 있습니다.
* absolute: 요소의 위치를 절대 위치로 설정하고, 부모 요소의 위치를 기준으로 요소의 위치를 조정합니다.
* fixed: 요소의 위치를 고정 위치로 설정하고, 브라우저의 스크롤에 따라 요소의 위치가 변하지 않습니다.






**z-index**

z-index 속성은 요소의 겹침 순서를 지정합니다. z-index 속성의 값은 정수이며, 값이 높을수록 요소가 더 위에 표시됩니다.





**content**

content 속성은 요소의 콘텐츠를 지정합니다. content 속성의 값은 다음과 같습니다.

* string: 문자열
* element: 요소
* function: 함수

위의 속성들은 클론코딩을 하여 이번포스팅에서 주요로 사용한 속성들입니다.  

 

 

네이버와 클론네이버 비교

위 영상은 네이버와 클론네이버 비교를한 영상입니다.
저는 웹사이트클론작업시  위와같이  같은 너비를 설정하고 개발자도구를 켜 창을 바꿔가며 비교하는편입니다.

장점으로는  속성들의 너비와 높이 등을 확인할때 확실히 수월한것같습니다.

 

 

다음으로는 메인으로 넘어가보겠습니다. 

 

 <main id="main">
                <div id="main-left">
                    <aside id ="main-left-ad"></aside>
                    <section id="main-newstand"></section>
                    <section id="main-shopping"></section>
                </div>
                <div id="main-right">
                    <section id="main-login"></section>
                    <aside id ="main-right-ad"></aside>

                </div>


            </main>

메인의 구조는 간단하게 이런식으로 나눠봤습니다.

저는 main,section 등 시멘틱 태그를 사용하였습니다.

 

시멘틱태그

시멘틱 태그란 HTML에서 태그의 이름이 그 내용과 목적을 명확하게 설명하는 태그입니다.
 HTML5에서는 새로운 시멘틱 태그들이 도입되었습니다. 예를 들어, <main>, <aside>, <section>, <article> 등이 있습니다.

시멘틱 태그를 사용하면 웹 페이지에 의미를 부여할 수 있으며, 브라우저와 개발자 모두에게 태그의 의미를 쉽게 알 수 있습니다. 시멘틱 태그는 스크린 리더와 같은 보조 기기에도 도움이 되고, 코드 최적화에도 유리합니다.

 

 

 

 

 

위와 같이

광고 , 로그인 , 섹션 창들을 나누면서 작업을 하였습니다.