CSS

• HTML이 웹 페이지의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당한다.
• CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

사용자 인터페이스(UI: user interface)

• 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다.
• 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부른다.
• UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면 애플리케이션과 소통이 불가능하다
• 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다.

좋은 사용자 경험(UX: user experience)

• UX는 직관적이고 쉬운 UI에서 나온다.

CSS 개념학습

색상

• 글자의 색상을 변경하는 속성은 color 입니다. 속성에 삽입할 수 있는 값은, HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있다.
• ex)

.red {
  color: #ff0000;
}

글꼴

• 글꼴의 속성은 font-family입니다.
• ex)

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

크기

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

.title {
  font-size: 24px;
}

기타 스타일링

• 추가적으로 텍스트를 꾸밀 때 자주 사용하는, 알아두면 유용한 속성입니다. 사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인할 수 있습니다.
• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

정렬

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

절대단위와 상대단위

• 글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요합니다. 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등

박스모델

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

• 박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있습니다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있습니다.
  

박스를 구성하는 요소

border (테두리)

• border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)입니다. 괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성입니다. 이외에도 border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있습니다.
• ex)

p {
  border: 1px solid red;
}

margin (바깥 여백)

• 각각의 값은 top, right, bottom, left로 시계방향입니다.
• ex)

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

padding (안쪽 여백)

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

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

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

• overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있습니다. 이때에는 overflow 속성에 hidden 값을 사용합니다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있습니다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있습니다.
• ex)

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

박스 크기 측정 기준

다양한 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"] { }

자식 셀렉터

• 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다.

header > p { }

후손 셀렉터

• 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다.

header p {}

형제 셀렉터

• 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.

section ~ p { }

인접 형제 셀렉터

• 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다.

section + p { }

가상 클래스 셀렉터

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

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

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다```
코드를 입력하세요
```. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }