HTML5&CSS3

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

아이디 선택자는 “#(샵)”으로 시작합니다. 아이디 선택자와 클래스 선택자는 동일한 작용을 합니다. 문서의 양식을 표현 할 때 아이디 선택자를 사용하나 클래스 선택자를 사용하나 동일한 효과를 줍 니다. 하지만 아이디 선택자는 큰 틀을 구성하는 곳에 사용하는 것이 좋습니다.

특히 문서 내에서 큰 레이아웃을 잡을 때 아이디 선택자를 사용하는 것이 좋습 니다. 아이디 선택자의 사용법은 다음과 같습니다.

CSS 속성에서는 다음과 같이 정의합니다.

#myID { margin:10px; padding:5px; }

HTML 문서 내부에서는 다음과 같이 적용합니다.

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

CSS의 구성요소를 그림으로 나타내면 다음과 같습니다.

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

CSS3에서 추가되거나, 새로운 기능이 추가된 사항은 다음의 표와 같습니다.

Borders Backgrounds Color Text CSS 속성 값 Transformations Box Content 내 용

테두리의 색을 다양하게 적용할 수 있습니다. 또한 테두리에 이미지를 넣을 수 있고 모서리를 둥그렇게 적용할 수 있습니다.

하나의 태그에 다중 이미지를 추가할 수 있고 백그라운드의 위치를 정확하게 잡을 수 있습니다. 또한 백 그라운드의 사이즈도 조절할 수 있습니다.

.

색의 농도(투명도)를 조절할 수 있습니다. 또한 RGB 색과 인쇄용인 HSL 컬러로 색을 지정할 수 있습니다 텍스트에 그림자 효과를 줄 수 있습니다. 또한 단어가 잘리는 효과(word-wrap)를 줄 수 있으며, 텍스트 overflow 효과를 줄 수 있습니다.

변형효과(크기조절, 기울기 효과, 회전효과 등)를 줄 수 있습니다.

박스에 그림자를 적용할 수 있고 사이즈 조절이 가능하며 세로축과 가로축을 기본으로 overflow를 각각 조절할 수 있습니다.

요소(Element)에 직접적으로 콘텐츠를 지정해서 스타일을 줄 수 있습니다.

Opacity Media Web fonts

요소(Element)에 투명도를 지정할 수 있습니다.

CSS2에서 사용하던 media를 다양하게 해상도나 색상 등 여러 가지 요소를 지정해 줄 수 있게 되었습니 다.

웹 폰트가 정식으로 지원됩니다. 지금까지는 IE에서만 지원되었던 것이 모든 브라우저에서 지원됩니다.

CSS3에 새롭게 추가된 속성들

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

CSS3에서 가장 큰 특징 중 하나인 border는 둥근 테두리를 만들 수 있으며, 테두리에 배 경 이미지(IE9 제외)를 넣을 수 있습니다. 또한 각 방향으로 전부 다른 색을 지정할 수 있 습니다. 여기서 간단하게 border에 속성을 적용해 보고, box에 그림자 효과를 넣은 예제 를 보겠습니다.

source/ch04/pic4-7.html

border 속성 적용(IE9)

IE9에서는 border에 백그라운드 이미지가 적용되지 않습니다 만, 다른 브라우저에서는 백그라운드 이미지가 적용됩니다.

border 속성 적용(Firefox)

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

CSS3에서는 백그라운드 이미지 사이즈를 조절할 수 있습니다. 그리고, 하나의 백그라운 드에 또 다른 백그라운드를 이중으로 적용할 수 있습니다. 예제에서 보는 백그라운드 이 미지는 전부 동일한 크기를 지니고 있습니다.

source/ch04/pic4-9.html

첫 번째 이미지는 백그라운드 사이즈를 줄인 것 이며, 두 번째 이미지는 원래 크기의 백그라운드 이미지이며, 마지막 이미지는 두 개의 백그라운 드 이미지를 겹친 것 입니다.

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

CSS3에서는 투명한 효과(Opacity)를 줄 수 있습니다. 박스뿐만 아니라 글자(텍스트)에도 투명효과를 줄 수 있습니다. 투명 효과를 주기 위해서는 색 을 지정할 때 RGB 컬러 또는 HSL 컬러로 값을 지정해 줘야 합니다. HSL 컬러보다는 일반적으 로 RGB 컬러가 많이 사용되는데, Red, Green, Blue의 축약형이 RGB 컬러이며, 값은 0부터 255 까지 각 색별로 부여되어 있습니다. HSL은 Hue, Saturation, Lightness의 약자이며, 색조, 채도, 밝기를 나타냅니다. H는 0에서 300까지 나머지 S와 L은 0에서 100까지 값을 가집니다.

그리고 opacity를 나타낼 때는 0부터 1까지로 표시해 주는데, 0은 완전 투명 0.5는 중간, 1은 불 투명을 뜻합니다. 그래서 색상을 지정할 때는 color:rgba(255,255,255,0.5); 이렇게 표시해 주게 됩니다.

다음페이지에 있는 예제 이미지를 보시면 배경이미지 위에 반투명의 박스가 있으며, 그 아래 BIG FONTS라는 텍스트에도 투명도가 지정된 것을 볼 수 있습니다.

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

투명 배경 적용 글자(텍스트)에 투 명도 적용 source/ch04/pic4-10.html

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

transformation은 말 그대로 변형을 나타내는 말입니다. 박스를 기울게 하거나, 회전이 가능하게 처리할 수 있습니다.

화면에서 보면 첫 번째 화면이 일반 적인 박스 이미지이며, 다음 박스는 기울이기(skew)가 적용된 모습이며, 마지막은 회전(rotation)이 적용된 화 면의 모습을 확인할 수 있습니다.

각 예제에 따른 소스는 직접 다운 받아 브라우 저에서 소스 코드 보기를 통해 소스를 확인해 보시기 바랍니다.

source/ch04/pic4-11.html

처음부터 다시 배우는

HTML5 & CSS3

CSS 일반 규칙과 CSS3에서 추가된 속성

표에서 CSS3에서 추가된 속성이라고 했지만, 현재 모든 브라우저에서 정확 하게 모든 속성이 적용되지는 않습니다. 즉 현재 HTML5와 CSS3는 확정형이 아닌 진행형입니다. 그리고 각 브라우저 개발업체에서도 계속해서 새로 운 브라우저를 출시할 예정이기 때문에, 조만간 모든 브라우저에서 CSS3에서 새롭게 추가된 속성을 지원할 것으로 생각합니다.

강의에서는 표에 언급한 CSS3 속성 중 모든 브라우저에서 공통적으로 사용 가능한 속성들만 다루도록 하겠 습니다.

이번 강의에서는 CSS가 어떻게 동작하는지 그리고 CSS Zen garden을 통해서 CSS의 강력함을 보았습니다.

이렇게 CSS만 바꿈으로써, 사이트의 구조는 유지하고 전체 웹사이트 디자인을 바꿀 때 HTML 태그만을 이용 한 웹사이트 디자인보다 유연하고 빠른 시간 내에 디자인을 변경할 수 있습니다.

또한 실무적으로도 CSS에 완벽하게 적응되면, 이전 방식(HTML 태그만 이용)은 더 이상 사용할 수 없을 정도 로 편리합니다.

처음부터 다시 배우는

HTML5 & CSS3

클래스 선택자와 아이디 선택자의 차이점

CSS와 관련해서 .(클래스)와 #(아이디) 선택자에 대해서 많은 분들이 처음에 이해하기 힘들어 합니다. 왜 하나의 선택자에 대한 정의만 해주지 두 개의 선택자를 만들어서 사람 헷갈리게 만드냐고 하는 말 들이 많습니다. 간단한 예를 하나 들어 보겠습니다.

.apple이라는 클래스 선택자와 #apple이라는 아이디 선택자는 다릅니다. 명백히 다른 문자인 것을 알 수 있습니다. 클래스 선택자는 점으로 문자가 시작됐으며, 아이디 선택자는 샵(#)으로 문자가 시작되 었기 때문입니다.

웹사이트를 개발하다 보면 이런 식의 레이아웃을 정의하는 단어를 많이 만들어야 합니다. 그러다 보 면, 개발자들이 알기 쉬운 단어로 사이트 요소 요소를 정의해 줘야 하는데, 많은 단어를 사용하다 보 면 사용하는 단어의 한계에 부딪힐 수 있습니다. 그럴 경우 같은 이름을 사용하더라도, 앞에 오는 특 수 문자에 따라 달리 사용해서 그 의미를 “.(점)으로 시작하는 것은 반복되는 속성을 지정할 때 사용하 고, #(샵)이라는 속성을 가진 선택자는 큰 레이아웃을 잡을 때 사용되는구나.”라고 파악한다면, 적은 수의 단어만 사용해서 정의해줄 수 있고 전체 문서의 구조를 살펴 보더라도 의미 파악이 쉬울 수 있습 니다.