$$config title: Web1 수업 4일차 keywords: - Class - border-radius $$ # Class & ID div.a / div.a.b 등 젠코딩으로 속성만들수있음.(class) div#a (id) class와 id의 차이. class는 반 (학생이 여러명) id는 학생개인 (혼자만의 고유속성. HTML에서 단 한번 사용가능) tag가 a인 엘리먼트 선택 a { } class가 a인 엘리먼트 선택 ( . 입력 ) .a { } id가 a인 엘리먼트 선택 ( # 입력 ) #a { } class a와 b를 동시에 가진 엘리먼트선택 ( 띄어쓰기 금지. 띄어쓰기는 후손선택 ) .a.b { } section태그이면서 class a와 b를 동시에 갖고있는 엘리먼트 선택 section.a.b { } 우선순위 id > class > tag # 테두리 border & margin border : 테두리의 두께 ( dashed 점선, solid) 및 색 (color) margin : 테두리의 여백 box-sizing:border ( border-box); : 박스사이즈 내부의 보더값이나패딩들이 박스사이즈를 넘지못하게한다. border-radius:10px20px 30px 40px ; or 30px; or 20%; (박스 사각 꼭지점 갉아먹기) Ctrl Shift 7 = codepen 새로고침 # image

가로세로300의 image삽입 만약 width = 500px; 를 주면 height를 지정하지 않아도 자동으로 바뀜. image는 inline속성인데 크기가 변경이되는 예외케이스. css> object fit:cover; 는 확대기능. object fit:contain : 사진이 확대되지않게 화면에 맞춤. (위아래 여백) object-position:top; 하면 위로사진이동가능. css>div{ (백그라운드 이미지 삽입 div는 가로가 무한이라 no-repeat으로 반복제거) background-image:url(https://images.pexels.com/photos/12312075/pexels-photo-12312075.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); height:500px; background-repeat:no-repeat; } -> 백그라운드 이미지 삽입을 통해 글자를 작성할 수 있음. url(), () 하면 두개삽입가능. 왼쪽의 ()가 더 최신명령으로 인식. background-position : 50% 90% 사진의 좌우 위치 조절가능.(첫번째사진50%=center; 두번째사진90%) # nth-child ```css div:nth-child(3) n번째 자식에게 속성부여. ex:

여기서 2번째div에게 주고싶을경우 div:nth-child(3) 을 해야함. (3)은 3번쨰div가 아니라 행의 숫자를 의미.

여기서 중간의 div에게 주고싶을경우 section>div:nth-child(2)를 해야함. 첫번째부터 1,2,3. div:last-child (제일마지막) nth-last-child(2)(제일 마지막에서부터 2번째) nth-child(2n) 하면 2의모든 배수가 전부바뀜. nth-child(7n+1) 하면 모든 7의배수+1칸이 바뀜 ex 무지개 ```