(TIL) D+5 CSS 기초

CSS가 중요한 이유

더 나은 사용자 경험을 제공하기 위한 것인데
불편한 UI/UX 경험은 유저들이 재방문하고 싶지 않게 만들 것이다
결국 서비스 유저가 이탈하지 않고 더 유입되게 하기 위함

👌🏻 프론트엔드 개발자

필수 역량

• 컴포넌트 기능별로 묶어서 제작할 줄 알기
• 화면 구성이나 배치(레이아웃 디자인)
• 타이포그래피와 색상 적용 등

부가적 역량

• 정렬이나 배색에 대한 감각.. (음 디자인 센스?)
• UX에 대한 고민, UX가 잘 적용된 웹이나 앱 분석 (어디가 있을까? 클론코딩은 괜춘?)

CSS가 어려운 점

• 파도파도 끝이 없다고 함 (망망대해와 같구나)
• 프로젝트 규모가 커지면 컨트롤 하기 어려운 상황이 종종 생긴다고 함

📌 배운 것과 생각난 것들

backgournd, background-color 차이

• background 여러가지 옵션을 한번에 써줄 수 있는가 (color, imgage, repeat 등)
  => 옵션명이 들어간 속성을 쓰는게 명시적이고 더 혼동을 줄일 수 있을 것 같다..

CSS를 HTML에 연결

• link 태그 안에서 href 속성으로 연결하는 게 일반적
  => 나머지는 간단한 테스트를 해보거나 할 때 말고는 잘 안쓸 것 같은데..
• 파일에 따라 스타일과 레이아웃 적용하는 부분을 나눠서 할 수 있음
  => 예) style.css (스타일) / layout.css (레이아웃) 실무에서도 잘 쓰려나?
  

id와 class를 통한 스타일링 차이점!

• id : 단 하나의 요소에 적용(의미를 담은 유일한 이름으로) / 특정 요소를 지정할 때
• class : 동일한 스타일을 여러 요소에 적용할 때 / 스타일 분류할 때
  => 적절한 이름 짓기와 적용 방법은 좋은 사례나 사이트를 많이 보고 만들어 봐야할 듯
  

폰트패밀리(글꼴)와 fallback(대비책)

• 여러개 써있는 이유가 fallback에 있었구만..

절대단위와 상대단위

• 기기나 브라우저 사이즈 등에 영향 받지 않는 절대적인 크기로 하는 경우
  px은 모바일 기기처럼 작은화면이면서 동시에 고해상도인 경우 적합하지 않다고 함
  고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일 되서 뚜렷하지 못한 형태로 출력되기도 한다고 함
  px은 인쇄와 같이 화면 사이즈가 정해진 경우 유리하다고 함
• 그럼 일반적으로는?
  상대 단위인 rem 추천
  root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이므로 조절해서 사용
  em은 부모 요소에 따라 크기가 변경되서 계산 복잡
  => 요즘은 반응형 추세고 기기도 다양해지니까 rem으로 자꾸 해봐야 할 듯

박스모델

• 다양한 레이아웃 사례를 많이 보면 좋을 것 같다
• 박스를 벗어나는 콘텐츠 처리 : overflow-hidden
  => 인터랙티브한 버튼 디자인에 쓰기도 하던데.. (별코딩)
• 박스 크기
  box-sizing: border-box (디폴트값은 content-box)
  이것을 모든 요소 적용(*)으로 하는 것이 padding, margin 적용하고 확인하기 좋음
  

CSS 셀렉터(선택자)

• 프로젝트 시작할 때 모든 요소에 기본으로 적용해야 하는 것들 (박스사이징, 마진 0 등)
• 태그 셀렉터 복수 선택 ',' (주의) 띄어쓰기는 후손 셀렉터임!
• 속성 셀렉터, 형제 셀렉터를 잘 쓰나? 쓴다면 언제 어디에 쓸 수 있을까?
• a:visited, a:hover, a:active, a:focus 가상 클랙스 셀렉터 써보기
• 종류가 많기 때문에 필요한 경우나 헷갈리면 자주 찾아보면서 써보기

자꾸 사용해보고 케이스들을 봐야 늘 것 같다.
어떤 사이트들이 좋은지 알아봐야겠다.