css 속성

css 속성에는 초기 값

• 브라우저는 기본 폰트 사이즈를 각각 16px 정도로 지정한다. 
• 백분율 및 상대 값은 항상 픽셀(px)로 변환된다. 
• 백분율은 부모의 폰트 사이즈를 기준으로 사용한다. 
• em로 글꼴을 지정할 때는 부모의 글꼴 크기를 기준으로 측정된다. 
• em으로 길이을 지정할때는 현재의 글꼴 크기로 변경된다. 
• rem은  문서의 루트 글꼴 크기도 변경된다. 
• vh, vw는 단순히 백분율 측정값이다. 

 

css의 상속

상속은 속성 값을 전파하는 방법이다. 

• 상속은 부모에서 자식에게 일부 특정 속성에 대세 값을 전달한다. 
• 상속은 폰트 패밀리, 폰트 사이즈, 색상 등등 이 관련되어 있다. 
• margin, padding등은 상속이 되지 않는다. 

 

Rem단위

• rem단위를 쓰는 이유, 모든 측정값을 변경하려면 간단한 설정 하나로 되기 때문.
• 사용하기 위해서 html 선택자에서 글꼴 크기를 변경해주면 되는데 여기서 Font size를 10px로 지정을 한다. 왜냐하면 1 rem은 10px이란 뜻이기 때문이다. 
• 1 Rem = 10px
• 만약 초기 글꼴 값의 px을 16픽셀로 유지하고 싶으면, html 선택자에 기본적으로 100% 백분율로 표현할 수 있다. 
• 그런데 우리는 px을 10픽셀로 유지하고 싶다면, html 선택자의 font-size에 62.5%라고 입력한다. 

 

 

Box 모델

• css에서 가장 기본적인 모델 중 하나.
• 웹페이지를 레이아웃하기 위해 Box 모델은 요소가 어떻게 구성되는지 정의하는 요소 중 하나이다. 
•  

• Context의 내용에는 모든 text, 이미지 등, 또는 우리가 지정한 다른 콘텐츠
• padding은 콘텐츠 주변의 영역, 상자 내부에 공백을 생성함.
• border은 상자의 테두리를 지정할 수 있음. 테두리는 패딩과 콘텐츠를 둘러싸고 있다. 패딩과 유사하게 공백이 있음, 그 공백은 상자 외부에 있는 공백이다. 
• margin은 영역은 css에 여백의 속성을 정의한다. 
• box-sizing을 border-box로 지정하면 높이와 너비는 전체 상자에 대해 정의된다. 패딩과 콘텐츠 영역과 border을 포함하여 말이다. 이것의 의미는 패딩이 우리가 지정하는 테두리 물론, 콘텐츠 영역의 내부 너비, 콘텐츠 영역의 내부 너비, 전체 높이 등등 포함한다.  

 

Box 타입 : Inline , block-level, Inline-block

• 페이지에 상자가 배치되는 방식을 결정한다. 
• block 요소는 먼저 상자 유형이 항상 정의된다. 블록 수준의 요소는 display속성은 일반적으로 block으로 설정이 된다. 즉 html의 기본 속성이 Block이라는 뜻이다. block box는 항상 일반적으로 부모 너비의 많은 공간을 차지한다. 
• Inline box 요소는 인라인 box 만 차지한다. 즉, 콘텐츠가 실제로 필요한 공간만 차지한다. 줄바꿈을 일으키지 않는다.  
• Inline block box 요소는 기술적으로 인라인 box이기도 하다. 그러나 내부에서는 단순히 block 수준의 상자로 작동한다.  콘텐츠 공간만 사용하고, 줄 바꿈이 없다. 그러나 내부에서 블록 수준의 box로 작동한다.