< 네이버 메인 페이지 클론 코딩으로 상세한 태그 배우기 >
- console 창에서 document.head.parentNode.removeChild(document.head); 해서 헤드 없애면 css 사라지니까 네이버의 순수 html 뼈대를 확인할 수 있다.
- 상단 탭 아이콘 favicon
href 에서 이미지 원본 저장 해 올 수 있다.
원하는 엘리먼트를 클릭하면 그 엘리먼트 소스를 보고 sources 에서 해당 소스 주소 찾아가면 이미지 파일 저장할 수 있음
- heading 해당 페이지의 중요한 키워드
크롬 익스텐션 headingsmap 다운 받으면 보고 싶은 페이지가 핵심으로 여기는 키워드를 알 수 있음
-fieldset, legend 태그
레전드는 범례.
-img 태그엔 alt 스크린리더 설명을 꼭 달기
그리고 시각장애인을 위한 텍스트를 작성하고 가리려면,
position: absolute;
z-index: -1;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
opacity: 0
이전에 배운대로 이런 속성들을 입력해야 함.
- html 구조 짜는 것 너무너무 중요
일단 가로로 나누고 다 나누면 그 다음 세로로 나눠서 짠다.
header
nav
main
footer
기본적으로 이 구조에 맞게 짜야 하고.
크롬 확장앱 중에 validity 라는 앱으로 웹 표준성을 검사할 수 있다. 웹표준에 맞게 잘 짰는지..
네이버조차도 완전하게 짜진 않지만 거의 맞게 짜야 함.
- naver 의 경우
html 참조하면 header / main / footer 이렇게 작성하였고 header 안에 nav 를 작성.
- html 안에 style 속성을 입력하는 것을 인라인 스타일이라고 함.
- console 창에 screen.width 입력하면 해당 창의 위드값이 나옴
- 이미지 로고 불러오는 방법
페이지에 필요한 로고가 많은데, 예전에는 그 로고 하나당 하나씩 일일이 요청을 보냈는데,
css 이미지 스프라이트(sprite)라는 기능이 생겨서 연관 있는 로고들을 한 장의 이미지파일로 불러올 수 있게 됨
여기서 해당 엘리먼트에 필요한 로고를 불러온다.
GET 요청을 줄여서 서버, 클라이언트 모두가 좋다는 점.(이렇게 기능적인 부분도 고민할 줄 알아야 함)
+) 이미지의 기준은 우측하단이 원점.. 이걸 몰라서 한 시간을 헤맸다 바보같이
- input
outline : none;
- vertical-align
display : inline / inline-block 일 때만 적용가능
Tip) 하다가 아무리해도 조정이 잘 안되면,, 해당 엘리먼트용 태그를 하나 만든다.
-font sans-serif는 모든 컴터에 다 깔려있음
-리액트 하면 css를 안 써도 됨. css 문법은 알아야 하지만. 얼른 나도 그런 날이 왔으면,,,,,
-마진 상쇄
형제태그끼리(혹은 부모/자식) 마진이 상하로 겹치면 사이즈 큰 아이로 합쳐짐..
이때 display: inline-block; width:100%; 하면 해결됨
-calc( )
알아서 계산해줌
width: calc(100% / 6px); 이렇게.
-쌓임맥락
-white-space: nowrap & overflow:hidden