[CSS] 학습한 내용

1. Media Query

'@media' 모양
CSS의 기본 속성으로, 브라우저 너비에 따라 반응하는 반응형 웹의 기본 기술이다.

@media (조건식) {할 일}

orientation을 이용해서 모바일 화면과 웹 화면의 가로, 세로 길이 크기 비교로 자동으로 바뀌도록 할 수 있다.

출력 결과는 출력 결과의 가로길이에 따른 반응을 보인다. 즉, 내가 보는 화면과 다르게 나올 수 있다.

 

2. font & icon

구글 폰트, bootstrap icons, font awesome, favicon
*참고: 라이센스 확인 - 이후 상업적 이용, 배포 등 할 때 점검해야 함

• Bootstrap 소스코드 톺아보기
  .min.css 파일: 탭, 엔터 등 제거하고 경량화한 압축 파일
  .css.map: 원본에서 몇 번째줄이 틀렸는지 알려주는 파일 (min은 다 한 줄이니까 디버깅이 힘듦..)
  scss(sass): 급진적 문법 적용.
  ↳ 브라우저는 scss 알아듣지 못하므로, 컴파일러를 통해 css로 번역해줘야 함. 사람이 알아보긴 쉽지만.

 

3. CSS 더보기

• Spcificity(명시도)
  선택자마다 점수가 있음. 점수 높은 게 먼저 반영된다.
  (0-1-0 가 0-0-9999999999999 보다 높다.)

• 개발자 도구 활용하기: 
  • 찍- 그어진 거: 싸워서 졌다.
  • 상속: 흐릿하게 나온 거는 상속이 안 됐다는 이야기.
  • 위쪽에 있을수록 우선순위 높은 거.
  • 결국, specificity 점수 비교 후, 같으면 나중에 쓴 게 적용.

• Naming Convention(BEM): Block, Element, Modifier
  • block: 독립적
  • element: 블럭 안에 존재할 때만 의미 있음. 독립적으로 존재 X.
  • modifier: 상태를 이야기함.
    ↳ --는 modifier 의 의미

 

4. 기타

• input은 기본적으로 form 태그 안에 있어야 함. form은 독립적으로 존재 가능.
  form은 블럭의 자격을 가지고 있으니 "form"으로.
• div은 구성요소니까 '블럭_ element'로 쓰기로 했으니 "form _group"으로.
  (부모 자식과는 조금 다름. 독립/비독립의 개념.)
  ㄴ 이게 BEM을 따른 표기법 → 스타일링도 구조화가 되는 효과도 난다.

• width: 100%: 부모요소 기준의 100%
• styling은 기본적으로 클래스로 하는 게 기본!이다.
  자바스크립트가 id 선택자를 쓰기 때문!
  ㄴ id는 건드리지 말자.

 

5. 배운 점

A. 01_nav_footer

• 클릭했을 때 메뉴바의 요소가 선택된 모습을 각 페이지로 넘어가면 클릭되어 있는 것처럼 만듦으로써 구현할 수 있다.
• bootstrap의 navbar에는 collapse 기능이 들어있어서 화면 크기가 줄어들면 햄버거 모양(?)의 아이콘으로 바뀌게 된다.
• Modal 컴포넌트를 사용할 때 navbar 안에 쓰면 안 된다!

B. 02_home

• navbar를 상단에 고정시키는 방법으로 fixed-top을 많이 사용했지만, sticky-top을 사용하면 화면이 하나인 선에서 타 컨텐츠를 가리지 않고도 화면에 고정되도록 만들 수 있다.

C. 03_community

• row 안에서 칼럼을 각각 2개, 10개 차지하게 만들려면 하나의 row 안에서 정의해줘야 한다!
• 따로 쓰면 row가 두 개 생겨버리니까!
• 화면 크기에 따라 테이블과 아티클이 서로 교차하여 나타나도록 만들려면, d-none 속성과 d-block(block으로 나타남)으로 구현할 수 있다. 예를 들어, 하나에는 기본을 d-none, d-lg-block, 다른 하나에는 d-block과 d-lg-none으로 설정할 수 있다.