#1. CSS 핵심 - display 속성 및 Size 단위 px,em,rem,%

• css (cascading style sheet) : html을 꾸미기 위한 디자인 언어 묶음

Display 속성

• DISPLAY 속성 : 태그들마다 존재하는 속성, 이 속성들이 HTML 화면을 어떤 원리(알고리즘)으로 구성하는지 알아야 한다.

• DISPLAY 속성의 4가지 종류
  1) Block

(모든 태그에 존재하는 부모의 최대한의 너비를 가져가면서 블록 모양의 형태를 가지고 있는 것, 높이는 따로 설정하지 않는이상 자동으로 설정, 여러개면 아래쪽으로 쌓임)

2) Inline

(한 줄내의 일정한 부분(글자면 글자 부분만)만 가져가는 형식으로 구축되는 속성, 여러개이면 한 줄에 오른쪽으로 여러개 쌓임)

3) Inline-block

(블록인데도 불구하고 인라인의 속성을 지니는 블록, 오른쪽으로 쌓임)

4) None

(태그상에는 존재하지만 시각화 과정에서는 보이지 않는 속성)

=> 시각화 속성(Visibility Attribute)의 Hidden 속성과의 비교

(Child 1이 None 속성인 경우 다음에 오는 Child 2 태그는 Child 1 이 없는 것 처럼 있던 자리에 존재 가능)

(Child 2가 hidden 속성인 경우에는 보이지는 않지만 자리는 차지하고 있기 때문에 Child 1은 Child 2 자리에 존재 불가능)

Size 단위

• 크기를 신경쓰는 이유 : 사이트를 반응형으로 만들어야 함. 프로그래머는 html 태그들이 큰 데스크탑 사이즈, 아니면 작은 모바일 사이즈에서도 볼 수 있는데(반응형) 그 크기가 변하는 것에 대한 통제력이나 정보를 가지고 있을 필요가 있다.

• size 속성의 종류
  1) px
  
  (부모의 크기에 상관 없이 항상 정해진 픽셀 값을 가진다. Parent의 폰트가 커지던 작아지던 영향 받지 않는다.)

2) em

(부모의 폰트 사이즈가 커지면 커지는대로 child 폰트 사이즈도 따라간다. 비례)

선호 하지 않는 이유 : 부모가 여러개인 경우, 모든 부모의 배율에 맞게 커진다.

3) rem : 대부분 쓸 것임 (Font Size와 관련이 있다. 1rem=16px)

(root HTML에 기본적으로 적용되어 있는 font-size 가 존재하는데 (브라우저 마다 기본값 다름) 이 값과 관련이 있다. 이 font-size에 비례하여 child 값이 따라간다.)

4) % : 바로 위 부모의 영향만 받음, 다른 부모에는 영향 x (2순위로 쓸것임)

#2.CSS display 속성, rem 단위 실습

• css 스타일 적용 우선순위
  1순위 : 태그 내 직접 적용
  2순위 : 같은 페이지 내의 style 구문에서 불러 들여오는 것을 적용
  3순위 : 다른 css 파일로 부터 적용
  
  
  
  
  
  

• hello_world.html에 css 스타일을 적용한 모습
  

결과1: 블록 ; 부모의 너비만큼 차지, 마진 포함)

결과2: 인라인 ; 자신의 크기 만큼만 차지, 마진 포함)

결과3: 인라인 블록 ; 블록이지만 인라인 속성을 지님, 오른쪽으로 쌓임)

결과4: 디폴트 ; 블록속성이 기본으로 적용)

=>None은 보이지 않는다.

• div는 블록이 기본설정, span은 기본설정이 인라인 이다.
  
  (span 태그의 디폴트(display 속성을 따로 지정하지 않은) 모습, 인라인 설정이다.)

• 인라인 블록 크기 지정
  
  (4개의 인라인 블록을 px,em,rem,%로 각기 다르게 지정한 모습)

(왼쪽 부터 순서로 48px, 3em, 3rem, 30%로 높이와 너비 지정한 모습,
30%는 부모를 30% 크기로 축소한 것이라 다른것과 비교해도 큰 모습)

• 최상위 html의 폰트사이즈를 변경하는경우
  
  (우측과 같이 html의 기본 폰트 사이즈를 16px에서 32px로 증가 시킨 모습
  px 단위 : 폰트사이즈가 바뀌던 말던 48px 유지
  em, rem 블록 : 여기서는 동일하게 폰트사이즈에 비례하여 같은 모습으로 늘어남
  % 블록 : 마찬가지로 비례하여 늘어남)

• 부모 사이즈의 폰트 사이즈를 변경하는 경우

(testing 의 우측상단에 있는 em은 4배, 좌측 하단의 rem은 2배가 늘어남, html의 폰트 사이즈가 2배, 부모 블록의 폰트 사이즈도 2배 하였기 때문에 부모 블록에 영향을 받는 em은 2*2로 4배가 늘어남(나중에 제어하기 힘들 수 있음.)
하지만 rem은 html의 기본 폰트 사이즈에만 영향을 받기 때문에 비교적 영향을 덜 받을 수 있기 때문에 선호 하는 편이다.)

git 에서 commit 하지 않고 수정한 사항을 없애는 법

$ git reset --hard HEAD

최근의 commit 에서 모든 변경 사항을 날리게 됨, 가장 최근의 commit 으로 돌아감

(전의 commit으로 돌아간 모습)