[CSS]

• HTML이 DOM구조를 잘 짜는 것이 중요했다면, CSS는 많이 아는 것이 중요

[CSS의 동작 구조]

• HTML이 CSS를 찾아서 가져오는 형태가 아니고, CSS가 본인이 붙어야하는 곳에 가서 붙는 형태
• 특징
  • CSS만을 미리 작성해 둘 수 있음
  • 한 번 작성한 것을 여러 곳에 재활용 가능

[CSS의 작성 방법]

1. inline-style : 절대 사용 x (유지 보수 어려움)
2. head태그 이용 : 가끔 사용 (팝업 등 단일 페이지에서 사용)
3. 파일 분할 : 대부분 사용

[선택자 (selector) ]

• tag / id / class
• 우선 순위
  • id > class > tag : id가 가장 우선, tag가 제일 나중
  • 같은 계층에선 텍스트상 더 밑에 있는 것이 우선

[CSS 종류]

/*배경색*/
background-color: red;


/*가로 세로 길이*/
width: 200px;  
//px, %, fit-content 주로 사용

height: 50%; 
//부모가 브라우저일 때에는 % 안 먹힘
//세로 스크롤이 되기 때문에 높이에선 % 자주 안씀


/*여백*/
margin: 10%;  
margin-top/bottom/left/right
//바깥 여백

padding: 10%; 
//안쪽 여백


/*폰트 관련*/
color: white;
font-weight : 600;  
//기본값:400 | 크롬은 200, 400, 600만 인식 (safari는 100~900 인식)

font-size : 20;
//기본값 16px, px을 주로 사용

text-align: center; 
//정렬


/*테두리*/
border: 3px solid blue; 
//굵기 | 종류(solid, dotted) | 색상
border-radius: 10px;


/*position*/
static : position의 기본 값
relative: 위치 미세 조정 (top, left, bottom 등)
fixed:
  - 위치 미세 조정 가능 (top, left, bottom 등)
  - width와 height가 fit-content로 바뀜
  - 돔 구조 밖으로 나감 (스크린 위에 고정)
absolute:
  - fixed와 기본적으로 동일
  - but 돔 위에 제자리에 박혀 버림
  
/*box-sizing*/
content-box(기본값) : content 기준 크기 정함
border-box : 테두리를 기준으로 크기 정함
//width 100%일 때 양쪽 padding 사용 시 유용

[CSS 사용 시 주의 사항]

1. 브라우저마다의 출력 차이 : CAN I USE 사이트 이용해서 검사
2. 설정값이 근본 없음 : 잘 알려지지 않은 CSS 팁 체화

* 잘 알려지지 않은 CSS 몇 가지

1. display : inline인 태그를 여러개 붙이면, 사이사이에 공백이 생김
2. body태그는 자체 margin 가짐
3. input은 type에 따라 사이즈가 다름
4. image태그는 유달리 width나 height만 설정해주면 됨

• 참고 링크

[display : block vs inline vs inline-block vs none]

1. block
   • width : 100% , 즉 옆에 아무도 못 오게 막음 (다음 요소 줄바꿈 됨)
   • 태그로 취급
2. inline
   • width : fit-content, 즉 옆에 다른 것이 올 수 있음
   • width 조절이 안됨
   • text로 취급
3. inline-block
   • inline이지만 width 조절 가능
   • text로 취급
4. none
   • 숨겨짐