Haruponea

width: 100%와 max-width: 100%의 차이점이 존재한다. 컨테이너의 크기보다 큰 요소에 사용할 경우 두 property 모두 컨테이너의 크기만큼 줄여준다. 하지만 컨테이너의 크기보다 작은 경우 width:100%는 컨테이너의 크기에 맞추어 늘려주고 max-width:100%는 원래 컨텐츠의 크기를 유지시킨다.

Flexbox는 열 또는 행으로 아이템을 배치할 수 있는 일차원 layout method입니다. 페이지의 contents 상자 안에 아이템을 배치하는데 사용합니다. flexbox를 사용하면 화면의 크기에 따라 공간을 적절히 분배해줘 편리하게 layout을 구성할 수 있습니다. 여기에서는 flexbox의 property를 정리하겠습니다. 1. display: flex flexbox를 사용하기위해선 먼저 container가 되는 element에 display:flex를 추가해야합니다. 그 flexbox의 안에는 두개의 축이 있습니다. main axis의 기본 방향은 왼쪽에서 오른쪽입니다. 아이템은 주축의 방향으로 배치됩니다. 아래 이미지들에서 아이템의 순서는 html문서 상 빨주노초파남보 순서로 컨테이너 안..

transform을 통해 요소의 확대, 축소, 늘리기, 기울이기, 회전 등등 다양한 변형을 할 수 있습니다. 여기에서는 몇가지 transform을 정리해보겠습니다. 1. transform:rotate() 요소를 회전시킵니다. 단위로 rad, deg, turn 등등을 사용합니다. transform-origin을 통해서 회전축을 바꿀 수 있습니다. See the Pen Untitled by Haruponea (@Haruponea) on CodePen. 마우스를 올려보면 위에는 중심을 기준으로, 아래 div는 오른쪽 아래 꼭짓점을 기준으로 회전하는 것을 알 수 있습니다. 2. transform:scale() 요소의 크기를 조절합니다. See the Pen Untitled by Haruponea (@Harupo..

1. position: static 문서의 일반적 흐름을 따라 배치됩니다. top, right, bottom, left, z-index properties는 효과가 없습니다. default value가 static입니다. 2. position: relative 문서의 일반적 흐름을 따라 배치되지만, top, right, bottom, left로 현재 위치에서 offset을 줄 수 있습니다. page layout에서 요소에 주어진 공간은 static일때와 같습니다. 3. position: absolute 문서의 일반적 흐름에서 제거되고 page layout에서 요소를 위한 공간이 없어집니다. 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 하거, 그렇지 않다면 initail cont..

1. percentages %는 항상 다른 값에 대한 상댓값입니다. 다른 값은 부모의 값이 될수도, 요소 자신의 값이 될 수 도 있습니다. width: 50% -> 부모의 width의 50% line-height 50% -> 자기 자신의 font-size의 50% 2. em em도 relative unit입니다. font-size에 em을 사용할 때, 1em은 부모 요소와 같은 크기의 font-size, 2em은 부모 요소 font-size의 2배가 됩니다. 다른 property와 사용하면 1em은 요소 자체의 font-size와 같고 2em은 요소 자체의 font-size의 2배입니다. /*html */ article{ font-size:20px; } p{ font-size:2em; margin-lef..

1. universal selector 문서의 전체의 요소를 선택합니다. * { property: value; } 2. element selector 해당되는 요소를 모두 선택합니다. 태그의 이름을 그대로 사용합니다. element_name { property: value; } 3. ID selector 해당되는 ID를 가진 요소를 선택합니다. #ID{ property: value; } 4. class selector 해당되는 class를 가진 요소를 선택합니다. 특정 selector 중 특정 class를 가지고 있는 요소를 선택할때에는 selector.class로 사용합니다. /* class에 해당하는 모든 요소를 선택합니다. */ .class{ property: value; } /* selector ..