CSS

2. 색상/테두리/요소의 크기/여백

삼색이삼랑해 2022. 8. 12. 17:28

  색상 처리

색상을 처리하는 방식에는 다음과 같이 세 가지가 있다.

 

1. RGB

  • rgb(red, green, blue) 함수 사용. 각 생상별 0~255 사이의 수치를 조합.
  • rgba(red, green, blue, alpha) 함수 - 투명도 반영.
  • alpha : 투명도(0.0~1.0). 0에 가까울수록 투명해짐.

2. HEX16진수로 색상을 지정.

  • 16진수로 색상을 지정
  • #abc -> #aabbcc의 단축 표현
  • 투명도 처리 : 8자리 수치로 표현. 00 : 0.0, ff : 1.0

3. HSL

  • hsl(hue, saturation, lightness) 함수 사용.
  • h - 색조, s - 채도, l - 명도
  • H : 0 ~ 360까지의 색상환 각도로 표현
  • S : 0 ~ 100%의 백분률 값. 0-회색음영, 100-색조의 본색
  • l : 0 ~ 100%의 백분률 값. 0-검은색, 100-흰색
  • 예) red - hsl(0, 100%, 50%)
  • 투명도 반영 : hsla 함수 사용.
<head>
    <meta charset="UTF-8">
    <title>색상 표현</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            border: 1px solid black;
        }
        #rgb {
            background-color: rgba(0, 0, 255, 0.5);
            color:azure;
        }
        #hex {
            background-color: #66bbcc80;
        }
        #hsl {
            background-color: hsla(0, 100%, 50%, 0.5);
        }
    </style>
</head>

  테두리(border)

요소의 테두리 선을 표현하는 속성. 여백과 마찬가지로 4방향에 따로 테두리를 설정할 수 있다.

  • border-style : 테두리의 종류(선의 모양). 실선, 점선, 파선 등
  • border-width : 테두리의 두께.
  • border-color : 테두리의 색상.
  • border-radius : 모서리의 반지름(둥근 모서리 처리)
  • border : 위의 각 속성을 합쳐서 사용하는 단축 속성. 두께 - 종류 - 색상 순으로 작성.                                                                            (최소 두께와 종류는 작성해야 테두리가 나타난다.)
<head>
    <meta charset="UTF-8">
    <title>테두리(border)</title>
    <style>
        div {
            width: 200px;
            background-color: yellow;
            border-width: thick;
        }
        #d0 {
            border-style: solid;
            border-width: thick thin medium thick;
        }
        #d1 { border-style: dotted solid dashed double; }
        #d2 { border-style: dashed; }
        #d3 {
            border-style: double;
            border-left-style: solid;
            border-top-color: red;
        }
        #d4 { border-style: groove; }
        #d5 { border-style: ridge; }
        #d6 { border-style: inset; }
        #d7 { border-style: outset; }
        #d8 { border-style: none; }
        #d9 { border-style: hidden; }
        #d10 {
            border-style: solid;
            border-radius: 30px 10px 20px 40px;
            padding: 20px;
        }
    </style>
</head>

  요소의 크기 - 박스 모델(Box Model)

문서를 구성하는 모든 요소는 box-model을 사용하여 크기와 여백을 처리한다.

일반적인 요소의 너비 = width + (2*padding) + (2*border)

ex) width: 100px; padding: 10px; -> 너비 = 120px.
      w: 100px, p: 10px, b: 1px -> 122px

요소의 크기에 바깥쪽 여백(margin)은 고려하지 않는다.

 

box-sizing 속성)

  • content-box : 기본값. 일반적인 크기로 처리. 실제 너비/높이 = 너비/높이 + 패딩 + 테두리
  • border-box : 길이(width/height)에 패딩과 테두리가 포함. 실제 너비/높이 = 너비/높이

  여백

여백은 안쪽 여백을 지정할 수 있는 padding과 바깥쪽 여백을 지정할 수 있는 margin이 있으며, 최대/최소 너비를 지정해줄 수 있는 속성도 존재한다. 

 

1. padding(안쪽 여백)

테두리의 안쪽, 요소의 컨텐츠 바깥쪽 영역

  • padding - 모든 여백
  • padding-top - 윗쪽 여백
  • padding-right - 오른쪽 여백
  • padding-bottom - 아랫쪽 여백
  • padding-left - 왼쪽 여백
  • padding 속성 하나로 4방향을 단축하여 사용 가능.  top을 시작으로 시계방향으로 나열
    4개의 값을 지정 : top - right - bottom - left
    3개의 값을 지정 : top - right/left - bottom
    2개의 값을 지정 : top/bottom - right/left
  • 위/아래에 같은 값을 처리하고, 좌/우를 다른 값으로 처리하는 방법은 없음.

2. margin(바깥쪽 여백)

테두리의 안쪽, 요소의 컨텐츠 바깥쪽 영역.

auto 속성값 : 요소의 가운데 정렬에 사용. (세로 X)

ex) margin: 0 auto;

 

3. minimum/maximum width/height

  • min-width : 지정된 범위 이하로 줄지 않는 요소로 설정.
  • max-width : 지정된 범위 이상으로 커지지 않는 요소로 설정.
<head>
    <meta charset="UTF-8">
    <title>최대, 최소 너비</title>
    <style>
        #d1 {
            width: 500px;
            height: 100px;
            border: 1px solid;
            margin: 30px auto;
            padding: 20px;
        }
        #d2 {
            width: 300px;
            height: 100px;
            border: 1px solid;
            box-sizing: border-box;
            padding: 10px;
            padding-left: 30px;
        }
        #d3 {
            background-color: green;
            height: 200px;
            max-width: 1000px;
            margin: 0 auto;
        }
        #d4 {
            border: 1px solid red;
            height: 200px;
            min-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>