HTML 책 보면서 정리하는 -
◈ 뉴서울(NewSeoul) HTML 5 강좌 3◈
- 노트입니다. 오늘은 CSS3 기본편 입니다. ~~~
CSS3의 기본 개념
; Cascading Style Sheet
강좌 1에서 이미 스타일을 HTML 문서에 적용하는 방법을 설명했습니다. 여기서 다시 한 번 정리해 보겠습니다. 뭐... 기억을 다시 한 번 상기해 보시거나, 건너뛰셔도 좋습니다.
HTML 문서에 스타일을 적용하는 방법
1. 인라인 스타일
<a href="..." style="background-color:gray; color:white">
2. 내장 스타일
style 엘리먼트를 이용해서 내장 스타일을 생성하고 적용할 엘리먼트를 CSS 선택자로 지정할 수 있다.
예) 문서의 모든 a 엘리먼트에 스타일이 적용된다.
<head><style type="text/css"> a { background-color: gray; color: white }</style></head>
3. 외부 스타일시트
동일한 스타일을 여러 HTML페이지에 적용해야 할 때 유용하다.
여러개의 스타일 시트를 불러올 수도 있고, 스타일이 중복될 경우, 나중의 스타일이 적용된다.
예)
-- mystyle.css 파일
a {...}
-- HTML 페이지 파일
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></link></head>
스타일시트에서 다른 스타일시트에 선언된 스타일을 불러올 수도 있다.
하나의 스타일시트에서 @import문은 1회만 사용할 수 있고 제일 상단에 와야 한다.
@import문에서 여러개의 스타일시트를 불러올 수 있다.
@import는 브라우저의 실행속도를 느려지게 하는 경향이 있다
예)
@import "anotherstyle.css";CSS 스타일시트 안에서 유일하게 @import문 전에 올 수 것은 @charset 구문이다.
@charset은 스타일시트가 사용할 문자의 인코딩을 정의한다.
@charset을 정의하지 않을 경우, 디폴트 HTML 인코딩(UTF-8)이 사용된다.
예)
@charset "UTF-8";@import "anotherstyle.css";...4. 브라우저 스타일
스타일이 정의되지 않았을 때, 디폴트로 적용되는 스타일이다.
예) 링크는 의례 파란색에, 밑줄이 그어져 표시됨을 상기해 보면 알 수 있다.
아마도 아래와 같은 브라우저 스타일이 적용되고 있음을 짐작할 수 있다.
a { color: blue; text-decoration: underline; }
※ 스타일이 적용되는 우선 순위
인라인 > 내장 > 외부 > 브라우저 디폴트
!important로 마킹함으로써 스타일 우선 순위를 최상위로 강제 변경할 수도 있다.
예)
<style type="text/css">a { color: black !important;}
엘리먼트에 적용할 스타일 우선 순위가 같을 경우, 브라우저는 다음 기준으로 좀 더 구체적인 스타일을 우선하여 적용한다.
1st. 선택자가 가지고 있는 id 값의 개수
2nd. 선택자가 가지고 있는 다른 속성 및 가상 클래스의 개수
3rd. 선택자가 가지고 있는 엘리먼트 및 가상 엘리먼트의 개수
적용할 스타일이 없을 경우, CSS 프로퍼티 상속이 이뤄진다. (무조건 상속되는 것은 아님)
즉, 상위 엘리먼트에 정의된 스타일이 있다면 적용된다.
CSS 속성이 상속되는 경우는, 엘리먼트 외형과 관련된 속성(글자색, 폰트,...)인 경우로 한정된다.
(페이지 레이아웃 관련 속성은 상속되지 않음)
예) 강제로 상속된 값 사용
<style type="text/css">p { color: green;}span { color: inherit;}지정법
색상 지정법
1. 색상 이름으로 지정
2. 16진수로 색상의 RGB값을 지정 (#rrggbb)
3. 색상 함수로 지정
rgb(r, g, b)
rgba(r, g, b, a)
hsl(h, s, l)
hsla(h, s ,l, a)
길이 지정법
값과 단위를 붙여써야 한다.
※ 절대 길이 단위들
in (인치)
cm
mm (millimeters)
pt (point, 1pt = 1/72 인치)
pc (picas, 1pc = 12 포인트)
※ 상대 길이 단위들
em (엘리먼트 폰트 크기에 따름. 엘리먼트 별로 독립적으로 크기가 계산됨)
rem (root 엘리먼트 폰트 크기에 따름)
ex (엘리먼트의 문자 'x'의 정도되는 높이에 따름)
px (css 픽셀의 개수에 따름. CSS에서 모호하게 정의해놔서 실제로는 대략 1/96인치(절대단위)를 기준함)
% (다른 속성 값에 대한 비율)
* 절대단위와 상대단위를 혼용할 수 있다.
상대단위가 유지보수에 유리할 수 있다. em이 유용하다. 폰트크기를 변경하면 나머지 크기도 적당히 바뀐다.
상대단위를 사뇽할 때는 기준이 되는 크기도 명확히 선언해놔야 함을 잊으면 안된다.
예)
width: 5cm;
font-size: 20pt;
※ 각도 단위들
deg 0~360도
grad 0~400 gradian
rad 0~2π radian
turn 회전수. 1 turn = 360도
※ 시간 단위들
s 초
ms 밀리초
※ 유용한 도구들
Modernizr : 브라우저에서 HTML과 CSS 기능 지원 여부를 확인할 수 있는 JS 라이브러리다.
SelectorGadget (www.selectorgadget.com) : 엘리먼트를 선택하면 selector를 생성해 준다.
LESS(lesscss.org) : CSS 편이성을 확장해주는 JS 라이브러리다. (변수, 함수, 상속 가능)
Blueprint (www.blueprintcss.org) : CSS 프레임워크로서 유연성 높은 그리드 레이아웃을 생성해준다.
'프로그래밍' 카테고리의 다른 글
| (프로그래밍, 운영체제) Kali Linux 설치시 발생하는 소소한 문제와 해법 (0) | 2019.07.29 |
|---|---|
| (웹 최적화) 검색 로봇을 위한 웹페이지 최적화란? (0) | 2018.11.29 |
| (프로그래밍 강좌) HTML 5 강좌2 (0) | 2018.08.14 |
| (프로그래밍 강좌) HTML 5 강좌1 (0) | 2018.06.21 |
| (C#.NET 한글 프로그램 제작) 한글 조립 및 분해 하기 (유니코드 Unicode) (2) | 2018.06.14 |