css 헷갈린 부분 공부...ing

Img tag

이미지 태그 조절 방법

1. 가로기준으로 맞추고 사진을 중심으로 맞추기 (세로는 반응형)

• object-fit 속성을 이용하여 세팅하기
• div로 감싸고 정렬하기
• display:block; + margin: auto;

2. background-img vs img 태그

• SEO문제
  백그라운드로 넣은경우 색인화과 되지 않습니다. 반면에 img 태그로 넣은경우 검색엔진에 의해 색인화 됩니다.
• 검색엔진에서 선태할 수 있는 alt 태그의 유무, 그리고 사진이 깨진겨우 img태그는 broken image와 alt값 출력 <- 디자인상 critical하게 작용될 수 있음 (하지만 또 태그 속성으로 에러처리 가능)
• bg 처리를 통해 작은 이미지의 경우 css 스프라이트처럼 다운로드 시간을 개선, 반복이미지 처리
  참고 링크

길이 단위

1. px, em, rem, ...

• px: 절대값처럼 고정되어 있다 생각했지만 아니다. 모니터에 따라서 상대적인 크기를 가진다. 따라서 chrome 웹뷰의 작업물과 실제 핸드폰에서 띄웠을 때, 큰 차이가 존재했다.

• em: 각 element의 font-size를 기준으로 유연하게 변하는 단위이다. em은 단위가 적용된 글자크기에 비례하는 값이다. 에를들어 font-size가 14px라면 2em은 14px*2인 28px가 되는것이다. ->너무 가변적이라 사용하지 않는것을 추천한다.
  

• rem: html의 글자크기를 기준으로 계산한다.
  

• vw, vh: %단위와 비슷한 개념이지만 당연하다시피 %는 부모를 기준으로 잡는 값이다. 반면에 vw,vh는 모든 요소들을 뷰포트기준으로 설정이 가능하다.

2. border-box vs content-box
   엘리멘트의 크기 설정

• border-box = content + border + padding + margin
• content-box = content

display, postion, float, clear

1. position: element의 위치 결정 방식을 설정합니다.

• static 정적(default): 페이지의 흐름에 따라 배치 ->top,rigit등의 영향을 받지 않는다.
• relative 상대적: static 속성시의 위치에서 top left등의 속성값을 통해 이동한다.
• fixed 고정적: 브라우저 창을 기준으로 위치를 지정합니다.
• absolute 절대적: 조상요소중 relative position을 기준으로 상대적 위치를 정하게 됩니다. 조상요소중 relative position을 가진 element가 없다면 body태그를 기준으로 정하게 됩니다.
• sticky: relative 처럼 작동하다가, 설정된 값 도달시 고정됩니다. fixed와 달리 scroll박스에 고정됩니다.

2. display: html의 각각의 element들은 특성에 따라 block or inline의 속성을 가지고 있습니다. css속성을 이용하여 요소들을 상황에 맞게 바꿀 수 있습니다.

• block: 한줄을 차지하는 요소입니다. 같은 block태그들이 한줄에 존재할 수 없습니다.
• inline: 태그들이 한줄에 여러개씩 배치되는 것입니다. 크기를 지정할 수 없습니다.
• inline-block: 태그들이 한줄에 존재하고 크기를 지정할 수 있습니다.

3. float

• flexbox 이전에 사용되던 레이아웃 방식. 주로 이미지와 텍스트간의 배치관계에 사용된다.

브라우저

1. 렌더링과정

• DOM,CSSOM 생성: 브라우저는 일단 HTML, StyleSheets를 해석 합니다. 그리고 HTML 문서의 해석이 끝나면 ‘DOM 트리’를 만들고, StyleSheets 문서의 해석이 끝나면 ‘스타일 규칙’을 만듭니다.
• RenderTree 생성:DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성합니다. DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성됩니다.
• 레이아웃: 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계
• paint: 실제 픽셀값을 채워넣게 되는 단계

2. reflow, repaint
   reflow: 렌더링 과정을 거친 후, 액션이나 이벤트에 의해 레이아웃과정을 다시 수행합니다.

• 페이지 초기 렌더링(레이아웃)
• viewport 크기 변경시 (리사이징)
• 노드 추가제거
• 요소의 위치,크기등 큰 레이아웃에 영향을 주는 과정들

repaint: reflow 이후, 다시 그리는과정입니다. reflow가 일어나지않는 background-color, visibility와 같은 경우에는 repaint만 일어납니다.

2. img 성능 개선방법

태그 selector

1. nth-child 등

css 우선순위

1. 세세하게