ch2 - 4. Property와 Value

Index

Index 1. Property와 Value 1.1 Property와 Value 1.2 세계에서 가장 많이 쓰는 Property 1.3 Property와 Value의 종류 1.3.1 font-size 1.3.2 margin 1.3.3 padding 1.3.4 color 1.3.5 background-color 1.3.6 width, height 1.3.7 display 1.3.8 font-family 1.3.9 border 1.3.10 font-weight

1. Property와 Value

1.1 Property와 Value

이제 property(속성)과 value(속성값)에 대해 알아보도록 하겠습니다. CSS의 기초 챕터에서 말씀드렸듯이, property는 CSS에서 지정하고 싶은 스타일의 속성 이름을, value는 임의의 값을 의미합니다. property는 CSS의 정해진 문법에 따라 작성되어야 하며, value는 자유롭게 사용할 수 있습니다.

1.2 세계에서 가장 많이 쓰는 Property

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/

위의 그림은 마이크로소프트에서 개발한 bing이라는 검색엔진을 통해 수집된 전 세계 웹페이지의 통계자료입니다. 자료에 따르면 가장 빈도수가 높은 속성은 타이포그래피, 박스 모델로 제시되어 있습니다.

타이포그래피는 쉽게 말해 글자(font)에 대한 것을 의미하고, 박스 모델은 텍스트들을 담는 박스를 뜻합니다. 위에 나온 Property 상세 내용을 살펴보도록 하겠습니다.

1.3 Property와 Value의 종류

1.3.1 font-size

font가 붙은 property는 얼마나 있을까요? 우선 p 태그로 간단하게 문서를 만들어 크롬 개발자 도구로 열어보았습니다.

요소 선택 버튼을 누르신 다음 hello world를 클릭하시고 개발자 도구에서 Computed를 클릭해주세요. 그 다음 Show all을 누르면 가질 수 있는 property가 모두 나옵니다. 여기서 font가 붙은 property를 찾아보겠습니다.

여기서 보다 많은 정보를 습득할 수 있습니다. 1.3.2부터는 해당 창을 열지 않을 것입니다.

바로 알아볼 수 있는 property와 value로는 맑은 고딕 폰트를 사용하고 있고 size는 16px, font-weight은 400이군요.

여기서 font-size가 가질 수 있는 value는 아래와 같습니다. 각각의 Test는 w3schools에서 할 수 있습니다.(https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium)

medium : 웹브라우저에서 정한 기본 글자크기입니다.

xx-small, x-small, small, large, x-large, xx-large : 이름에서 알 수 있듯이 기본 글자 크기에서 작은 값부터 큰 값의 순입니다.

smaller, larger : 부모 요소의 영향을 받는 상대적 글자 크기입니다.

length : px, cm 등 고정된 길입니다.

% : em, rem, % 등 가변 길이입니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

1.3.2 margin

margin은 아래와 같은 property를 가집니다.

margin

margin-top

margin-right

margin-bottom

margin-left


selector{
  margin: 10px, 15px, 20px, 25px;
}

위의 경우 12시부터 3시, 6시, 9시 방향으로 적용됩니다. 하나만 넣을 경우 4방향 모두 적용되며 2개를 넣을 경우 상하, 좌우가 적용됩니다.


selector{
  margin: 10px, 20px, 25px;
}

위와 같이 사용하실 경우 짝이 맞지 않아서 작동하지 않으실 것 같지만 10px은 top으로 20px은 좌우로, 25px은 bottom으로 적용됩니다.

마진의 value로 줄 수 있는 값은 아래와 같습니다. w3school에서 실습(https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin&preval=auto)해보실 수 있습니다.

length : px, cm 등 고정된 길입니다.

% : em, rem, % 등 가변 길이입니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

auto : 부모 요소의 수평 방향으로 margin을 자동으로 계산합니다.

여기서 아래와 같이 코딩해보시면 좌우 값이 자동으로 계산되어 중앙 정렬 됨을 보실 수 있습니다.


<html>
<head>
  <style>
  div {
    border: 10px solid blue;
    width: 200px;
    margin: auto;
  }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

1.3.3 padding

padding은 margin과 마찬가지로 아래와 같은 property를 가집니다.

padding

padding-top

padding-right

padding-bottom

padding-left

부여하는 방법은 margin과 같으므로 생략하도록 하겠습니다. 다만 value로 올 수 있는 값 중 auto는 없습니다.

1.3.4 color

color가 붙는 프로퍼티는 4개가 있습니다. 여기서 background-color와 같이 color가 뒤에 붙는 것은 제외합니다.

color : content의 색을 나타냅니다. 글자색이라고 생각하시면 되십니다.

color-interpolation

color-interpolation-filters

color-rendering

color가 가질 수 있는 value는 아래와 같습니다.

color : red, #000, #000000, rgb(0, 0, 0), rgba(100, 100, 100, 0.3), transparent

initial : 초기 세팅 값을 가져옵니다.

inherit : 부모 요소의 속성값을 상속받습니다.

color가 가질 수 있는 value에 대한 자세한 내용은 WEBDIR 사이트의 블로그(https://webdir.tistory.com/406) 글을 참고 바랍니다.

1.3.5 background-color

background-color는 아래와 같은 value를 가질 수 있습니다.

color : red, #000, #000000, rgb(0, 0, 0), rgba(100, 100, 100, 0.3), transparent

initial : 초기 세팅 값을 가져옵니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-color의 영역은 border 안쪽 padding까지입니다. border는 포함하지 않습니다.

1.3.6 width, height

width, height는 아래와 같은 value를 가질 수 있습니다.

auto : 기본 값이 들어가게 됩니다.

length : px, cm 등 고정된 길입니다.

% : em, rem, % 등 가변 길이입니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

1.3.7 display

display는 요소를 어떻게 보여줄지를 결정합니다.

inline : 줄바꿈이 되지 않고, width와 height를 지정할 수 없습니다.

block : width, height를 지정할 수 있으며, 항상 줄바꿈이 일어납니다.

contents : 선택한 요소의 내용 앞이나 뒤에 콘텐츠를 붙입니다.

flex : 레이아웃을 다룰 때 하나의 행 또는 열을 다룹니다. (1차원 레이아웃)

grid : 2차원 레이아웃을 설정하는데 사용합니다.

inline-block : block과 inline의 중간 형태입니다. 내부는 block처럼 표시하여 박스모양이 inline처럼 옆으로 늘어납니다. 줄바꿈이 되지 않지만, 크기를 지정할 수 있습니다.

inline-flex : inline level에서 flex를 나타냅니다.

inline-grid : inline level에서 grid를 나타냅니다.

inline-table : inline level에서 table을 나타냅니다.

list-item : 리스트 항목을 나타낼 때 사용합니다.

run-in : 전후의 맥락을 파악해서 display값을 결정합니다. (개발자의 의도와 다르게 작동할 수 있어, 일반적으로 사용을 권장하지 않습니다.)

table : 표를 나타낼 때 사용합니다.

table-caption : 표의 제목을 나타냅니다.

table-column-group : 하나 이상의 열(col)을 그룹으로 짓는데 사용합니다.

table-header-group : 열(col)의 제목으로 구성된, 하나 이상의 행(row)을 그룹으로 짓는데 사용합니다. 한번 만 쓸 수 있습니다.

table-footer-group : 열(col)의 요약으로 구성된, 하나 이상의 행(row)을 그룹으로 짓는 데 사용합니다. 한번 만 쓸 수 있습니다.

table-row-group : 표의 본문에 해당하는 영역을 나타냅니다. 여러 번 선언되어 행을 그룹화할 수 있습니다.

table-cell : 표의 셀을 뜻합니다.

table-column : 표의 열(col)을 뜻합니다.

table-row : 표의 행(row)을 뜻합니다.

none : 요소를 완전히 제거합니다.

initial : 부모의 속성을 상속받지 않고, 기본값으로 초기화합니다.

inherit : 부모의 속성을 상속 받습니다.

1.3.8 font-family

family-name : 궁서, 굴림, arial같은 글꼴 이름을 사용합니다. 지정한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않을 경우, 글꼴은 기본값으로 표시됩니다.

initial : 부모의 속성을 상속받지 않고, 기본값으로 초기화합니다.

inherit : 부모의 속성을 상속 받습니다.

💡

Web font (https://fonts.google.com/) font-family에서 말씀드렸듯이 지정 글꼴이 설치되지 않을 시 기본값으로 표기됩니다. 이 때 web fonts를 사용하면 사용자의 컴퓨터에 설치되어 있지 않은 글꼴을 사용할 수 있습니다. web fonts는 원하는 font가 있는 곳으로 연결하여, 외부 스타일을 불러와서 사용하는 방식을 채택하고 있습니다. 유명한 web fonts로는 google font가 있습니다. 사용방법은 아래 코드를 참고하시길 바랍니다.


// 사용예시1 : href 참고
<head>
    <link href = 'http://fonts.googleapis.com/css?family=Open+Sans:400.300' rel='stylesheet' type='text/css'>
    <style type = "text/css"> h1 {font-family: 'Open Sans', sans-serif;}</style>
</head>


// 사용예시2 : url 참고
<style type = "text/css">
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400.300);
    h1 {font-family: 'Open Sans', sans-serif;}
</style>

1.3.9 border

border는 아래와 같은 property를 가집니다.

border-width - 선의 두께와 관련된 속성입니다.

border-style - 선의 모양과 관련된 속성입니다.

border-color - 선의 색깔과 관련된 속성입니다.

initial - 기본값으로 설정합니다.

inherit - 부모 요소의 속성값을 상속받습니다.

위와 같은 속성은 아래 코드 순서로 작성하시면 됩니다.


border: border-width border-style border-color | initial | inherit

border-width부터 하나씩 자세히 설명드리겠습니다.

먼저 border-width는 아래와 같은 방법으로 설정을 지정할 수 있습니다.

px - 속성 값을 직접 픽셀 단위로 지정합니다.

medium - 중간 굵기로 표시됩니다.

thin - 실선으로 표시됩니다.

thick - 굵은 선으로 표시됩니다.

다음으로 border-style을 설명드리겠습니다. 선의 형태는 실선, 점선, 파선 등 다양하게 설정할 수 있으며 아예 없앨 수도 있습니다.

none - 선을 없앱니다.

solid - 실선입니다.

dotted - 점선입니다.

dashed - 파선으로 바느질선과 같은 선입니다.

double - 이중선입니다.

groove - 선이 안쪽으로 파인 선입니다.

ridge - 볼록하게 입체감이 있는 선입니다.

inset - 테두리가 전체적으로 안으로 들어가 보이는 형태입니다.

outset - inset의 반대입니다.

마지막은 border-color입니다. 색깔의 종류에 대해서는 많이 아시기때문에 테두리 top, bottom, left, right에 색깔을 주는 방법에 대해서 알려드리겠습니다.


[1]
border-color: red;

[2]
border-color: red green;

[3]
border-color : red green blue;

[4]
border-color : red green blue yellow;

[1]과 같이 한 개의 값을 사용하면 네 면에 동일한 색상이 적용됩니다.

[2]와 같이 두 개의 값을 사용하면 (top bottom), (left right)에 적용됩니다.

[3]과 같이 세 개의 값을 사용하면 (top), (left right), (bottom)에 적용됩니다.

[4]와 같이 네 개의 값을 사용하면 top, right, bottom, left에 적용됩니다.

직접 테두리에 설정을 넣는코드예제와 결과를 보여드리고 테두리는 마무리하겠습니다.


<!doctype html>
<html>
  <head>
    <style type="text/css">
      div {
        margin: 10px 0px;
        font-size: 13px;
      }
      .one {
        border: 4px ridge red;
      }
      .two {
        border: thick solid green;
      }
      .three {
        border: thin dotted blue;
      }
      .four {
        border: medium inset;
        border-color: yellow green
      }
    </style>
  </head>
  <body>
    <div class="one">
      <p>  border: 4px none red;</p>
    </div>
    <div class="two">
      <p>border: thick solid green;</p>
    </div>
    <div class="three">
      <p>border: thin dotted blue;</p>
    </div>
    <div class="four">
      <p>border: medium inset;
      <br>
      border-color: yellow green</p>
    </div>
  </body>
</html>

1.3.10 font-weight

font-weight는 글자 굵기를 설정하는 속성입니다.

normal - 기본값이며 보통 굵기입니다.

bold - 굵은 굵기입니다.

bolder - 상속된 값보다 굵은 굵기입니다.

lighter - 상속된 값보다 얇은 굵기입니다.

number- 숫자로 굵기를 지정하며 100,200,300,400과 같은 숫자를 이용합니다.

initial- 기본값으로 설정합니다.

inherit- 부모 요소의 속성값을 상속받습니다.

굵기가 동일하더라도 글자체에 따라서 차이가 날 수 있습니다. 이 점 유의하며 예시를 보여드리고 마무리하도록하겠습니다!


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      font {
      }
      .weight-normal {
        font-weight: normal;
      }
      .weight-bold {
        font-weight: bold;
      }
      .weight-100 {
        font-weight: 100;
      }
      .weight-900 {
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <font>
          <p class="weight-normal">font-weight normal</p>
          <p class="weight-bold">font-weight bold</p>
          <p class="weight-100">font-weight 100</p>
          <p class="weight-900">font-weight 900</p>
    </font>
  </body>
</html>