Portfolio

1. 단위 1. 고정 크기 단위 2. 가변 크기 단위 2. width, height 3. border, radius 4. margin, padding 1. margin 2. padding 5.overflow 5.1 overflow 중요 속성 6. background 7. font 1. Font-size 2. font-family 추천 웹 폰트 사이트 추천 웹 폰트 font format 3. font-weight google font google icon font fontasome bootstrap font XEIcon 8. opacity 9. color 1. 색상 이름 2. RGB값 3. HEX 값(16진수)

선언 부분에서 잘못된 값이 들어가더라도 전체를 실행시키는데 문제가 발생하지 않습니다. 해당 부분만 무효처리가 됩니다.

1. 단위

Absolute : cm, mm, px 등

Relative : em, rem, vw, vh 등

Percentage : %

CSS에서 사용할 수 있는 여러 크기의 단위에 대해서 살펴보도록 하겠습니다.

단위는 고정크기단위와 가변크기단위로 나누어지며, 고정크기단위에는 px, pt, pc, cm, mm, in이 있고, 가변크기단위에는 em, ex, rem, %, vh, vw, vmin, vmax, eh, ch가 있습니다. 여기서는 자주 쓰이는 단위에 대서만 알아보도록 하겠습니다.

좀 더 세부적인 단위는 MDN의 공식문서를 참고해주세요.

CSS 값 과 단위 - Web 개발 학습하기 | MDN

CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다. CSS 사양과 MDN 의 속성 페이지에서 또는 . 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다.

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

1. 고정 크기 단위

고정 크기 단위

단위

설명

픽셀(화소)

포인트

인치

cm, mm

센티미터, 밀리미터

px은 고정크기단위로 CSS에서 많이 쓰이는 단위입니다. 가변크기단위와는 달리, 고정된 크기를 지원하기 때문에 글자크기의 변화가 용이합니다. 초기 기본 px의 크기는 16px입니다. 각 선택자에 대해 원하는 px값을 지정하면 아래와 같은 결과를 얻습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고정크기 단위</title>
    <style>
		h1 {
            font-size: 20px; 
        }
		p  { 
            font-size: 14px; 
        }
		div{ 
            font-size: 10px; 
        }
	</style>
</head>
<body>
    <h1>[ch5_ex1]CSS 크기단위에 대한 실습입니다.</h1>
		<p>CSS 크기단위 첫번째 px에 대한 실습 예제입니다.</p>
		<div>첫번째 실습은 px의 크기를 알아봅니다.</div>
</body>
</html>

[실행화면]

2. 가변 크기 단위

가변 크기 단위

단위

설명

배수 단위 (부모의 글자크기에 따라 기준점이 달라진다.)

백분율 단위

rem

root em (최상위 요소의 글자크기에 따라 달라진다.)

화면비 백분율 단위

vmin

화면비 최솟값

vmax

화면비 최댓값

현재 폰트의 x-height 값

em은 가변크기단위로 배수를 나타내는 단위입니다. 부모의 font-size에 따라 기준점을 세우며 기준점에 따라 크기가 달라집니다. 자세한 내용은 아래 코드를 참고해주시기 바랍니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>font</title>
    <style>
        body { font-size: 30px;  }
        div  { font-size: 0.8em; }
        p    { font-size: 1.2em; }
    </style>
</head>
<body>
    <!-- body의 크기인 30px을 따른다. -->
    em의 처음 크기는 30px 입니다.
    <div>
        <!-- 부모 body의 크기인 30px에 div의 크기인 0.8을 곱한다. -->
        <br>em의 크기는 30 * 0.8 = 24px 입니다.
        <div>
            <!-- 부모 body의 크기인 24px에 div의 크기인 0.8을 곱한다. -->
            <br>em의 크기는 24 * 0.8 = 19.2px 입니다.
            <div>
                <!-- 부모 div의 크기인 19.2px에 div 크기인 0.8을 곱한다. -->
                <br>em의 크기는 19.2 * 0.8 = 15.36px 입니다.
            </div>
        </div>
    </div>
    <!-- 부모 body의 크기인 30px에 p의 크기인 1.2을 곱한다. -->
    <p>p의 크기는 30 * 1.2 = 36px 입니다.</p>
</body>
</html>

[실행화면]

em에서의 값 1은 100%입니다. 즉, 부모의 px값을 30px로 지정하고, 그 아래 자식 div의 값에 0.8em을 지정하면 30px * 0.8 = 24px가 됩니다.

💡

(부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값

이를 보편화하면 위의 공식이 성립하게 됩니다. 가변크기단위이기 때문에 부모의 크기에 따라 자식의 크기 값이 달라집니다.

%는 가변크기단위로써 백분율을 나타내는 단위입니다. %도 기본 설정된 크기에서 상대적으로 크기를 지정합니다. 초기 설정된 크기는 100%입니다.

기본 px의 크기가 16px이라 했으니 폰트의 크기를 75%라 정할 경우,

16px * 0.75 = 12px가 된다. 자세한 내용은 아래 예제를 통해서 설명하도록 하겠습니다.


<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { font-size: 30px;  }
			div  { font-size: 50%; }
			p    { font-size: 110%; }
			</style>
</head>
<body>
		<!-- body의 크기인 30px을 따른다. -->
		%의 처음 크기는 30px 입니다.
		<div>
			<!-- 부모 body의 크기인 30px에 div의 크기인 0.5을 곱한다. -->
			<br>%의 크기는 30 * 0.5 = 15px 입니다.
		</div>
		<!-- 부모 body의 크기인 30px에 p 크기인 1.1을 곱한다. -->
		<p>p의 크기는 30 * 1.1 = 33px 입니다.</p>
</body>
</html>

[실행화면]

%에서의 값 100%은 1이다. 즉, 부모의 px값을 30px로 지정하고, 그 아래 자식 div의 값을 50%를 주게 되면 30px * 0.5 = 15px가 됩니다.

💡

부모의 크기 & (자식의 %값/100) = 자식이 가지게 될 px 값

이를 보편화하면 위의 공식이 성립하게 됩니다. em과 같이 가변크기단위이기 때문에 부모의 크기에 따라 자식의 크기 값이 달라지게 됩니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size: 10px;
        }
        .one{
            font-size: 32px;
        }
        .two{
            font-size: 2em;
        }
        .three{
            font-size: 2rem;
        }
        .four{
            width: 50%;
            height: 100px;
            background: red;
        }
        .five{
            width: 50vw; /*vh(높이), vw(넓이)*/
            height: 100px;
            background: aqua;
        }
        .six{
            width: 500px;
        }
    </style>
</head>
<body>
    <!-- font-size : 16px -->
    <div class="two">
        <!-- font-size : 32px -->
        <div class="two">
            <!-- font-size : 64px -->
            <div class="two">
                <!-- font-size : 128px -->
                hello
            </div>
        </div>
    </div>
    <!-- font-size : 16px -->
    <div class="two">
        <!-- font-size : 32px -->
        <div class="two">
            <!-- font-size : 64px -->
            <div class="three">
                <!-- font-size : 32px -->
                hello
            </div>
        </div>
    </div>
    <div class="six">
        <div class="four">hello</div>
    </div>
    <div class="four"></div>
    <div class="five">hello</div>
    <div class="six">
        <div class="five">hello</div>
    </div>
    <h2>고정 크기 단위</h2>
    <p>px</p>
    <h2>가변 크기 단위</h2>
    <p>em, rem, %, vw, vh</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size: 10px;
        }
        .one{
            font-size: 32px;
        }
        .two{
            font-size: 2em;
        }
        .three{
            font-size: 2rem;
        }
        .four{
            width: 50%;
            height: 100px;
            background: red;
        }
        .five{
            width: 50vw; /*vh(높이), vw(넓이)*/
            height: 100px;
            background: aqua;
        }
        .six{
            width: 500px;
        }
    </style>
</head>
<body>
    <!-- font-size : 16px -->
    <div class="two">
        <!-- font-size : 32px -->
        <div class="two">
            <!-- font-size : 64px -->
            <div class="two">
                <!-- font-size : 128px -->
                hello
            </div>
        </div>
    </div>
    <!-- font-size : 16px -->
    <div class="two">
        <!-- font-size : 32px -->
        <div class="two">
            <!-- font-size : 64px -->
            <div class="three">
                <!-- font-size : 32px -->
                hello
            </div>
        </div>
    </div>
    <div class="six">
        <div class="four">hello</div>
    </div>
    <div class="four"></div>
    <div class="five">hello</div>
    <div class="six">
        <div class="five">hello</div>
    </div>
    <h2>고정 크기 단위</h2>
    <p>px</p>
    <h2>가변 크기 단위</h2>
    <p>em, rem, %, vw, vh</p>
</body>
</html>

2. width, height

3. border, radius

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>

이번에는 radius를 보도록 하겠습니다. 보통은 radius: 50%로 4군데 모두 radius를 주기도 하는데, 이해를 돕기 위해 왼쪽 상단에만 부여해보도록 하겠습니다.

아래를 보면 50px에서 선이 꺾이는 것을 볼 수 있습니다. 이 속성을 사용해 모서리를 깎거나 도형을 만들기도 합니다.


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      div {
        width: 100px;
        height: 100px;
        background-color: darkgreen;
      }
      .one {
        border: 1px solid red;
        border-top-left-radius: 50px;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
  </body>
</html>

4. margin, padding

위 그림처럼 박스모델을 구성하는 속성들을 합해 BOX 속성 이라고 합니다. 이 속성들 중에서 width와 height 속성은 단어 그대로 가로와 세로의 길이를 의미합니다. margin과 padding은 여백의 크기를 의미하고, border는 테두리를 나타냅니다. 각 속성은 크기(사이즈)를 적어주고, 단위를 적어주면 됩니다. 자세한 설명은 아래 예제를 통해서 설명하겠습니다.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { font-size: 30px; }
			p:nth-child(1) { font-size: 100%;  }
			p:nth-child(2) { font-size: 0.5em; }
			p:nth-child(3) { font-size: 50%;   }
			div:nth-child(4) {
				width: 50%;
				height: 100px;
				background-color: #FFD9EC;
				font-size: 50%;
			}
			div:nth-child(5) {
				width: 30%;
				height: 150px;
				background-color: #E3C4FF;
				font-size: 50%;
			}
			</style>
		</head>
		<body>
				<!-- 각 p별 속성을 지정한다. -->
				<p>이 번 예제에서는 width와 height의 속성에 대해서 알아본다.</p> <!-- 첫번째 p의 속성을 따른다. -->
				<p>1. width는 가로의 길이다.</p> <!-- 두번째 p의 속성을 따른다. -->
				<p>2. height는 세로의 길이이다.</p> <!-- 세번째 p의 속성을 따른다. -->
			<div>
				<!-- 첫번째 div의 속성을 따른다. -->
				<br/><br/> 가로 width는 50%이고, 세로 height는 100%이다.
			</div>
			<div>
				<!-- 두번째 div의 속성을 따른다. -->
				<br/><br/> 가로 width는 30%이고, 세로 heigth는 150px이다.
			</div>
		</body>
</html>

[실행화면]

첫번째 div의 width와 height는 각각 50%와 100px 입니다. 두번째 div의 width와 height는 각각 30%와 150px 입니다. 첫번째 div의 가로보다 두번째 div의 가로가 더 작은 것을 볼 수 있습니다. 또한 첫번째 div의 세로보다 두번째 div의 세로가 더 길어진 것을 확인할 수 있습니다.

margin 과 padding 속성

padding : 본문 내용과 border 사이의 여백 border : 선 (선의 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음) margin : border와 바깥과의 여백

'P-B-M' 의 순서로 기억하면 좋습니다. padding은 요소의 테두리 안쪽과 콘텐츠 사이의 공간을 확보하는 반면에, margin은 요소의 테두리 외부에 투명한 공간을 확보합니다.

이때 margin영역은 padding영역과는 달리 background-color 속성으로 설정된 배경색의 영향을 받지 않고 항상 투명한 색을 유지합니다. 또한 margin과 padding 모두 -top(상단 여백), -right(오른쪽 여백), -bottom(하단 여백), -left(왼쪽 여백)의 방식으로 각 영역의 크기를 방향별로 따로 설정할 수 있습니다.

💡

자유롭게 크기를 조정하며 다양하게 실습해보세요!

1. 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>

** 마진 겹침 현상 (margin collapsing) **

마진 겹침 현상이란?

요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상


<div class="first"></div>
<div class="second"></div>


div{
  width:100px;
  height:100px;
  border:1px solid black;
}

.first{
   margin-bottom:30px; 
}

.second{
  margin-top:60px;
}

/* 마진 값이 높은 쪽의 마진만 적용됩니다. */

부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상


<div class="parent">
  <div class="child"></div>
</div>


.parent{
  background-color:yellow;
}
.child{
  width:100px;
  height:100px;
  margin-top:50px;
  background-color:red;
}

/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */

아래 그림처럼 .child 요소의 마진 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있습니다. 이런 현상을 해결하지 않는다면 여러분의 생각과 다른 UI가 구성될 가능성이 있습니다. 예를 들어 부모와 자식요소 모두에게 마진탑을 주고 싶은 경우 낮은 값의 마진 탑 값이 상쇄되어 버립니다.

이와 같은 현상을 해결하는 방법을 몇가지 소개해 드리겠습니다.

부모 요소에 overflow 속성 값을 적용해줍니다.

부모 요소에 display: inline-block 값을 적용해줍니다.

부모 요소에 border 값을 적용해줍니다.

이 세 가지 방법 중에 상황에 가장 알맞는 방법을 이용하시면 되겠습니다.

2. padding

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

padding

padding-top

padding-right

padding-bottom

padding-left

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

margin은 테두리 밖에 위치하며, 밖에 여백을 만들어줍니다. 각 면에 대한 값을 지정할 때는 margin-방향(top, right, bottom, left)을 사용합니다. 모든 방향을 한번에 바꾸고 싶다면 margin: 1px, 2px, 3px, 4px; 로 나타내면 top, right, bottom, left 방향 순으로 각 면에 대한 값이 바뀝니다.

hello world가 들어있는 사각형 박스를 그려보면서 margin과 padding에 대해 설명드리도록 하겠습니다.

margin - CSS: Cascading Style Sheets | MDN

네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0 auto; /* 전역 값 */ margin: inherit; margin: initial; margin: unset; margin 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/margin

padding - CSS: Cascading Style Sheets | MDN

padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/padding

5.overflow

overflow 속성은 요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할지 지정합니다. overflow-x, overflow-y의 축 별로 값을 설정할 수 있습니다.

아래 코드에서는 버튼안의 이미지가 버튼의 크기보다 더 큽니다.

<button> 스타일에 overflow:hidden 속성을 추가하면 버튼의 크기만큼 이미지를 잘라버립니다.

overflow 속성은 첫 번째 overflow-x, 두 번째 값은 overflow-y를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용하는 축약형이 됩니다.


button{
	/* x축은 숨기고, y축은 숨기지만 스크롤을 제공하여 잘린 나머지 부분을 확인 할 수 있게합니다. */
  overflow:hidden visible;
  width:100px;
  height:30px;
}

5.1 overflow 중요 속성

visible

overflow 속성의 기본 값입니다. 콘텐츠를 자르지 않습니다.

hidden

콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냅니다. 스크롤 바를 제공하지 않습니다.

scroll

콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냅니다. 잘려진 나머지 부분을 확인 할 수 있도록 스크롤 바를 제공합니다.

6. background

웹페이지에 이미지를 넣을 때 img 태그를 사용하는 방법과 CSS의 background 속성을 사용하는 방법 두 가지를 주로 사용합니다.

태그는 웹페이지의 컨텐츠이며 background 속성은 컨텐츠를 꾸미기 위한 용도로 많이 쓰입니다. background의 세부속성에는 아래와 같은 것이 있습니다.

크롬 개발자 도구를 사용하여 그냥 background를 사용했을 때와 일일이 지정해주었을 때의 차이를 보도록 하겠습니다.

1) background-image : url("이미지파일")

2) background-repeat

repeat

no-repeat

repeat-x

repeat-y

round

space

4) background-position

- CSS: Cascading Style Sheets | MDN

CSS는 다음 이미지 종류를 처리할 수 있습니다. 본질적인 크기(원래 크기)를 가진 이미지. JPEG, PNG 등 래스터 포맷. 여러 개의 본질적인 크기를 가진 이미지. 하나의 파일이 이미지의 여러 버전을 가지고 있는 경우. 일부 .ico 파일 등. 이 때, 본질적인 크기는 제일 크고 컨테이닝 박스와 가로세로 비율이 제일 비슷한 이미지를 따라갑니다.

https://developer.mozilla.org/ko/docs/Web/CSS/image


.home-header {
  background-image: url("apple.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보강설명</title>
    <style>
      div {
        width: 425px;
        height: 200px;
        margin: 20px;
        background-image: url("https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg");
        background-size: 100px auto;
        border: 4px solid black;
      }
      .repeat {
        /* 반복 */
        background-repeat: repeat;
      }
      .repeat-x {
        /* x축만 반복 */
        background-repeat: repeat-x;
      }
      .repeat-y {
        /* y축만 반복 */
        background-repeat: repeat-y;
      }
      .no-repeat {
        /* 반복 없음*/
        background-repeat: no-repeat;
      }
      .round {
        /* 이미지 짤리지 않게, 이미지 크기 변화를 줘서 간격 없이 반복*/
        background-repeat: round;
      }
      .space {
      /* 이미지 짤리지 않게 반복, 이미지 크기는 유지한채로 간격 없이 반복*/
        background-repeat: space;
      }
    </style>
</head>
<body>
    <div class="repeat"></div>
    <div class="repeat-x"></div>
    <div class="repeat-y"></div>
    <div class="no-repeat"></div>
    <div class="round"></div>
    <div class="space"></div>
</body>
</html>

7. font

font-family를 사용하면 CSS를 적용하여 글꼴을 변경할 수 있습니다. 이때 글꼴은 여러 개가 지정가능 한데 여러 개를 지정하는 이유는 해당 서체가 없을 경우 그 다음 글꼴이 차선책으로 사용되도록 해줍니다.

font-size를 사용하면 CSS를 적용하여 글꼴의 크기를 변경할 수 있습니다. 글꼴을 지정하는데 일반적인 방법 3가지는 px, %, em 단위들이 있습니다. px 단위는 가장 많이 표현되는 방법으로 지정된 숫자는 폰트의 높이가 됩니다. % 단위는 부모 요소의 폰트 크기가 기준이 되어 %로 크기를 지정해 줍니다. em 단위는 부모 요소에 있는 텍스트 크기를 기준으로 텍스트 크기를 변경합니다. W3C에서 권장하는 단위로 배수(2배, 3배, - n배)를 의미합니다.

font-weight은 텍스트를 굵은 글꼴로 표현할 수 있습니다. normal은 일반 스타일, bold는 텍스트를 굵게 지정합니다.

text-transform은 텍스트를 대문자나 소문자로 표현할 수 있습니다. uppercase는 대문자, lowercase는 소문자, capitalize는 각 단어의 첫 글자를 대문자로 지정 합니다.

font-style은 텍스트를 기울기 글꼴로 표현할 수 있습니다. normal은 일반 스타일, italic은 이탈릭체, oblique는 오블릭체로 지정합니다.

text-align은 텍스트의 정렬을 표현합니다. left는 왼쪽, right는 오른쪽, center는 가운데, justify는 마지막 줄을 제외하고 양쪽으로 정렬 합니다.

text-decoration은 밑줄 을 표현할 수 있습니다. none은 효과제거, underline은 밑줄추가, overli

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 : 부모 요소의 속성값을 상속받습니다.

2. 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>

font format

font format 이란 폰트를 구현하는 방법이며, 브라우저 별로 서로 다른 포맷을 지원하기 때문에 브라우저별 지원 정보를 알아 둘 필요가 있습니다.

eot : 마이크로소프트가 웹에서 사용하기 위해 제안한 글꼴 포맷입니다. IE 에서만 지원 가능합니다.

woff : 여러 회사들의 협업으로 제안된 포맷이며 가장 널리 사용되는 웹 글꼴 포맷입니다.

otf : 어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판입니다.

ttf : 애플과 마이크로소프트가 고안한 벡터 글꼴 포맷입니다. 대부분의 웹 브라우저에서 웹 글꼴로 TTF를 지원합니다.

svg : 벡터 데이터를 저장하는 SVG를 활용한 글꼴 표현입니다.

woff2 : WOFF 포맷을 개선해 30% 정도 더 작은 글꼴 파일로 압축할 수 있도록 했습니다. 폰트의 용량을 줄이는데 효과적입니다.

3. font-weight

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

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

bold - 굵은 굵기입니다.

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

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

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

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

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

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


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div {
      }
      .weight-normal {
        font-weight: normal;
      }
      .weight-bold {
        font-weight: bold;
      }
      .weight-100 {
        font-weight: 100;
      }
      .weight-900 {
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <div>
          <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>
    </div>
  </body>
</html>

google font

Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/

첫번째 방법


<--link-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">


body {
	font-family : 'Poppins', sans-serif;
}

두번째 방법


<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

body {
	font-family : 'Poppins', sans-serif;
}
</style>

google icon font

Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/icons


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<i class="far fa-file-"></i>

fontasome

Font Awesome

The world's most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

https://fontawesome.com/


// example
<i class="fas fa-bug"></i>

bootstrap font

bootstrap font는 영상 맨 마지막 부분에 넣어두었습니다.

Bootstrap Icons

Bootstrap Bootstrap Icons are published to npm, but they can also be manually downloaded if needed. Include the icon fonts stylesheet-in your website or via @import in CSS-from our CDN and get started in seconds. See icon font docs for examples.

https://icons.getbootstrap.com/


... 중략 ...

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css"
    />

... 중략 ...

    <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue"></i>

XEIcon

XEIcon, 문자를 그리다

XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.

https://xpressengine.github.io/XEIcon/

8. opacity

opacity는 요소의 투명도를 지정 할 수 있습니다. 이때 투명도가 들어간 요소 안의 내용물도 함께 투 명해집니다. 값은 0.0 과 1.0 사이의 숫자를 지정할 수 있으며 만약 값이 0.5라면 투명도는 50%라고 할 수 있습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>opacity</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: pink;
        }
        
        .box-opacity1 {
            position: absolute;
            top: 0;
            opacity: 0.8;
        }

        .box-opacity2 {
            position: absolute;
            top:100px;
            opacity: 0.5;
        }

        .box-opacity3 {
            position: absolute;
            top:200px;
            opacity: 0.2;
        }
    </style>
</head>
<body>
    <h1>h<br>e<br>l<br>l<br>o</h1>
    <div class="box box-opacity1"></div>
    <div class="box box-opacity2"></div>
    <div class="box box-opacity3"></div>
</body>
</html>

9. color

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

HTML에서 색상 이름, RGB값, HEX값으로 색상을 지정할 수 있습니다. HTML 색상표 페이지에서(https://html-color-codes.info/Korean/) 여러 색상 값을 확인하실 수 있습니다.

1. 색상 이름

브라우저는 140 가지 색상 이름을 지원합니다. 다른 표현방식에 비해 수가 제한적입니다. MDN 문서에서도 확인 가능합니다. 색상 이름 말고도 다양 방법으로 color를 표현할 수 있습니다.

※ 참고 - https://www.w3schools.com/colors/colors_names.asp

- CSS: Cascading Style Sheets | MDN

자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다. 참고: 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 색상 프로필 을 지원하지 않기 때문입니다. 색상 키워드는 대소문자를 구분하지 않는 식별자로, red, blue, black, lightseagreen 처럼 특정 색을 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/CSS/color_value

color - CSS: Cascading Style Sheets | MDN

color CSS 속성은 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/color

2. RGB값

빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)를 혼합하여 색을 나타내는 방식.

RGB 값은 0 ~ 255의 값으로 표현됩니다.


<head>
  <title>Color-RGB</title>
  <style>
    .box {width: 200px; height: 100px;
    background-color: RGB(102, 205,170)}
  </style>
</head>
<body>
  <div class="box">box</div>
</body>

[실행화면]

3. HEX 값(16진수)

HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식입니다. 6자리 코드는 각각 2자리씩 빨간색, 녹색, 파란색에 대한 값을 표현합니다. 예를 들어 빨간색은 #FF0000, 보라색은 #800080으로 표현됩니다.


<head>
  <title>Color-HEX</title>
  <style>
    .box {width: 200px; height: 100px;
    background-color: #F08080; }
  </style>
</head>
<body>
  <div class="box">box</div>
</body>

실행화면

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) 글을 참고 바랍니다.

6. declarations

1. 단위

1. 고정 크기 단위

2. 가변 크기 단위

2. width, height

3. border, radius

4. margin, padding

1. margin

2. padding

5.overflow

5.1 overflow 중요 속성

6. background

7. font

1. Font-size

2. font-family

추천 웹 폰트 사이트

추천 웹 폰트

font format

3. font-weight

google font

google icon font

fontasome

bootstrap font

XEIcon

8. opacity

9. color

1. 색상 이름

2. RGB값

3. HEX 값(16진수)