• ul은 머릿말 숫자 표시 X
• ol은 머릿말 숫자 표시 O
  -
• - List item
  6) input type을 설정하여 다양한 종류의 input을 활용하기
  - - Input(Text, Radio, Checkbox)
• type="text" : 사용자의 아이디를 받을 때
• type="password" : 사용자의 비밀번호를 입력 받을 때
• type="checkbox"
  -radio와 같지만 중복 선택 가능
• type="radio":
  -checkbox와 같지만 name이라는 속성을 이용해 하나의 선택지로 만들어 하나만 선택 가능
  - 옵션A
  - 옵션B
  7) 기타 자주 사용되는 html element
  - - Image : 이미지 첨부
  -src: 이미지 속성
  -셀프 클로징의 특징
  - - Link: 링크 삽입
  -href: 링크 속성
  -target="_blank" : 새 창(탭)에서 페이지 열기
  -로 클로징 태그 필요
  - - Button
  -로그인의 예시처럼 사용 가능
  
• 추가 궁금증! 과

  의 차이
  : HTML

  엘리먼트는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용됩니다. 이 엘리먼트는 HTML5 표준의 탄생과 함께 생겨난 시멘틱 엘리먼트의 일부입니다. 엘리먼트의 이름에 의미를 충분히 담고 있기 때문입니다.
  엘리먼트는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있습니다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 "최악(as a last resort)"로는 사용해도 괜찮습니다. (https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div/6941170#6941170)

Lesson. CSS 기초

1. intro

1) CSS의 목적을 이해할 수 있다.
2) 프론트엔드 개발자의 소양에 대해 이해할 수 있다.
3) CSS의 기본 문법과 구조를 이해할 수 있다.
4) CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
- 직접 HTML 안에 CSS를 정의하는 것을 왜 권장하지 않는지 이해할 수 있다.
5) id 및 class와 관련된 selector 규칙을 이해할 수 있다.
6) CSS를 이용해 텍스트를 꾸밀 수 있다
7) CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
- 어떤 단위가 어떤 경우에 적합한지 이해할 수 있다.
8) CSS 박스 모델을 이해할 수 있다
- box model
- width, height
- margin, padding, border
- 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
9) MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.

2. CSS 소개

1) CSS는 단순히 디자인만을 위한 것이 아닌, 더 나은 사용자 경험(UX: User Experience)를 위한 것
(1) 적당한 위치에 콘텐츠 배치 (레이아웃)
(2) 텍스트 강조와 같은 최소한의 타이포그래피(조판, typography)
(3) 최소한의 접근성 (예를 들어 색상)
2) 프론트엔드, 즉 사용자가 직접 사용하는 애플리케이션의 앞단을 개발할 때에는 결국 다음과 같은 소양이 필요
(1) 화면 구성을 할 줄 아는 능력 (레이아웃)
(2) 보기 좋은 화면을 만들 줄 아는 능력 (타이포그래피, 색상)
(3) 정렬이 어긋나거나 배색이 좋지 않음을 인지할 수 있는 감각
(4) 사용자가 사용하기 편한 앱이 무엇인지, 왜 편하게 느끼는지에 대한 이유를 분석해본 경험
3) CSS 고유의 복잡함을 다루기 위해서, 모든 종류의 다양한 모범 사례(best practice)
4) CSS로 기본적인 스타일링 하기

• CSS는 그 자체만으로 독립적으로 기능하지 않고, 반드시 HTML이 필요
• 편리성을 위해 index.html과 같은 폴더에 index.css 파일이 있는 걸 권장
• 시맨틱 태그(Semantic tag)
  5) CSS 내용 분해하기
  
• 각 속성과 속성 사이는 반드시 세미콜론(;)으로 구분
• 질문
  - 위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
  - 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
  - 글자 색을 바꾸기 위한 속성은 무엇인가요?
  - 배경 색을 바꾸기 위한 속성은 무엇인가요?
  - background 속성과 background-color 속성은 어떻게 다른가요?
  - em의 의미는 무엇인가요?
  6) CSS 파일 추가
  (1) href 속성을 통해 파일을 링크 (e.x. )
  (2) 직접 HTML 태그에 CSS 속성을 추가하는 방법
  - 관심사 분리의 측면에서 권장되지 않음 (관심사 분리(separation of concerns, SoC): 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결)
  7) class로 스타일을 분류하여 적용하기
• class를 지정해서 같은 태그
• 를 navigation section의
• 엘리먼트와 footer의
• 엘리먼트를 구분하여 디자인할 수 있다.
• class 는 .을 이용
  - class로 동일한 스타일을 목적이 동일한 여러 엘리먼트에 적용 가능
• 반면, id는 문서 내에 단 하나의 엘리먼트에만 적용할 수 있는 유일한 이름
• 따라서 id를 여러 엘리먼트에 적용하는 것은, 잘못된 사용 방법
• id는 #을 이용
  8) 여러 개의 class를 하나의 엘리먼트에 적용하기
• 주의 사항: lass 이름이 목적에 맞는지 잘 살펴보기

3. 텍스트 꾸미기

1) 색상
(1) 글자 색상: color
(2) 배경 색상: background-color
(3) 박스 테두리 색상: border-color
2) 글꼴
(1) 글꼴:font-family
- 글꼴 이름은 따옴표를 붙여서 사용
- 여러 글꼴을 쉼표로 구분하여 적을 수 있는데 이는 순서대로 fallback(표현하고 싶은 글꼴이 없을 시에 사용하는 대비책)
(2) 다양한 폰트 사용
- 웹 폰트 기술
- Google Fonts
3) 크기
(1) 글꼴 크기: font-size
(2) 알아야 할 몇가지 단위
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
4) 기타 스타일링
(1) 굵기: font-weight
(2) 밑줄, 가로줄: text-decoration
(3) 자간: letter-spacing
(4) 행간: line-height
5) 정렬
(1) 가로로 정렬: text-align
-유효한 값으로는 left, right, center, justify(양쪽 정렬)
-세로로 정렬할 경우 보통 vertical-align을 생각하기 쉽지만, 부모 엘리먼트가 display: table-cell 일 경우에만 사용 가능
-세로 정렬이란 것은 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에 발생하는 것인데, 이는 박스에 대한 이해가 선행되어야 한다
6)

4.박스 모델

1. 모든 콘텐츠는 고유 영역이 존재

-보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스
-박스는 항상 사각형이고 그 너비(width)와 높이(height)가 있습니다

• 줄바꿈이 되는 태그는 무엇인가요?

  ,

• 줄바꿈이 적용되지 않은 태그는 무엇인가요?
• 위 CSS 선언 중 실제로 작동하지 않는 것이 무엇인가요?
  span {
  background: yellow;
  width: 100px;
  height: 100px;
  }

2. 박스의 종류

1) 줄바꿈이 되는 박스(block):

,

2) 옆으로 붙는 박스(inline, inline-block):
-span의 경우(inline)는 width, height 속성이 적용되지 않는다
-inline-block 박스는 옆으로 붙으면서, 고유의 크기를 가짐
3) 옆으로 붙으면서, block 박스의 특징을 갖는 박스 (inline-block)
4) 박스 종류 알아보기: block 엘리먼트 목록, inline 엘리먼트 목록, 개발자 도구 element 탭

3. 박스 구성 요소

(1) 핵심 구성 요소
1)border(테두리)
-심미적으로도 필요하지만, 개발 과정에서도 매우 의미있게 사용
-각 영역이 해당하는 크기를 알기 위해서 보통 레이아웃을 만들 때에 다음과 같이 그 크기를 시각적으로 확인

p {
border: 1px solid red;
} // 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)

• border-style mdn과 같이 검색하면, 테두리 스타일의 다양한 값을 찾아볼 수 있다
  • 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
  • 테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다
  • 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다.

• 2)margin(바깥 여백)

  p {
  margin: 10px 20px 30px 40px;
  } // 각각의 값은 top, right, bottom, left로 시계방향

• 값을 두개만 넣으면 top과 bottom & left 및 right로 묶여서 값이 할당
• 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
• 방향을 특정한 속성도 존재

  p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  } // padding에도 동일하게 적용

  • 음수값이 지정이 가능: 음수 값의 여백을 통해 다른 엘리먼트와의 간격을 줄어들게 만들 수 있고, 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만드는 것도 가능

    3)padding(내부 여백)

  • 값 순서에 따른 방향은 margin과 동일

4. 넘치는 컨텐츠 처리

(1) 기본 동작: 박스 크기보다 컨텐츠 크기가 더 큰 경우, 박스 바깥으로 빠져나옴
(2) overflow: hidden; 한정된 박스 크기에 맞게 컨텐츠가 더이상 표시되지 않게 하거나
(3) overflow: auto; 박스 안쪽으로 스크롤하여 컨텐츠를 볼 수 있게 만든다
(4) overflow-x or -y: 속성은 x축과 y축을 따로 지정해 한 방향으로만 스크롤이 가능

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

5. 박스 크기 측정기준

(1) 문제: 우리가 생각하는 박스의 크기는 여백을 포함한 것이 아닙니다. 박스의 사이즈는, 오롯이 콘텐츠 영역에만 적용되어 있습니다. 이러한 계산 방식은 레이아웃을 어렵게 만듭니다.
(2) box-sizing: border-box; 여백과 테두리 두께를 포함한 박스 계산 방법
(3) * 셀렉터는 HTML의 모든 태그, 모든 영역에 적용하겠다는 의미

• box-sizing은 페이지 일부분에 적용할 필요가 없습니다. 오히려 이는 혼란을 가중시키며, 모든 페이지에 적용하는 것이 합리적