본문 바로가기

border-radius2

Box Model을 이용한 게시판 형태 만들기 Box Model을 이용한 게시판 형태 만들기 CSS에서 대부분의 HTML 요소(Element)들은 직사각형의 Box 형태로 나타낼 수 있으며 이에 대해서는 이미 여러분들이 여기까지 따라 하셨다면 쉽게 이해할 수 있는 부분일 것입니다. 이번에는 이러한 Box Model을 이용하여 다음과 같이 ol(ordered list) 요소 내에 li 요소를 여러 개 포함하는 형태의 게시판과 유사한 형태를 만들어 보고자 합니다. 기본적으로 ol 요소는 정렬된 리스트를 나타내는데 사용하는 요소이므로 특별한 설정을 하지 않아도 기본적으로 1, 2, 3 형태로 ol 요소에 포함된 li 요소를 나타내게 됩니다. 따라서 기본적인 ol 요소에 숫자가 아닌 다른 형태를 설정하거나 아니면 아예 나타내지 않기 위해서는 CSS3에서는 .. 2013. 8. 8.
8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) 앞에서 배경(Background)과 경계(Border), 여백을 설명하면서 그림으로 경계(border)와 HTML 요소의 내부 여백을 나타내는 padding, 외부 여백을 나타내는 margin에 대해서 설명하였는데 여기서는 구체적으로 관련 속성들을 어떻게 설정하고 어떻게 그 결과가 나타나는지 알아봅니다. 8.2.1 내부여백(padding)과 관련된 속성들 내부 여백은 배경과 경계, 여백 도입부분에서 나타낸 그림에서와 같이 HTML5 요소를 나타내는데 있어 직사각형 형태로 나타낼 때 그 안에 요소의 내용(content)와의 상(top), 하(bottom), 좌(left), 우(right) 여백을 줄 수 있는데 이 때 사.. 2013. 8. 4.