[220908] CSS 종합적으로 배웠는디

📘 Reset CSS

• 많은 브라우저들의 기본 스타일 제각각이다.
• 이럴 때 브라우저의 기본 스타일을 리셋하고 작업하면 좋다.
  
  
• 에릭마이어의 CSS(https://meyerweb.com/eric/tools/css/reset/)
  
  • 수업시간엔 이걸로 사용
  • 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화
  • 모든 스타일을 처음부터 만들도록 합니다.
  • reset.css 코드를 그대로 사용할 수도 있고, 여기에 프로젝트만을 위한 커스텀 스타일을 추가해서 사용하기도 합니다.
  • 2011 이후로 업데이트 중단됨
    
    
• nomalize CSS
  • 브라우저 고유의 스타일을 존중
  • 코드에 대한 설명과 이유과 잘 적혀있음

 

 

📘 box-sizing 속성

개인적으로 CSS style reset 할 때, box-sizing: border-box를 쓰면 편해서 줄곧 사용해왔는데,

문자 그대로 border 기준이구나~ 라고 생각만 했다.

그래서 개념을 완전히 알지는 못하고 어렴풋이만 알고 있었는데 이번 수업에서 이해했다.

• 보더 기준으로 안쪽은 패딩, 바깥쪽은 마진
• width와 height는 border 기준이 아니라, 컨텐츠 기준이다.
• [라이언 만들기] (https://zinee-world.tistory.com/426)

 

 

📘 CSS 박스 모델 - display 속성(완전 중요)

• display: block;
  • width와 height로 컨트롤 가능O
  • padding, border, margin 속성을 사용해 스타일 컨트롤 가능
  • 해당 속성들이 다른 요소들을 밀어낸다.
    
    
• display: inline;
  • width와 height로 컨트롤 가능X (단, img 요소는 가능하다)
  • padding, border 속성은 사용할 수 있지만 마진 속성은 좌우만 조절 가능
  • 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.
    
    
• display: inline-block;
  • inline 처럼 한 줄에 여러 요소가 존재할수 있습니다.
  • block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있습니다.
  • inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스
    
    
• 참고하면 좋은 Flex 사이트
  • [Flexbox Froggy](https://flexboxfroggy.com/#ko)
  • [Flexngrid](https://flexngrid.com/)

 

 

❓마크업 할 때 신경 쓸 것

• <button> 클릭 → 모달창은 푸터 아래에 만들어서 띄우기
• 리드미 파일에는 피그마 링크나, 브라우저 이미지 만들어줌
• 모달창(팝업)이나 더보기 버튼은 마지막에 위치시켜주기
  → 스크린 리더가 자연스럽게 읽게 하기 위해
  
  
• header / main안의 section / footer는 id로 지정하는게 좋다.
  나중에 메뉴 클릭하면, 섹션별로 이동하게 만들거임
  
  
• 디자인을 위한 이미지에는 보통 alt=""나 aria-lable="" 같은 대체텍스트를 사용하지 않는다.
  사용자에게 무조건 많은 정보를 제공하기 보다는, '이 이미지가 사용자에게 필요한 정보인가?' 하고 판단하는 자세가 필요함
  
  
• 카톡에 링크 공유하기 할 때 나오는 공유 폼은 <article> 사용한다.
  → 어디에 공유하든 그거 하나만으로써도, 이 내용을 공유하는구나! 하는 정보를 알 수 있고, 어색하지 않기 때문

 

 

❓찐최종으로 <img> VS background-image

내가 알고 있는 <img>와 background-image의 차이점은,
현재 브라우저에 해당 이미지가 얼마나 문맥적으로 중요한 요소인가? 였다.
이 부분에 대해서는 수업시간에도 사흘 정도 질문이 오고갔던 기억이 난다.
오늘 수업을 통해 이런 새로운 시각으로 또 바라 볼 수 있었던 점이 좋았다.

• 백엔드에서 다뤄야하는 경우에는 URL이 변하기 때문에
  이미지가 변경될 때, 컨트롤 할 수 있게 작성해야 하는데 그렇지 않은 경우엔 배경이미지로 넣는다.
• img → BE입장에서 변경될 이미지
• background-img → 변경되지 않을 이미지, BE입장에서 컨트롤하지 않아도 되는 이미지
• 폰트는 용량이 크다. 그래서 폰트가 2개 이상인데, 한번밖에 안쓰인다면 잘 안쓰이는 폰트는 이미지로 받아와라

 

 

❓공개되면 안되는 시스템/페이지에 method 방식을 적용할 때

• POST로 되어있는 경우 → 의도적으로 상세페이지에 가면 안되게 막아야 하는 경우
  • 검색엔진에서 공개되지 말아야 할 검색 키워드
  • 책 정보 시스템(국가에서 운영함)
  • 내부 검색 키워드를 제공하거나 공유할 수 없게 만든다.
  • 책 안에 민감 정보가 들어가 있기 때문이다.
  • 부동산(국가에서 운영함)
  • 만약 검색을 ‘제주 특별자치도 첨단과학단지 카카오 건물 거래액’ 했을 때, GET방식으로 인해 검색창에 나오면 안된다.

 

 

❓리액트 VS 뷰 뭘 써야 할까?

• 결론부터 말하자면 둘다 사용해야 한다.
• 적은 페이지에서 생산성 높일 때 → 뷰
• (아토믹 패턴 사용해서 리액트 쓰면 생산성이 더 낮아짐)견고함 → 리액트

 

 

🧐 그 밖의 알아두면 좋은 것

• GDG, GDE → 내 인생 중 구글 입사에 가능성을 주는 커뮤니티
  
  
• 벤더프리픽스(Vender-Prefix)
  • 벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어로 웹에만 통용하는 표현은 아니고, 통신 공급원을 벤더라고 한다. → KT, SKT, LG 등등
  • 아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법을 의미한다.
    
    
• 웹킷 기반 브라우저란?
  • 브라우저가 HTML, CSS를 화면에 그려줄때 사용하는 렌더링 엔진이다.
  • 크롬, 안드로이드, 사파리, ios 기반 파이어폭스 등 많은 브라우저들이 사용했다.
  • 현재 크롬, 안드로이드, 오페라, 마이크로소프트 엣지 브라우저 등은 Blink 엔진으로 전환되었습니다.
  • Blink 엔진은 vendor-prefix가 존재하지 않는다.
• 1% 라는 수치는 커머스에서 굉장히 큰 수치이다.
• [오토프리픽서] (https://autoprefixer.github.io/)

 

 

 

오늘 느낀 점

질문을 하는 것도 기술이 필요하다는걸 느꼈다.

같은 수강생 분들의 질문 퀄리티가 너무 좋다.

그래서 내가 생각없이 마크업을 하고 있는건 아닌가? 하는 자각을 하게 되었다.

궁금한건 많았는데, 뭐랄까 내 생각을 다른 사람에게 잘 전달하는게 쉽지 않다.

앞으로는 생각하면서 마크업 하고, 문제가 발생하면 왜 안되는지 인지하고 해결하기!