<오늘부터 CSS 마스터 6일차> icon

카테고리 CSS

Icons

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

icon 클래스 이름을 i 태그나 span 태그에 inline 형태로 추가하라.

라이브러리 속 모든 아이콘은 CSS(크기, 색상, 그림자 등)로 사용자 정의할 수 있는 확장 가능한 벡터이다.

아래 예시에서는 Font Awesome 라이브러리를 예시로 들었지만, Bootstrap Icons, Google Icons 비슷하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <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>
</html>

icons

댓글 공유

<오늘부터 CSS 마스터 5일차> text와 font

카테고리 CSS

text

CSS는 많은 텍스트 속성을 가지고 있다.

❗️ 여기서 중요한 것은 text의 색상과 배경색의 대비이다. 이는 시각적인 문제에 있어 매우 중요하므로 대비를 고려하여 스타일링 해야한다.

text-alignment

text-align

text-align 속성은 text의 가로 정렬을 위해 사용된다.

1
2
3
p {
  text-align: center; // 가운데 정렬
}

vertical-align

vertical-align 속성은 요소의 세로 정렬을 위해 사용된다.

1
2
3
img {
  vertical-align: text-top; // 텍스트 기준보다 위쪽으로 이미지요소 배치
}

text-decoration

text-decoration 속성은 text에 라인을 추가한다.

❗️ 다만, underline 속성은 a 태그와 헷갈릴 수 있으니 유의하도록 하자.

Tip

a 태그는 기본값으로 underline 속성이다. 이것을 제거하고 싶다면 다음과 같이 한다.

1
2
3
a {
  text-decoration: none;
}

text-transform

텍스트의 소문자, 대문자를 지정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

text-spacing

text-indent

첫줄의 들여쓰기 너비를 지정하는 속성이다.

1
2
3
p {
  text-indent: 50px;
}

letter-spacing

글자 간격을 설정하는 속성이다.

1
2
3
4
5
6
7
h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

line-height

라인 사이의 공백을 설정하는데 사용된다.

1
2
3
4
5
6
7
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

text-shadow

글자의 그림자를 설정하는 속성이다.

1
2
3
h1 {
  text-shadow: 2px 2px 5px red;
}

첫번째부터 가로길이, 세로길이, blur, 색상이다.

shadow

1
2
3
4
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

여러가지 그림자를 설정할 수도 있다.

font

🔥 font 선택은 매우 중요하다!

왜냐하면 폰트를 적절히 선택하면, 웹사이트 브랜드와 가독성에 큰 영향을 줄 수 있기 때문이다.

computer 화면에서는 sans-serif 폰트가 serif 폰트보다 더 가독성이 좋다.

font-family

font-family 속성의 이름이 한 단어 이상이면, 따옴표로 감싸줘야한다.

1
2
3
4
5
6
7
8
9
10
11
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

모든 브라우저와 장치에 범용적으로 설치된 웹 폰트가 있다. 하지만 100% 모든 곳에 지원하는 웹 폰트는 없기 때문에 fallback 폰트를 지정해줘야한다.

위 예시에서도 첫번째 폰트가 없으면 다음 폰트를 보여주는 방식으로 fallback 폰트를 지정해줬다.

주로 사용되는 웹 폰트는 다음 5가지이다.

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

font-style과 font-weight

font-style은 italic 텍스트를 사용할 때 설정한다.

1
2
3
4
5
6
7
8
9
10
11
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-weight 속성은 font의 두께를 설정한다.

1
2
3
4
5
6
7
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

font-size

폰트 사이즈를 설정하는 속성이다. 절대크기이거나 상대크기 일 수 있다.

❗️ 주의사항

폰트 사이즈를 사용하여 제목을 단락처럼 보이게 하거나 단락을 제목처럼 보이게하면 안된다. 제목은 h1 ~ h6, 단락은 p 태그와 같이 적절한 태그를 사용해야한다.

절대 크기

  • 정확한 크기를 설정한다.
  • 사용자가 글자 크기를 모든 브라우저에서 변경하는 것을 허락하지 않는다.(좋지 않는 접근성 이유 때문에)
  • 절대 크기는 결과물의 물리적인 크기가 알려져있을 때 유용하다.

상대 크기

  • 주변 요소의 상대적인 크기를 설정한다.
  • 브라우저에서 사용자가 글자 크기를 변경할 수 있도록 허락한다.

font-size를 em으로 설정하라.

브라우저 메뉴에서 사용자가 글자를 재설정하는 것을 허락하기위해 pixel 대신 em을 사용한다.

1em은 현재 폰트 크기와 동일하다. 브라우저에서 기본 폰트 사이즈는 16px이다. 즉, 1em = 16px

pixel / 16 = em 이라는 공식으로 계산할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

%와 em의 조합하여 사용하기

모든 브라우저에 작동하는 해결책은 body 태그의 기본 폰트 크기를 %로 설정하는 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Google fonts

만약 HTML에서 기본적으로 제공하는 폰트가 싫다면 Google font를 사용해라.

Google fonts 사용법

1
2
3
4
5
6
7
8
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />
  <style>
    body {
      font-family: "Sofia", sans-serif;
    }
  </style>
</head>

여러 폰트 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"
  />
  <style>
    h1.a {
      font-family: "Audiowide", sans-serif;
    }
    h1.b {
      font-family: "Sofia", sans-serif;
    }
    h1.c {
      font-family: "Trirong", serif;
    }
  </style>
</head>

| 로 구분하여 사용할 수 있다.

font 효과 적용하기

구글 폰트는 기본적으로 font 효과를 제공한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"
  />
  <style>
    body {
      font-family: "Sofia", sans-serif;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1 class="font-effect-fire">Sofia on Fire</h1>
</body>

fonteffect

댓글 공유

<오늘부터 CSS 마스터 4일차> outline

카테고리 CSS

outline 이란?

outline은 요소의 border 바깥쪽에 그려지는 선이다.

outline

outline은 border와 다르다! border와 달리 outline은 요소의 border 외부에 그려지고 다른 content와 오버랩될 수 있다. 또한 요소의 너비와 높이에 영향을 주지 않는다.

속성

1
2
3
4
5
outline-style
outline-color
outline-width
outline-offset
outline /* shorthand */

다른 속성은 이미 다뤄봤으니 outline-offset 속성에 대해 알아보자

outline-offset

outline-offset은 outline과 border 사이의 공간을 추가하는 속성이다. 이 공간은 투명하다.

1
2
3
4
5
6
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

outline

댓글 공유

<오늘부터 CSS 마스터 3일차> Box model

카테고리 CSS

CSS Box model

CSS Box model은 모든 HTML 요소를 감싸는 박스이다.

  • content: 텍스트, 이미지가 나타날 박스
  • padding: 컨텐츠 주변의 투명한 공간
  • border: padding과 content 사이의 테두리
  • margin: border 바깥의 투명한 공간
1
2
3
4
5
6
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

❗️ 주의사항

box model의 width, height를 설정하면, 이것은 content 부분의 width, height를 설정한 것이다.

전체 사이즈를 계산하기 위해서는 padding, border, margin을 모두 더해줘야한다.

1
2
3
4
5
6
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

요소의 총 width = width + left padding + right padding + left border + right border + left margin + right margin

요소의 총 height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

요소의 총 width는 350px이다.

width와 height

width와 heigth로 올 수 있는 값은 다음과 같다.

  • auto: 기본값으로, 브라우저가 width와 height를 계산한다.
  • length: px, cm 등등
  • %: containing block의 퍼센트
  • initial: 기본값으로 설정
  • inherit: 부모 값으로 부터 상속 받은 값

max와 min

max와 min은 length 값으로 설정할 수 있다.

ex) px, cm, containing block의 %

1
2
3
4
5
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

위

는 브라우저 width가 500px보다 작아지면 수평으로 스크롤이 생겨난다.

스크롤을 해결하기 위해서는 max-width를 사용하면 가능하다.

1
2
3
4
5
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

max-width와 width를 같은 요소에 사용할 때, width 속성이 max-width 속성보다 큰 경우 max-width 속성이 사용된다.

box-sizing

만약, padding 값에 상관없이 width를 설정한 값을 content 그대로 사용하고 싶다면 box-sizing 속성을 설정한다.

1
2
3
4
5
div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

위 코드는 padding 값이 어떻든 content의 width는 300px로 설정된다.

margin

margin으로 가로로 가운데 정렬

margin을 사용하면 컨테이너 내부의 요소를 수평으로 가운데에 위치하도록 설정할 수 있다.

1
2
3
4
5
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

margin collpase

두개의 margin이 하나처럼 동작할 때가 있다.

1
2
3
4
5
6
7
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

h1의 bottom margin이 50px이고 h2의 top margin이 20px이다.

h1 아래에 h2가 위치해 있을 때, 예상대로라면 h1과 h2 사이에는 70px이라고 예상되지만 margin-collpase 현상으로 인해 둘 중 큰 margin만 적용된다.

이는 오직 top, bottom에서만 발생한다. left, right margin에서는 발생하지 않는다.

border

margin과 padding과 달리 border는 style과 width, color를 설정할 수 있다.

또한 원하는 방향에 각각 스타일링을 해줄 수 있다.

1
2
3
p {
  border-left: 6px solid red;
}

1
2
3
p {
  border-bottom: 6px solid red;
}

테두리 둥글게

1
2
3
4
p {
  border: 2px solid red;
  border-radius: 5px;
}

댓글 공유

<오늘부터 CSS 마스터 2일차> CSS background

카테고리 CSS

CSS background

1
2
3
4
5
6
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

background-color

컬러는 다음 3가지 값만 가능하다.

  1. 유효한 컬러이름 ex) ‘red’, ‘green’ …
  2. HEX 값 ex) ‘#ff0000’
  3. RGB 값 ex) ‘rgb(255,0,0)’
1
2
3
4
5
6
7
8
div {
  background-color: green;
  opacity: 0.3;
}

div {
  background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
}

opacity 속성을 줘서 배경을 흐리게 할 수 있다.

❗️opacity 속성을 사용하게 될 경우 자식 요소까지 흐려지므로 가독성이 떨어질 수도 있다.

background-image

기본값으로 image는 반복되어서 전체 요소를 덮어준다.

신기한 것은 p 태그에도 해당 속성을 설정할 수 있다는 점이다.

1
2
3
p {
  background-image: url("paper.gif");
}

repeat, position 속성

image를 가로, 세로 반복되게 설정하는 속성이다.

position은 요소내에서 image의 위치를 설정한다.

1
2
3
4
5
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: bottom;
}

해당 배경 이미지를 아래에 위치시킨다.

background-attachment

1
2
3
4
5
6
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

fixed로 설정하면 position fixed 처럼 배경이미지가 스크롤 하여도 해당 위치에 고정되어 있다.

scroll로 설정하면 다른 페이지를 보려고 스크롤 할 때, 배경도 스크롤된다.

단축표현

1
2
3
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

한줄로 쓸 수 있는데, 순서는 다음과 같다.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

댓글 공유

<오늘부터 CSS 마스터 1일차> CSS 란?

카테고리 CSS

공부 목표

<오늘부터 CSS 마스터> 챕터를 시작하게 된 이유는 평소 리액트로 상태관리에 대해서만 생각하다보니 CSS로 화면을 스타일링 하는 것이 쉽게 나오지 않게 되었다.

그래서 이를 개선하고자 매일 CSS 공부를 한개씩 익혀가도록 목표를 세웠습니다!

공부는 W3Cschool) 사이트를 참조하면서 공부를 하거나 Youtube 강의를 보고 배울 수 도 있으며, 간단한 웹 사이트 스타일링을 클론해보는 방향으로 진행할 것입니다.

CSS란?

  • CSS는 Cascading Style sheet를 의미한다.

말 그대로 폭포처럼 떨어져 내리는 스타일시트이다.

  • CSS는 HTML 요소가 화면에 어떻게 나타날지를 묘사한다.

CSS를 왜 사용하나요?

CSS는 디자인, 레이아웃, 변화등을 포함한 웹 페이지의 스타일을 다른 기기와 화면 크기에 따라 정의하기 위해 사용한다.

CSS는 큰 문제를 해결한다!

HTML은 웹 페이지를 구성하기 위해 태그를 포함하도록 의도된 적이 없다!

나 색상 속성이 HTML 3.2에 추가되었을 때, 모든 페이지에 글꼴과 색상을 추가하는 것은 매우 비용이 많이 드는 작업이 되었다.

그래서 W3C가 CSS를 만들어 냈고 HTML 페이지에서 스타일 형식을 제거하였다.

CSS 문법

CSS 문법

CSS 선택자

CSS 선택자는 스타일링하고 싶은 HTML 요소를 선택한다.

총 5가지의 항목이 있다.

  1. 간단한 선택자
    • name, id, class 기반으로 요소 선택하기
  2. 조합 선택자
    • 둘 사이의 특정한 관계를 기반으로 요소 선택하기
  3. Pseudo-class 선택자
    • 특정 상태를 기반으로 요소 선택하기
  4. Pseudo-element 선택자
    • 요소의 일부분을 스타일링하고 선택하기
  5. Attribute 선택자
    • attribute나 attribute 값을 기반으로 요소 선택하기

center class를 포함한 p태그 선택자

1
2
3
4
p.center {
  text-align: center;
  color: red;
}

❗️ p태그와 .center 사이에 띄어쓰기가 있으면 안된다!

* 전체 선택자

1
2
3
4
* {
  text-align: center;
  color: blue;
}

Group 선택자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

/* 같은 스타일이라면 쉼표로 구분하여 한줄로 작성 가능 */
h1,
p {
  text-align: center;
  color: red;
}

CSS 추가하는 방법 3가지

  1. 외부 CSS
  2. 내부 CSS
  3. inline CSS

다중 CSS 우선순위

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <style>
      h1 {
        color: orange;
      }
    </style>
  </head>
</html>

만약 mystyle.css에서 h1을 blue로 하였더라도 CSS는 가장 나중에 읽은 CSS를 적용하기 때문에 h1의 color는 orange가 될 것이다.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: orange;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
  </head>
</html>

만약 mystyle.css가 더 아래에 있어서 나중에 읽힌다면 h1은 mystyle.css에서 정의한 스타일로 적용될 것이다.

Cascading 우선순위

  1. inline style
  2. 태그에 있는 외부 CSS와 내부 CSS
  3. 브라우저 기본

댓글 공유

Copyrights © 2023 loco9939. All Rights Reserved.

loco9939

author.bio


author.job