10강. CSS 속성 1

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

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

실전 HTML & CSS 강좌 - 인프런

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

www.inflearn.com

10-1 CSS3 단위

CSS3에서 자주 사용되는 단위들에 대해서 살펴봅니다.

px, %, em을 주로 사용하고, 2em은 2배를 의미합니다.

구조선택자를 사용한 p:nth-child(2n)은 짝수번째를 선택합니다.

display:block;을 하면 인라인레벨요소를 블록레벨요소로 변경할 수 있습니다.

10-2 url()

Background-img 속성의 속성값으로 많이 사용됩니다. 이 경우 배경이미지의 경로를 나타냅니다.

background-image: url("http://www.naver.com"); 과 같이 사용합니다.

10-3 display 속성

화면에 어떻게 보이는 지를 설정하는 속성입니다. 다양한 속성값이 있지만, 주로 몇 가지만 많이 사용됩니다.

display 속성의 block, inline, inline-block 속성값은 매우 중요합니다.

인라인 속성은 높이를 줘도 적용되지 않습니다.(margin도 위아래값은 적용안됩니다)

하지만 인라인 블록 속성은 높이가 적용됩니다.

display:none을 주면 화면에서 날라갑니다.(공간마저)

10-4 visibility 속성

display속성의 none속성값과 비교하여 이해합니다.

display:none과 달리 visiblity:hidden은 화면에서 사라지지만 공간은 남습니다.

10-5 opacity 속성

투명도를 조절하는 속성입니다. 여러 곳에 유용하게 사용됩니다.

opacity: 1;일때 완전불투명(기본값)이고, opacity: 0일때 완전투명입니다.

HoYoungChun/piro14

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

github.com

Supremo