2021_09_23_TIL

이번 시간은 강사님이 한거 보고난 뒤 안보고 스스로 야후 사이트(언제적 야후 사이트냐....) 를 만들어보기로 했다.

 

 

 

강사님이 만든 것↓

 

 

 

< html, css 로 대략적인 틀로 짜다가 궁금하거나 해결된 점.. >

• header 의 경계가 살짝 헷갈렸는데 강사님은 search 창까지 묶어주었다!

 

• 상단 header_nav 부분에서 리스트와 FireFox 부분 모두 각각 div 로 묶었다. 그리고 리스트는 그대로 냅두고 FireFox 부분을 float: right 속성을 주었다.

 

 

• 상단 div id=header_info 부분에서 야후 로고 이미지, 검색창, 서비스 모두 div class 로 묶었다.

-> div 로 다 묶어주는구나.... 또한 로고 이미지에 float : left 속성을 주고, 서비스는 float: right 속성을 주었다!

 

 

 

 

• <button type="submit" class="btn_search"><span class="txt_sw">search web</span></button>

-> 버튼에다가 search web 이라는 글자를 써주었다. (span 태그)

 

 

 

• 상단 div id=header_info 부분에서 서비스가 자꾸 아랫 줄로 이동했었다. float: right 속성을 주는 것도 맞으나 이 코드도 또한 작성해야 했었다.

 

#header_info div {
            margin-top:10px;
            float:left;
        }

 

-> 그러니까 div 가 일단 left 속성으로 다 흘러야 한다는 것이다. 그 다음에 서비스는 float : right 속성을 주는게 맞다.

그러나 본문 부분은 다 div 인데 왜 left, left, right 속성을 준 걸까..... 음 묶는 구조가 달라서 그런가

본문이 content : { overflow: hidden; } 이니까 그 안에 태그들(main_nav, main, main_banner ) 모두 속성을 준걸까?

 

 

 

 

 

 

 

▼

최대한 따라 만든 결과이다....

자꾸 뭔가가 말을 안듣는 결과(?) 가 나와서 조금 빡쳤다. 그리고 뼈대를 만드는 난이도 중상이라고 생각되었다면 세부적인 디테일을 잡는 것은 최상상!.. 난이도라 느껴졌다.

 

 

앞으로 어떤 부분이 내가 원하지 않는 방향으로 구현되면 상위 태그 스타일까지 다시 점검해보는 연습을 해야겠다고 느꼈다.