CSS3 - CSS 스타일 - 태그의 크기 설정과 변경 (13)

CSS3 - CSS 스타일 - 

태그의 크기 설정과 변경 (13)

오늘은 CSS3의 열세번째 내용으로 마진 패딩을 알아보기 전 CSS 에서 

태그의 크기를 설정하는 방법과 변경하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 태그의 크기 설정이란?

태그의 크기 설정이란 말그대로 css에서 태그를 선택자로 선택한 다음

width (가로, 폭)과 height(세로, 높이) 속성을 이용해 태그의 크기를 설정하는 방법 입니다.

<p태그(블럭태그)와 span(인라인태그)의 기본 크기>

위 내용은 "대표적인 블럭태그인 p태그"와 "대표적인 인라인태그인 span태그"의 기본 순수한 크기를 알아 보기 위해 인라인 스타일로 background(배경색)속성을 이용해 각각의 색을 입혀 웹브라우저에 출력한 모습 입니다.

여기서 블럭 태그와 인라인 태그는 이 앞전 html 부분에서 설명 했지만 간략하게 설명하겠습니다.

1. 블럭 태그(요소) 

CSS를 통해 스타일을 변경하지 않았다면 블럭 요소(block element)는 화면의 가로폭 전체를 차지하는 직사각형 모양을 가집니다. 모든 인라인 요소는 블럭 요소 안에 속해 있어야하며, body 요소에 바로 담길 수 있습니다.

- 블럭 태그(요소) 예 : p태그, h1 ~ h6까지의 태그, blockquote태그, ul, li, ol 태그, div 태그 등

2. 인라인 태그(요소)

인라인 태그 (요소)(inline element)는 블럭태그(요소) 혹은 다른 인라인태그 (요소) 안에만 쓰일 수 있으며 CSS를 통해 스타일을 변경하지 않았다면 기본적으로 문장이 흐르는 모양을 가집니다. (즉 공간을 차지 하지않는다.)

- 인라인 태그 (요소) 예 : a태그, strong태그, em태그, span태그 등

위와 같은 내용이 있으며 이 아래 내용은 위에 있는 블럭 태그 (요소)와 인라인 태그(요소)의 크기를 width 속성과 height 속성을 이용해 변경해 보겠습니다.

<블럭 태그(요소)와 인라인 태그(요소)에 width속성과 height속성을 넣어 크기를 변경한 모습>

위 와 같이 블럭 태그(요소)와 인라인 태그(요소)에 똑같이 width(가록, 폭), height(세로, 높이)속성으로 100px씩 값을 주어 정사각형의 크기로 만들어 보았습니다.

뭔가 이상하지 않은가?

둘다 똑같은 값을 주었는데 인라인 태그(요소)만 사이즈가 그대로 입니다.

그 이유는 위에 인라인 태그(요소)에도 설명 했지만 인라인 태그는 공간을 차지 하지 않는 태그이기 때문에 아무리 width나 height속성을 주어도 변하지 않습니다.

이래도 인라인 스타일에 크기를 변경하고 싶다면 css스타일 속성중 나중에 배우게 될 display 속성에

"inline-block"이란 값을 아래와 같이 넣어 주면 인라인 태그가 블럭 태그처럼 쓰일 수가 있습니다.

위 내용은 인라인 태그(요소)에 display:inline-block; 속성을 추가하여  width속성과 height속성을 넣어 크기를 변경한 모습 입니다.

여기까지 태그의 크기를 설정하는 방법 이였고 이 아래부터는 크기를 변경 하는 방법 입니다.

css 스타일 - 태그의 크기 변경이란?

태그의 크기 변경이란 resize라는 속성의 both라는 값을 이용해 양방향 크기 조정이 가능한 메커니즘을 제공하여 사용자가 웹브라우저 상에서 태그의 높이와 너비를 전부 조정 할 수 있게 만들어주는 내용으로 아래와 같이 사용 합니다.

<resize 속성 사용방법>

위 는 p태그에 배경색을 입힌 후 width속성으로 가로 200px 사이즈를 준후 resize:both를 사용하였고추가로 그냥 resize만 입력할시 작동이 되지 않으며 뒤에 꼭 overflow 속성의 auto라는 값을 넣어 주어야 작동이 되니 이점 꼭 주의 하시기 바랍니다. 

본래 resize의 값은 both 말고도 아래와 같은 속성 값이 더 있습니다.

속성 값	내용
both	사용자가 가로,세로 변경 모두 가능
horizontal	사용자가 좌우만 변경 가능
vertical	사용자가 상하만 변경 가능
none	사용자 임의 변경 불가능
inherit	상속값을 사용함

위 와같은 다른 속성들은 위 예제의 resize의 속성 값만 변경하여 사용하면 적용이 되고 글로 읽어봐도

이해가 되는 부분이기에 따로 설명은 하지 않겠습니다. ^^

이상 CSS3 - CSS 스타일 - 태그의 크기 설정과 변경 (13)에

관련된 포스팅을 마치도록 하겠습니다.