CSS 특강
-> 구글링을 하는 데에 영어 원문을 아는게 핵심이라고 하셨다!
initial value
-> 프로퍼티에 딸린 초깃값
user agent stylesheet
브라우저가 제공하는 기본 스타일
ex)body요소에 적용되어있는 margin 8px
width: auto와 width: 100% 의차이
-> auto는 마진을 제외한 가능한 한 큰 넓이
@media (max-width : 500px){div{width : auto;}}=> 뷰포트가 500px 아래로 내려갈 때 실행
width: initial;
-> width 초기화
width initial value = auto //부모 기준
height initial value = auto //자식 기준
기본 값
background color 기본 값 transparent
box-sizing 기본값
content-box;
-> border-box로 지정시 width height 에 padding 과 border 포함시킴
margin initial value 는 0
브라우저 기본제공 스타일(크롬)
-> https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
기본스타일 초기화 ( 브라우저 기본제공 스타일을 버리고 내가 원하는대로 디테일하게 꾸미기 위해서)
/reset/
h1{
margin: initial;
}
margin-left : auto;
사용가능한 범위를 (왼쪽)여백으로 갖는다
블록레벨엘리먼트 중앙정렬-> margin : 0 auto ; (container)
인라인엘리먼트 중앙정렬-> text-align : center; (텍스트, 이미지, 컨텐츠a, span)
css 상속 : 부모요소의 성질 그대로 물려받음(프로퍼티가 그대로 넘어온다)
-> text-align, color, font 등등 물려받을 수있음
-> width, background-color 상속 X
-> auto값이 부모의 width 값으로 계산되는거지 상속되는 것 아님
background-color: inherit;
->억지로 상속 시킬 때 value값으로 inherit 줌
!! 원래부터 상속이 지원되는 프로퍼티들은 초기화 진행을 inherit으로 줌
background-size : cover;
-> 백그라운드 이미지 짤리지 않게 전체로 설정가능
-셀렉터와 셀렉터 사이에 구문들어가는 것-(combinator)결합자
.header img
-> 하위 셀렉터 (헤더안의 이미지 모두 선택)
.header > img
->직계 자식 셀렉터
width: fit-content; /max-content, min-content/
-> 내부 컨텐츠 크기만큼 width 값 지정
-> inline 속성을 주는 것도 가능 (IE 지원 o)
class (다중 사용가능)
id(단 한개의 이름 지정가능)
min-height (최소 크기 지정)
-오버플로우에 대비하여 유연한 대처가능한 코드-
height :auto;
padding: 80px 0px;
background-size : cover;
<a 와 button>
a는 페이지의 이동이 있을 경우 사용
button는 페이지 내의 액션이 있을 경우 사용
a요소는 인라인 엘리먼트라서 가로로 배치됨
-> 텍스트요소의 크기에따라 크기 지정 &bnsp(html 띄어쓰기)
display: ~;
->인라인 엘리먼트를 블럭화하거나 블럭 엘리먼트를 인라인화 시킬 때 함
< 버튼만들 때 사용 >
display: inline-block; -> 블록 세개를 같은 라인선에 위치 시킴 (인라인 특성과 블록레벨 특성 같이 존재함)
block;
<클래스 특성으로>
class="link black" 처럼 클래스를 스페이스를 기점으로 두개 지정할 수있다.
!!!마진 병합현상 검색 후 탐색 !!!
<li 점 없애기>
li{
list-style-type: none;
}
<백그라운드는 도배되는 특성이 있어서 요소들을 많이 알아가는게 중요하다>
background-repeat;
background-position: right 30px center;
<css에서 클래스 작성순서를 고려해야하나?>=Cascading Style Sheet
- 요소선택자보다 클래스 선택자가 우선순위가 높다.( 구체적인 선택자 우선순위가 더 높음)
- 마지막에 작성된게 우선순위가 높다 -> css 파일을 위에서 아래로 읽어나가기 때문
!! 클래스 두번 언급하면 우선순위가 높아진다
Selector Specificity: (0,1,1)
Selector Specificity: (id 셀렉터 개수, 클래스셀렉터개수, 타입셀렉터 개수)
=> 구체적인 셀렉터일수록 아래에 위치시키는 것이 좋다.
