Development/HTML, CSS

css_box

WELLKIIM 2018. 5. 7. 02:47

안녕하세요.


웰킴입니다.


어제부터 CSS에 대하여 알아보는 시간을 가졌는데요.

css에 대한 높이와 너비설정을 이용하여 박스형태의 모양을 만들어보도록 하겠습니다.


먼저,

weight : 너비값을 말합니다. px단위로 설정할 수 있습니다.

height : 높이 값을 말합니다. 마찬가지로 px단위로 설정할 수 있습니다.

전 시간에 inline 요소와 block요소에 대해 알아보았는데요.

대표적으로 span 태그가 인라인요소였죠.

인라인요소는 기본적으로 너비와 높이값을 가지지 않습니다. 그렇기 때문에 너비와 높이값을 줘도 적용되지 않습니다.

그렇다면, 인라인요소에 너비와 높이값을 주기위해서는 어떻게 해야할까요.?


인라인요소를 블럭요소로 바꾸어주어야합니다.


에디터에 코드를 작성하여 알아보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
 <head>
  <title> box </title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <style type="text/css">
        p{background-color:#ff0; width:200px; height:200px;}
        span.block{background-color:pink; display: block; width: 200px; height: 200px; }
      
        span.inline{
            background-color:pink; width: 200px; height: 200px;
        }
        
        /*
            인라인 요소는 기본적으로 너비와 높이값을 가지지 않기 때문에
            너비와 높이값을 많이 줘도 적용되지 않는다.
      
            그렇기 때문에, 인라인요소에 너비와 높이값을 주기위해서는 블럭요소로 바꾸어주어야한다.
              
            ex ) display:block;
        */
  </style>
 </head>
 <body>
    <p>
        블록요소는 : 너비와 높이를 가지고 있음 / 인라인 요소는: 영역을 글자 크기만큼만 가진다.
    </p>
    <span class="block">
        블록요소는 : 너비와 높이를 가지고 있음 / 인라인 요소는: 영역을 글자 크기만큼만 가진다.
    </span>
    <span class="inline">
        블록요소는 : 너비와 높이를 가지고 있음 / 인라인 요소는: 영역을 글자 크기만큼만 가진다.
    </span>
 </body>
</html>
 
cs



블럭요소인 p태그와

인라인요소인 span태그를 사용하여 비교해보았습니다.


내용과 설정한 값 모두 같습니다.


위의 p태그는 본연의 모습이 블럭형태이기 때문에 너비와 높이값만 설정한 것을 확인하실 수 있습니다.


display:block; 을 이용하여 블럭형태로 적용한 인라인요소인 span 태그에 class명을 block으로 달아 놓았습니다.


아래는

같은 span태그이지만 class명만 inline으로 달아 놓은 블럭형태를 적용하지 않은 span 태그의 모습입니다.




아래에 출력한 값으로 보여드리겠습니다.





같은 내용인데, 각 성질에 따라 다른 모습을 보이고 있는 것을 확인하실 수 있습니다.


이번 시간에는 각 태그의 block / inline의 형태에 대하여 알아보았습니다.




다음 시간에는 더욱 많은 태그들을 활용한 기초 웹페이지 영역을 나누는 방법에 대해 알아보도록 하겠습니다.!






도움이 되셨다면 공감과 덧글을 남겨주세요 

글 작성에 큰 힘이됩니다. ^^




반응형