04-16 수업 내용 복습

=========코드수업============

4엘리먼트로 화면 만들기

 

img 태그를 선택해주기 위해서 전 시간에 배운 선택자 :nth-child() 를 사용한다.

 

첫번째 메인 이미지는 Block 요소로 만들어 준 다음에 

display: Block; 요소를 margin을 이용한 중앙정렬 방법
margin: 0 auto;을 사용한다.

margin: a b;는 a는 top,bottom을 지칭 b는 left,right를 지칭 한다.

 

나머지 3개의 이미지를 정리해주기 위해서 body태그에 text-align: center;을 넣어준다.

 

그 후 3개의 이미지의 사이즈와 여백등을 조절하기 위해서

선택자 :nth-child()를 사용해서 함께 선택해 준 후에

margin과 width: 값을 조절해준다.

 

--------------------------

테두리 깎기

 

border-radius 테두리를 깎을 수 있다.

 

border-radius의 속성값으로는 px, %등이 들어 갈 수 있다.

border-radius의 속성 기입 순서는 x축 / y축 이다.

border-radius

border-radius : top LX,top RX   bottomRX,bottom LX  /  top LY,topRY    bottomRY,bottomLY

 

ex) border-radius : 20px 30px 40px 50px / 20px 30px 40px 50px
순서대로

왼쪽 top모서리 20px씩 

오른쪽 top모서리 30px씩

오른쪽 bottom모서리 40px씩

왼쪽 bottom모서리 50px씩 이다

 

 

-깨알 태그-

cursor:pointer;
마우스를 올리면 손가락 포인터 모양으로 바뀐다.

opacity 투명도 0~1