2009/04/15 13:04 IZECT RIA LAB/ETC..
웹 표준 가이드북 - 실전 CSS 레이아웃
- 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시키지 않음.
'IZECT RIA LAB > ETC..' 카테고리의 다른 글
| 넷빈즈(NetBeans)로 JavaFX파일 웹에서 실행하기~! (0) | 2009/07/28 |
|---|---|
| Java FX Lesson 1 : 자바 스크립트와 함께 시작하기 (0) | 2009/07/23 |
| 웹 표준 가이드북 - 실전 CSS 레이아웃 (0) | 2009/04/15 |
| 웹 표준 가이드 북 - 구조적 XHTML 사용 방법 (0) | 2009/04/13 |
| 실전 웹 표준 가이드 - XHTML 의 소개 (0) | 2009/04/13 |
| Thead, tbody, tfoot 를 사용하는 이유 (2) | 2009/04/07 |
트랙백 주소 http://izect.kr/trackback/278
-
삭제
Subject: 군중소싱
2009/05/18 10:51 | Tracked from 변화를 꿈꾸는 그대에게
잼있네요. 아시는 지는 모르겠지만... Wired라는 잡지가 인터넷 기술 변화와 그로 야기된 사회 변화의 트렌드를 따라잡는 데는 최고의 잡지 중 하나입니다. OLPC 운동의 주창자이자 MIT 미디어랩 창시자인 네그로폰테가 공동 창간자였고 롱 테일로 유명한 크리스 앤더슨이 예전에 편집자였죠. 거기서 나온 비디오 중에... 잼있는 게 있어서 올립니다. 한국어 자막도 달려있어요. (사실 제가 가끔 번역 봉사하러 가는... 사이트에서 발견한 겁니다.) 참고..
댓글을 달아 주세요