이 날 부터는 HTML과 CSS를 함께 사용하므로 두 언어가 구분 없이 병기 되어 있습니다.
여백설정
margin : 50px 10px 30px 20px ; 상 하 좌 우
margin : 50px 10px 30px ; 상 좌우 하
margin : 50px 10px ; 상하 좌우
margin : 10px ; 상하좌우
margin : auto ;
*{margin: 0%; padding: 0%;} < 맨 처음 마진패딩 초기화
이미지태그는 인라인 태그지만 넓이높이 적용됨
css에서 하위 문서 호출
.list2 span -- list2의 하위문서 span호출
.list2>li>span — list2의 자식 문서 li 의 자식문서 span 호출
-dl ul ol(목록 태그 하위)는 기본으로 마진 잡혀있어. dt랑 라인 맞추려면 마진 없애줘야한다.
-마진 줄이고싶으면 margin-left 줄여주기
-dt와 dd는 형제관계(sibling관계)이므로 ‘>’이렇게 부르면 안됨
'>'는 자식 관계만 가능
list-style 속성 줄여 쓸 수 있어
background 속성
css background 는 border부터 깔린다 border없으면 padding부터, padding 도 없으면 contents부터
padding 은 안쪽 여백, margin은 바깥쪽 여백이라고 하는 이유 : border도 영역으로 치기 때문에 ~!~!
background clip : border-box / padding-box / content-box
background repeat : repeat / repeat-x / repeat-y / no-repeat
background position : 배경이미지 위치
background origin : 배경이미지 배치할 기준 조절 (border-box,padding-box / content-box)
얘네 다 background 축약 속성으로 조절 가능
-image / -repeat / -attachment / -position / -clip / -origin / -size
ex)background : url(image/card1.jpg) no-repeat;
cover 등 background-size는 축약으로 못쓰는데 쓰려면 / 넣고 앞에 반드시 position값이 있어야해
ex) background : url(image/card1.jpg) no-repeat center / 50px ;
background clip 과 origin 차이
clip 깔리는 위치 디폴트가 border부터 시작
origin은 시작 위치 디폴트가 padding
contain 과 cover차이
contain은 비율 유지하면서 꽉 채움 – 이미지가 다 보이냐가 중요
cover은 무조권 꽉 채움 – 영역이 다 차느냐
background size 는 축약 안돼!!!
background attachment
scroll이 기본, fix하면 배경 고정
목록 꿀팁
ul>li*5 하면 li 5개 생김
alt + shift + crtl 잡고 하면 한번에 잡힘
alt + shift + 화살표 하면 그대로 복붙됨
