✨netlify

• 정적인 웹 사이트 호스팅
  https://app.netlify.com/teams/kbomi16/overview

✨whatwg

• HTML 표준 문서
  https://whatwg.org/

💻HTML+CSS

📘CSS gradient

https://cssgradient.io/

📘크기 단위

✔️절대적

• 픽셀
  화면을 표시하는 기준이 되는 가장 작은 정사각형

✔️상대적

• %
  부모 태그에 대해 상대적 크기
  부모의 크기만 바꾸면 됨
• em
  부모 태그의 크기를 기준을 정함
• rem
  최상위 태그의 크기를 기준으로 정함

✨css 속성

📘배경 이미지 background-image

url(...)

background-image: url('flowers.png');

참고로 배경 이미지는 여러 개 넣을 수 있다.

아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png가 깔리고, 맨 밑에는 c.png가 깔린다.

background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');

📘배경의 위치 background-position

기본값은 left top(왼쪽 위)이고, 가운데 정렬은 center

background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;

📘배경의 반복 background-repeat

기본값은 repeat(반복)이고, no-repeat으로 하면 반복되지 않게 할 수 있다.

background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */

📘배경의 크기 background-size

직접 가로 세로 크기를 지정할 수도 있고, 비율을 유지하면서 영역에 꽉 차게(cover)하거나, 영역 안에서 최대한 크게(contain)할 수도 있다.

background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

📘그라디언트 linear-gradient()

기본적으로 시작 색상과 종료 색상으로 사용할 수 있다.

 background-image: linear-gradient(#000000, #ffffff);

기본 방향의 각도는 180. (위에서 아래로 내려오는 방향)
각도의 단위는 deg

background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

📘그림자 box-shadow

가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/

📘불투명도 opacity

요소 전체의 불투명도를 조절할 때 사용. 0에서 1 사이의 소수 값으로 단위 없이 쓰면 됨.

opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */

white-space: nowrap; → 줄바꿈 X

✨박스 모델(Box Model)

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5632&directory=margin-padding-summary-00.png&name=margin-padding-summary-00.png

팁 1. 타원 만들기

border-radius: 50%;

팁 2. 알약 만들기

border-radius: 9999px;

📘 box-sizing속성

기본적으로 요소에 크기를 지정하면 그 크기는 박스 모델에서 콘텐트 영역에 대한 크기다. #box 요소의 실제 너비는 100 + 30 + 30 = 160

#box {
  margin: 20px;
  padding: 30px;
  width: 100px;
}

box-sizing 속성을 border-box를 사용

#box {
  margin: 20px;
  padding: 30px;
  width: 100px;
  box-sizing: border-box;
}

이렇게 하면 테두리까지 모두 합친 영역의 크기가 100px

📘 overflow 속성

예시 1. 넘치는 것 감추기

overflow: hidden;

예시 2. 넘치면 스크롤 하게 만들기

overflow: auto;

예시 3. 항상 스크롤 하게 만들기

overflow: scroll;

📘마진 상쇄 (Margin Collapsing)

일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다. 서로 이웃한 태그에서는 세로로 마진을 겹쳐서 적용하고, 부모 자식 관계인 태그에서도 세로로 마진을 겹쳐서 적용한다. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다.

예시 1. 서로 이웃한 태그

#a와 #b의 마진을 겹치면 둘 사이의 마진은 30px

<div id="a">a</div>
<div id="b">b</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

예시 2. 부모자식 태그

#b와 #c는 부모 자식 관계.

#b에는 따로 경계가 없으니까 둘의 마진을 겹쳐서 위쪽 마진은 40px

#a와 #b 사이의 마진은 40px

<div id="a">
  a
</div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

✨블록(Block)

위에서 아래로

크기를 지정할 수 있다.

• <h1>, <h2>, …, <h6>
• <p>
• <div>

✨인라인(Inline)

글을 쓰는 방향으로 줄이 바뀌면서 배치된다.

블록과 달리 크기를 지정할 수 없다.

• <a>
• <br>
• <img>
• <span>

참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있습니다.

✨인라인 블록 (Inline-block)

인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용

📘float 속성

✨✨블록, 인라인 블록, 인라인 비교

	블록	인라인 블록	인라인
기본 크기	좌우로 꽉 참	콘텐트에 딱 맞게	콘텐트에 딱 맞게
배치	위에서 아래로	글 쓰는 방향	글 쓰는 방향
width 와 height	O	O	X
margin 과 padding	O	O	▵인라인 진행 방향(=가로)만 제대로 사용 가능

✨CSS 선택자(CSS Selector)

📘선택자 목록

콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용

선택자1,
선택자2 {
  ...
}

📘선택자 붙여 쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있다.

<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2>

예시 1. 아이디 + 클래스

#mongolia.title

예시 2. 클래스 + 클래스

.large.title

예시 3. 태그 + 아이디 + 클래스

h2#mongolia.large.title

📘자식 결합자 (Child Combinator)

• 자식 결합자는 바로 아래에 있는 자식 요소를 선택
• 꺾쇠로 선택자

<div class="article">
  <img src="tesla-y-2025.png">
  ...
</div>

.article > img {
  width: 100%;
}
article의 직계 자식 img 모두 선택

📘자손 결합자 (Descendant Combinator)

• 부모 요소 아래에 있는 모든 자손 요소를 선택
• 스페이스(띄어쓰기)로 선택자

<div class="article">
    <p> 이번에 리뷰해 볼 차량은 테슬라 모델 W 입니다.
      <img src="tesla-w-2025.png">
  </p>
  ...
</div>

.article img {
  width: 100%;
}
article 아래에 있는 img 모두 선택

✨가상 클래스 (Pseudo-class)

:hover(마우스를 올렸을 때),

:active(클릭한 상태),

:visited(방문한 적이 있는 링크),

:focus(포커싱 됐을 때)

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

📘전체 선택자 (Universal Selector)

• *라는 선택자는 모든 요소를 선택하는 선택자

모든 요소를 선택하기

* {
  box-sizing: border-box;
}

📘n번째 자식 선택자(n-th child Selector)

• :nth-child()를 사용.
• 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있다.
• 1부터 시작

.gallery의 세 번째 자식

.gallery :nth-child(3) { ... }

.gallery의 짝수 번째 자식

.gallery :nth-child(even) { ... }

.gallery :nth-child(2n) { ... }

.gallery 의 홀수 번째 자식

.gallery :nth-child(odd) { ... }

.gallery :nth-child(2n+1) { ... }

특히 첫 번째 자식, 마지막 자식은 아래처럼 선택

.gallery :first-child { ... }

.gallery :last-child { ... }

⚠️선택자 참고

📘모든 곳에서 border-box를 쓰고 싶을 때

* {
  box-sizing: border-box;
}

📘같은 클래스지만 변화를 주고 싶을 때

<div class="menu">
  <a class="menu-link" href="/">메인</a>
  <a class="menu-link selected">소개</a>
  <a class="menu-link" href="/blog">글</a>
</div>

📘클래스를 넣어 줄 태그가 너무 많을 때

자손 조합자는 적용해야 할 태그가 너무 많아서, 일일이 적용하기 어려울 때 쓰면 좋다.

<div class="info">
  부엉이는
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EB%AA%A9" title="올빼미목">올빼미목</a>
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EA%B3%BC" title="올빼미과">올빼미과</a>의
  <a href="/wiki/%ED%95%9C%EA%B5%AD" title="한국">한국</a>에 서식하는
  <a href="/wiki/%EB%A7%B9%EA%B8%88%EB%A5%98" title="맹금류">맹금류</a> 중
  <a href="/wiki/%EC%86%94%EB%B6%80%EC%97%89%EC%9D%B4" title="솔부엉이">솔부엉이</a>,
  <a href="/wiki/%EC%88%98%EB%A6%AC%EB%B6%80%EC%97%89%EC%9D%B4" title="수리부엉이">수리부엉이</a>,
  <a href="/wiki/%EC%B9%A1%EB%B6%80%EC%97%89%EC%9D%B4" title="칡부엉이">칡부엉이</a>,
  <a href="/wiki/%EC%87%A0%EB%B6%80%EC%97%89%EC%9D%B4" title="쇠부엉이">쇠부엉이</a> 등을 통틀어 이르는 통칭이다.
  <a href="/wiki/%EA%B7%80%EA%B9%83" title="귀깃">귀깃</a>(우각)의 차이로
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8" title="올빼미">올빼미</a>와
  구분한다고도 하지만 솔부엉이와 쇠부엉이는 귀깃이 없기 때문에 이는 정확한 구분법은 아니다.
  주로 밤에 활동하는 야행성이다.
</div>

.info a {
  color: #379379;
  text-decoration: none;
}

📘가로 마진을 일정하게 하고 싶을 때

예를 들어서 아래 3개의 chip에 가로 마진을 24px로 주면 chip들 사이의 가로 마진은 24 + 24해서 48px이 된다.

이럴 때는 margin-left(왼쪽 마진), margin-right(오른쪽 마진)라는 속성과 함께 :fist-child나 :last-child를 활용하면 좋다.

<span class="chip">섬</span>
<span class="chip">해변</span>
<span class="chip">오두막</span>

.chip {
  background-color: #dedede;
  text-align: center;
  display: inline-block;
  width: 100px;
  padding: 16px;
  margin-right: 24px;
  border-radius: 9999px;
}

.chip:first-child {
  margin-left: 24px;
}

✨캐스케이드(Cascade)

• 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것.
• 우선순위가 높은 규칙일수록 우선적으로 속성을 적용한다.

📘스타일 시트의 종류

브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮다.

📘코드 상의 순서

코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높다.

📘명시도

• 선택자마다 명시도 점수가 있다.
• 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교한다. 예를 들어서 아래 코드에서 a.order는 0 1 1 이지만 a#info는 1 0 1이기 때문에 명시도는 a#info가 더 높다.

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
  ...
}

a#info { /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
  ...
}

✨상속

• 부모 태그에 적용된 CSS 규칙은 자손에게도 상속된다.
• 모든 속성이 상속되는 건 아니고, 상속되는 속성들이 정해져 있다.

📘상속된 속성의 우선순위

• 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따진다.
• 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.

<body>
    <div id="info">
      <p class="description">
        ...<a class="order" ...>주문</a>
      </p>
    </div>
</body>

body {
  color: #000000;
}

#info {
  color: #aaaaaa;
}

.description {
  color: #bbbbbb;
}

.order {
  color: #cccccc; -> 적용
}

a.order 태그에 적용되는 속성들을 캐스케이딩의 우선순위가 높은 순으로 나열해보면 다음과 같습니다.

.order {
  color: #cccccc;
}

/* p.description 태그(부모 태그)에서 상속받은 속성 */
{
  color: #bbbbbb;
}

/* div#info 태그(조부모 태그)에서 상속받은 속성 */
{
  color: #aaaaaa;
}

/* body 태그(증조부모 태그)에서 상속받은 속성 */
{
  color: #000000;
}

📘상속되는 속성들

color, font-family, font-size, font-weight, line-height, text-align, … .