position 문서 상에 요소를 배치하는 속성 left, right, top, bottom 속성으로 위치를 조정할 수 있다. - 속성 값 static : 문서의 흐름대로 배치하며, 위치 값을 줄 수 없다 (default) relative : 문서의 흐름대로 배치하며, 요소가 원래의 위치를 벗어나도 해당 공간을 차지한다. 자기 자신의 위치를 기준으로 위치 값을 줄 수 있다 absolute : 문서의 흐름을 무시하고 배치하며, 조상 요소 중 position 속성이 적용된 요소를 기준으로 위치 값을 줄 수 있다 조상 요소 중 position속성이 적용된 요소가 없을 시 문서를 기준으로 배치된다 fixed : 문서의 흐름을 무시하고 배치하며, 뷰포트를 기준으로 위치 값을 줄 수 있다 뷰포트를 기준으로 배치하기..

overflow 블록레벨 요소의 콘텐츠가 요소의 크기보다 클 때 어떻게 표현할지 지정하는 속성 - 속성 값 visible : 콘텐츠가 잘리거나 스크롤없이 그대로 표현 (default) auto : 콘텐츠가 더 클때만 스크롤을 나타낸다 hidden : 요소의 크기에 맞게 콘텐츠를 잘라내어 표현 (hidden 속성이 적용될 경우, 첫번째 자식 요소의 margin-top이 부모 요소 내에서 이루어진다) scroll : 항상 스크롤을 나타낸다. div { float: left; width: 200px; height: 300px; border: 1px solid #000; margin: 20px; } .one {overflow: auto;} .two {overflow: hidden;} .three {overflo..

float 요소를 띄워 왼쪽이나 오른쪽으로 정렬시켜주는 속성 말 그대로 띄워지기 때문에 부모 요소가 해당 요소를 인식하지 못하여 원래의 문서 흐름을 무시하고 맨 위에 위치한다. 주로 블록 레벨 요소를 정렬할 때 많이 사용한다. - 속성 값 none left : 첫 번째 요소부터 왼쪽으로 띄워진다 right : 첫 번째 요소부터 오른쪽으로 띄워진다 one two three .parent > div { float: left; width: 200px; height: 200px; } .parent > div:nth-child(1){background-color: rgba(0, 0, 255, 0.5);} .parent > div:nth-child(2){background-color: rgba(255, 0, 0, ..

background-color 요소의 배경 색상을 지정하는 속성 div { box-sizing: border-box; width: 300px; height: 200px; padding-top: 50px; background-color: pink; text-align: center; } background-image 요소의 배경 이미지를 지정하는 속성 콤마로 구분하여 여러 개의 배경을 적용할 수 있다. (먼저 지정한 배경이 가장 위에 적용된다) - 속성 값 url(이미지경로) : 적용할 이미지를 지정한다 linear-gradient(방향, 색상 위치, 색상 위치 ···) : 선형 그라디언트 radial-gradient(색상 위치, 색상 위치 ···) : 원형 그라디언트 background-size 배경 이..

margin 요소의 바깥 여백을 지정하는 속성 (테두리 밖) 인라인 요소에는 상하 margin이 적용되지 않는다. 인접한 요소의 margin은 더 큰 값으로 상쇄되어 하나만 적용된다. 부모 요소에 padding이나 border가 적용되어있지 않다면 첫 번째 자식 요소의 margin-top은 부모 요소의 margin-top처럼 보여진다. - 속성 값의 개수에 따른 축약형 margin : 상 우 하 좌; (시계방향) margin : 상 좌우 하; margin : 상하 좌우; margin : 상하좌우; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the pr..

display 요소를 화면 상에 어떻게 표시할지 지정하는 속성 - 속성 값 none : 화면에서 제거한다 (레이아웃에서 제거된다) block : 블록레벨 요소로 표시한다 inline : 인라인 요소로 표시한다 inline-block : 인라인 요소로 표시하지만 블록레벨 요소처럼 크기 값을 지정할 수 있다 (인라인 요소와 블록레벨 요소의 장점만 모아놓은 속성) 더보기 → 인라인 요소와 블록레벨 요소 게시글 바로가기 pink green red blue .pink { display: block; width: 200px; height: 100px; background-color: pink; } .green { display: none; width: 200px; height: 100px; background-co..

영역 크기 단위 px : 가장 많이 사용하는 단위로 지정한 픽셀만큼 크기를 지정한다. em : 부모 요소 크기의 배수를 나타낸다. rem : 루트 요소(html) 크기의 배수를 나타낸다. n% : 부모 요소 크기의 퍼센트를 나타낸다. (em, rem, % 단위는 반응형 웹사이트에서 주로 사용한다) width 해당 요소의 너비를 지정하는 속성 auto : 요소가 채울 수 있는 영역을 100% 채운다. height 해당 요소의 높이를 지정하는 속성 auto : 콘텐츠나 자식 요소의 높이에 따라 변경된다 red pink .red { width: 300px; height: 300px; background-color: red; } .pink { width: 500px; height: 200px; backgroun..

text-decoration 문자에 밑줄이나 취소선을 넣을 수 있는 속성 한 번에 두 개 이상의 값을 줄 수 있다. 스타일, 컬러, 두께를 지정할 수 있다. - 축약형 line 속성은 필수이며, 나머지는 필요한 속성만 선택하여 적용할 수 있다. text-decoration : line style color thickness; - line 속성 값 none : 없음 underline : 밑줄 overline : 윗줄 line-through : 취소선 - style 속성 값 solid : 실선 (default) double : 이중선 dotted : 점선 dashed : 파선 wavy : 물결선 selector {text-decoration: line-through;} selector {text-decora..

font-family 서체를 지정하는 속성 서체 이름에 공백이 포함된 경우 따옴표로 묶어 지정해야 한다. 쉼표로 구분하여 여러 개의 서체를 지정할 수 있다. 첫 번째 서체가 우선순위를 갖지만 지정한 서체를 지원하지 않으면 그다음에 지정한 서체로 대체된다. (영문과 한글의 서체를 다르게 하고 싶을 경우 한글을 지원하지 않는 영문 서체 먼저 지정하면 된다) 마지막 서체는 일반 서체로 지정하는 것이 권장된다. (지정한 서체 전부를 지원하지 않는 경우 브라우저가 유사한 서체를 선택하도록 해야 하기 때문에) - 일반 서체 종류 serif : 글자의 가장자리에 꺽쇠가 있는 서체 (명조체) sans-serif : 심플하고 깔끔한 서체 (고딕체) monospace : 글자의 너비가 동일한 서체 cursive : 필기체..