반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

걷고 또 걷다 보면

[HTML/CSS] 컴알못의 도전기_ 18일차 본문

연습장

[HTML/CSS] 컴알못의 도전기_ 18일차

firulais 2021. 9. 17. 06:45
반응형

 

 

 

헤더 틀_ ft. 인스타그램

 

 

 

헤드 nav 요소 구성

로고, 검색창, 아이콘 

인스타그램 로고 a 태그적용됨. (클릭시 특정 위치로 이동)

flex 레이아웃, align-items; display: flex;   

 

 

3분할 : 3개의 div로 구성

 

html에서 <body>

                <nav>

                    <div>

                            <a href= "/"> ----> 클릭시 손모양 커서 생성, 페이지 새로고침 

                           <img src =""> ----> 이미지 소스 (이미지 소스 링크 복붙) 

                             </a>

                     </div> ----> 로고 출력

                     <div>

                           <input>

                     </div> ----> 검색란 출력

                      <div>

                            <a>

                                <svg aria-label= "홈" class=~>

                             </a>

                     </div> ----> 아이콘 집합 출력

 

 

css에서 nav { display: flex;

                  height: 54px;

                  background-color: red;

                 } 

반응형

'연습장' 카테고리의 다른 글

[HTML/CSS] 컴알못의 도전기_ 20일차  (0) 2021.09.17
[HTML/CSS] 컴알못의 도전기_ 19일차  (0) 2021.09.17
[HTML/CSS] 컴알못의 도전기_ 17일차  (0) 2021.09.17
[HTML/CSS] 컴알못의 도전기_ 16일차  (0) 2021.09.17
[HTML/CSS] 컴알못의 도전기_ 15일차  (0) 2021.09.12
'연습장' Related Articles more
Comments