Dynamic HTML(DHTML)
정적인 웹 페이지를 제작하는 기존 HTML의 단점을 개선하기 위해, 스크립트 언어와 스타일 정의 언어를 조합하여 동적인 웹 페이지를 제작하는 기법을 말한다.
DHTML = HTML(문서의 내용) + CSS(문서의 스타일) + JavaScript(문서의 동작처리)
Style Sheets
스타일 시트란 문서의 외형을 구체적으로 명시하기 위한 선언문들의 집합을 말한다.
스타일 시트의 장점
웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용할 수 있다.
글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을 제어할 수 있다.
문서의 내용과 스타일 구조의 분리를 통해, 내용을 알아보기 쉬우며 똑같은 스타일 정보를 반복해서 사용할 필요가 없다.
스타일 변경시 스타일 정보만을 바꾸어 주면 되므로 변경이 쉽고 일관성 유지가 용이하다.
스타일 시트를 정의하기 위한 문법의 종류
CSS(Cascading Style Sheet)
스타일 정보를 속성(Property)과 속성값(Property-value)으로 지정한다.
스타일 언어의 표준: 최근 버전은 CSS level 3.
JSSS(JavaScript Style Sheet)
Netscape Navigator 4.0 ~ 6.0에서 채택(1996년 제안 ~ 2000년 지원 중단)
JavaScript로 스타일 정보를 제어한다.
CSS
HTML 요소를 컴퓨터 화면, 종이 또는 다른 매체에 표시하기 위한 방법을 선언하는 것을 말한다.
CSS 선언 위치
Inline style
HTML 한 요소에 대하여 유일한 스타일을 정의할 때 사용한다.
※ Syntax
<(HTML Tag) style="style 선언">내용</(HTML Tag)>Internal style sheet
<head> 태그 내에 <style> 태그를 이용해 기술한다.
<head>
<style>
이 부분에 Style 선언 정보가 들어간다.
</style>
</head>External style sheet
<head>
<link rel="stylesheet" type="text/css" href=".*css 파일 URL">
</head>CSS 선언 방법
CSS Syntax
선택자로 스타일을 적용하려는 HTML 요소를 선택하고, 속성과 값으로 스타일을 선언한다.
하나 이상을 선언할 경우엔 세미콜론으로 구분한다.
h1 { color:blue; font-size:12px; }CSS 주석
주석은 /* 주석 */ 만 지원된다.
p {
color: red; /* 글자색을 빨간색(#ff0000)로 설정함 */
text-align: center; /* 문단 내용을 가운데 정렬함 */
}CSS Selectors
선택자 종류
- 요소 선택자 (Element selector)
- 클래스 선택자 (Class selector)
- 아이디 선택자 (ID selector)
- 전체 선택자 (All selector)
- 그룹 선택자 (Grouping selector)
- 결합자 (Combinators)
- 속성 선택자 (Attribute selectors)
- 의사 클래스 선택자 (Pseudo-class selectors)
- 의사 요소 선택자 (Pseudo-element selectors)
요소 선택자 (Element selector)
주어진 HTML element 이름과 일치하는 모든 요소를 선택한다(즉, 태그 이름 자체로 선택).
※ Syntax
element {
css declarations;
}※ Example
<style>
div {
text-align: center;
color: red;
}
</style><div>Here's a div with some text.</div>
<p>Here's a p with some text.</div>
<div>Here's a div with more text.</div>클래스 선택자 (class selector)
지정한 class 속성 이름을 가지는 모든 요소들을 선택한다.
한 곳 이상의 요소들을 선택하여 동일한 스타일을 지정할 경우 사용한다(. 으로 지정).
※ Syntax(지정한 class-name을 가지는 모든 element에 적용할 경우)
.class-name {
css declarations;
}<element class="class-name">content</element>※ Syntax(지정한 class-name을 가지는 지정한 element에 적용할 경우)
element.class-name {
css declarations;
}<element class="class-name">content</element>※ Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 선택자</title>
<style>
.myStyle1 {
color: red;
}
p.myStyle2 {
font-size: 15pt;
background: yellow;
}
</style>
</head>
<body>
<h1 class="myStyle1">Welcome to My Homepage</h1>
<p>My best friend is Mickey.</p>
<div class="myStyle1">div 태그 .myStyle1 스타일 적용</div>
<p class="myStyle1">p 태그 .myStyle1 스타일 적용</p>
<div class="myStyle2">div 태그 p.myStyle2 스타일시트 적용</div>
<p class="myStyle2">p 태그 p.myStyle2 스타일시트 적용</p>
</body>
</html>아이디 선택자 (id selector)
지정한 id 속성 이름을 가지는 유일한 요소 선택할 때 사용한다.
또한, 하나의 요소를 선택하여 유일한 모양의 스타일을 지정할 경우에 사용한다(# 으로 지정).
※ Syntax
#id-name {
css declarations;
}<element id="id-name">content</element>※ Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id 선택자</title>
<style>
#special {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p id="special">id가 special인 단락입니다.</p>
<p>정상적인 단락입니다.</p>
</body>
</html>그룹 선택자 (grouping selector)
하나 이상의 element에 동일한 스타일을 적용할 경우 사용한다.
※ Syntax(, 로 나열하면 된다)
element1, element2, element3, ... {
css declarations;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,
p {
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1>This is a heading1.</h1>
<p>문단 구분 태그 p.</p>
</body>
</html>결합자 (CSS Combinators)
| 선택자 | 설명 |
| s1 s2 | s1 요소 내에 있는 모든 자식(후손) s2를 선택 |
| s1 > s2 | 부모 요소가 s1인 모든 직계 자식의 s2를 요소 선택 |
| s1 + s2 | 같은 레벨에 있는 s1 요소 바로 다음에 오는 s2 하나를 선택 |
| s1 ~ s2 | 같은 레벨에 있는 s1 요소 바로 다음에 오는 모든 s2 선택 |
※ Example
body em { color: red; } /* body 내의 모든 후손 em 요소 */
body > h1 { color: blue; } /* body의 직계 자식 h1 요소 */
div + p { color: yellow; } /* div 바로 다음에 인접한 형제 요소 p 선택 */
div ~ p { background-color: blue; } /* div 다음의 모든 형제 요소 p 선택 */전체 선택자 (all selector)
모든 element를 선택하여 지정한 스타일을 적용한다.
※ Syntax
* {
css declarations;
}※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div element의 모든 후손을 다 선택해라. */
div * {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>속성 선택자 (attribute selectors)
지정한 속성이나 속성값을 가지는 요소들을 선택한다.
| Selector | Description |
| [attribute] | 해당 속성 존재시 |
| [attribute=value] | 완전 일치 |
| [attribute~=value] | 공백으로 구분된 단어 중 하나가 일치될 때 |
| [attribute|=value] | value 또는 value- 인 경우 |
| [attribute^=value] | 전체 문자열의 시작이 value로 시작 |
| [attribute$=value] | 전체 문자열의 끝이 value로 끝남 |
| [attribute*=value] | 전체 문자열 중 일부 문자열 포함시 |
※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[title~=hello] {
color: blue;
}
[title=student] {
color: green;
}
[lang|=en] {
color: red;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="hello world">Hello World</h1>
<p title="student hello">Hello CSS Student!</p>
<p title="student">Students</p>
<hr>
<p lang="en">Hello!</p>
<p lang="us-en">Hi!</p>
<p lang="en-gb">Ello!</p>
</body>
</html>※ Example
- display: block; → 강제로 block-level element로 설정
- margin-bottom: 10px; → 바깥쪽의 아래쪽 여백 10px 설정
- <button type="button">버튼 예제</bottom> → 150px가 아닌 마지막에 설정된 120px가 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[type] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
button[type="button"] {
width: 120px;
height: 50px;
margin-left: 35px;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<button type="button">버튼 예제</button>
</form>
</body>
</html>의사 클래스 선택자 (CSS Pseudo-classes)
element 위에 마우스가 올라갔을 때의 모양이나, 링크 모양, 포커스를 얻었을 때의 모양과 같이 element에 대한 특별한 상태의 스타일을 정의한다.
※ Syntax
selector:pseudo-class {
property: value;
}※ Pseudo-class
| 선택자 | 예제 | 예제 설명 |
| :link | a:link | 방문되지 않는 모든 링크들을 선택 |
| :visited | a:visited | 방문한 모든 링크들을 선택 |
| :active | a:active | 활성(마우스가 누른) 링크를 선택 |
| :hover | a:hover | mouse over 링크를 선택(링크 위에 마우스가 올라간 것) |
| :focus | input:focus | 포커스가 있는 input element를 선택 |
| :first-child | p:first-child | 부모의 첫 번째 자식 elemet |
| :not(selector) | :not(p) | <p> element를 제외한 모든 element 선택. 이때는 부모-자식 관계를 고려하지 않음. |
| :nth-child(n) | p:nth-child(2) | 타입과 상관없이 <p>의 부모 요소 내에 있는 요소들 중 두 번째 자식 요소가 <p>인 요소를 선택 |
| :nth-of-type(n) | p:nth-of-type(2) | 타입을 고려하여(type이란 tag 이름을 말한다. tag 이름이 p인 태그를 고려한다는 의미다) <p>의 부모 요소 내에 있는 <p> 요소 중 2번째 요소 선택 |
※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:nth-child(3) {
background-color: yellow;
}
p:nth-of-type(3) {
background-color: red;
}
</style>
</head>
<body>
<article>
<h1>1. Heading Top</h1>
<p>2. first paragraph.</p>
<p>3. second paragraph.</p>
<p>4. third paragraph.</p>
<p>5. fourth paragraph.</p>
</article>
</body>
</html>의사 요소 선택자 (CSS Pseudo-element selectors)
문단의 첫 문자 또는 첫 라인을 스타일 지정하거나, 요소의 앞 또는 뒤에 내용을 추가하는 것과 같이 element의 지정된 부분에 스타일을 지정하는데 사용한다.
※ Syntax
selector:pseudo-element {
property: value;
}※ Pseudo-element
| 선택자 | 예제 | 예제 설명 |
| ::after | p::after | 각 <p> element 내용 이후에 지정한 것을 삽입 |
| ::before | p::before | 각 <p> element 내용 이전에 지정한 것을 삽입 |
| ::first-letter | p::first-letter | 각 <p> element의 첫 문자를 선택 |
| ::first-line | p::first-line | 각 <p> element의 첫 번째 라인을 선택 |
| ::selection | p::selection | 사용자가 텍스트를 마우스로 드래그 했을 때 |
※ Example
▶ 주의: 화면 줄여서 4-5줄 되어도 첫 줄만 p::first-line가 일관되게 적용되는 것을 명심하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-line {
color: #ff0000;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>you can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-line {
color: red;
}
p::first-letter {
color: blue;
font-size: 50px;
}
p::before {
content: "Hi";
}
p::after {
content: "Bye";
}
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p>
</body>
</html>스타일 적용 우선순위
규칙: 중복 선언시, 가장 나중에 선언된 걸로 적용된다.
※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: yellow;
}
</style>
</head>
<body>
<p style="color:red;">글자색</p>
<p>글자색</p>
</body>
</html>글자색
글자색
CSS Colors
색상(Color) 표기법
이름에 의한 표기법, 16진수 표기법, RGB 표기법, HSL, HWB, CMYK, NCol 표기법 등이 있다.
| 방법 | 설명 |
| 이름 표기법 | "red", "green", "blue", "yellow", "cyan", ... |
| RGB HEX(16진수) 표기법 | #ff0000 |
| RGB 표기법 | rgb(255, 0, 0), rgb(100%, 0%, 0%) |
| RGBA 표기법(RGB Alpha) | rgba(255, 0, 0, 0.2) |
CSS Fonts
CSS Fonts
font 글꼴, 굵기, 크기, 텍스트 스타일을 정의한다.
| 속성 | 설명 |
| font | 한 줄에서 모든 폰트 속성을 설정할 때 사용 { font: font-style font-variant font-weight font-size/line-height font-family} |
| font-family | 폰트 글꼴 설정 "times", "courier", "arial", "serif", ... |
| font-size | 폰트 크기 설정(단위: pt, px, %, em(배수)) xx-small, x-small, small, medium, large, x-large, xx-large |
| font-style | 폰트 스타일 설정(normal, italic, oblique) |
| font-weight | 폰트 굵기 설정 (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
| font-variant | 텍스트가 small-caps 폰트로 출력할 지의 여부를 지정 (small-caps, normal) |
▶ 폰트 굵기를 숫자로 설정시, 100 단위의 숫자만 가능하다.
※ font-family Syntax
▶ 왼쪽부터 글꼴을 나열하여 해당 글꼴이 없다면 그 다음 글꼴이 적용된다. 또한, 맨 마지막은 기본 제공 폰트를 사용한다.
selector {
font-family: font-family-name1, font-family-name2, ..., generic-family-name;
}
/* generic-family: "serif", "sans-serif", "cursive", "fantasy", "monospace" */
※ Example
▶ font 이름 작성시 한 단어 취급해서 작은 따옴표, 큰 따옴표 없이 작성해도 된다. 하지만, 공백이 있는 폰트면 따옴표를 사용해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.myFont {
font-family: 'Courier New', Courier, monospace;
}
p.style1 {
font: italic 30px arial, sans-serif;
}
p.style2 {
font: bold 40px Georgia, serif;
}
p.style3 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="myFont">font-family</p>
<p class="style1">font: italic 30px arial, sans-serif</p>
<p class="style2">font: bold 40px Georgia, serif</p>
<p class="style3">My name is Hege Refsnes.</p>
</body>
</html>CSS Text Style
CSS Text
| 속성 | 설명 |
| color | 텍스트 색상을 지정 |
| direction | 텍스트 작성 방향을 지정 (왼쪽에서 오른쪽(ltr), 오른쪽에서 왼쪽(rtl) |
| letter-spacing | 글자 간 간격 지정 (normal, length) |
| line-height | 텍스트 줄의 높이를 지정 (normal, number, length, %) |
| text-align | 텍스트 수평 정렬을 지정 (left, right, center, justify) |
| text-decoration | 텍스트 장식을 지정 (none, underline, overline, line-through) |
| text-indent | 텍스트의 들여쓰기를 지정 (length, %) |
| text-shadow | 그림자 효과 지정 (text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;) |
| text-transform | 대소문자 변환을 지정 (none | capitalize(단어의 첫 글자가 대문자) | uppercase | lowercase) |
▶ text-decoration의 none 사용시 밑줄을 없앨 수 있다.
▶ text-shadow의 h-shadow, v-shadow 는 각각 x축, y축을 의미한다.
CSS Background
CSS Background
※ Properties
| Property | Description |
| background | 한 번에 모든 배경 속성을 지정 |
| background-attachment | 페이지 여유 공간의 배경 이미지를 고정시킬지 스크롤 시킬지 설정 scroll | fixed | local |
| background-color | 요소에 대한 배경색을 설정 |
| background-image | 요소에 대한 배경 이미지를 설정 |
| background-position | 배경 이미지의 시작 위치를 설정 |
| background-repeat | 배경 이미지의 반복 여부를 설정 repeat | repeat-x | repeat-y | no-repeat |
CSS Borders
경계선(Border) 스타일
※ Properties
| Property | Description |
| border | 경계선 두께, 스타일, 색 설정 { border: border-width border-style border-color } |
| border-color | 경계선 색상 지정 { border-image: source slice width outset repeat } |
| border-radius | 박스의 모서리 경계선 영역을 둥글게 설정 { border-radius: top-left top-right bottom-right bottom-left } |
| border-style | 경계선 스타일 설정 { none, dotted, dashed, solid, double, groove, ridge, inset, outset } |
| border-width | 경계선 두께 설정 { medium | thin | thick | length } |
| box-shadow | 박스의 그림자 설정 { box-shadow: none | h-shadow v-shadow blur spread color inset } |
▶ border-radius는 시계방향 순으로 기억하면 된다.
※ 개념 주의
1. 경계선 두께 설정시, 반드시 border-style: solid로 설정하자(기본이 none). 그렇지 않으면 경계선 두께가 적용된 것을 확인할 수가 없다.
/*
p.myWidth {
border-width: 5px;
}
*/
p.myWidth {
border-style: solid;
border-width: 5px;
}2. border-style의 groove, ridge, inset, outset 개념
| 스타일 | 의미 | 시각적 효과 |
| groove | 홈 | 안쪽으로 패인 느낌 (패널, 프레임) |
| ridge | 융기 | 바깥쪽으로 도드라진 느낌 (강조된 테두리) |
| inset | 내장 | 요소가 눌려 보이는 느낌 (눌린 UI) |
| outset | 돌출 | 요소가 튀어나와 보이는 느낌 (돌출된 UI) |
CSS Margins & Padding
Margins
박스의 경계선 바깥쪽 여백
| Property | Description |
| margin | 박스의 경계선 바깥쪽 여백을 한번에 설정 { margin: top right bottom left; } |
| margin-bottom | margin의 bottom 여백 설정 |
| margin-left | margin의 left 여백 설정 |
| margin-right | margin의 right 여백 설정 |
| margin-top | margin의 top 여백 설정 |
※ margin 속성의 value의 개수에 따른 사용 방법 (padding도 마찬가지)
다음과 같이 top을 기준으로 시계방향 순서대로 속성이 적용된다.
1) 1개: { margin: 10px; } - top, right, bottom, left
2) 2개: { margin: 10px 10px; } - top/bottom, left/right
3) 3개: { margin: 10px 10px 10px; } - top, left/right, bottom
4) 4개: { margin: 10px 10px 10px 10px; } - top, right, bottom, left
Padding
박스의 경계선 안쪽 여백
| Property | Description |
| padding | 박스의 경계선 안쪽 여백을 한번에 설정 { padding: top right bottom left; } |
| padding-bottom | padding의 bottom 여백 설정 |
| padding-left | padding의 left 여백 설정 |
| padding-right | padding의 right 여백 설정 |
| padding-top | padding의 top 여백 설정 |
CSS Height/Width
Height/Width
element의 가로/세로 크기를 설정한다.
사용 단위: px, cm, %, auto
| Property | Description |
| height | element의 높이를 설정 |
| max-height | element의 최대 높이 설정 |
| max-width | element의 최대 너비 설정 |
| min-height | element의 최소 높이 설정 |
| min-width | element의 최소 너비 설정 |
| width | element의 너비 설정 |
| box-sizing | element의 width, height가 어떤 영역까지 포함하는지를 결정하는 CSS 속성 { box-sizing: content-box| border-box; } content-box (default): width는 콘텐츠 영역만 의미. padding, border는 밖에 따로 더해진다. border-box: width는 border + padding + content 전체를 포함한 크기 보통 실무에선 크기 계산 예측이 가능한 border-box를 주로 사용한다. |
CSS Links
링크 스타일
a:link : 방문되지 않은 링크 스타일
a:visited : 방문된 링크 스타일
a:hover : 마우스가 위에 있을 때의 스타일
a:active : 마우스로 클릭되는 때의 스타일
CSS Lists
List 스타일
| Property | Description |
| list-style | 리스트 모양을 한번에 설정 |
| list-style-image | 리스트 아이템 마커를 이미지로 설정 { list-style-image: url(""); } |
| list-style-position | 리스트 아이템 마커의 위치를 안쪽 또는 바깥쪽으로 지정 |
| list-style-type | 리스트 아이템 마커의 형태를 지정 { list-style-type: circle | disc(default of unordered list) | square | decimal(default of ordered list) | decimal-leading-zero | lower-alpha | lower-roman | upper-alpha | upper-roman; } |
▶ <ul>과 <li>은 block-level element이다.
CSS Tables
<table> styles
| Property | Description |
| border | 경계선 속성을 한번에 지정 |
| border-collapse | <table>에서 테두리가 인접한 셀들 사이에서 겹칠지 여부를 결정하는 CSS 속성을 말한다. separate (default): 셀 사이의 공백이 생기고, 테두리도 각 셀마다 따로 존재 collapse: 셀들의 테두리가 겹쳐지고, 하나로 보임 (더 깔끔함) |
| border-spacing | 인접 셀 경계선 사이의 거리 설정 |
| caption-side | 테이블 캡션 제목 위치 설정 { caption-side: top | bottom; } |
| empty-cells | 테이블의 빈 셀에 대한 경계선과 배경을 출력할지의 여부를 설정 { empty-cells: show | hide; } |
| table-layout | fixed로 지정할 경우, 가로 레이아웃의 셀 내용이 아니라, 테이블의 너비와 열 너비에 의존하여 출력한다. fixed로 지정할 경우 웹 브라우저 상의 테이블 출력 속도가 더 빠를 수 있다. { table-layout: auto | fixed;} |
CSS display Property
| Value | Description |
| inline | inline element처럼 동작하게 된다. |
| block | block element처럼 동작하게 된다. |
| flex | block-level flex container처럼 동작한다. 이는 CSS3의 새로운 기능이다. |
| inline-block | 지정된 element자체는 inline-level로 간주하고, 안쪽에 기술 된 element들은 block-level로 간주한다. clear 속성을 사용하지 않고 inline 형태로 사용이 가능하다. ▶ block처럼 너비/높이, padding, margin을 조절 가능하며 요소는 inline처럼 한 줄에 나란히 배치된다. |
| inline-flex | inline-level flex container처럼 동작한다. 이는 CSS3의 새로운 기능이다. ▶자식은 flex로 배치되지만, 부모 요소 자체는 inline처럼 줄 안에 위치하게 된다. |
| inline-table | inline-level table처럼 동작한다. ▶ <table>처럼 동작하지만 inline 요소처럼 줄 안에 배치된다. |
| list-item | <li> element처럼 동작한다. |
| table | <table> element처럼 동작한다. |
| table-caption | <caption> element처럼 동작한다. |
| table-cell | <td> element처럼 동작한다. |
| table-column | <col> element처럼 동작한다. |
| table-row | <tr> element처럼 동작한다. |
| none | 어떠한 element도 출력되지 않는다. |
CSS Position
Element의 위치 설정
| Property | Description |
| bottom | positioned box의 bottom margin edge를 설정한다. |
| left | positioned box의 left margin edge를 설정한다. |
| right | positioned box의 right margin edge를 설정한다. |
| top | positioned box의 top margin edge를 설정한다. |
position property and value
| Property | Description |
| position | element의 positioning type을 설정한다. |
| Value | Description |
| static | default value. 정상적인 문서 흐름에 따라 기술 순서대로 배치된다. 따라서, top, left 등 element의 위치를 설정해도 무시되는 특성을 가진다. |
| absolute | 맨 처음 위치된 상위 요소의 원점을 기준으로 절대 위치에 배치된다. |
| fixed | 브라우저 윈도우의 원점을 기준으로 고정된 위치에 배치된다. |
| relative | 정상적인 흐름에 따른 위치를 기준점으로 상대적인 위치에 배치된다. 즉, "left: 20px"는 element의 left 위치에 20px를 더한다. |
정적 위치(static position)
블록 요소들이 박스처럼 상하로 쌓이고, 인라인 요소들은 한 줄에 기술된 순서대로 배치된다.
상대 위치(relative position)
정상적인 흐름에 따른 위치를 기준점으로 상대적인 위치에 배치된다.
절대 위치(absolute position)
상위 요소를 기준으로 top, left, bottom, right 만큼 떨어진 위치에 배치된다.
고정 위치(fixed position)
브라우저 윈도우를 기준으로 요소의 위치를 고정시킨다.
컨텐츠가 많아서 스크롤하더라도 항상 브라우저 윈도우를 기준으로 위치가 고정된다.
CSS Float
float property
element 주위로 다른 element들이 물이 흘러가듯이 element 위치를 배정한다.
※ Syntax
{ float: none | left | right; }
▶ float 속성이 적용된 이후의 태그부터 영향을 받는다.
clear property
float 속성을 중단할 때 사용한다.
※ Syntax
{ clear: none | left | right | both; }| Value | Description |
| none | Default |
| left | No floating elements allowed on the left side |
| right | No floating elements allowed on the right side |
| both | No floating elements allowed on either the left or the right side |
※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#header {
background-color: yellow;
width: 100%;
height: 50px;
}
#nav {
width: 30%;
background-color: red;
height: 150px;
float: left;
}
#content {
width: 40%;
background-color: blue;
float: right;
height: 100px;
}
#footer {
background-color: aqua;
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
▷ float: left → 왼쪽으로 정렬되고, 이후부터 오는 태그가 오른쪽에 차곡차곡 floating하게(물 흐르듯) 채워진다.
▷ float: right → 오른쪽으로 정렬되고, 이후부터 오는 태그가 왼쪽에 차곡차곡 floating하게 채워진다.
#footer {
background-color: aqua;
width: 100%;
height: 50px;
clear: both;
}
▷ footer에 clear:both 적용하면, 이전 태그의 float 속성의 영향을 해제되게 된다.
Semantic element와 Layout
HTML5의 semantic elements를 사용하여 문서를 정의하고 CSS를 사용하여 출력할 문서의 모양을 설정한다.
Hide an Element - display vs. visibility
display: none;
지정한 요소가 숨겨지고, 없는 것처럼 페이지가 표시된다.
visibility: hidden;
지정한 요소를 숨기지만, 여진히 레이아웃에 영향을 미친다.
※ Syntax
{ visibility: visible | hidden | collapse; }| Value | Description |
| visible | (Default) 요소를 보인다. |
| hidden | 요소를 감춘다(하지만, 레이아웃 공간은 차지한다) |
| collapse | <table> element에서만 사용한다. row나 column을 제거하지만, 레이아웃에는 영향을 주지 않는다. row나 column에 의해 차지 된 공간은 다른 content에 사용될 수 있다. collapse가 다른 element에 사용되면 hidden과 동일하게 동작한다. |
Overlapping Elements: z-index
z-index property
element의 스택 순서를 지정한다.
다른 element 위에 오버랩하여 출력한다.
CSS Overflow
over-flow
element의 내용이 너무 커서 지정한 영역을 벗어났을 때, 내용을 감출지, 또는 스크롤 막대로 표시할지를 지정한다.
※ Syntax
{ overflow: visible | hidden | scroll | auto; }| Visible | Description |
| visible | 박스 영역을 벗어나도 바깥쪽에 그대로 출력(default) |
| hidden | 박스 영역을 벗어나는 부분은 감춤 |
| scroll | scroll-bar로 박스 영역을 벗어나는 부분이 나타남(scroll-bar는 기본 출력됨) |
| auto | 박스 영역이 벗어날 경우엔, 자동으로 scroll-bar가 나타남 |
CSS Opacity
opacity
지정한 element의 투명도(0: 완전 투명 ~ 1: 완전 불투명) 지정
CSS3 Transforms
transform
지정한 요소를 변형, 회전, 크기 조절, 비뚤어지게 할 수 있다.
2D 또는 3D 변환을 지원한다.
※ 브라우저 지원 사항
| Property | Chrome | Edge | Firefox | Safari | Ring |
| Transform(2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 12.1 10.5 -o- |
2D transforms
| Value | Description |
| translate(x, y) | 주어진 x, y 축 만큼 이동시킴 |
| scale(x, y) | 입력된 x width, y height 배수 만큼 크기를 증가시키거나, 감소시킴 |
| rotate(angle) | 주어진 각도만큼 시계방향으로 회전시킴 |
| skew(x-angle, y-angle) | x 축 기준으로 x-angle만큼, y 축 기준으로 y-anle만큼 반시계방향으로 각각 비틈 |
| matrix(n, n, n, n, n, n) | matrix의 6개의 값을 사용하여 2D transformation을 정의한다. matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) |
3D transforms
| Value | Description |
| rotateX(angle) | x 축을 기준으로 주어진 각도만큼 회전시킴 |
| rotateY(angle) | y 축을 기준으로 주어진 각도만큼 회전시킴 |
| rotateZ(angle) | z 축을 기준으로 주어진 각도만큼 회전시킴 |
| translate3d(x, y, z) | 주어진 x, y, z 축 만큼 이동시킴 |
| scale3d(x, y, z) | 입력된 x, y, z 배수 만큼 크기를 증가시키거나, 감소시킴 |
Perspective property
element가 view로부터 얼마나 떨어져서 배치되는지를 정의한다.
※ Syntax
{ perspective: length | none; }| Property | Chrome | Edge | Firefox | Safari | Ring |
| transform(3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
CSS3 Transitions
속성 값을 일정 시간 동안 부드럽게(한 값에서 다른 값으로) 변경
브라우저별 지원사항
| Property | Chrome | Edge | Firefox | Safari | Ring |
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
※ Syntax
{ transition: property duration timing-function delay; }| Value | Description |
| transition-property | 효과를 주고자 하는 CSS 속성 이름 |
| transition-duration | 효과가 이루어지는 시간(초 또는 밀리세컨드) |
| transition-timing-function | 전환 효과의 속도 곡선(speed curve) 지정 : linear, ease, ease-in, ease-out, ease-in-out 등 |
| transition-delay | 전환 효과가 시작될 시각 정의 |
▷ ease: 느린 상태에서 빠른 상태로 갔다가 느린 상태로
▷ ease-in: 느린 상태에서 빠른 상태로
▷ ease-out: 빠른 상태에서 느린 상태로
▷ ease-in-out: 느린 상태에서 빠른 상태로 갔다가 느린 상태로 (ease보다 더 느리다)
CSS3 Animations
animation
애니메이션의 keyframe을 먼저 지정해야 한다.
keyframe은 특정 시간에서의 요소 스타일을 지정한다.
※ 브라우저별 지원 사항
| Property | Chrome | Edge | Firefox | Safari | Ring |
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
'대학 강의 > 인터넷 프로그래밍' 카테고리의 다른 글
| JSP와 JDBC Basic (0) | 2025.06.01 |
|---|---|
| JSP 개요 (0) | 2025.05.04 |
| JavaScript Overview (0) | 2025.04.02 |
| 인터넷 프로그래밍 개요 (0) | 2025.03.24 |
| HTML5 기본 (0) | 2025.03.17 |
