CSS 기초 특강(초기화, inline,block-level)

🌷 CSS 적용 순서

1. 전체적인 레이아웃 잡기
2. background-color를 넣어 시각적으로 확인
(inline 요소인지 block-level 요소인지도 확인)
3. 기본스타일(레이아웃-width 등)설정하여 공간 확보
4. 요소, 타입 셀렉 초기화
(f12>style agent sheet에 브라우저 기본 설정 확인 후 처리)
5. initial, inherit, margin:0, padding:0
6. 디자인 CSS 작성

🚩 css 구성- user selector{property: value;}

🚩 항상 설정이 왼쪽 정렬인 이유: 언어 표기 방향때문에(나라권마다 그래서 다름)

🚩 body, h1, li 등 초기화 하는 이유
브라우저마다 user agnet sheet가 달라서 초기화를 통해 디자인을 통일시켜야 함

body,ul{
   margin: intial; /*margin=0*/
   padding 0; 
   
   
 h1, p{
 	margin: 0
    font-size: inherit;
    font-weight: inherit;
}

li{
    list-style-type: none;
}

- width의 initial은 auto로 부모 너비 기준 가득참
- height initial(auto)는 자식요소 기준으로 참 > height설정은 주로 auto 또는 미설정

💙 width = 100%와 width =auto
공통점) 부모의 크기를 가득 채우는 개념.
차이점) 100%는 margin을 설정하면 부모 태그를 넘어감/ auto는 부모태그 안에서 숨겨짐

💙 절대적으로 width=auto;로 사용하는 게 좋음

🌷 inline element

- baseline 위에 앉아서 태그 안 글자 길이만큼의 영역만 차지
- <span>, <a>,<img>, <em>, <i>, <strong>
- width,height 속성의 영향을 받지 X
- 좌우로만 이동 가능(상하 움직임 X)

❗ img와 css의 background-image 차이
img는 표현하고자 하는 컨텐츠인 경우, background-image는 단순히 데코레이션 및 꾸미는 용도

❗인라인 요소 가운데 정렬: {text-align:center}

❗ 부모 태그에 text-align:center로 인해 h1과 p가 가운데 정렬인 된 것은 직접 h1,p가 움직여서가 아니라 h1, p 인라인 요소에서 줄타며 가운데로 이동 > 실제로 움직이려면 margin을 사용해야 함.

🌷 block-level element

- 가로 너비 가득 차지(width= 100%)
- <div>,<section>,<h1>,<p>,<li>

❗ block-level element 가운데 정렬 {margin: 0 auto;}
❗ 예외] 블럭 태그 중 <p> 는 자식으로 인라인 태그만 가질 수 있다.

🌷 inline -block

- block-level을 inline처럼 한줄로 표현해줌(text 라인을 기준으로)
- block과 inline 요소 성격을 모두 갖춤

🌼 CSS 속성 적용 순서(specificity 명시도)

*점수를 매기는 것과 같은 원리

1. specificity를 아래 기준으로 점수를 매긴다. (금,은,동)

type 선택자: (0,0,1)
class: (0,1,0)
id(1,0,0)

2. 동점이면 더 아래에 있는 속성 값이 적용된다.

2-1. 브라우저는 css속성을 위에서 아래로 읽는 기본 원리

❗ style=""은 html 태그 내에서 직접 설정하고 !important는 css value값 옆에 작성하는 강력한 명령이다. 꼭 필요한 경우가 아닌 이상 쓰지 않는 것을 지향

📗 border를 활용한 다양한 디자인 활용 사이트

https://9elements.github.io/fancy-border-radius/#100.35.0.41--