2주 1일차 - css 기초

1. 리뷰

css 공부를 미뤄두고 있다가 오늘 몰아치게 되니 힘들었다.

2. 학습 키워드

• background 속성과 background-color 속성의 차이
• <link> 태그의 rel 속성: 현재 문서와 외부 리소스의 연관관계를 나타내는 필수 속성
• css를 적용하는 3가지 방법
• 태그 선택자
• id vs class
• 하나의 요소에 여러 class 동시에 부여
• fallback글꼴
• 웹폰트
• 절대단위와 상대단위를 언제 어떤걸 쓰는지

3. 스스로 설명해보기

• background 속성과 background-color 속성의 차이
  • background: 단축속성으로 color 뿐만 아니라 배경의 모든 속성 지정가능
  • background-color: 배경의 color만 지정 가능

---

• <link> 태그의 rel 속성: 현재 문서와 외부 리소스의 연관관계를 나타내는 필수 속성

---

• css를 적용하는 3가지 방법
  1. 인라인: html의 태그 내에서 style 속성으로 작성
  2. 내부 스타일 시트: html 문서 상단에 <style>태그 작성 후 그 안에서 작성
  3. 외부 스타일 시트: 별도 css파일 작성 후 link태그로 html문서와 연결

---

• 태그 선택자 사용시 주의점
  • 태그 선택자 하나만 달랑 쓰면 문서 내에서 모든 해당 태그가 같이 선택됨.
  • 같은 태그가 형제이거나 자식요소인 경우도 다같이 선택됨.

---

• id와 class 선택자의 올바른 사용법:
  • 하나의 요소에만 적용하고 싶은 경우 해당 요소에 id 부여
  • 여러 요소에 동일한 css 스타일링을 적용하고 싶은 경우 해당 요소들에 같은 class 부여
    • ex: list-items

---

• 하나의 요소에 여러 class를 부여하는 방법:
  • class명과 class명 사이 공백으로 구분하여 기입.

---

• fallback글꼴:
  • font-family 속성으로 설정한 글꼴이 적용되지 않을 경우 차선으로 적용시킬 글꼴.
  • 사용자의 컴퓨터에 저장되어 있는 글꼴이 아닌경우 적용되지 않으므로 웹 폰트를 쓰면 페이지 렌더링 시 글꼴도 같이 다운받아 오므로 글꼴을 내 의도대로 ux 적용 가능.

---

• UX를 위하여 상대단위 rem 사용이 적합한 경우: 글꼴 사이즈를 정할 때
  • rem: root(브라우저 기본) 글자 크기 기준.
  • 절대단위 사용 시: 유저의 디바이스 화면의 크기와 상관없이 고정된 크기로 보여짐.
  • 상대단위 em 사용 시: 중첩되는 특징 때문에 의도대로 크기조절이 어려움.
• UX를 위하여 절대단위 px 사용이 적합한 경우: 반응형 웹의 레이아웃 변경 기준점 화면 사이즈
  • 반응형 웹을 위하여 디바이스 크기별로 해당 화면 크기(width: ~~px, height: ~~px)가 될 경우 레이아웃 배치를 바꿔주는 기준점을 잡기 위해(화면 사이즈를 정하기 위해)
• UX를 위하여 상대단위 vw, vh 사용이 적합한 경우: 반응형 웹에서 화면 비율을 기준으로 레이아웃 변경 시

---

• inline-block: 줄바꿈 없는 inline속성과 크기, 여백 지정가능한 block속성을 같이 지님.
  • 줄바꿈은 일어나지 않으나 width, height, margin, padding을 block처럼 지정 가능.
• margin은 border 바깥 영역, 즉 바깥 여백.
• overflow 속성: 자식요소가 부모요소보다 큰 경우(컨텐츠가 박스 크기를 넘어갈 경우) 처리방식
  • auto: “넘어간 영역이 있을 경우에만” 넘어간 영역을 보이지 않게 자르고(clip) 스크롤 생성
  • scroll: 넘어간 영역을 보이지 않게 자르고(clip) 스크롤 생성
  • hidden : 넘어간 영역을 보이지 않게 자름(clip)
  • visible: 넘어간 상태 그대로 보여짐
• overflow-x 와 overflow-y:
  • 부모요소에서(컨텐츠를 담을 box) x축 또는 y축 각각 overflow 속성을 지정해 줄 수 있음.

4. 이해가 부족한 개념

• 가상 구조 클래스 선택자 https://fresh-mint.tistory.com/entry/css-Pseudo-classes-Selector-가상-클래스-선택자
• 웹 폰트 사용과 최적화 https://d2.naver.com/helloworld/4969726
• 관심사 분리(separation of concerns, SoC) https://ko.wikipedia.org/wiki/관심사_분리
• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등
• 오늘 css수업 듣기 전까지 후손 선택자를 자식 선택자 용도로 사용하고 있었음.
• overflow속성에서 auto와 scroll이 어떻게 다른지 https://stackoverflow.com/questions/6689412/difference-between-html-overflow-auto-and-overflow-scroll
• 인접 형제 셀렉터와 형제 셀렉터의 차이: 모두 vs 하나만
• nth-child 함수형 표기법 https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child
  • (2n): 짝수
  • (2n+1): 홀수
• 셀렉터 문제 오답
  • 인접 형제 셀렉터 +
  • 15번 후손 선택자 문제: 선택자간 띄어쓰기 유무 확인 중요함.
  • 18번 속성 선택자 문제
  • 26번 div:last-child : 모든 자식요소 div 중 마지막에 있는 것들 모두
  • 30번 x:first-of-type : x의 형제 중 첫번째 x 모두

5. 할 일

• flex 속성 공부, 계산기 만들기
• 딥다이브 4장 변수
• 정렬알고리즘 복습