본문 바로가기

웹개발/[인프런] 실전 HTML & CSS

7강. CSS 기본 2

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

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

 

실전 HTML & CSS 강좌 - 인프런

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

www.inflearn.com

 

7-1 id(#)와 class(.)

id는 유일하고, class는 유일하지 않습니다.

id를 선택할 때는 #으로, class를 선택할 때는 .으로 합니다.

float:left주고 바깥에 overflow:hidden주면 div태그여도 옆으로 붙습니다.

clear:both로 내려오는 float정렬 제거

font-size에서 2em은 2배라는 의미입니다.

 

 

7-2 tag, id, class 혼합

tag, id, class를 혼합하여 CSS에서 속성을 설정할 수 있습니다.

ul li.menu는 ul태그 안에 있는 li태그에서 class값이 menu인 애를 선택합니다.

 

 

7-3 속성 선택자

input[type=text]는 input태그 중에서 type속성이 text인 애만 선택합니다.

img[src]는 img태그 중에서 src속성이 있는 애를 선택합니다.

 

 

7-4 후손 및 자손 선택자

자손은 바로 밑, 후손은 밑에 있는 모든 것입니다.

div li는 후손 선택(공백 한칸)

div>h1는 자손 선택(>)

 

 

7-5 동위 선택자

태그의 동등한 위치를 판단하여 CSS속성을 설정할 수 있습니다.

+는 바로 밑에 동등한 것만 선택

~는 밑에 있는 동등한 것 모두 선택

 

 

github.com/HoYoungChun/piro14/tree/master/%EC%9D%B8%ED%94%84%EB%9F%B0%20%EC%9D%B8%EA%B0%95

 

HoYoungChun/piro14

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

github.com

 

'웹개발 > [인프런] 실전 HTML & CSS' 카테고리의 다른 글

9강. CSS 기본 4  (0) 2020.12.30
8강. CSS 기본 3  (0) 2020.12.30
6강. CSS 기본 1  (0) 2020.12.30
5강. HTML 기본 4  (0) 2020.12.30
4강. HTML 기본 3  (0) 2020.12.30