Jeongchul Kim
CSS 03 CSS 레이아웃 및 HTML5 적용 본문
CSS 03 CSS 레이아웃 및 HTML5 적용 CSS3의 레이아웃 CSS3의 레이아웃 배치와 관련된 스타일에 대해 알아보겠습니다. 웹 문서에 삽입되는 요소들은 크게 블록 레벨 요소와 인라인 레벨 요소로 나눠집니다. 먼저 블록 레벨 요소란 태그를 사용하여 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소를 말합니다. 따라서 블록 레벨 요소는 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 이와 같은 블록 레벨 요소를 만드는 태그로는 대표적으로 <div>태그와 <p>태그 등이 있습니다. 다음으로 인라인 레벨 요소를 살펴보도록 하겠습니다. 인라인 레벨 요소란 줄을 차지하지 않는 요소로서 그림과 같이 화면에 표시되는 콘텐츠 만큼만 영역을 차지하며, 그 외의 공간에는 다른 요소가 와도 상관없습니다. 그렇기 때문에 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있는데, 이와 같은 인라인 레벨 요소를 만드는 태그들로는 <img>태그와 <strong>태그 등이 있습니다. display 속성을 사용할 때에는 다음과 같이 display : 속성값;으로 표현할 수 있는데, 주로 많이 사용하는 속성 값들은 다음과 같습니다. 먼저 Block은 블록 레벨 박스로 만드는 속성이고, Inline은 인라인 레벨 박스로 만드는 속성이며, Inline-Block은 블록레벨 박스지만, 인라인 레벨 박스 처럼 배치하는 속성을 말합니다. 이외에도 none은 박스를 만들지 않고, 시각적으로도 표시하지 않은 속성이며, table은 블록 레벨의 표로 만들 때 사용하며, table-cell은 표에서 하나의 셀로 만들 때 사용하는 속성을 말합니다. 이번에는 원하는 형태로 배치하는 스타일에 대해 살펴보겠습니다. 먼저 position 속성입니다. Position 속성은 사용자가 웹 문서 안의 요소들을 자유자재로 배치할 수 있도록 해주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용됩니다. position 속성을 사용하면 텍스트나 이미지 등 여러 개의 요소를 원하는 위치에 배치할 수 있으며, 사용방법은 다음과 같이 position을 정의 후 속성 값을 지정해줍니다. Position 속성에서 사용할 수 있는 속성 값은 다음과 같이 네 가지가 있는데, static은 요소를 문서의 흐름에 맞춰 배치할 때 사용하고, relative는 이전 요소에 자연스럽게 연결하여 배치할 때 사용되며, absolute는 원하는 위치를 지정하여 배치할 때 사용됩니다. 마지막으로 fixed는 지정한 위치에 고정하여 배치할 때 사용하는데 이 때에는 요소가 화면에서 잘릴 수 도 있습니다. visibility 속성은 요소를 보이게 하거나 보이지 않도록 할 때 사용합니다. 예를 들어 특정 요소를 화면에 보이게 하거나, 보이지 않게 또는 겹쳐 보이도록 설정을 할 수 있죠. visibility 속성은 다음과 같이 visibility를 정의하고 속성값을 지정하여 사용할 수 있는데, 이에 따른 속성값으로는 4가지의 종류가 있습니다. 먼저 visible은 visibility 속성의 기본값으로 요소를 화면에 표시할 때 사용하며, hidden은 요소를 화면에서 감추고자 사용할 때 사용합니다. 또한 collapse는 표의 행렬이나, 행그룹, 열그룹 등에서 지정하여 서로 겹쳐보이도록 할 수 있으며, inherit은 부모 요소의 visibility 속성을 상속받을 때 사용합니다. 마지막으로 z-index(제트 인덱스)입니다. z-index는 요소를 쌓는 순서를 정할 때 사용하는 속성으로 CSS에서는 수평이나 수평이나 수직 이동뿐만 아니라 한 요소 위에 다른 요소를 쌓는 z축도 고려해야 합니다. z-index는 다음과 같이 z-index를 지정한 후 숫자값을 적어 사용하는데, z-index는 값이 작을수록 아래에 쌓이고, 큰 값이 위로 쌓이며, Z-index 값을 명시하지 않을 경우에는 기본 값으로 z-index : 1으로 설정된다는 특징이 있습니다. CSS3와 HTML5 연동 CSS3와 HTML5 연동 HTML 문서 페이지에 CSS를 적용시키는 방법은 크게 다음과 같이 인라인 스타일, 내부 스타일, 그리고 외부 스타일의 세 가지 방법으로 나눌 수 있습니다. 먼저 인라인 스타일은 태그 안에 직접 지정하여 사용하는 스타일로 HTML과 섞어서 사용하는데, 예를 들면 다음과 같이 하나의 태그 안에 백그라운드의 색상과 폰트색상을 지정합니다. 그럼 인라인 스타일을 활용하여 텍스트의 배경 색상과 텍스트 색상이 인라인 스타일로 보여지는 예제를 살펴보겠습니다. 예제에서는 텍스트의 배경색을 빨간색으로 나오도록 하였고, 텍스트 색상은 하얀색으로 나오도록 하였습니다. 여러분 다음과 같은 결과 화면이 나왔나요? 인라인 스타일을 적용하면 다음과 같이 빨간색상의 한 줄에 하얀색 텍스트로 “인라인 스타일”이 출력되는 것을 확인하실 수 있습니다. HTML 문서 페이지에 CSS를 적용시키는 두 번째 방법은 내부 스타일입니다. 내부 스타일은 HTML 파일 안에 별도 영역으로 스타일을 정의하며 일반적으로 <head> 안에서 사용합니다. 사용법은 다음의 예시와 같이 스타일 타입을 정의한 후 <h1> 태그 안에 백그라운드 색상을 빨간색, 텍스트 색상은 하얀색으로 바뀌도록 합니다. HTML 문서 페이지에 CSS를 적용시키는 마지막 방법으로 외부 스타일 방법이 있습니다. 외부 스타일은 스타일 내용을 별도의 페이지로 빼서 사용하는데, 다음과 같이 CSS 파일이 하나 존재하고, 여러 HTML 파일에서 CSS 내의 스타일을 사용합니다. 아래의 블록을 드래그하여 우측으로 드래그하여 올바른 외부 스타일의 사용방법을 확인해보세요. 외부 스타일의 특징은 하나의 스타일로 여러 개의 HTML 페이지에 적용하여 사용할 수 있습니다.1. 블록 레벨 요소와 인라인 레벨 요소
2. display 속성
display 속성에 대해 알아보겠습니다. display 속성은 해당 요소가 화면에 어떻게 보여질 것인지 지정하는 것으로 사용할 수 있는 속성 값들이 너무 많습니다. 하지만 이 값들은 브라우저에서 모두 지원되지 않습니다. 3. 원하는 형태의 배치 스타일
1. 인라인 스타일
2. 내부 스타일
3. 외부 스타일
'Web프로그래밍' 카테고리의 다른 글
| CSS 05 CSS3 좌표계 (0) | 2016.04.29 |
|---|---|
| CSS 04 CSS3 선택자 (0) | 2016.04.27 |
| CSS 02 CSS 스타일링 (0) | 2016.04.26 |
| CSS 01 CSS의 개요 (0) | 2016.04.26 |
| HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 (0) | 2016.04.21 |