화면에 요소를 배치할 때, 또는 각 요소 내용을 정리할 때 가장 많이 사용하는 스타일 속성이 padding과 margin이다. CSS를 사용해서 내가 원하는 위치에 원하는 방식으로 HTML 문서의 각 요소를 배치하려면 padding과 margin에 대한 이해는 필수다. 1. padding padding은 요소 내부의 여백이다. border에 관한 게시물에서 모든 요소는 자신만의 영역을 가진다고 이야기했다. 자신만의 영역 가장자리가 border로 표시된다. padding은 쉽게 생각하면 border에서부터 그 안에 배치된 글이나 이미지까지의 거리다. 아래 예를 보면 padding에 대해 감이 올 것이다. padding:15px 적용padding 미적용 Lorem ipsum dolor sit amet, co..

border 속성은 단어 뜻 그대로 테두리를 표시하는 것이다. HTML 문서의 모든 요소는 자기만의 일정한 영역을 가진다. 배경색이나 테두리가 없으면 시각적으로 표시되진 않지만, 사실은 자신의 영역을 차지하고 있다. border 스타일을 지정하면 사용자가 지정한 스타일로 이 영역의 가장자리를 표시한다. a border span border p border div border table border 예를 들면 위와 같은 것이다. 너비나 높이 속성이 지정되지 않았을 때 a와 span 요소는 글자가 입력된 부분만 영역으로 갖으므로 연달아서 표시된다. p 요소, div 요소는 문단과 특정 영역을 나타내므로 가로 전체를 기본 영역으로 가진다. table 요소 역시 td나 th에 입력된 내용만큼을 자신의 영역으로 ..

CSS(스타일 시트)는 Cascading Style Sheets의 줄임말로 웹 문서의 스타일(색, 너비, 높이, 두께 등의 표시 방식)을 미리 지정하는 것이다. 웹페이지 크기를 줄여 로딩 속도를 높이기 위한 것으로, 반복되는 속성을 한 번만 지정해서 적용할 수 있는 장점이 있다. 예를 들어 블로그 스킨 사이드 바의 모든 목록(ul 태그)에 같은 글꼴과 크기, 여백을 지정하려고 할 때 CSS를 사용하면 각 ul 태그마다 스타일을 지정할 필요 없이 단 한 번의 스타일 정의로도 사이드 바의 모든 ul 태그에 적용되는 스타일을 지정할 수 있다. 또 앞에서 지정한 CSS의 사이드 바 ul 태그 스타일만 수정하면 실제 사이드 바의 모든 목록에 수정 내용이 즉시 반영되므로 내용 수정도 간편하다. CSS의 편리한 점은..