TIL - 6일차 220124 (CSS)

오전 8:30 - 8:45 plan / 나의 하루 목표

오늘은 CSS를 블로깅하고 공부하고 페어 프로그래밍 시간에 querySelector, 계산기를 만들며 공부했던 HTML, CSS, JS 을 활용하며 연습을 할 것입니다.

 

오전 9:00 - 12:00 chapter / CSS 기초

CSS(Cascading Style Sheets)는 스타일링을 위한 도구입니다
*우리가 옷을 입을 때 항상 심미적인 이유로만 옷을 입지 않듯이,
 CSS도 화려함만을 위해 사용되지는 않습니다
- 콘텐츠의 배치와 위치 (Layout Design)
- 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 Typography

*위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX/User experience) 를 제공 가능
색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있습니다.

*CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양
콘텐츠를 적당한 위치에 배치하는 Layout Design은 디자이너가 아니여도 할 수 있어야 한다

CSS 박스를 구성하는 요소
border(테두리) - border: 1px solid red;
margin(바깥 여백) - margin: 10px 20px 30px 40px;
padding(안쪽 여백) - padding: 10px 20px 30px 40px;
content(컨텐츠) - width, height

*id 와 class의 차이점을 반드시 기억하세요

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소(element)에만 적용 동일한 값을 갖는 요소(element) 많음	특정 요소(element)에 이름을 붙이는 데 사용 스타일의 분류(classification)에 사용

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 가능 여부	가능	가능	불가능

색상 - 글자의 색상을 변경하는 속성은 color 입니다.

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

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

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
  font-size: 24px; /* 글자 크기 */
  font-family: "SF Pro KR", "MalgunGothic", "Verdana"; /* 글꼴 속성 */
}

*글꼴의 크기에서는 단위가 무엇보다 중요합니다.
글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.

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

1. px(픽셀) - 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
2. rem - 일반적인 경우 /사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
3. 반응형 웹(responsive web)에서 기준점을 만들 때 - px(픽셀
반응형 웹 - 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
데스크탑에서 볼 때, 스마트폰에서 세로, 가로 모드로 볼 때 너비가 항상 다름
디바이스크기 별로 CSS를 달리 적용해야함

기타 스타일링 - 추가적으로 텍스트를 꾸밀 때 자주 사용하는, 알아두면 유용한 속성
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

정렬: 가로로 정렬할 경우text-align을 사용합니다. 
       유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.
       
       세로로 정렬할 경우에는 문제가 조금 복잡합니다. vertical-align 속성을 쉽게
       떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다.
       세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 
       글자 높이보다 큰 경우에만 적용할 수 있다

 

오후 1:00 - 3:00 pair / querySelector

오후 3:00 - 5:00 pair / 계산기

오후 5:00 - 6:00 zoom / 블로깅 세션

오후 6:00 - 6:30 review / 일일 회고