02-BEM 방법론과 자주 사용하는 속성

1. BEM 이란?

Block, Element, Modifier의 약어로 block__element--modifier 규칙으로 클래스명을 정한다.

각각의 모듈의 단어가 두 단어 이상일 경우 -으로 구분한다. 즉, block-name__element-name--modifier-name 이런 식으로!

Block : 어떤 목적으로 사용하는가를 담아야 한다.
Element : Block을 구성하면서 Block 외부에서 독립적으로 사용할 수 없는 것을 의미한다.
Modifier
- 형태, 상태, 움직임에 관해 지정할 때 사용한다.
- 독립적이지 않고 block과 element에서 변경된 사항이 있을 경우 사용한다.

2. reset CSS

https://meyerweb.com/eric/tools/css/reset/

CSS를 다루기 전 리셋하는 걸 추천한다. 브라우저별 기본적으로 들어가는 스타일이 다르므로, 해당 스타일들을 공통적으로 맞추고 시작하는 것이 좋다.

3. Google Fonts

구글 폰트를 사용하면 기본 폰트를 공통적으로 맞출 수 있으니 사용하는 것을 추천한다.

HTML 파일에 노출하지 않고 CSS 파일만 수정하면 되는 @import 방식을 추천한다.

4. CSS 변수 : var()

CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었습니다. CSS 사용자 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다.

4.1 CSS 변수 정의

CSS 변수가 CSS 사용자 속성이라고 불리는 이유는 CSS 일반 속성과 동일한 문법으로 정의가 가능하기 때문입니다. 기존의 CSS 일반 속성과 눈에 뛰는 차이점이라면 CSS 사용자 속성은 이름이 --로 시작해야 한다는 것입니다.

예를 들어, 아래 --color 속성은 우리가 새롭게 정의한 속성이며, CSS에 기존에 내장되어 있는 color 속성과는 다른 속성입니다.

1.ex {
2  --color: red;
3  color: blue;
4}

글자색을 지정해주는 color 속성과 달리 --color 속성은 그 존재만으로는 아무런 스타일 효과를 내지 못합니다.

4.2 CSS 변수 접근 var()

CSS 변수가 스타일하는데 사용되려면 읽어서 일반 CSS 속성에 설정을 해야 합니다. CSS 변수값을 읽으려면 var() 함수를 사용합니다. 예를 들어, 다음과 같이 --gray 속성에 저장된 CSS 변수값을 읽어서 background 속성에 할당할 수 있습니다.

1.ex {
2  --gray: #ccc;
3  background: var(--gray);
4}

4.3 CSS 변수 기본값

var() 함수는 두번째 인자로 기본값을 받는데요. CSS 변수에 접근할 때 해당 CSS 변수가 이미 정의되어 있는지 확실치 않는 경우에 활용할 수 있습니다.

1.ex {
2  color: var(--color, black);
3}

위 스타일 정의는 --color 변수가 정의가 되어 있는 경우에는 그 변수값이 color 속성으로 사용되고, 그렇지 않는 경우에는 black이 대신 color 속성값으로 지정됩니다.

4.4 CSS 전역 변수 :root

CSS 변수는 웹사이트에 일관적으로 스타일하기 위해서 많이 사용됩니다. 대표적으로, 웹사이트에서 사용 가능한 모든 색상을 CSS 전역 변수로 정의해놓고, 웹사이트에서 사용되는 색상을 제약하는 경우를 들 수 있습니다.

CSS 변수를 최상위 엘리먼트에 정의해놓으면 마치 전역 변수처럼 DOM 트리 내에서 어디에서든지 CSS 변수에 접근할 수 있습니다. 보통 :root, html, body 선택자를 이용해서 CSS 전역 변수를 정의합니다.

1:root {
2  --color-success: #23d160;
3  --color-error: #f14668;
4}

이렇게 정의한 CSS 변수는 해당 웹사이트의 어떤 엘리먼트에서든지 var() 함수로 접근하여 스타일할 때 사용할 수 있습니다.

4.5 사용 예시

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>CSS 변수</title>
8    <style>
9      :root {
10        --color-success: #21723d;
11        --color-error: #f14668;
12      }
13      li.success a {
14        color: var(--color-success);
15      }
16      li.error a {
17        color: var(--color-error);
18      }
19    </style>
20  </head>
21
22  <body>
23    <ul>
24      <li class="success">
25        <a href="#">성공</a>
26      </li>
27      <li class="error">
28        <a href="#">오류</a>
29      </li>
30    </ul>
31  </body>
32</html>

5. color

CSS의 스타일 속성 중에서 색상을 값으로 사용하는 속성이 여러 개 있습니다.

5.1 키워드 표기법

키워드 표기법은 색상의 영문명을 속성값으로 사용하는 방법입니다. CSS에서 사용할 수 있는 색상 키워드의 종류는 150여 개 이상입니다. VSCode에서 속성값 자동 완성 기능으로 사용 가능한 키워드 색상을 보여 주기 때문에 색상을 모두 외울 필요는 없습니다.

W3C - CSS 사용가능한 키워드 표기법

5.2 RGB 색상 표기법

RGB 색상 표기법에서 RGB는 Red, Green, Blue를 의미하는데, 빨간색, 초록색, 파란색을 이용해 특정 색을 표현하는 방법입니다. 여기에 추가로 색의 투명도를 의미하는 알파(alpha) 값을 사용할 수도 있습니다.

CSS_2_1

RGB 값을 256개 숫자(0~255)로 표기합니다.
- 가장 낮은 색 값은 0이고 높은 색 값은 255입니다.
알파 값은 0.1처럼 0부터 1 사이의 소수점으로 표기합니다.
- 이때 앞의 정수 부분 0은 생략할 수 있어서 .1로 표기해도 됩니다.

1h1 {
2  color: rgb(255, 0, 0); /* 빨간색 */
3}
4h2 {
5  color: rgba(0, 255, 0, 0.5); /* 0.5의 투명도를 가진 초록색 */
6}

5.3 HEX 표기법

HEX 표기법은 Red, Green, Blue에 해당하는 값을 각각 16진수로 변환해 00~ff로 나타내는 표기법입니다. 16진수 표기법이라고도 하며, 실무에서 가장 많이 사용하는 색상 표기법입니다.

HEX 표기법은 앞에 #을 붙이는 것이 특징입니다.

00이 가장 낮은 값이고 ff가 가장 높은 값이어서 #ff0000은 빨간색, #00ff00은 초록색, #0000ff는 파란색을 의미
R, G, B에 해당하는 16진수가 같다면 줄여서 표기 가능
- e.g.) #ff0000은 #f00으로, #335533은 #353으로 표기 가능

색상 표기법에는 HLS 표기법도 있습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>다양한 색상값 표현법</title>
8    <style>
9      h1 {
10        color: red;
11      }
12      h2 {
13        color: rgb(0, 255, 0);
14      }
15      h3 {
16        color: rgba(0, 0, 255, 0.5);
17      }
18      h4 {
19        color: #ff0000;
20      }
21    </style>
22  </head>
23  <body>
24    <h1>키워드 표현법</h1>
25    <h2>rgb 표현법</h2>
26    <h3>rgba 표현법</h3>
27    <h4>16진수 표현법</h4>
28  </body>
29</html>

6. 글자

1선택자 {
2  font-weight: bold;
3  font-size: 22px;
4  font-family: 'Noto Sans KR', sans-serif;
5  color: var(--main-color);
6  line-height: 100px;
7  text-align: center;
8  letter-spacing: 1px;
9}

font-weight : 글자 굵기
font-size : 글자 크기
font-family : 글자 모양
color: 글자 색상
text-align : 정렬
letter-spacing : 자간
- 자간은 글자 사이의 간격을 말하며, 속성값으로 normal 또는 크기를 넣을 수 있음

6.1 행간

line-height: 줄 간격, 행간

웹페이지에 텍스트를 쓰게되면 위아래에 임의의 공간이 발생합니다.
이를 정식 명칭으로 리딩(leading) 영역이라고 합니다.
리딩 영역이 자동으로 생기는 이유는 여러 줄의 텍스트가 생성되었을 떄,
글자와 글자 사이에 간격을 주어 가독성을 높이기 위함입니다.

line-height의 높이를 임의적으로 조절하고 싶을 떄,
line-height 속성을 사용하면 됩니다. 참고로 폰트 글꼴의 디자이너가 임의로 만든 공간은 CSS로 제어가 불가능합니다.
line-height로 크기를 정할 떄는, px단위보다는 em단위를 사용하는 것을 권장합니다.
왜냐하면 화면이 줄었을 떄, px단위로 지정하면 글자들이 겹쳐서 보이게 될 수 있기 때문입니다.

7. 크기를 나타내는 단위

폰트 크기를 나타내는 단위는 굉장히 많습니다. em, px, rem 정도만 알아도 충분합니다.

MDN CSS 값과 단위

CSS 속성은 다양한 단위의 값을 사용할 수 있는데, 단위는 절대 단위와 상대 단위로 나뉩니다.

절대 단위는 어떤 환경이라도 동일한 크기로 보이는 단위를 말하고,
상대 단위는 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위를 말합니다.

7.1 절대 단위, px(픽셀)

절대 단위는 px(pixel) 한 가지로, 모니터의 화면을 구성하는 사각형 1개의 크기를 의미합니다. CSS에서 사용할 수 있는 크기 단위 중 가장 기본입니다. 웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산되어 계산됩니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>px</title>
8    <style>
9      /* 화면(브라우저)의 너비가 크든, 줄어들든 텍스트이 크기는 고정적임 */
10      div {
11        font-size: 32px;
12      }
13      p {
14        font-size: 20px;
15      }
16    </style>
17  </head>
18
19  <body>
20    <div>
21      hello, PX!
22      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
23    </div>
24  </body>
25</html>

7.2 상대 단위

CSS에서 자주 사용하는 상대 단위는 다음과 같습니다.

단위	설명
`%`	해당 속성의 상위 요소 속성값에 상대적인 크기를 가집니다.
`em`	부모 요소의 텍스트 크기에 상대적인 크기를 가집니다.
`rem`	html 태그의 텍스트 크기에 상대적인 크기를 가집니다.
`vw`	뷰포트의 너비를 기준으로 상대적인 크기를 가집니다.
`vh`	뷰포트의 높이를 기준으로 상대적인 크기를 가집니다.

각 단위의 사용법은 font-size 속성을 예시로 설명하겠습니다. font-size 속성은 텍스트 크기를 지정하는 속성입니다.

7.2.1 %

% 단위는 부모 요소의 속성값에 따라 상대적인 크기를 가집니다. 그래서 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힙니다.

1.parent {
2  font-size: 16px;
3}
4.child {
5  /* 부모 요소 font-size 속성값의 80%에 해당하는 크기로 설정 */
6  font-size: 80%; /* 16px(부모 font-size 크기) * 0.8 = 12.8px */
7}
8.child-to-child {
9  font-size: 80%; /* 12.8px(부모 font-size 크기) * 0.8 = 10.24px */
10}

7.2.2 em

부모 태그의 현재 폰트크기에 영향을 받는 상대적인 크기를 의미합니다. em을 배우기 전 사전지식이 필요합니다. 보통의 HTML 태그는 브라우저의 기본 스타일 시트 또는 외부 CSS에 의해서 폰트 크기에 영향을 받지 않는다고 가정한다면, HTML 태그의 기본 폰트 크기는 16px입니다.

em 단위는 부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기를 가집니다. % 단위는 사용되는 속성에 따라 기준이 달라지지만, em 단위는 오로지 텍스트 크기를 기준으로 삼습니다. 만약 값을 2em으로 지정했다면 자식 요소의 크기는 부모 요소의 font-size 속성값의 2배가 됩니다.

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 2em; /* 16px(부모 font-size 크기) * 2em = 32px */
6}
7.child-to-child {
8  font-size: 2em; /* 32px(부모 font-size 크기) * 2em = 64px */
9}

7.2.3 rem

rem은 root em의 약자로, em처럼 부모 태그의 폰트 크기에 의해서 상대적으로 결정되는 단위이긴 하지만 em과 결정적인 차이점은 부모 태그가 아니라 root(최상단), 즉 최상단 태그인 html태그의 폰트 크기에만 영향을 받는다는 게 다릅니다.

rem 단위는 html 태그의 텍스트 크기에 대한 상대적인 값으로, 1rem은 html 태그의 텍스트 크기의 1배입니다. 현대적인 웹 브라우저는 모두 html 태그의 텍스트 크기가 16px이라서 1rem은 16px과 같습니다.

1html {
2  font-size: 1rem; /* 현대적인 웹 브라우저는 모두 html 태그의 기본 텍스트 크기가 16px⭐ */
3}
4.parent {
5  font-size: 1rem; /* 16px * 1rem = 16px */
6}
7.child {
8  font-size: 2rem; /* 16px * 2rem = 32px */
9}

7.2.4 vw

vw 단위는 뷰포트 너비를 기준으로 상대적인 크기를 가집니다. 뷰포트는 간단히 말해 코드가 보이는 대상이라고 생각하면 됩니다. 따라서 웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 됩니다. 1vw는 뷰포트 너비의 1/100 크기를 의미합니다.

1/* 기준 뷰포트 너비 900px */
2.parent {
3  font-size: 1vw; /* 900px * 1/100 = 9px */
4}
5.child {
6  font-size: 2vw; /* 900px * 2/100 = 18px */
7}

7.2.5 vh

vh 단위는 뷰포트 높이를 기준으로 상대적인 크기를 말하며, 1vh는 뷰포트 높이의 1/100 크기를 의미합니다.

1/* 기준 뷰포트 높이 400px */
2.parent {
3  font-size: 1vh; /* 400px * 1/100 = 4px */
4}
5.child {
6  font-size: 2vh; /* 400px * 2/100 = 8px */
7}

8. 글꼴 및 구글 웹 폰트

8.1 font-family 속성

font-family 속성을 사용하면 글꼴을 지정할 수 있습니다. 우리가 사용할 수 있는 폰트는 2가지가 있습니다.

시스템 기본 폰트 : 시스템에서 기본으로 사용할 수 있는 기본 폰트
- 별도의 폰트 파일 필요없음
제작된 폰트 : 별도의 폰트 파일 필요함

우선 시스템 기본 폰트를 알아보겠습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>font-family</title>
8    <style>
9      p {
10        /* 여러 글꼴을 쉼표로 구분해 나열하면 맨 앞에 작성한 글꼴부터 적용 가능 여부를 판단 */
11        font-family: BatangChe, 'Times New Roman', serif;
12        /* 시스템 기본 폰트는 글꼴명만 작성 */
13        /* 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰따옴표("")로 */
14      }
15    </style>
16  </head>
17
18  <body>
19    <p>font-family</p>
20  </body>
21</html>

font-family 속성으로 명시한 글꼴을 불러오지 못할 경우를 대비해 다음과 같이 불러오려고 한 글꼴과 가장 유사한 형태의 글꼴 유형을 마지막에 항상 지정해야 합니다. 그러면 지정한 글꼴을 불러오지 못하더라도 텍스트가 유사한 형태로 보여져 사용자가 웹 사이트에서 느끼는 경험을 최대한 일정하게 유지할 수 있습니다. 사용할 수 있는 글꼴 유형은 표와 같습니다.

글꼴 유형	설명
serif	삐침이 있는 명조 계열의 글꼴
sans-serif	삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
monospace	텍스트 폭과 간격이 일정한 글꼴
fantasy	화려한 글꼴
cursive	손으로 쓴 것 같은 필기체 계열의 글꼴

8.2 제작된 폰트

웹 페이지에 표시되는 텍스트의 폰트를 변경하고자 할 떄는 font-family를 사용할 수 있습니다. 우리가 사용할 수 있는 폰트는 크게 2가지로 구분할 수 있습니다.

시스템 기본 폰트
- 시스템에서 기본으로 사용할 수 있는 기본 폰트
- 별도의 폰트 파일이 필요없음
제작된 폰트
- 별도의 폰트 파일이 필요함

예를 들어, 네이버에서 제공하는 ‘나눔 고딕’ 폰트를 적용시키기 위해 다음과 같이 작성했다고 가정해봅시다. ‘나눔 고딕’은 네이버에서 별보로 제작된 폰트이기 떄문에 시스템에서 기본으로 지원되지 않습니다.

1font-family : 'Nanum Gothic;, sans-serif;

만약 내 사이트에 방문한 사용자의 접속 기기에 ‘나눔 고딕’ 글꼴이 설치되어져 있다면 상관없지만, 만약 설치가 되어져 있지 않다면, 아무리 font-family 속성으로 ‘나눔 고딕’을 적용했다고 하더라도 그 사용자는 접속 기기에 나눔 글꼴이 없기 때문에 해당 사이트를 나눔글꼴로 이용할 수 없습니다.

그래서 보통 제작된 폰트를 사용할 떄는 내가 지정한 폰트를 직접 사이트에 업로드해서 사이트를 접속한 사용자의 접속 환경에 해당 폰트가 없더라도 내가 업로드한 폰트를 참조하게 해서 보이도록 처리를 해야합니다.

폰트 파일을 직접 업로드하는 방법
웹 폰트를 이용하는 방법

8.2.1 폰트 파일을 직접 업로드

원하는 폰트를 다운로드받고 assets/fonts안에 집어넣습니다.

https://hangeul.naver.com/font

1project명
2┝ index.html
3┝ style.css
4┝ assets/fonts

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Font File</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
12  </body>
13</html>

1/* style.css */
2@font-face {
3  font-family: 'MyWebFont';
4  src: url('./assets/font/NanumGothic-Regular'); /* IE9 Compat Modes */
5  src:
6    url('./assets/font/NanumGothic-Regular?#iefix') format('embedded-opentype'),
7    url('./assets/font/NanumGothic-Regular.woff2') format('woff2'),
8    url('./assets/font/NanumGothic-Regular.woff') format('woff'),
9    url('./assets/font/NanumGothic-Regular.ttf') format('truetype'),
10    url('./assets/font/NanumGothic-Regular.svg#svgFontName') format('svg');
11}
12
13p {
14  font-family: 'MyWebFont';
15}

8.2.2 웹 폰트를 이용

먼저 많이 사용되는 구글 Web Font에 가서 원하는 폰트의 링크를 가져옵니다. 여기서는 Poppins폰트를 적용합니다.

https://fonts.google.com/specimen/Poppins?query=poppins

1<link rel="preconnect" href="https://fonts.googleapis.com" />
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
8    <title>Google Web Font</title>
9    <link rel="preconnect" href="https://fonts.googleapis.com" />
10    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
12    <link rel="stylesheet" href="style.css" />
13  </head>
14
15  <body>
16    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
17  </body>
18</html>

1/* style.css */
2p {
3  font-family: 'Poppins', sans-serif;
4}

만약 import 방식으로 적용하고 싶은 경우에는 다음과 같이 적용합니다.

1/* style.css */
2@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3
4p {
5  font-family: 'Poppins', sans-serif;
6}

9. 박스 모델

1선택자 {
2  width: 200px;
3  height: 200px;
4  margin: 50px auto;
5  padding: 30px;
6  border: 1px solid var(--default-color);
7  box-sizing: border-box;
8}

width는 너비, height은 높이
margin은 바깥 여백 (외부 여백)
padding은 안쪽 여백 (내부 여백)
- 헷갈리면 겨울에 입는 패딩(내부 충전재)라고 생각하면 됨
border는 테두리 (경계선)
box-sizing은 박스 크기를 어디를 기준으로 할 것인지 지정

9.1 박스의 성질

모든 HTML 요소는 각각의 박스 모델을 가지고 있습니다.

블록 레벨 박스(block-level box)
- 웹 브라우저의 가로 한 줄을 전부 차지하는 박스 형태
- e.g.) h1, p, div
인라인 레벨 박스(lnline-level box)
- 태그 요소의 콘텐츠 영역 만큼만 차지하는 박스 형태
- e.g.) a, span

display 속성을 사용하면 태그가 가지고 있는 박스 모델의 성격을 다른 것으로 변경할 수 있습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>display</title>
8    <style>
9      h1,
10      p {
11        /* inline | block | inline-block */
12        display: inline; /* 인라인 레벨로 변경 */
13        background-color: red;
14      }
15      a,
16      span {
17        /* inline | block | inline-block */
18        display: block; /* 블록 레벨로 변경 */
19        background-color: red;
20      }
21    </style>
22  </head>
23
24  <body>
25    <!-- 블록 레벨 박스(block-level box) | h1, p -->
26    <h1>h1 tag</h1>
27    <p>p tag</p>
28    <!-- 인라인(lnline-level box) | a, span -->
29    <a href="#">a tag</a>
30    <span>span tag</span>
31  </body>
32</html>

lnline-block는 기본적으로 lnline 성격을 가지면서, block 레벨도 혼합되어 있는 상태입니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>display</title>
8    <style>
9      h1,
10      p {
11        /* inline | block | inline-block */
12        display: inline-block; /* 인라인-블록 레벨으로 변경 */
13        background-color: red;
14      }
15      a,
16      span {
17        display: block;
18        background-color: red;
19      }
20    </style>
21  </head>
22
23  <body>
24    <!-- 블록 레벨 박스(block-level box) | h1, p -->
25    <h1>h1 tag</h1>
26    <p>p tag</p>
27    <!-- 인라인(lnline-level box) | a, span -->
28    <a href="#">a tag</a>
29    <span>span tag</span>
30  </body>
31</html>

9.2 object-fit, border-radius

1선택자 {
2  background-color: var(--main-color);
3  object-fit: cover;
4  border-radius: 50%;
5}

그 외에

background-color는 배경색을 지정할 수 있고,
object-fit을 사용하면 이미지를 특정 크기로 채울 수 있고,
border-radius를 50%로 하면 사각형을 원으로 바꿀 수 있다.

9.1 margin 겹침 현상

margin 영역을 다루다 보면 흔하게 겪는 일 중 하나가 바로 margin 겹침 현상(margin collapse)입니다. margin 겹침 현상은 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것을 말합니다. 어떤 두 요소가 있는데 첫 번째 요소에는 margin 값이 아래쪽에 20px이 적용됐고, 두 번째 요소에는 margin 값이 위쪽으로 30px이 적용됐다고 가정해 보겠습니다. 이를 그림으로 표현하면 다음과 같습니다.

두 요소 사이의 간격은 20px과 30px을 합한 50px이 될 것 같지만, 실제로는 30px이 적용됩니다. 이러한 현상이 바로 margin 겹침 현상입니다. 이는 같은 레벨(형제 관계)에 있는 요소들의 margin 영역이 중첩되면 더 큰 값을 가진 margin 영역으로 병합되어 출력되는 현상입니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>margin collpase</title>
8    <style>
9      .first {
10        margin-bottom: 20px;
11      }
12      .second {
13        margin-top: 30px;
14      }
15    </style>
16  </head>
17  <body>
18    <p class="first">lorem1</p>
19    <p class="second">lorem2</p>
20  </body>
21</html>

코드를 개발자 도구로 확인해보면, 속성값이 더 큰, 아래 요소의 값이 적용되어 두 요소 사이의 간격은 30px이 됨을 확인할 수 있습니다.

10. 그림자 효과 주기

HTMl 요소가 가지고 있는 박스에 그림자 효과를 주기 위해 사용하는 속성은 box-shadow입니다.

box-shadow: [x-pos] [y-pos] [blur] [spread] [color] inset
- x-pos : 그림자의 가로 위치
  - 양수면 오른쪽, 음수면 왼쪽에 생성됩니다.
- y-pos : 그림자의 세로 위치
  - 양수면 아래쪽, 음수면 위쪽에 생성됩니다.
- blur : 번짐(=흐림) 정도
- spread : 퍼짐 정도
- inset : 그림자가 요소 내부에 생기게 할 떄 사용

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>box-shadow</title>
8    <style>
9      div {
10        /* box-shadow: [x-pos] [y-pos] [blur] [spread] [color] inset */
11        width: 100px;
12        height: 100px;
13        background-color: gray;
14        /* box-shadow: 10px 10px 8px 4px black; */
15        /* box-shadow: -10px -10px 8px 4px black; */
16        box-shadow: 10px 10px 0px 0px black inset;
17      }
18    </style>
19  </head>
20
21  <body>
22    <div></div>
23  </body>
24</html>

11. 배경 이미지

11.1 background-image 배경 이미지

HTML 요소의 배경에 색상이 아니라 이미지를 지정할 때, 사용하는 속성은 background-image입니다.

배경이미지는 배경색상보다 우선순위로 높게 처리됩니다.
e.g.) background-color:yellow; background-image:url(…) 두 가지 값이 적용되었다면, yellow가 아닌 url()이 먼저 나타납니다.

1background-image : url(상대경로)
2background-image : url(절대경로)
3
4/* 배경이미지 2개 이상 연결하기 */
5background-image : url(경로), url(경로)

11.2 background-repeat 배경 이미지 반복

기본 값은 repeat(반복)으로 주로 사용하는 값은 no-repeat 이며 결과형태에 따라 반복 종류가 정해집니다.

1background-repeat: repeat; /* 반복 */
2background-repeat: no-repeat; /* 반복x */
3background-repeat: repeat-x; /* x축으로만 반복 */
4background-repeat: repeat-y; /* y축으로만 반복 */
5
6/* 배경이미지가 2장 이상이상일 경우 개별속성 */
7background-repeat: repeat-x, repeat;

11.3 background-attachment 배경 이미지 고정

스크롤 이동 시 배경 이미지가 같이 움직일 지 고정될 지 설정합니다.

1background-attachment: fixed; /* 고정 */
2background-attachment: scroll; /* 스크롤 */
3
4/* 배경이미지가 2장 이상이상일 경우 개별속성 */
5background-attachment: scroll, fixed;

11.4 background-size 배경 이미지 크기

배경이미지 연결 시 원본 크기가 기본으로 나타납니다.
배경이미지 삽입 위치와 크기에 따른 값을 설정해야할 때 (아래) 값을 사용합니다.

1background-size: contain; /* 이미지를 자리지 않는 선에서 크게 설정 */
2background-size: 100%; /* 이미지의 가로 너비100% 설정 */
3background-size: cover; /* 이미지의 가로세로비를 비교하여 빈공간이 생기지 않도록 크게 설정 */
4background-size: 1400px; /* 강제 크기 입력(가로 세로 동시입력) */
5background-size: 1400px 200px; /* 강제 크기 입력(가로 세로 개별 입력) */
6
7/* 배경이미지가 2장 이상이상일 경우 개별속성 */
8background-size: 100%, cover;

11.5 background-position 배경 이미지 위치

기본 위치는 왼쪽 상단 값으로 위치(left right top bottom center), 값(0%~100%, px)등을 사용합니다.

1background-position: left top;
2background-position: right bottom;
3background-position: center;
4background-position: center top;
5background-position: 50% 30%;
6background-position: 50%;
7background-position: 100px 0;
8background-position: 100px;
9
10/*배경이미지가 2장 이상이상일 경우 개별속성*/
11background-position:
12  left top,
13  center bottom;

11.6 background 배경 통합 속성

색상, 이미지, 반복, 고정, 위치 순서로 작성해야 합니다.
필요에 따라 원하는 값만 골라서 작성할 수 있습니다. e.g.) 색상, 이미지, 위치
웹 브라우저 지원여부에 따라 attachment는 인식 못하는 경우도 있으므로 별도로 작성하는 것이 좋습니다.

1/* background: color image repeat attachment position */
2background: red url(..) repeat fixed left top;
3background: url(...) scroll right bottom;
4background: red center;

11.7 예시

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>배경 이미지</title>
8  </head>
9  <style>
10    /* background-color : url('이미지 경로') */
11    /* 크기보다 작은 이미지  사용 시 좌우로 반복되어서 채워짐 */
12    div {
13      width: 480px;
14      height: 250px;
15      background-color: gray;
16      background-image: url('./images/pancake.jpg');
17      /* repeat-x (x축으로만 반복) | repeat-y (y축으로만 반복) | no-repeat (반복x) */
18      background-repeat: no-repeat; /* 이미지가 크기만큼 반복되어지지 않음 */
19      /* 이미지의 비율을 고려하지 않기 때문에 이미지가 깨질 수 있음 */
20      background-size: 100% 100%; /* 이미지의 크기를 가로 100%, 세로 100%만큼 채움 */
21    }
22  </style>
23  <body>
24    <div></div>
25  </body>
26</html>

11.8 contain, cover

이미지의 크기를 똑같은 것을 준비하는 것이 가장 좋지만, 그것이 안된다면 contain과 cover라는 값을 사용하면 됩니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>배경 이미지</title>
8  </head>
9  <style>
10    div {
11      width: 480px;
12      height: 250px;
13      background-color: gray;
14      background-image: url('./images/pancake.jpg');
15      background-repeat: no-repeat;
16      /* 📝 cover : HTML 요소의 크기를 가득 채울만큼 비율을 유지한채로 늘림 */
17      /* 📝 contain :  HTML 요소의 한쪽 크기만큼 비율을 유지한 채로 늘려서 채움 */
18      background-size: cover;
19      /* 그렇지만 cover를 사용하면 이미지가 잘림 */
20      /* 배경 이미지의 기준점을 변경, 기본값은 왼쪽 맨위(0, 0) */
21      background-position: center, center; /* 기준점을 이미지의 정중앙으로 변경 */
22    }
23  </style>
24  <body>
25    <div></div>
26  </body>
27</html>

12. 이미지 맵(image map)

이미지 맵(image map)은 쇼핑몰 프로모션에서 주로 사용하는 기능으로 여러개의 구역으로 나누어 링크를 거는것을 말합니다.

map 태그 내부에 이미지맵 영역을 설정할 area 태그를 추가로 입력합니다.

shape = rect(사각형) circle(원형) poly(다각형) 3가지 중 하나의 선택영역 모양을 설정합니다.
coords = 시작점x 시작점y 끝점x 끝점y 순서로 선택영역의 기준점 좌표를 설정합니다.
href = 이동되는 외부 링크 주소를 입력합니다.(절대경로/상대경로)
alt = 이미지맵의 설명문을 작성합니다.(바로가기 링크에 해당하는 정보)
target = 클릭 시 이동되는 인터넷 창을 설정합니다. _blank(새창)

1<img src="이미지경로" alt="" usemap="#이미지맵" />
2<map name="이미지맵">
3  <area shape="" coords="코드붙여넣기위치" href="" alt="" target="" />
4</map>

coords 작성 시 아래 사이트를 이용하시면 됩니다.

http://maschek.hu/imagemap/imgmap/

01-선택자-CSS Diner 1~32 03-Position, Float 레이아웃