• 요소를 만들거나 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 잘 살펴보자.

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

id와 class의 차이점을 반드시 기억하기!!!!!

색상

• 글자의 색상을 변경하는 속성은 color 이다.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

[코드] 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있다.

글꼴

• 글꼴의 속성은 font-family 이다.

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

[코드] font-family 속성을 통해 글꼴(폰트)을 설정할 수 있습니다.

• 글꼴의 이름은 따옴표를 붙여서 적용할 수 있다.
• 사용하려는 글꼴이 존재하지 않거나 디바이스에 따라 지원하지 않을 수 있다.
• 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다.
• fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책이다.
• fallback을 위해 여러 글꼴을 사용하는 경우 쉼표로 구분하여 입력할 수 있다.
• 입력된 순서대로 fallback이 적용됩니다.
  
  

크기

• 글자의 크기를 변경하기 위해서는 font-size 속성을 사용한다.

.title {
  font-size: 24px;
}

[코드] 글자 크기를 24px로 적용한다.

기타 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height
  
  

정렬

가로로 정렬할 경우 text-align을 사용하며 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있다.

세로로 정렬할 경우에는 문제가 조금 복잡하다. vertical-align 속성을 쉽게 떠올릴 수 있지만 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다.

<center>, <font>를 사용하지 말아야 하는 이유

HTML의 초기에는 스타일을 별개로 정의한다는 컨셉이 없었다. 그래서 <center>가운데 정렬</center> 혹은 <font color="#ff0000">빨간 글자</font>와 같이 사용했다. 그러나 지금은 관심사 분리는 패러다임을 적용하여 더 이상 이 태그(<center>``</center>, <font>``</font>)를 사용하지 않는다.

관심사 분리: 관심사 분리는 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로 각 부문은 개개의 관심사를 해결한다.

알아야 할 몇 가지 단위

글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요하다. 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등

글꼴 사이즈를 정할 때

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
   px(픽셀)을 사용한다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다. 글꼴의 크기를 픽셀로 설정하면 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다.

2. 일반적인 경우
   상대 단위인 rem을 추천한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리하다.

박스모델

• 박스는 항상 직사각형이고 너비(width)와 높이(height)를 가진다.
• CSS를 이용해 속성과 값으로 그 크기를 설정한다.

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

• block 요소의 대표적인 예: <div>, <p>
• inline 요소의 대표적인 예: <span>

박스를 구성하는 요소

• border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.
  border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.

border (테두리)

• 개발 과정에서도 매우 의미 있게 사용이 가능하며 각 영역이 차지하는 크기를 파악할 수 있으며 또한 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다.
• 아래 예시 border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다.

p {
  border: 1px solid red;
}

margin (바깥 여백)

• 각각의 값은 top, right, bottom, left로 시계방향이다.

p {
  margin: 10px 20px 30px 40px;
}

• 값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px이다.

p {
  margin: 10px 20px;
}

• 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용이 된다.

p {
  margin: 10px;
}

• 방향에 대한 특정한 속성도 있다.

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

• 마진(바깥 여백)은 음수 값을 지정할 수 있다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다. 극단적으로 적용하면 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있다.

p {
  margin-top: -2rem;
}

padding (안쪽 여백)

• padding은 border를 기준으로 박스 내부의 여백을 지정한다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left이다.

p {
  padding: 10px 20px 30px 40px;
}

• 배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인할 수 있다.

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

박스를 벗어나는 콘텐츠 처리

• 박스 크기보다 콘텐츠 크기가 더 큰 경우 overflow 속성을 이용한다.
• overflow: auto; 값은 스크롤을 자동 생성
• overflow: hidden; 값은 넘치는 콘텐츠를 감춘다.
• overflow-x, overflow-y 속성은 auto, hidden, scroll 값을 이용해 가로 방향이나 세로 방향으로 스크롤을 지정할 수 있다.

p {
  height: 40px;
  overflow: auto;
}

박스 크기 측정 기준

• content-box는 박스의 크기를 측정하는 기본값이다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.
  

레이아웃을 디자인 할 때 모든 요소를 선택하는 셀렉터인 *에 box-sizing 속성을 추가하고, border-box라는 값을 추가하면 디자인이 훨씬 더 쉽다.

* {
  box-sizing: border-box;
}

CSS Selector

전체 셀렉터

• 전체 셀렉터는 문서의 모든 요소를 선택한다.

* { }

태그 셀렉터

• 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택한다.
• 복수로도 선택이 가능하다.

h1 { }
div { }

section, h1 { }

ID 셀렉터

• ID 셀렉터는 #id로 입력하여 선택한다.

#only { }

class 셀렉터

• class 셀렉터는 .class로 입력하여 선택한다.
• 같은 class 이름을 가진 모든 요소를 선택한다.

.widget { }
.center { }

attribute 셀렉터

• attribute 셀렉터는 같은 속성을 가진 요소를 선택한다.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.
따라서 같은 <p>태그라도 <span> 요소의 자식인 <p>요소는 선택되지 않는다.

header > p { }

ex)

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

후손 셀렉터

• 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.
• <header>요소의 자식의 자식인 <p> 요소까지 모두 선택된다.

header p {}

ex)

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>

형제 셀렉터

• 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.
• 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택한다.

section ~ p { }

ex)

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

인접 형제 셀렉터

• 인접 형제 셀렉터는 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.
• 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택한다.

section + p { }

ex)

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 셀렉터

가상 클래스 셀렉터

• 가상 클래스는 요소의 상태 정보에 기반해 요소를 선택한다.

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택한다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택한다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택한다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택한다. */
a:focus { } /* 포커스가 들어와 있을 때 선택한다 */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택한다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택한다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택한다. */