🌷 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--
