Front-end/HTML, CSS (8) 썸네일형 리스트형 Flex Box를 이용한 안정적인 그리드 레이아웃 제작 강사님이 운영중이신 영화관 웹사이트... 메인 요소 안 영화 정보와 사이드바로 구분된 레이아웃이 흥미롭다. 이런 페이지에서 중요한 것은 컨텐츠의 크기 변화, 또는 다양한 디바이스 너비에서도 안정적으로 유지되는 레이아웃의 설계! 천천히 만들어 가 보자. 🐢1. 메인 영역 안에서 영화 정보와 사이드바의 구분우선 flex box의 속성을 이용하여 컨테이너를 168px로 고정된 사이드바와, 나머지 너비를 차지하는 메인 영역으로 나눈다. MAIN Side bar index.html.container { box-shadow: inset 0 0 30px gold; display: flex; gap: 24px; min-height: 848px;.. image 사이의 여백 - 인라인 요소의 vertical-align img와 div, img와 img 사이의 여백은 왜 생기는 걸까?? 이유는 vertical-align의 초기값이 baseline이기 때문인데요, vertical-align은 인라인 요소의 상하 정렬을 위한 속성으로 영어를 쓸 때 baseline 기준으로 알파벳을 정리해줍니다! 이 속성은 span, strong과 더불어 img 등 모든 인라인 요소에 적용되어 있기 때문에 실제 요소의 높이와 baseline 사이에 간격이 여백으로 표시된다고 하네요. 이 여백을 없애는 방법으로는 vertical-align의 값을 bottom으로 주기display를 block으로 바꾸기등이 있습니다. https://www.daleseo.com/css-img-extra-space/ 관련 내용은 위 블로그에서 참고했습니다. getBoundingClientRect element.getBoundingClientRect()로 사용 element의 size와 element와 viewport 사이의 상대적 거리에 대한 값을 저장하고 있는 DOMRect 오브젝트를 반환한다. HTML 삽입 미리보기할 수 없는 소스 - width는 기본적으로 padding과 border-width에 content의 너비를 더한 값이 된다. - box-sizing을 border-box로 하면 content의 자체 너비 (border-box로 계산된 너비)가 된다. HTML 특수문자표 http://ieo.kr/?mode=utils&exec=specialchar HTML 특수문자표 - 토쳐라이딩 HTML 특수문자표 ieo.kr grid 기본 1. repeat, fr HTML 삽입 미리보기할 수 없는 소스 grid-template-columns와 grid-template-row를 이용해 grid layout의 행과 열의 모양을 정할 수 있다. fr은 컨테이너 너비를 box가 해당 비율만큼 나누어갖는 것을 의미한다. grid-template-columns가 1fr 3fr 100px 50%일 때 50%가 먼저 적용된 후 100px가 적용되고, 남은 공간을 1fr, 3fr이 나누어 가지는 것을 볼 수 있다. repeat 함수로 반복되는 fr을 나타낼 수 있다. grid-gap으로 box 안쪽 서로의 간격을 정할 수 있다. 2. minmax, auto HTML 삽입 미리보기할 수 없는 소스 minmax로 그리드 아이템의 최소, 최대 크기를 정할 수 .. flex의 align-self, align-item과 align-content의 차이 flex-direction이 row(default)일 때 axis align-self flex로 지정된 컨테이너 안의 box에 부여한다. align-self: flex-end이면 해당 box의 cross axis상 위치는 컨테이너 끝이 된다. align-item cross axis의 한 줄 내에서 box들의 배치를 결정한다. align-content cross axis의 줄 간 배치를 결정한다. position: fixed와 sticky fixed box를 스크롤 화면에서 지정된 위치(top, bottom, left, right)에 고정시킨다. (스크롤 시에 같이 이동한다.) sticky box를 부모 컨테이너 안에서 fixed와 같이 스크롤 화면에 고정시킨다. 스크롤이 컨테이너를 벗어나면 box는 이동을 멈춘다. HTML 삽입 미리보기할 수 없는 소스 sticky box를 스크롤 화면 바닥에 고정시키고 싶다면 box를 container 바닥에 위치시킨 후 bottom: 0;을 하면 된다. box-sizing과 box-shadow box-sizing content-box (default): content의 크기만 고려해 width와 height를 적용한다. border-box: margin, border, padding, content 모든 요소를 고려해 width와 height를 적용한다. box-sizing: content-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 자식 컨테이너가 부모 컨테이너를 빠져나올 경우 box-sizing을 border-box로 설정해 해결할 수 있다. box-shadow box-shadow: inset 수평 거리: 그림자의 가로 위치를 나타낸다. 음수 값은 왼쪽으로, 양수 값은 오른쪽으로 이동한다. 수직거리: 그림자의 세로 위치를 나타낸.. 이전 1 다음
