2. 목차
• 하이퍼텍스트
• 페이지의 블록
- 블록 요소와 인라인 요소
• 표준과 유효성
• CSS
- 선택자
- 선택자 조합
- 속성 선택자
- 가상 클래스
- 가상 요소
• 박스 모델
• 캐스케이딩
- 명시도
• 레이아웃과 포지셔닝
3. 하이퍼텍스트
• 단순한 개별 페이지를 서로 연결한다.
• <a> 태그를 사용한다.
• <a href=“연결할 페이지”>링크 이름</a>
4. 경로
• 서로 연결하는 페이지끼리 같은 경로
에 있었기 때문에 href 속성에 연결할
페이지의 이름만 넣었다.
• 경로가 다르다면? -> 상대 경로로 입력
한다.
• ..은 상위 경로를 의미한다.
• page1 아래의 hypertext.html에서
page2 아래의 target.html로 연결하려
면 ../page2/target.html로 href의 값을
바꿔준다.
5. 페이지의 블록
• 태그를 이용해 페이지를 이루는 영역을 나눈다.
• 의미를 부여할 수 있다.
• 중첩 관계를 확실히 해야 한다.
• <html>
<head><title>페이지의 블록</title></head>
<body>
<h1>제목 태그 h1</h1>
<p>문단 태그 p</p>
<h2>소제목 태그 h2</h2>
<img src=“logo.png”>
</body>
</html>
6. 블록 요소와 인라인 요소
• 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>, <section>, <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>, <input>,
<label>, <select>, <textarea>
7. 표준과 유효성
• 웹을 사용하는 환경이 다양해지고 웹 자체의 스펙도 계속 변하기
때문에 웹을 올바르게 표현하기 위한 기준을 설정해야 한다.
• 웹 페이지의 첫 부분에 <!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”>
8. 표준과 유효성
• https://validator.w3.org에서 직접 유효성 검사기를 제공하고 있다.
• 유효성 검사기의 경고를 참고해서 오류를 모두 바로잡으면 통과할
수 있다.
• 주로 살펴봐야 하는 부분:
<meta> 태그를 이용해서 어떤 문자집합을 사용할 것인지 명시하였
는가?
<br> 태그와 같은 빈 요소를 잘 닫았는가?
태그의 중첩 관계를 제대로 설정했는가?
<!DOCTYPE>을 선언하였는가?
9. CSS
• HTML 페이지에는 구조와 의미의 부여에 집중시키기 위해서 디자
인을 제어하는 부분을 CSS로 따로 떼어내 개발 흐름상의 이점을 꾀
하였다.
사이트 기획
웹사이트
디자인
코딩 및
프로그래밍
디버깅 및
테스트
사이트 검수
사이트 완성
및 오픈
사이트 기획
웹사이트
디자인
코딩 및
프로그래밍
디버깅 및
테스트
사이트 검수
사이트 완성
및 오픈
10. 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”>
11. CSS - 선택자
• 선택자를 이용하여 CSS를 선언할 수 있으며 대표적
인 선택자로 세 종류가 있다.
• 태그 선택자 – 태그의 요소 이름을 사용한다.
p { color: red; }
• 클래스 선택자 – 요소 이름 앞에 .을 붙여 사용한다.
스타일을 중첩하여 적용하는 용도로 많이 쓴다.
.selector-class { color: green; }
• 아이디 선택자 - 요소 이름 앞에 #을 붙여 사용한다.
페이지에서 유일한 요소를 지정하는 용도로 많이
쓴다.
#selector-id { color: blue; }
12. CSS – 선택자 조합
• 선택자 조합: 기존의 선택자를 특정한 규칙으로 엮어서 코드를 실행시킨다. 선택자를 조합함으로써 코드의 양을 줄이고 더
빠른 페이지를 기대할 수 있다.
• 하위 선택자(띄어쓰기): 선택자 내부의 모든 자식 선택자
-> 자손 단계에 상관 없이 모든 자손에게 적용
• 전체 선택자(*): 전체 문서에 영향을 줌
-> 선택자이름 띄어쓰기 *로 만들면 선택자의 모든 자손에게 적용
• 자식 선택자(>): 선택자 바로 밑의 자식 선택자(들)
-> 손자부터는 적용이 안 됨
• 형제자매 선택자(~): 자식 선택자와 달리 형제자매 관계에 있는 선택자에 속성을 적용할 때 사용
-> 모든 형제에게 적용. 형제이기만 하면 바로 다음에 나오지 않아도 적용, 형제에게만 적용(손자부터는 적용 안 됨)
• 인접 선택자(+): 붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용
-> 바로 다음에 나오는 형제에게만 적용
13. CSS – 속성 선택자
• 속성 선택자: 스타일을 지정하려는 요소의 속성을 점검하여 실행하는 선택자.
• [속성]: 해당 속성을 포함하고 있으면 실행한다.
• [속성=‘값‘]: 해당 속성의 값이 ‘값’ 과 일치할 때 실행한다.
• [속성^=‘값’]: 해당 속성의 값이 ‘값‘ 의 내용으로 시작하면 실행한다.
• [속성$=‘값‘]: 해당 속성의 값이 ‘값‘ 의 내용으로 끝나면 실행한다.
• [속성*=‘값‘]: 해당 속성의 값이 ‘값‘ 의 내용을 포함하면 실행한다.
• [속성~=‘값‘]: 해당 속성의 값이 ‘값‘ 과 일치하거나 공백을 구분자로 하여 속성의 값
중 일치하는 것이 있으면 실행한다.
• [속성|=‘값’]: 해당 속성의 값이 ‘값‘ 과 일치하거나 ‘값‘ 의 뒤에 –를 포함하면 실행한다.
• [속성 연산자 ‘값’ I 또는 i]: 속성 선택자를 닫기 전에 I 또는 i를 포함하면 ASCII 문자
에 해당되는 속성의 값 중 대소문자를 구분하지 않고 실행한다.
14. CSS – 가상 클래스
• 요소의 특별한 상태를 지정하는 선택자.
• :link –방문 전 링크에 적용.
• :visited –방문 후 링크에 적용.
• :hover –마우스 포인터를 링크 위에 올렸을 때 적용.
• :active –링크가 눌렸을 때 적용.
• :nth-child(n) –부모의 n번째 자식에게 적용.
• :only-child -자식이 하나만 있을 때 적용.
• :only-of-type -같은 유형의 형제가 없을 때 적용.
• :lang(language code) -lang 속성을 지정한 태그와 일치하는 언어에 적용. 속성 선택자
[lang|=""]는 해당 속성이 설정된 태그에만 적용하고 자식에 영향을 주지 않는다.
• :root -웹 페이지의 root 선택자 속성 부여 ->html 태그 선택자와 명시도 차이가 있다.
15. CSS – 가상 요소
• 가상 요소는 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일
할 수 있다.
• CSS3부터 가상 클래스와 구별하기 위해서 ::으로 표기한다. : 하나만 표기
해도 대부분 인식은 한다.
• 선택자에 오직 가상 요소 하나만 쓸 수 있다. 문(statement)내 단일 선택
자 뒤에 나와야 한다.
• ::first-line –선택한 요소의 첫 번째 줄에 적용한다.
• ::first-letter –선택한 요소의 첫 번째 문자에 적용한다.
• ::after –선택한 요소의 바로 뒤에 적용한다.
• ::before –선택한 요소의 바로 앞에 적용한다.
16. 박스 모델
• CSS에서는 요소를 박스로 다룬다.
• 하나의 박스에는 컨텐츠 영역, 패딩(안쪽 여백), 테두리, 마진(바깥
쪽 여백)으로 이루어져 있다.
마진
패딩
컨텐츠 영역
테두리
17. 캐스케이딩
• 각 요소는 다양한 CSS 선언의 영향을 받는데 각 선언끼리 충돌이
생겼을 때 정하는 우선순위가 캐스케이딩이다.
• 캐스케이딩의 세 가지 규칙:
• 중요도 – 저작자 CSS의 !important > 저작자 CSS의 일반선언 > 사
용자 CSS의 일반선언 > 브라우저의 CSS
• 명시도(Specificity) – 요소에 인라인으로 선언 > 아이디 > 클래스 >
타입. Universal(*) 선택자, 조합자(+,>,~, ) 및 :not 가상 클래스는 영
향을 주지 않는다. (단, :not() 내부에 선언된 선택자는 영향을 준다)
• 순서 – 나중에 선언된 CSS일 수록 우선순위가 높아진다.
18. 명시도
아이디 클래스 또는 유사클래스 타입 결과
h1.greentea 0 1 1 11
p img 0 0 2 2
a:link 0 1 1 11
ol li p 0 0 3 3
.green 0 1 0 10
#elixirs h1 1 0 1 101
em 0 0 1 1
span.cd 0 1 1 11
#sidebar 1 0 0 100
19. 레이아웃과 포지셔닝
• float 속성을 이용해서 각 요소의 일반적인 흐름으로부터 제외시킬
수 있다.
• float 속성으로 왼쪽이나 오른쪽으로 띄워진 요소의 주변으로 원래
흐름을 따르고 있는 요소의 컨텐츠가 비껴간다.
float: right;이 적용된 요소
20. 레이아웃과 포지셔닝
• float 속성이 지정된 영역이 다른 영역으로 침범하지 못하게 하기
위해서 clear 속성을 사용할 수 있다.
clear: right; 또는 clear: both; 적용
21. 레이아웃과 포지셔닝
• static: 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하
며 position을 생략하면 그것이 static이다.
• relative: relative로 지정된 요소는 left와 top 속성으로 이동을 할 수
있으며, absolute로 지정된 요소의 부모 요소 역할을 할 수도 있다.
static과 다르게 자신의 영역에 absolute 요소를 포함할 수 있다.
top이나 left 등 별도 속성을 지정하지 않으면 static과 똑같이 작동
한다.
• absolute: absolute로 지정된 요소는 다른 요소와 겹칠 수 있고 left
와 top 속성을 이용하여 부모 박스를 기준으로 위치를 정해주어야
한다.
• fixed: 요소의 위치를 화면 기준으로 지정해주며, 구형 브라우저에
서는 표현되지 않는다.
