해당 Post는 css에 대한 기초를 정리한 파일임

css의 기초 정리

Selector Vs Property

위 2가지 대한 간단한 개념 정리

Property’s for example

property-name: value;
//무조건 소문자, 중간 공백 X, 마지막;(세미콜론) 

다짜고짜 property라고 예시를 들었으나,
이 property를 내 html의 h1과 연결하고 싶다면?

h1{
  property-name : value; //property
}

괄호를 열고 아까 작성한 property를 붙여넣기 하면 됨.
이것이 selector라고 함.

간단하게 이야기 하자면 h1에 대한 부가적인 기능을 추가하기 위해

{} 사용하는 것 = selector, 그 안에 들어가는 내용 = property라고 함.

header나 footer등은 그냥 사용하면 되지만,

ID나 Class를 쓸 때,
ID의 경우 #과 같이 작성해야하고,
Class의 경우 .과 같이 사용해야함.

Box elements

css의 중요한 사실은 많은 element들이 box라는 점임.
box는 4개의 요소가 있음.
첫번째는 컨텐츠(contents)
두번째는 박스의 보더(border:경계)
세번째는 패딩(padding: 보더에서 안쪽으로 간격)
네번째는 마진(margin: 보더에서 바깥쪽으로 있는 간격)

Block vs Inline vs Inline-Block

Block은 element가 크기와 상관없이
그 옆에 다른 element가 위치하는 것을 허용하지 않는 것.

Inline-Block는 박스들이 서로서로 바로 옆에 있을 수 있을 때

그렇다면 Inline은 무엇인가?
Inline은 박스의 모든 property를 지움.
박스가 아닌 Text에 기준으로 박스 형태를 유지하고 싶다면 사용.

Static vs Fixed vs Absolute vs Relative

Static은 Box를 예로 들었을 때 페이지상에 고정되어 있는 것.
Fixed는 페이지상에 고정된 것이 아닌 화면에 고정되어 있는 것.
위와 같이 생각하면 됨.

스크롤을 했을 때 Static은 화면상에서 사라지지만,
Fixed의 경우 스크롤을 해도 고정되어서 사라지지 않음.

Absolute는 Relative에 상대적으로 포지션을 잡는 것.
Relative가 없을 경우, 본문 Body에 맞춰서 포지션을 잡음.