CSS3 기초

Introduction

Type

• p { color: red; font-size: 25px }
  • Selector: p
  • Declaration Block: { }
    • Declaration
      • Attribute: color, font-size
      • Value: red, 25px

Application

• Case
  • Style Element
    • <style></style>
  • Style Attribute
    • <p style="color: red; font-size:15px;">Cascading Style Sheet</p>
  • External File
    • <link rel="stylesheet" href="./css/style.css">
    • <style> import url("./css/style.css") // @import "./css/style.css" </style>
• Apply Priority: Style Attribute > Style Element > External File > Default Style of Web Browser

Selector

Basic Selector

• Universal Selector
  • *
    • All
• Type Selector
  • p, a, etc...
    • <p>, <a> Element
• Class Selector
  • p.classname or .classname
    • All <p> with class="classname" or All Element with class="classname"
• Id Selector
  • p#idname or #idname
    • All <p> with id="idname" or All Element with id="idname"
• Attribute Selector
  • a[target]
    • All <a> using target attribute
  • a[target="_blank"]
    • All <a> with target="_blank"
  • a[title~="knou"]
    • All <a> including "knou" in title
  • a[title|="korea"]
    • All <a> with title="korea" or beginning with "korea"
  • a[href^="https"]
    • All <a> beginning with "https"
  • a[href$=".ac.kr"]
    • All <a> Ending with ".ac.kr"
  • a[href*="co"]
    • All <a> Including "co" in href

Pseudo-Selector

• Link
  • a:link
    • Select All Unvisiting Links
  • a:visited
    • Select All Visited Links
• User Action
  • a:hover
    • Select Link hovered over
  • a:active
    • Select State of Clicked Link
  • input:focus
    • Select Input Element with Focus
• User Interface Status
  • input:enabled
    • Select All Activated Input Elements
  • input:disabled
    • Select All Deactivated Input Elements
  • input:checked
    • Select All Checked Input Elements(RadioButton, CheckBox)
• Denial
  • p:not(.sample)
    • class 속성이 sample이 아닌 모든 <p> 선택
• Tree Structure
  • :root
    • Top Level
  • tr:first-child == tr:nth-child(1)
    • <tr>의 부모요소를 기준으로 모든 자식요소 중 첫번째 자식요소(<tr>이 아닐 수 있음.)
  • tr:last-child == tr:nth-last-child(1)
    • <tr>의 부모요소를 기준으로 모든 자식요소 중 마지막 자식요소(<tr>이 아닐 수 있음.)
  • p:nth-of-type(2)
    • <p>의 부모요소를 기준으로 <p>요소 중 두번째 자식요소 선택(반드시 <p>)
  • p:only-child
    • <p>의 부모요소를 기준으로 자식요소가 하나일 때 선택(<p>가 아닐 수 있음?)
  • p:only-of-type
    • <p>요소가 하나의 자식요소 일 때 선택
  • td:empty
    • 자식요소가 없는 <td> 선택
• Pseudo Element
  • p::firtst-letter
    • Select First Letter of All <p>
  • p:first-line
    • Select First Line of All <p>
  • p::before
    • Adding Something before <p>
  • p::after
    • Adding Something after <p>

Combinator

• Descendant Combinator
  • Selector1 Selector2
    • All <Selector2> of <Selector1>'s Descendant(Child, Grand-child, Great-grand-child)
• Child Combinator
  • Selector1 > Selector2
    • Direct <Selector2> of <Selector1>'s Child
• Sibling Combinator
  • Selector1 + Selector2
    • All <Selector2> of <Selector1>'s Sibling
• Group Combinator
  • Selector1, Selector2 ...
    • Same Style

Color

Color Representation

• Color Name
• Hexadecimal Number
• RGBa (255, 255, 255, 0.0~1.0)
• HSL (0~360, 100%, 100%)

Color Attribute

• color
• background-color
• border-color
• opacity

Font

font-family

• font-family name, font name
  • serif
  • sans-serif
  • cursive(필기체)
  • fantasy(장식체)
  • monospace(글자폭 동일체)

font-size

• Absolute Size Keyword: xx-small, x-small, small, medium, large, x-large, xx-large
• Relative Size Keyword: smaller, larger
• Absolute Size Unit: cm, mm, in(1inch = 2.54cm), pt(1in = 72pt), pc(1pica = 12pt), px
• Relative Size Unit
  • em: Relative Font Size of Parent Element (ex 0.5em, W3C recommended)
  • ex: 적용 글골의 소문자 x의 높이에 대한 상대크기
  • %: Percentage of Default Setting Size
• Default Size: 16px(=1em)

font-style

• nornal
• italic, oblique

font-variant

• normal
• small-caps: 작은 알파벳 대문

font-weight

• normal: 400 (Default)
• bold: 700
• bolder, lighter: one step up/down more than current setting
• 100 ~ 900: devide into nine steps

Using

• font: [font-style font-variant font-weight] font-size[/line-height] font-family
  • [] Can be omitted
  • Under line Attribute Can change priority
  • line-height is indicated after font-size with "/"
    • ex) font: italic bold 12px/30px Times, serif

Customizing Font

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Font" src="https://codepen.io/duqe/embed/dyaQWeb?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/dyaQWeb">
  CSS - Font</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Text

letter-spacing & word-spacing

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - letter-spacing &amp; word-spacing" src="https://codepen.io/duqe/embed/wvNQdjJ?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/wvNQdjJ">
  CSS - Text - letter-spacing &amp; word-spacing</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-align & text-align-last

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-align &amp; text-align-last" src="https://codepen.io/duqe/embed/XWOyRqx?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/XWOyRqx">
  CSS - Text - text-align &amp; text-align-last</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-indent

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-indent" src="https://codepen.io/duqe/embed/mdvQmKV?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/mdvQmKV">
  CSS - Text - text-indent</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-transform

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-transform" src="https://codepen.io/duqe/embed/bGzQWjW?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/bGzQWjW">
  CSS - Text - text-transform</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-description-line

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-description-line" src="https://codepen.io/duqe/embed/gOqQWdw?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/gOqQWdw">
  CSS - Text - text-description-line</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-shadow

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-shadow" src="https://codepen.io/duqe/embed/poGQPqV?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/poGQPqV">
  CSS - Text - text-shadow</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

text-overflow & word-wrap

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - text-overflow &amp; word-wrap" src="https://codepen.io/duqe/embed/oNmQWVN?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/oNmQWVN">
  CSS - Text - text-overflow &amp; word-wrap</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

vertical-align

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Text - vertical-align" src="https://codepen.io/duqe/embed/MWLzmdq?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/MWLzmdq">
  CSS - Text - vertical-align</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

List

• list-style-type
  • ul value: none | disc (default) | circle | square
  • ol value: decimal (default) | lower-alpha | upper-alpha | lower-roman | upper-roman
• list-style-image
  • value: none | url | image file
• list-style-position
  • value: inside | outside (default)
• list-style
  • Assignment in bulk

Table

• border
  • ex) 1px solid black
• table-layout
  • auto: 자동 테이블 배열. 컬럼의 너비는 셀 안의 가장 넓은 콘텐츠에 의해 결정. 테이블 레이아웃은 전체 테이블 내용을 다 읽어들인 후 결정
  • fixed: 고정 테이블 배열. 셀 안으 콘텐츠와 상관없이 테이블과 컬럼의 너비에 의해 결정
• border-collapse
  • separate: 두 테두리 분리 표시
  • cillapse: 두 테두리 하나로 합쳐서 표시
• border-spacing
  • Horizontal distance, Vertical distance
  • If it's one value, horizontal & vertical use same value
• caption-side
  • top | bottom
• empty-cells
  • show | hide

Box Model

Opening

				top
				margin
				border
				padding
left height				contents				right
				bottom width

Margin & Padding

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - BoxModel - Margin &amp; Padding" src="https://codepen.io/duqe/embed/eYxQWNe?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/eYxQWNe">
  CSS - BoxModel - Margin &amp; Padding</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Size of Element

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS - Box Model - Size of Element" src="https://codepen.io/duqe/embed/mdvQwQp?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/duqe/pen/mdvQwQp">
  CSS - Box Model - Size of Element</a> by Lee Deokho (<a href="https://codepen.io/duqe">@duqe</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

File Relation between HTML and CSS

*.html

<link href="style.css" rel="stylesheet type="text/css">

*.css

@charset "utf-8";

body {
      background-color: #fff;
}

Typeface related

• font-family: Arial, Helvetica, sans-serif;
• font-size: 100% / 1em / 1rem / 12px;

CSS Effect

• Transform
  • Definition: A->B로 변환되는 중간과정을 부드럽게 연결하는 css 효과
  • transition-property
  • transition-duration
  • transition-timing-function: linear, ease, ease-in, ease-out, ease-in-out
  • transition-delay
• Transition
  • Definition: width, height 이외의 변형 요건에 해당하는 css 효과