CSS3 — logicallaw

Dynamic HTML(DHTML)
Style Sheets
스타일 시트의 장점
스타일 시트를 정의하기 위한 문법의 종류
CSS
CSS 선언 위치
Inline style
Internal style sheet
External style sheet
CSS 선언 방법
CSS Syntax
CSS 주석
CSS Selectors
선택자 종류
요소 선택자 (Element selector)
클래스 선택자 (class selector)
아이디 선택자 (id selector)
그룹 선택자 (grouping selector)
결합자 (CSS Combinators)
전체 선택자 (all selector)
속성 선택자 (attribute selectors)
의사 클래스 선택자 (CSS Pseudo-classes)
의사 요소 선택자 (CSS Pseudo-element selectors)
스타일 적용 우선순위
CSS Colors
색상(Color) 표기법
CSS Fonts
CSS Fonts
CSS Text Style
CSS Text
CSS Background
CSS Background
CSS Borders
경계선(Border) 스타일
CSS Margins & Padding
Margins
Padding
CSS Height/Width
Height/Width
CSS Links
링크 스타일
CSS Lists
List 스타일
CSS Tables
<table> styles
CSS display Property
CSS Position
Element의 위치 설정
position property and value
CSS Float
float property
clear property
Semantic element와 Layout
Hide an Element - display vs. visibility
display: none;
visibility: hidden;
Overlapping Elements: z-index
z-index property
CSS Overflow
over-flow
CSS Opacity
opacity
CSS3 Transforms
transform
CSS3 Transitions
CSS3 Animations
animation

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

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

※ 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)

브라우저 윈도우를 기준으로 요소의 위치를 고정시킨다.

컨텐츠가 많아서 스크롤하더라도 항상 브라우저 윈도우를 기준으로 위치가 고정된다.

Example: 왼쪽(스크롤 전) -> 오른쪽(스크롤 후) - fixed 특징에 따라 스크롤해도 위치가 고정된다.

CSS Float

float property

element 주위로 다른 element들이 물이 흘러가듯이 element 위치를 배정한다.

※ Syntax

{ float: none | left | right; }

Example: img.a { float: left; border: 3px solid green; }

▶ 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 속성의 영향을 해제되게 된다.

{ visibility: visible | hidden | collapse; }

Value	Description
visible	(Default) 요소를 보인다.
hidden	요소를 감춘다(하지만, 레이아웃 공간은 차지한다)
collapse	<table> element에서만 사용한다. row나 column을 제거하지만, 레이아웃에는 영향을 주지 않는다. row나 column에 의해 차지 된 공간은 다른 content에 사용될 수 있다. collapse가 다른 element에 사용되면 hidden과 동일하게 동작한다.

{ overflow: visible | hidden | scroll | auto; }

Visible	Description
visible	박스 영역을 벗어나도 바깥쪽에 그대로 출력(default)
hidden	박스 영역을 벗어나는 부분은 감춤
scroll	scroll-bar로 박스 영역을 벗어나는 부분이 나타남(scroll-bar는 기본 출력됨)
auto	박스 영역이 벗어날 경우엔, 자동으로 scroll-bar가 나타남

※ 브라우저 지원 사항

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-

'대학 강의 > 인터넷 프로그래밍' 카테고리의 다른 글

JavaScript Overview (0)	2025.04.02
인터넷 프로그래밍 개요 (0)	2025.03.24
HTML5 기본 (0)	2025.03.17

	<head>
	<style>
	이 부분에 Style 선언 정보가 들어간다.
	</style>
	</head>

	<head>
	<link rel="stylesheet" type="text/css" href=".*css 파일 URL">
	</head>

	p {
	color: red; /* 글자색을 빨간색(#ff0000)로 설정함 */
	text-align: center; /* 문단 내용을 가운데 정렬함 */
	}

	<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>

	<!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>

	<!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>

	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 선택 */

	selector {
	font-family: font-family-name1, font-family-name2, ..., generic-family-name;
	}

	/* generic-family: "serif", "sans-serif", "cursive", "fantasy", "monospace" */

	/*
	p.myWidth {
	border-width: 5px;
	}
	*/

	p.myWidth {
	border-style: solid;
	border-width: 5px;
	}

	#footer {
	background-color: aqua;
	width: 100%;
	height: 50px;
	clear: both;
	}

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`