FreeMinderHuni: Head First HTML with CSS & XHTML 요약2

Chapter1. 웹 언어

주석
고성능 HTML 페이지를 위해서 <html>를 사용하는 것이 좋다.
html 파일 확장자 : html 이나 htm

페이지 기본 구조

html 파일 확장자 : html 이나 htm
웹페이지의 구조를 브라우저가 알 수 있도록 하기 위해서는, 콘텐츠를 둘러싼 태크의 쌍(paris)을 사용하라엘리먼트 = 시작(opening 태크) + 콘텐츠(내용) + 종료(Closing)태그
css와 html 와 완전히 다른 언어 형식 임.

Chapter2. HTML에서 ‘HT’ 알아보기

- <a> 엘리먼트

엘리먼트를 사용해서 다른페이지를 갈수 있는 하이퍼텍스트 링크를 생성한다.
엘리먼트는 콘덴츠는 웹 페이지에서 클릭 할 수 있게된다.
href 속성은 브라우저에게 링크의 목적지를 알려 준다.

- 경로

경로를 만들수 최대 문자수는 255자
부모 폴더를 의미 : ..
경로 구분자 : /
상대 패스와 절대 패스

Chapter3. 웹 페이지 만들기

인용 관련 태그인 <q>와 <blockquote> 차이는 : 인라인 요소와 블록 요소
블록 , 인라인 의 차이점 : 자립 여부 아니면 시대의 흐름을 따라가는냐?
리스트 예제

<li>computer</li>

<li>printer</li>

</ol> or <ul>

정의 예제

<dl>

<dt>computer</dt>

<dt>printer</dt>

</dl>

중첩이란 : tag 하위에 tag를 넣는 것

Chapter4. 웹 마을로의 여행

URL 구조 설명http://www.starbuzzcoffee.com/index.html
1) 2) 3) 1) 프로토콜 : http:// 프로토콜
2) 윕사이트 이름 : 컴퓨터 이름(도메인주소)
3) 절대경로 : /index.html , /는 루트

디폴드 파일 : URL 주소 요청시 기본적으로 찾는 파일
default.html - 마이크로소프트 웹 서버의 특징
index.html - 일반적인 페이지
http://www.starbuzzcoffee.com:8080
:8080 의미는 포트 주소를 의미 합니다. 기본 포트는 :80 기본 윕서버 포트 번호
목적지 생성을 위한 <a> 즉 Destination Anchor 역할

//목적지 앵커와 연결

새로운 원도우 열기

<a target=”_blank” href=”$URL”>Open New Window</a>

Chapter5. 웹 페이지에 이미지 추가하기

JPEG

연속적인 톤의 이미지 알맞는다.
1,600만개 서로 다른 색을 가지 이미지를 표현 가능
손실 압축
투명도 지원 하지 않음.

단색, 혹은 로그 알맞다.
256가지 색상을 표현 가능
무손실 압축 형식,
배경색 투명하게 할수 있다.

대부분의 경우 PNG는 GIF보다 압축률이 더 높다
GIF의 단색 투명층과 달리 8비트 알파 채널을 이용한 투명층을 지원한다.
256색을 지원하는 GIF와 달리 트루 컬러를 지원한다.
GIF에서는 제공되는 애니메이션을 PNG는 지원하지 않는다. (대안으로 PNG에 기반한 APNG, JNG, MNG와 같은 파일 형식이 제안되었다.)

img에는 항상 alt를 달자(즉 설명을)
img 태그의 width , height는 실제 이미지를 크기를 넣어 준다.
포토샵에서 gif로 투명화 작성시 반드시 알아 두어야 할 속성은 Matte 이다. 이것을 사용하여 halo 후광 현상을 막을 수 있다. Matte 색상은 배경색을 만들어 준다.

Chapter6. 진지해진 HTML

Document Type Definition 설명

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

!DOCTYPE : 문서 타입 정의
HTML : 루트 엘리먼트 요소
PUBLIC : 공객적이라는 의미
“-//W3C//DTD HTML 4.01 Transitional//EN” : HTML 4.01에 대한 정의
Transitional : 과도적인 이전 버젼 호환성유지
EN : 한번에 표시 하지하고 Enter 키 넣어 나누어서 표현 하고자 할때 사용됨.
“http://www.w3.org/TR/html4/loose.dtd” : 특정한 표준을 식별하는 파일가르킴

Strict HTML 4.01 지침서

항상 모든 웹페이지는 DOCTYPE으로 시작하고 그 다음에는 html이 와야 한다.
<head>와 <body>를 사용해야 한다.
<title>, <meta>를 사용하라
<body>에는 블록엘리먼트만 넣도록 한다.
블록엘리먼트는 인라인 엘리먼트 밖에 두어야 한다.
블록엘리먼트는 <p> 엘리먼트 밖에 두어야 한다.
<li> 리스트를 위해서만 사용되어야 한다.
<li> 안에는 텍스트, 인라인 , 블록 모두 리스트 아이템이 될 수 있다.(예외 적인)
<blocquote>는 오직 블록 엘리먼트만 사용해야 합니다.<p>
인라인 엘리먼트에는 인라인 중첩해서 사용한다.

Chapter7. HTML에 ‘X’ 끼위 넣기

XHTML 1.0 체크 리스트

DOCTYPE의 XHTML에 맞게 변경
html 태그에 xmlns ,lang , xml:lang 속성을 추가 했는 지 확인
<html> 태그는 DOCTYPE 다음에 오는 맨 첫 번째 태그가 되어야 하며, </html> 종료 태그는 가장 마지막 태그가 되어야 한다.
모든 엘리먼트 이름들은 소문자로 작성되어야 한다.
모든 시작 태그들은 종료 태그를 가져야 한다. 빈 엘리먼트의 경우 하나의 공백문자와 />로 끝나야 한다.
모든 속성 값들은 큰 따옴표로 둘러싸고 값을 가져야 합니다.
HTML 콘텐츠에 &를 사용하지 마세요. &가 시작 엔티티를 위한 것이라면 대신&를 사용하세요 또한 다른 특수문자들도 엔티티로 변환합니다.

Chapter8. 간단한 스타일 추가하기

스타일은 부모로 부터 상속 받는다.
상속은 또한 재정의가 가능 한다.(overriding) 하위 요소에서 재정의 할 수 있다.
css 파일에서 주석 /* … */ 입니다.
border 속성은 상속되지 않음.
태그의 class 속성 : 그룹 선택의 개념이고
태그의 id 속성 : 개별 요소 선택 개념이다.
class 는 여러 값이 올수 있다. 예) <p class=”greentea blueberry”>
css 파일 속성 설정 규칙 : 마지막에 설정값이 적용된다.

CSS 형식

$selector {

$property : $value;

...n

}

$selector : 선택자 , 요소
$property : 속성
$value : 값

선택자 예제

선택된 요소의 하위 요소까지 선택됨.
p : 단일 요소
h1,h2 : 여러 요소 선택
p.$className : p 요소 class가 $className인것
.$className : $className인 모든 요소

Chapter9. 어휘력 향상시키기

주요 CSS 속성

font-family : 폰트 종류 설정

산세리프(sans-serif) 패밀리 : 세리프가 없는 폰트 즉 꾸미기 없는 ,화면용

Verdana , Arial Black , Trebuchet MS , Geneva , Arial

세리프(serif) 패밀리 : 문자 끝부분에 장식적인 가시와 고리 모양이 있는 ,출력용

예) Times, Times New Roman, Georigia

모노스페이스(monspace) 패밀리 : 일정한 폭의 문자를 가진 폰트로 구성됨. 컴퓨터 콘솔용

예) Courier , Courier New , Andale Mono

흘림체(Curisive) 패밀리 : 손으로 쓴 것 같이 보이는 폰트들

예) Comic Sans , Apple Chancery

판타지(Fantasy) 패밀리 : 화려한 양식의 폰트들

예) LAST NINJA , Impact

font-family가 동작하는 방식 : 여러 설정된 폰트 중

font-family : “맑은 고딕",Verdana , Genva, Arial , sans-serif;
왼쪽 부터 나오는 폰트가 존재하는지 확인 하고 존재하면 사용한다.
화면에 보여주길 원하는 형식을 왼쪽에 설정 하고 마지막에는 항상 어디든지 있는 폰트를 사용한다
만약 폰트 이름에 빈문자열이면 “”를 사용하라.

font-size : 폰트 크기 설정

폰트 크기 설정 유형

px : 픽셀 , 절대적인 크기 $sizepx 절대로 빈문자열 있으면 안된다.
% : 비율로 명시 ,부모 엘리먼트의 상대적인 크기 100%
em : 100% 라면 1.0em에 해당됨. 역시 부모 엘리먼트의 상대적인 크기임.
keywords : xx-small > x-small > small > medium > large > x-large > xx-large

IE 브라우저 경우 px로 명시한 폰트 크기에 대해서 상대적인 크기를 제공되지 않는다.
그러므로 폰트 크기를 small 이나 상대적인 크기로 설정해야 한다.

color : 텍스트 색 설정

색 설정 값 유형

미리 정의된 17색 이름 사용 : Aqua ,Black ,White
rgb (80%,40%,0%) :
rgb (204,102,0) : 정수값으로
#cc6600 혹은 #c60 : HEX CODE 사용 중복 글자씩 축약 가능

font-weight : 폰트 굵기 설정
text-decoration : 텍스트 스타일 설정 ( 밑줄 , 윗줄 , 가운데줄)
font-style : italic 기울림, oblique 기울림

Chapter10. 엘리먼트들과 친숙해지기

박스모델

박스모델 구성요소

콘텐츠 영역(content) : 텍스트나 이미지가 차지하는 영역
패딩(padding) : 콘텐츠와 박스 영역(테두리) 사이의 공간
테두리(border) : 경계선
마진(margin:여백) : 다른 엘리먼트 사이의 빈공간

Chapter11. 진보된 웹 페이지 만들기

<div> 엘리먼트 :

논리적인 블록 구간을 형성한다.
id 속성을 사용하여 서로를 구분 한다.
컨테이너 역할을 수행 한다.
css 속성중 width는 content 영역의 너비만 명시합니다.
블록엘리먼트의 width는 auto 이며 사용가능한 크기까지 확장합니다.

<span> 엘리먼트 :

인라인 요소의 그룹을 위해서 사용합니다.
인라인 요소입니다.

캐스케이드 : 스타일 적용되는 기준

모든 스타일 시트를 하나로 모으기

웹페이지의 저자가 작성한 스타일 시트
독자가 추가한 스타일 시트
브라우저의 디폴트 스타일 시트

일치하는 모든 선언들을 찾기
이제 일치된 모든 것들을 가지고 정렬하기

저자 > 독자 > 브라우저 순 정렬 (예외 !important가 있다면 첫번째 옴)

특별성 점수를 가지고 정렬
마지막으로 그들의 개별적인 스타일 시트가 보이는 순서에서 충돌하는 규칙들을 정렬합니다.

특별성 점수 메기기

0 0 0 : 숫자가 커지면 커 질수록 특별하게 된다.

첫번째 - id를 가지고 있는 경우 1 씩,
두번째 - 선택자가 클래스 혹은 의사-클래스를 갖고 있는지,각각 1점
세번째 - 선택자가 엘리먼트 이름을 가지고 있는지, 각각 1 점

Chapter12. 엘리먼트 정렬하기

인라인 요소를 떠있는 엘리먼트를 존중한다.
float : 떠있는 요소에 위치를 설정한다.
clear : flow를 막는 역할을 수행한다.

레이아웃

liquid : 유연한 레이아웃
frozen : 고정된 레이아웃
jello : liquid 와 frozen 중간 위치

Chapter13. 표 만들기

값이 없더라도 <td>태그를 생성해 한다.
rowspan 사용하여 행병합을 하는 경우는 아래쪽에 <td> 사용하지 않는다.
table에 table이 들어갈 수 있다.

FreeMinderHuni

2013년 9월 17일 화요일

Head First HTML with CSS & XHTML 요약2