걷고 또 걷다 보면

메인 콘텐츠 구현 story에 스크롤 제거 -> overflow y를 hidden, 전체를 hidden 설정 내부 border 추가 -> border-bottom에 solid, input에 border도 동일색 설정 메인 콘텐츠 구성 상단에 유저 프로필, 타이틀, 더보기, 이미지 콘텐츠, 아이콘 댓글달기란, 북마크

사이드바_메인 콘텐츠 틀

스토리틀 📌 인스타그램에서 스토리 라인의 특징 원형의 콘텐츠, 좌우 스크롤

헤더 틀_ ft. 인스타그램 헤드 nav 요소 구성 로고, 검색창, 아이콘 인스타그램 로고 a 태그적용됨. (클릭시 특정 위치로 이동) flex 레이아웃, align-items; display: flex; 3분할 : 3개의 div로 구성 html에서 ----> 클릭시 손모양 커서 생성, 페이지 새로고침 ----> 이미지 소스 (이미지 소스 링크 복붙) ----> 로고 출력 ----> 검색란 출력 ----> 아이콘 집합 출력 css에서 nav { display: flex; height: 54px; background-color: red; }

레이아웃 HTML 구조파악_ ft.인스타그램 nav bar 가로엔 마진넣기에 975px 의미 없음, nav bar 줄어들면 54 px, 크기를 키워도 54px로 고정되어 있음 visual studio에서 html과 css 영역에 nav 태그 적용 📌 story 부분 📌 content 부분 📌 사이드바 설정 div id의 container에서 section과 aside를 가로로 나눠야 함. container를 display: flex;

인스타그램 구조 파악하기 인스타그램 페이지의 구성 헤더 -> nav 시맨틱 태그를 활용함 스토리 -> padding, margin(주황)이 bottom에만 존재. section에서 상단에 padding(초록)을 줌. section에 모든 것을 담음(스토리, 메인컨텐츠) 메인컨텐츠(스크롤, 이미지 추가 가능) 사이드바(모바일 버전에서는 사라짐) -> 메인컨텐츠 안에 속함, position 고정되어 있음(고정을 풀 수도 있다.), 메인 컨테이너 실시간으로 class명 변경됨. 🦔 메인 컨테이너 float; left;로 지정되어 있는 것 flex 레이아웃으로 구현 * hover: 다른 페이지에 팝업들이 추가적으로 등장 -> 자바스크립트 영역 * svg: 확대해도 데이터가 깨지지 않아 아이콘에 많이 활용 * r..

반응형 미디어 쿼리 (모바일 지원) 미디어 쿼리 웹, 모바일형 html을 따로 만들어줄 필요 없이 css만 바꿔주는 것 웹 브라우저의 크기(뷰포트) 작으면 : 모바일형 모바일 형에 설정된 사항 확인하려면 -> 구글 chrome에서 F12을 눌러서 toggle device toolbar 클릭 (아이폰 5/SE버전으로 테스트해서 적합하다면 다른 버전에서도 문제없음) 웹사이트가 모바일 지원하지 않는다고 하면 모바일 웹브라우저는 가로 980px로 설정, 웹사이트 랜더링 해서 발생하는 문제 css에서 300px로 설정했지만... 결론적으로 웹사이트가 작게 보임. 이 문제 해결하기 위해서는 아래와 같이 입력 미디어 쿼리 사용법 @media

flex 레이아웃 (display flex를 활용한 레이아웃, 요소들을 추가하거나 모으거나~) flex 레이아웃 text-align을 통해 내부 태그를 가운데 정렬(가로) 할 수 있었는데 세로로 가운데 정렬하려면? 비추천 방법)) float, display를 table cell (표의 셀로 변환하여 가운데 정렬) 🎉 display flex를 활용 : 가운데 정렬된 요소를 자신의 중심으로 오도록 함. flex item: flex 안에 있는 것 flex container: flex item을 포함, display는 무조건 flex div 태그 x3를 출력하면 inline처럼 우측으로 연속적으로 나타난다. display flex의 자식에 속하는 것은 자신의 display가 block 이어도 부모가 flex면 ..