M9 개발블로그

html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다. inline과 block 속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다. 1 2 3 div{ width:70px; height:70px; background:red; margin-bottom:20px; } span{ background:black; width:20px; height:20px; } 위의 html, css코드의 결과는 아래의 사진이다. div가 block 레벨이고, span이 inline 레벨이다. 그런데 이 코드를 작성하며 알 수 있는 사실은 block레벨 첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다. 둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할..

html의 element의 위치를 이동시키고자 할 때 position의 값이 어떻게 설정되어있냐에 따라 이동 위치가 달라진다. static Position의 기본 설정 값은 'static'으로 설정되어 있다. #container{ background:blue; } div{ width:70px; height:70px; background:yellow; margin-bottom:20px; } #item{ background:red; left:20px; top:20px; } 위의 css코드에서 빨간색 박스(id="item")의 위치를 top:20px , left:20px로 설정했다. 하지만 박스가 이동하지 않고 자신의 위치를 지키고 있다. 그 이유는 position이 기본적으로 static의 값으로 설정되어있..

이번에는 padding의 변화에 따라 box의 크기가 변하지 않게 하는 방법을 정리해보겠다. padding값을 변경하면 box의 크기도 함께 커지는 모습을 종종 보았다. 드디어 그 이유를 알았다. html 코드 box-content box-border css코드 div{ width:200px; height:300px; border:3px solid gray; } 결과 padding 0일 때 padding:40px 일떄 현재 위 코드에서 padding 값을 변경하게 되면 박스의 크기가 커지게 된다. 이를 막기 위해서는 box-sizing을 활용해야 한다. box-sizing 속성 box-sizing:border-box를 이용하면 box의 크기는 유지할 수 있다. box-sizing:border-box 적용..