|
|
- CSS 제대로 사용하기.
-
HTML의미 바로 알기
-
HTML은 markup language이다.
-
마크업 : 눈으로 보이는 글자 외에 원고에서 특정 부분의 의미가 무엇인가를 설명하고 그것을 표기하는 것.
-
일반적으로 작업자들은 HTML을 markup하는 용도보다는 겉으로 어떻게 문서가 보이는 지 만을 나타내기 위해 사용.
-
-
HTML과 CSS의 관계
-
HTML : 컨텐츠의 내용과 구조를 표시.
-
CSS : HTML으로 제작된 페이지를 어떻게 표현해 내는지에 대한 것을 담당.
-
CSS의 가장 큰 목적은 문서의 내용과 표현을 분리하는 것.
-
-
-
CSS의 개념 및 소개
-
CSS(Cascading Style Sheet)란 무엇인가?
-
CSS : 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language
-
-
CSS의 선언
-
p.text {
margin: 0;}
- p.text : 선택자
- margin:0; : 선언부
-
p.text, span.name {color: #666;} -
선택자는 콤마로 구분 가능하다.
-
선언부의 내용을 두가지 이상의 요소에 적용할 때 사용한다.
-
h1 { font-weight: bold } h1 { font-size: 3em }h1 { color: #333 }h1 { margin: 1.5em 0 1em }h1 { padding: 0 0 0 8px } -
위의 경우 아래처럼 세미콜론으로 구분하여 선언 가능.
-
h1 { font-weight: bold;font-size: 3em;color: #333;margin: 1.5em 0 1em;padding: 0 0 0 8px;}
-
-
CSS 선택자
-
일반 선택자
-
공용 선택자 * 모든 태그를 지정 타입 선택자 A 태그 A를 지정 클래스 선택자 .A 클래스가 A인 태그를 지정 ID선택자 #A 아이디가 A인 태그를 지정 -
복합 선택자
-
하위 선택자 A B 태그 A로 감싸져 있는 태그 B를 지정 자식 선택자 A > B 태그 A로 감싸져 있는 태그 B중 한 단계 밑에 것을 지정 인접 선택자 A + B 태그 A와 B가 연속으로 나와 있는 것을 지정 -
가상 클래스 선택자
-
:first-child 선택자 A:first-child 태그 A로 감싸져 있는 가장 처음 태그를 지정 언어 선택자 A:lang(B) 태그 A중 언어가 B로 설정된 것을 지정 링크 선택자 A:link 태그 A중 링크가 걸려있으면 지정 A:visited 태그 A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정 동적 선택자 A:active 태그 A중 사용자가 마우스를 누르고 있는 태그를 지정 A:hover 태그 A중 사용자가 마우스 포인터를 위에 올려 놓은 태그를 지정 A:focus 태그 A중 사용자의 키보드 입력을 받는 태그를 지정 -
동적 선택자
-
:first-line 선택자 A:first-line 태그 A의 문단중 첫번째 줄을 지정 :first-letter 선택자 A:first-letter 태그 A의 문단중 첫번째 글자를 지정 :before 선택자 A:before 태그 A의 문단 앞을 지정 :after 선택자 A:after 태그 A의 문단 뒤를 지정 -
CSS 선언 방법
-
외부 선언
-
<link rel="stylesheet" type="text/css" href="myCss.css" /> 의 형식
-
엘리먼트에 직접 선언
-
<div style="padding: 10px; border: 1px solid #eee;"> 의 형식
-
사용자 정의 형식
-
CSS 적용의 체크 포인트 4가지
-
XHTML이 표준 문법이어야 한다.
-
http://validator.w3.org 등의 사이트에서 사이트 체킹
-
XHTML 문서가 의미와 구조적으로 구성되어야 한다.
-
CSS가 표준 문법이어야 한다.
-
CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
-
CSS 레이아웃 기초
-
레이아웃에 사용되는 두가지 속성 position vs. float
-
position
-
position은 static, relative, absolute의 세가지 값을 가질 수 이싿.
-
static : 기본값
-
relative : static과 같지만 offset을 지정 할 수 있고, 하위 엘리먼트 offset의 기준점이 된다.
-
absolute : 화면상에서 다른 컨텐츠에 위치에 영향을 미치지 않고 위치 지정이 가능하다. 보통 레이어라고 불리우는 것.
-
float
-
float은 left, right, none의 세가지 값을 가질 수 있다.
-
left : 엘리먼트를 좌측으로 배치함.
-
right : 엘리먼트를 우측으로 배치함.
-
none : float시키지 않음.
"기타" 카테고리의 다른 글
- '/mn_adm' 응용 프로그램에 서버 오류가 있습니다... (0)2009/06/05
- asp.net 엑셀 컨버팅 시 한글 깨지는 문제 (0)2009/06/05
- 웹 표준 가이드북 - 실전 CSS 레이아웃 (1)2009/04/15
- 웹 표준 가이드 북 - 구조적 XHTML 사용 방법 (1)2009/04/13
- 실전 웹 표준 가이드 - XHTML 의 소개 (0)2009/04/13
