IT is Art

position의 속성

css position relative absolute 정리 1. postion 속성이란? html로 문서를 작성할때 문서안의 컨텐들의 위치를 정해줄 수 있도록 도와주는 속성입니다. 일반적으로 position:relative; 와같이 포지션에서 어느 속성을 부여할것인지 정해서 사용합니다. 그리고 이를 이용해서 컨텐츠들의 위치를 깔끔하게 적용시켜 줄 수 있습니다. 2. relative를 알아보자 postion:relative를 적용하게 되면, top:40% , left:60% 등 위에서 몇퍼센트 떨어지게 할것인지, 왼쪽에서 몇퍼센트를 떨어지게 할것인지 정할 수 있는 속성 값을 사용할 수 있게 됩니다. (좌표처럼 사용할 수 있다) 단, 적용한 순간 이 top,left를 사용하게 되면, 좌표의 기준은 바로 속..

rem, em

rem em 차이점 HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다. 그런데 이 rem 과 em 이 표현하는 내용이 가끔 헷갈릴때가 있어 정리해둡니다. rem rem 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값은 최상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 이야기 합니다. 예를 들어 기준이 되는 값, 즉 html 태그의 font-size 값이 이 16px 라면 2rem 은 32px 을 의미합니다. html { font-size: 16px; } div { font-size: 1.5rem; ..

박스 속성(height+width+padding+border+margin)

block, inline, inline-block 설명

block block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. block은 height와 width 값을 지정 할 수 있다. block은 margin과 padding을 지정 할 수 있다. inline inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.) width와 height를 명시 할 수 없다. margin은 위아래엔 적용 되..