본문 바로가기

css340

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.
8.1.4 background-attachment 속성 8.1.4 background-attachment 속성 역시 background-attachment 속성은 background-image 속성에 의해 배경 이미지가 설정된 상태에서 사용할 수 있는 속성으로 배경 이미지가 커서 스크롤해야 할 지 아니면 고정시킬지를 설정하는 속성으로 다음과 같은 형식을 이용합니다. background-attachment : 속성값 속성값으로는 배경 이미지가 해당 요소의 내용(content)과 같이 움직이도록 할 경우 기본적으로 “scroll”로 설정이 됩니다. 하지만 배경 이미지가 해당 요소의 내용(content)과 독립적으로 작동하도록 할 경우 즉, 스크롤하더라도 배경이미지는 움직이지 않도록 할 경우에 “fixed” 속성값으로 설정해주면 됩니다. 그리고 속성값으로 “loc.. 2013. 8. 4.
8. 배경(Background)과 경계(Border), 여백 8. 배경(Background)과 경계(Border), 여백 여러분이 HTML5에서 배경, 경계, 여백을 이해하기 위해서는 기본적으로 HTML 요소들을 웹 브라우저를 나타낼 때 어떻게 나타내는지 아는 것은 학습에 대단히 도움이 됩니다. HTML 요소들이 웹 브라우저에 표현될 때 직사각형 영역 안에 나타내며 해당 영역 안에는 컨텐츠(내용)가 들어가는 직사각형 형태가 존재하게 됩니다. 그래서 요소 내부에는 직사각형 형태의 컨텐츠와 요소에 해당하는 직사각형 사이의 여백을 padding이라고 하고 이를 상, 하, 좌, 우로 구분하여 나타내면 아래 그림과 같이 나타낼 수 있습니다. 다음으로 요소의 경계(border)를 실선(solid line)으로 나타낼 지 아니면 점선(dotted line)으로 나타낼 지 등을.. 2013. 8. 4.

티스토리툴바