html,css 4

CSS 시 유의사항

1.특정 CSS 를 적용시 먹히지 않는 속성들을 인지(정리) 하고 들어 간다. 예) div { display : static; top : 100px; right :100px } display : static; 시 아래의 두요소는 먹히지 않음 top : 100px; right :100px 2.해당 CSS 태그가 자식에게 먹히는 태그인지, 자기자신에게 먹히는 태그인지 인지(정리) 한다. 예) div { overflow : hidden; //자식에게 먹히는 태그 } div { margin : 0 auto; //자기자신 위치 지정 } display : static; 시 아래의 두요소는 먹히지 않음 top : 100px; right :100px

html,css 2022.05.25

CSS3 Flexible Box

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공. Flex는 2개의 개념이 있음. 첫 번째는 Container(부모) 두 번째는 Items(자기자신) 입니다. Flex Container Flex Container를 위한 속성들은 다음과 같습니다. 속성의미 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-ax..

html,css 2021.11.21