걷고 또 걷다 보면

안녕하세요! 인스부르크로 여행을 가신다면, 한 번 쯤 묵어도 좋을 숙소를 추천하고 싶습니다. (모든 정보는 2022년 3월 5, 6일 기준으로 작성했습니다.) 인스부르크 역에 도착해서 5분 정도 큰길을 따라가다 보면 이렇게 간판 불빛이 떡하니 보입니다. 체크인이 저녁 7시까지인데 그 이후에 도착하시는 투숙객의 경우, 사전에 호텔 측에 메일을 보내시면 따로 호텔 입구 좌측 금고에 열쇠랑 안내문(코로롱 관련한 투숙객 개인정보 서류)을 넣어둡니다. !!메일로 비밀번호를 보내주니 잊지말고 꼭 챙겨주세요!! 숙소 내부 모습입니다. 조금 낡았지만 그래도 있을 것 다 있고 드라이기는 프론트에서 따로 문의하면 빌려주고, 체크아웃시 에 숙소에 그대로 두고 오시면 됩니다. 덧)) 화장실, 샤워 공간이 열차나 기내안 화장실..

메인 콘텐츠 구현 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