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

 

 

 

 

인스타그램 구조 파악하기

 

 

 

 

인스타그램 페이지의 구성

 

• 헤더 -> nav 시맨틱 태그를 활용함
• 스토리 -> padding, margin(주황)이 bottom에만 존재. section에서 상단에 padding(초록)을 줌. section에 모든 것을 담음(스토리, 메인컨텐츠)
• 메인컨텐츠(스크롤, 이미지 추가 가능)
• 사이드바(모바일 버전에서는 사라짐) -> 메인컨텐츠 안에 속함, position 고정되어 있음(고정을 풀 수도 있다.), 메인 컨테이너 실시간으로 class명 변경됨. 

 

🦔 메인 컨테이너 float; left;로 지정되어 있는 것 flex 레이아웃으로 구현

 

 

 

 

 

 

 

* hover: 다른 페이지에 팝업들이 추가적으로 등장 -> 자바스크립트 영역

 

* svg: 확대해도 데이터가 깨지지 않아 아이콘에 많이 활용

 

* react 스타일 컴포넌트: 임의 class 명 지정 -> 소스코드(원본 코드) 확인 시, class가 무엇인지 확인 가능하나 html, css, js코드로 컴파일 시 class 명을 인식하지 못하게 자동으로 변경됨. (보안성 ↑)