💻Programming/👩‍🎨HTML&CSS

[HTML&CSS] 04. 레이아웃과 포지셔닝 - Grid

Grid 복수의 자식 요소인 Grid Item과 그 상위 부모 요소인 Grid Container(그리드 컨테이너)로 구성 Grid는 정렬하려는 요소의 부모 요소에 『display: grid;』또는 『display: line-grid;』속성을 선언 『display: grid;』또는 『display: line-grid;』속성이 적용된 요소는 grid container가 되고, grid container의 자식 요소는 grid item display에 grid를 주면 격자 형태(grid)로 만들 수 있음 1. 명시적 행/열(Track)의 크기를 정의 그리드 템플릿의 행 부분(가로)의 크기를 지정해 주는것 grid-template-rows: 100px auto 100px; (전체 width 를 600으로 지정해..

[HTML&CSS] 04. 레이아웃과 포지셔닝 - flex

주말에...

[HTML&CSS] 04. 레이아웃 포지셔닝 - position

position static 요소를 일반적인 문서 흐름에 배치 top, right, bottom, left, z-index 속성이 아무런 영향 X float 기준점 원래 있던 위치를 기준점에서 이동 문서의 시작점을 기준점으로 하여 이동 absolute를 줄 경우 width를 지정하지 않으면 폭은 content 크기만큼 크기를 잡음 visibility .hidden { visibility: hidden; } z-index position 속성이 static이 아닌 요소와 그 자손 요소의 Z축 순서를 지정 초록색을 앞으로 빼고 싶다면?? satic이면 안 됨 z-index 를 이용하여 숫자가 크면 클 수록 위로 치고 올라온다. clip 요소의 어느 부분이 보이는지를 정의한다. position이 absolut..

[CSS] 04. 레이아웃 포지셔닝 - float

float 해당 요소를 자신을 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정 * float 해제하는 방법 - float된 요소의 부모 태그에 강제로 높이 값을 지정(단점 : 반응형시 자동 높이 값 설정 불가) - float된 요소의 부모 태그에 overflow:hidden을 적용(단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음) - float된 요소의 부모 태그에 overflow:auto를 적용(단점 : 특정 브라우저에서 스크롤 바가 표시) - float된 요소의 부모 태그에 float을 또 설정(단점 : 가운데 배치 불가능) - float된 요소의 다음에 나오는 태그에 clear:both를 지정(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가) -..