[CSS] CSS의 모든 것 - (2) Padding, Height, Width, Box Model, Outline, Text, Fonts, Icons

• CSS Padding
• CSS Height and Width
• CSS Box Model
• CSS Outline
• CSS Text
• CSS Fonts
• CSS Icons

CSS Padding

Padding은 테두리안에 정의된 요소의 콘텐츠 주위에 간격(공간)을 만드는데 사용한다.

 

CSS에서 Padding은 네가지 속성이 있다.

• padding-top
• padding-right
• padding-bottom
• padding-left

속성의 값을 표현하는 방법은 세가지가 있다.

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

속성을 아래와 같이 한번에 작성할 수 있다.

위, 오른쪽, 아래, 왼쪽 순

div {
  padding: 25px 50px 75px 100px;
}

 

CSS의 width 속성은 element의 content 영역의 너비를 지정한다. 

그러나 content 영역은 margin, border, padding 영역의 안에 포함되어 있다.

그래서 width를 지정하더라도, padding 속성이 추가된다면, 요소의 총 너비가 추가된다. 

출처 :  https://www.w3schools.com/css/css_boxmodel.asp

 

예시로 이해해보자. 두개의 div 모두 300px의 너비를 가진다. 하지만 결과를 보면 두개의 너비가 다르게 나타난다.

이유는 class가 'ex2'인 div의 경우, 25px의 padding이 적용되었기 때문에, 양옆과 위아래에 각각 25px씩 추가되어 보여지는 것이다. (300px + 25px of left padding + 25px of right padding ==> 총 350px)

div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}

 

이러한 상황을 방지하려면 어떻게 해야할까?

box-sizing 속성을 사용하면 된다. box-sizing 속성을 사용하면, 요소의 너비를 유지할 수 있다. 

만약 padding 속성이 추가된다면, 너비를 유지하면서 content의 공간을 줄인다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

 

 

---

>CSS Height and Width

height과 width 속성의 요소의 높이와 너비를 지정하는데 사용된다.

height와 widht는 padding, border, margin을 포함하지 않는다. 이 속성은 요소의 padding, border, margin 안 공간의 높이와 너비를 설정한다.

 

height와 width의 값은 아래와 같이 설정할 수 있다.

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

 

max-width 속성은 요소의 최대 너비를 지정하는데 사용된다. 

요소의 너비 값이 max-width로 지정한 값보다 커지는 것을 방지한다. 즉, max-width는 width의 속성값을 무효화한다.

예를 들어, 가로 너비가 500px일때, max-width:400px;로 설정하면, 항상 400px이하로만 이미지가 보인다.

---

>CSS Box Model

CSS에서 Box Model은 디자인과 레이아웃을 이야기 할때 사용한다.

Box Model은 기본적으로 모든 HTML 요소를 감싸는 상자이다. Margin, Border, Padding, Content로 구성된다.

 

출처 :  https://www.w3schools.com/css/css_boxmodel.asp

 

모든 브라우저에서 정확하게 요소의 너비와 높이를 설정하기 위해선, 이 Box model을 정확하게 이해해야 한다.

CSS에서 요소의 width와 height을 정의하면, 그저 content 영역의 높이와 너비만을 설정한 것이다. 

요소의 모든 사이즈를 계산하기 위해선, 반드시 padding, border, margin도 포함해야한다.

 

예를 들어, 너비가 350px인 사진이 있을때, div 요소도 350px로 맞추고자 한다고 하자.

이때 단순히 div의 width만 350px로만 맞추면 생각과는 다른 결과가 나올 것이다.

 

아래 사진은 div의 width만 350px로 설정하였을 때의 결과이다. 동일하게 350px이지만 크기가 다른 것을 볼 수 있다.

width만 350px로 한 결과

정확하게 우리가 원하는 결과를 나타내려면, padding, margin, border 또한 고려하여 스타일을 적용하여야한다.

 

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
 
 . . .
 
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

이렇게 한다면, 아래와 같은 결과이다.

width, padding, border, margin을 적용한 결과

---

>CSS Outline

Outline은 요소의 테두리(border) 밖에 그려지는 선이다.

Outline은 아래와 같은 요소가 있다.

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

출처 : https://www.w3schools.com/css/css_outline.asp

Outline의 스타일은 다음과 같다.

• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline
• ridge - Defines a 3D ridged outline
• inset - Defines a 3D inset outline
• outset - Defines a 3D outset outline
• none - Defines no outline
• hidden - Defines a hidden outline

출처 :  https://www.w3schools.com/css/css_outline.asp

 

속성을 각각 지정해주어도 되고, 아래와 같이 한번에 설정할 수 있다. 

p.ex3 {outline: 5px solid yellow;}

아래의 세가지 속성을 적용할 수 있다.

• outline-width
• outline-style (required)
• outline-color 

Outline Offset

outline-offset 속성은 outline과 요소의 엣지, 테두리 사이의 공간을 추가한다. 요소와 outline 사이는 투명하다.

 

예시를 살펴보자.

<p>태그의 배경색이 노란색으로 설정되어있지만, 요소와 outline 사이의 공간은 색이 적용되지 않음을 확인할 수 있다.

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

---

>CSS Text   

Color

Color 속성은 텍스트의 색을 설정하는 속성이다.

 

Text Alignment

text-align 속성은 텍스트를 정렬할때 상요된다.

왼쪽, 오른쪽, 중앙, 양쪽 맞춤 정렬이 가능하다.

 

vertical-align 속성을 통해, 수직으로 텍스트를 정렬하는 것도 가능하다.

위, 아래, 중앙 정렬이 가능하다.

 

Text Decoration

text-decoration 속성은 텍스트를 꾸미거나 꾸민 것을 제거할 때 사용된다.

text-decoratoin:none; 은 링크 아래 생기는 밑줄을 제거하는데 자주 쓰인다.

 

none이외에도, overline, line-through, underline 등의 속성으로 텍스트를 꾸밀 수 있다.

 

Text Transformation

text-transform 속성은 텍스트의 대소문자를 설정하는 데 사용된다.

이를 사용해 모든 글자를 대문자 혹은 소문자로 바꿀 수 있다.

 

Text Spacing

text-indent 속성은 들여쓰기의 간격을 설정할 때 사용한다.

letter-spacing 속성은 글자 사이의 간격을 조절하는 데 사용된다.

line-height 속성은 줄 간격을 조절하는 데 사용된다.

word-spacing 속성은 단어 사이의 간격을 조절하는 데 사용된다.

white-space 속성은 공백의 간격을 조절하는 데 사용된다.

 

Text Shadow

text-shadow 속성은 텍스트에 그림자를 추가할 때 사용된다. 

h1 {
  text-shadow: 2px 2px;
}

 

---

>CSS Fonts

적절한 폰트를 선택하는 것은 사용자들이 웹 사이트를 경험하는 방식에 큰 영향을 미친다. 

읽기 쉬운 폰트를 사용하는 것은 중요하다. 적절한 색과 크기를 정하는 것도 중요하다.

 

CSS의 Generic Font Family

Serif

Sans-serif

Monospace

Cursive

Fantasy

 

Serif와 Sans-serif 폰트의 차이점

Serif와 Sans-serif 폰트의 차이점

폰트는 font-family 속성을 이용하여 설정할 수 있다.

font-family 속성은 브라우저나 운영체제 간 최대의 호환성을 보장하기 위해, 글꼴을 사용할 수 없는 경우 사용할 대체 글꼴을 가져야한다. 원하는 글꼴로 시작하고, 그 글꼴을 사용할 수 없는 경우 Generic 글꼴을 사용한다. 글꼴들은 coma(,)를 통해 구분되어야 한다.

 

.p1 {
  font-family: "Times New Roman", Times, serif;
}

 

Web Safe Font

Web Safe Font는 모든 브라우저와 모든 기기에 포함되어 있는 폰트이다.

 

하지만 사실 100프로 완전한 web safe 폰트는 존재하지 않는다. 언제나 폰트를 찾을 수 없거나, 사용할 수 없는 경우가 존재할 수 있다. 따라서, 이러한 상황에서 대신 사용할 대체 폰트를 설정해두는 것이 중요하다.

 

폰트를 설정할때, 사용하길 원하는 폰트를 앞에 쓰고, 대체 폰트를 다음에 적어둔다. 항상 그 목록의 마지막 폰트는 generic 폰트의 이름 중 하나를 사용해야 한다.

 

HTML CSS에서 가장 Web Safe한 폰트들의 목록은 아래와 같다.

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Font Style

font-style 속성은 이탤릭체를 사용할때 주로 사용한다. 이 속성이 사용할 수 있는 값은 normal, italic, oblique이 있다.

(oblique는 이텔릭체와 매우 유사하지만, 지원되는 경우가 많지 않다.)

 

font-weight 속성은 폰트를 강조할때 사용된다. (볼드체) normal, bold 두가지 값을 사용할 수 있다.

 

font-variant 속성은 small-caps 폰트는 모든 소문자가 대문자로 변환된다. 변환된 대문자는 일반(원래) 대문자 보다 작은 크기로 나타난다.

small-caps 폰트

Google Fonts

구글에서 무료로 1000여가지의 폰트를 사용할 수 있다.

사용 방법은 아래와 같다.

 

<head> 태그 안의 <link> 태그에 폰트의 주소를 연결하면 된다.

아래의 예시는 Goolge font 중 "Sofia"라는 태그를 사용하는 코드이다.

 

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<style>
body {
	font-family: "Sofia", sans-serif;
}    
</style>
</head>

여러개의 구글 폰트를 사용하고 싶다면 '|'를 이용하여 구분하면된다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">

 

구글에는 폰트 뿐 아니라, 폰트에 사용할 수 있는 효과들도 제공한다.

effect=effectname 의 형식으로 사용하면 된다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">

 

 Font Pairing 규칙

1. Compliment

서로를 보완하는 폰트 쌍을 찾는 것이 안전하다. 서로 조화를 이루는 폰트를 찾는 것이 중요하다.

 

2. Use Font Superfamilies

폰트 superfamily는 함께 잘 동작하도록 디자인된 폰트 세트이다. 그렇기 때문에 동일한  fontfamily 내의 다른 글꼴을 사용하는 것이 안전하다.

 

3. Contrast is King

너무 유사한 폰트를 사용하면 종종 충돌이 발생한다. 하지만 올바른 방법으로 이루어진 대비는 서로의 폰트에 최상의 결과를 가져다 준다.

 

 

예시

Georgia and Verdana

 

Font Property

• font-style
• font-variant
• font-weight
• font-size/line-height (required)
• font-family (required)

---

 

>CSS Icons

Icon 을 추가하는 방법

HTML 페이지에 아이콘을 추가하는 가장 쉬운 방법은 'Font Awesome'과 같은 아이콘 라이브러리를 사용하는 것이다.

HTML element에 인라인 방식으로 아이콘의 클래스 이름을 적어주면 된다.

 

아이콘 라이브러리들을 몇가지 소개한다.

Font Awesom Icons

fontawesome.com에서 회원가입을 하면 코드를 얻을 수 있다. 그 후 <head>에 코드를 넣어주면 된다.

<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>

result

Bootstrap Icons

부트스트랩의 아이콘을 사용하기 위해선, <head>에 아래와 같은 코드를 추가한다.

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>

result

Google Icons

 

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>

result

 

Icon에 대해 더 자세한 내용은 Icon Tutorial.

 

 

 

---

이 글은 w3school을 참고하여 작성하였습니다.