8강. CSS 기본 3

※ 다음 강좌를 수강하고 내용을 정리한 것입니다.

https://www.inflearn.com/course/html-css-강좌#

실전 HTML & CSS 강좌 - 인프런

Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌

www.inflearn.com

8-1 반응 선택자

마우스의 반응에 따른 속성을 설정할 수 있습니다.

li:hover로 마우스 올렸을때 색상을 변경할 수 있습니다.

margin: 100 200 300 400하면 순서대로 top,right,bottom,left(시계방향) 각각의 margin 설정

margin: 100하면 모든 부분의 margin에 적용

margin: 0 auto하면 가운데 정렬할 수 있다.(첫번째가 위아래, 두번째과 좌우 margin)

8-2 상태 선택자

상태에 따라서 CSS속성이 변하는 설정을 할 수 있습니다.

focus가 되었을 때, enabled상태일 때, disabled상태일 때에 따라 색상을 변경할 수 있습니다.

8-3 구조 선택자

구조에 따라서 CSS속성이 변하는 설정을 할 수 있습니다.

list-style:none하면 앞에 점 없어집니다.

ul li:first-child, ul:li:last-child{}하면 맨처음과 맨끝 리스트를 선택합니다.

ul li:nth-child(2n+1){}하면 리스트에서 홀수번째인 애를 선택합니다.

border-radius로 둥근 정도를 설정할 수 있습니다.(좌상단부터 시계방향)

8-4 전체적인 레이아웃 설정

행단위로 끊어서 먼저 봐야합니다.

HoYoungChun/piro14

Contribute to HoYoungChun/piro14 development by creating an account on GitHub.

github.com

Supremo