html5 css3 20161205-원광석
TRANSCRIPT
HTML5 와 CSS3북 리뷰원광석
목차
• 하이퍼텍스트
• 페이지의 블록
- 블록 요소와 인라인 요소
• 표준과 유효성
• CSS - 선택자
- 선택자 조합
- 속성 선택자
- 가상 클래스
- 가상 요소
• 박스 모델
• 캐스케이딩
- 명시도
• 레이아웃과 포지셔닝
하이퍼텍스트
• 단순한 개별 페이지를 서로 연결한다 .• <a> 태그를 사용한다 .• <a href=“ 연결할 페이지” > 링크 이름 </a>
경로
• 서로 연결하는 페이지끼리 같은 경로에 있었기 때문에 href 속성에 연결할 페이지의 이름만 넣었다 .
• 경로가 다르다면 ? -> 상대 경로로 입력한다 .
• .. 은 상위 경로를 의미한다 .• page1 아래의 hypertext.html 에서
page2 아래의 target.html 로 연결하려면 ../page2/target.html 로 href 의 값을 바꿔준다 .
페이지의 블록
• 태그를 이용해 페이지를 이루는 영역을 나눈다 .• 의미를 부여할 수 있다 .• 중첩 관계를 확실히 해야 한다 .• <html> <head><title> 페이지의 블록 </title></head> <body> <h1> 제목 태그 h1</h1> <p> 문단 태그 p</p> <h2> 소제목 태그 h2</h2> <img src=“logo.png”> </body></html>
블록 요소와 인라인 요소
• HTML 의 요소에는 여러 종류가 있으며 그 중 블록 요소와 인라인 요소가 있다 .• 블록 요소는 선언된 자리에서 페이지의 한 줄을 전부 차지하며 옆에 있는 요소를 다음
줄로 넘긴다 .• 인라인 요소는 요소의 크기만큼만 자리를 차지하며 옆에 있는 요소와 나란히 배치할 수
있다 .• 블록 요소 : <address>, <blockquote>, <dd>, <div>, <dl>, <fieldset>,
<form>, <h1> 에서 <h6> 까지 , <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <table>, <tfoot>, <ul>, <article>, <aside>, <canvas>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <output>, <sec-tion>, <video>
• 인라인 요소 : <b>, <i>, <small>, <abbr>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <time>, <var>, <a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>, <button>, <in-put>, <label>, <select>, <textarea>
표준과 유효성
• 웹을 사용하는 환경이 다양해지고 웹 자체의 스펙도 계속 변하기 때문에 웹을 올바르게 표현하기 위한 기준을 설정해야 한다 .
• 웹 페이지의 첫 부분에 <!DOCTYPE> 을 사용하여 어떤 기준을 사용할 것인지 결정한다 .
• HTML 4.01 의 DTD: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
• XHTML 1.1 의 DTD: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
표준과 유효성
• https://validator.w3.org에서 직접 유효성 검사기를 제공하고 있다 .• 유효성 검사기의 경고를 참고해서 오류를 모두 바로잡으면 통과할 수
있다 .• 주로 살펴봐야 하는 부분 : <meta> 태그를 이용해서 어떤 문자집합을 사용할 것인지 명시하였는가 ? <br> 태그와 같은 빈 요소를 잘 닫았는가 ? 태그의 중첩 관계를 제대로 설정했는가 ? <!DOCTYPE> 을 선언하였는가 ?
CSS• HTML 페이지에는 구조와 의미의 부여에 집중시키기 위해서
디자인을 제어하는 부분을 CSS 로 따로 떼어내 개발 흐름상의 이점을 꾀하였다 .사이트
기획
웹사이트 디자인
코딩 및
프로그래밍
디버깅 및
테스트
사이트
검수
사이트
완성 및
오픈사이트
기획
웹사이트 디자인
코딩 및
프로그래밍
디버깅 및
테스트
사이트
검수
사이트
완성 및
오픈
CSS
• CSS 로 스타일을 적용하는 세 가지 방법 :• 인라인 형식 – 각 태그에 style 속성으로 적용한다 .<p style=“color:gray;”> 이 문단의 색상은 회색으로 지정됩니다 .</p>• 내장형 – 페이지의 <head> 안에 <style> 을 선언하고 그 안에
지정한다 .<style type=“text/css”>p{color:gray;}</style>• 외부 스타일 시트 – CSS 코드로 구성된 파일을 적용할 페이지에
연결한다 .<link rel=“stylesheet” type=“text/css” href=“style.css”>
CSS - 선택자
• 선택자를 이용하여 CSS 를 선언할 수 있으며 대표적인 선택자로 세 종류가 있다 .
• 태그 선택자 – 태그의 요소 이름을 사용한다 .p { color: red; }• 클래스 선택자 – 요소 이름 앞에 . 을 붙여 사용한다 .
스타일을 중첩하여 적용하는 용도로 많이 쓴다 ..selector-class { color: green; }• 아이디 선택자 - 요소 이름 앞에 # 을 붙여 사용한다 .
페이지에서 유일한 요소를 지정하는 용도로 많이 쓴다 .#selector-id { color: blue; }
CSS – 선택자 조합
• 선택자 조합 : 기존의 선택자를 특정한 규칙으로 엮어서 코드를 실행시킨다 . 선택자를 조합함으로써 코드의 양을 줄이고 더 빠른 페이지를 기대할 수 있다 .
• 하위 선택자 ( 띄어쓰기 ): 선택자 내부의 모든 자식 선택자
-> 자손 단계에 상관 없이 모든 자손에게 적용
• 전체 선택자 (*): 전체 문서에 영향을 줌
-> 선택자이름 띄어쓰기 * 로 만들면 선택자의 모든 자손에게 적용
• 자식 선택자 (>): 선택자 바로 밑의 자식 선택자 ( 들 )-> 손자부터는 적용이 안 됨
• 형제자매 선택자 (~): 자식 선택자와 달리 형제자매 관계에 있는 선택자에 속성을 적용할 때 사용
-> 모든 형제에게 적용 . 형제이기만 하면 바로 다음에 나오지 않아도 적용 , 형제에게만 적용 ( 손자부터는 적용 안 됨 )• 인접 선택자 (+): 붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용
-> 바로 다음에 나오는 형제에게만 적용
CSS – 속성 선택자
• 속성 선택자 : 스타일을 지정하려는 요소의 속성을 점검하여 실행하는 선택자 .• [ 속성 ]: 해당 속성을 포함하고 있으면 실행한다 .• [ 속성 =‘ 값‘ ]: 해당 속성의 값이 ‘값’ 과 일치할 때 실행한다 .• [ 속성 ^=‘ 값’ ]: 해당 속성의 값이 ‘값‘ 의 내용으로 시작하면 실행한다 .• [ 속성 $=‘ 값‘ ]: 해당 속성의 값이 ‘값‘ 의 내용으로 끝나면 실행한다 .• [ 속성 *=‘ 값‘ ]: 해당 속성의 값이 ‘값‘ 의 내용을 포함하면 실행한다 .• [ 속성 ~=‘ 값‘ ]: 해당 속성의 값이 ‘값‘ 과 일치하거나 공백을 구분자로 하여 속성의 값
중 일치하는 것이 있으면 실행한다 .• [ 속성 |=‘ 값’ ]: 해당 속성의 값이 ‘값‘ 과 일치하거나 ‘값‘ 의 뒤에 –를 포함하면 실행한다 .• [ 속성 연산자 ‘값’ I 또는 i]: 속성 선택자를 닫기 전에 I 또는 i 를 포함하면 ASCII
문자에 해당되는 속성의 값 중 대소문자를 구분하지 않고 실행한다 .
CSS – 가상 클래스
• 요소의 특별한 상태를 지정하는 선택자 .• :link – 방문 전 링크에 적용 .• :visited – 방문 후 링크에 적용 .• :hover –마우스 포인터를 링크 위에 올렸을 때 적용 .• :active – 링크가 눌렸을 때 적용 .• :nth-child(n) – 부모의 n번째 자식에게 적용 .• :only-child - 자식이 하나만 있을 때 적용 .• :only-of-type - 같은 유형의 형제가 없을 때 적용 .• :lang(language code) -lang 속성을 지정한 태그와 일치하는 언어에 적용 . 속성 선택자
[lang|=""] 는 해당 속성이 설정된 태그에만 적용하고 자식에 영향을 주지 않는다 .• :root - 웹 페이지의 root 선택자 속성 부여 ->html 태그 선택자와 명시도 차이가 있다 .
CSS – 가상 요소
• 가상 요소는 특별한 상태를 기술하는 대신 , 문서의 특정 부분을 스타일 할 수 있다 .
• CSS3 부터 가상 클래스와 구별하기 위해서 :: 으로 표기한다 . : 하나만 표기해도 대부분 인식은 한다 .
• 선택자에 오직 가상 요소 하나만 쓸 수 있다 . 문 (statement) 내 단일 선택자 뒤에 나와야 한다 .
• ::first-line – 선택한 요소의 첫 번째 줄에 적용한다 .• ::first-letter – 선택한 요소의 첫 번째 문자에 적용한다 .• ::after – 선택한 요소의 바로 뒤에 적용한다 .• ::before – 선택한 요소의 바로 앞에 적용한다 .
박스 모델
• CSS 에서는 요소를 박스로 다룬다 .• 하나의 박스에는 컨텐츠 영역 , 패딩 ( 안쪽 여백 ), 테두리 , 마진
( 바깥쪽 여백 ) 으로 이루어져 있다 .
마진패딩
컨텐츠 영역
테두리
캐스케이딩
• 각 요소는 다양한 CSS 선언의 영향을 받는데 각 선언끼리 충돌이 생겼을 때 정하는 우선순위가 캐스케이딩이다 .
• 캐스케이딩의 세 가지 규칙 :• 중요도 – 저작자 CSS 의 !important > 저작자 CSS 의 일반선
언 > 사용자 CSS 의 일반선언 > 브라우저의 CSS• 명시도 (Specificity) – 요소에 인라인으로 선언 > 아이디 >
클래스 > 타입 . Universal(*) 선택자 , 조합자 (+,>,~, ) 및 :not 가상 클래스는 영향을 주지 않는다 . ( 단 , :not() 내부에 선언된 선택자는 영향을 준다 )
• 순서 – 나중에 선언된 CSS 일 수록 우선순위가 높아진다 .
명시도
아이디 클래스 또는 유사클래스 타입 결과
h1.greentea 0 1 1 11
p img 0 0 2 2a:link 0 1 1 11ol li p 0 0 3 3.green 0 1 0 10
#elixirs h1 1 0 1 101em 0 0 1 1
span.cd 0 1 1 11
#sidebar 1 0 0 100
레이아웃과 포지셔닝
• float 속성을 이용해서 각 요소의 일반적인 흐름으로부터 제외시킬 수 있다 .
• float 속성으로 왼쪽이나 오른쪽으로 띄워진 요소의 주변으로 원래 흐름을 따르고 있는 요소의 컨텐츠가 비껴간다 .
float: right; 이 적용된 요소
레이아웃과 포지셔닝
• float 속성이 지정된 영역이 다른 영역으로 침범하지 못하게 하기 위해서 clear 속성을 사용할 수 있다 .
clear: right; 또는 clear: both; 적용
레이아웃과 포지셔닝
• static: 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하며 position 을 생략하면 그것이 static 이다 .
• relative: relative 로 지정된 요소는 left 와 top 속성으로 이동을 할 수 있으며 , absolute 로 지정된 요소의 부모 요소 역할을 할 수도 있다 . static 과 다르게 자신의 영역에 absolute 요소를 포함할 수 있다 . top이나 left 등 별도 속성을 지정하지 않으면 static 과 똑같이 작동한다 .
• absolute: absolute 로 지정된 요소는 다른 요소와 겹칠 수 있고 left와 top 속성을 이용하여 부모 박스를 기준으로 위치를 정해주어야 한다 .
• fixed: 요소의 위치를 화면 기준으로 지정해주며 , 구형 브라우저에서는 표현되지 않는다 .
EOF