Position의 속성 CSS Position에는 Static, relative, absolute, fixed 라는 4가지 속성이 있습니다. 예제를 통해 4가지 속성을 정확히 알아보겠습니다. static (default value) other parent me HTML Code style.css & result (1) style.css & result (2) Static (default value) me에 top, left : 50px 입력 한 경우에도 변화가 없습니다. static은 직속 부모를 기준으로 위치가 정해지고, 기존의 위치에 고정됩니다. (= offset의 영향을 받지 않습니다.) relative other parent me HTML Code style.css & result (1) styl..

Box-sizing Hello1 Hello2 HTML code box-sizing: border-box; 입력 전 & result (content 크기가 150px) (Hello1's row size : 10 + 150 + 10 = 170px) (Hello2's row size : 30 + 150 + 30 = 210px) box-sizing: border-box; 입력 후 & result (box의 border까지 포함한 크기가 150px) (= 남는 크기만큼 content의 크기가 작아진다.) (Hello1's row size : 10 + 130 + 10 = 150px) (Hello2's row size : 30 + 90 + 30 = 150px) box-sizing: border-box; 입력 전 후로..

Box CSS1 CSS2 CSS3 HTML code style.css & result CSS1과 CSS2는 똑같이 tag를 주었지만 style.css로 인해 box의 크기가 다른 것을 알 수 있습니다. CSS1과 비교하기 위해 CSS2를 살펴보면 개발자 검사 page에서 CSS2 box 위에 마우스를 올려두면 해당 box의 영역이 표시되며, 클릭 시 해당 box의 margin, border, padding, content의 입력값이 나타납니다. 오른쪽 이미지는 CSS2에 margin과 padding을 20px씩 주었기에 빨간 줄로 표시한 20px씩 입력되었음을 나타냅니다. 그리고 CSS1 tag는 block level element의 속성을 가지므로 화면의 가로의 크기가 변하더라도 box의 크기가 화면 ..

Block VS Inline element div1 div2 span1 span2 h1 a HTML code & result 윗 화면으로만으로는 정확하게 block level element와 inline element의 차이를 구별하기 어렵습니다. 그래서 육안으로 구분하기 쉽게 주석이 걸린 css.css를 풀고 border를 입력하겠습니다. css.css & result 윗 코드의 주석을 풀어 css.css로 border를 주니 육안으로 block level element와 inline element를 구분이 뚜렷이 보입니다. block level element는 화면 전체를 사용합니다. inline element는 자기 자신의 크기만큼 사용합니다. , ~ 는 기본적으로 block level elemen..