CSS Tutorial 1

CSS는 Cascading Style Sheets 약자이며 HTML 문서의 스타일을 꾸밀 때 사용한다.

뼈대인 HTML문서의 스타일을 정의할 뿐 아니라 다양한 디스플레이 화면들에 맞게 웹페이지의 스타일이 변형되게 할 수도 있다.

동시에 여러 부분에 스타일을 적용할 수 있게 하기에 웹페이지 제작을 쉽고 깔끔하게 할 수 있다.

CSS 문법

CSS Selector 종류

Element selector : <>안에 들어가는 element들을 위한 선택자이다

- 형식: element { }
- ex) h1 { }

Id selector : #를 사용해 id를 지정하고 주어진 id값으로 요소를 선택하여 스타일을 적용한다

- 형식: #id name { }
- ex) para1 { }

class selector : 많은 부분에 스타일을 한번에 지정할 때 사용하는 선택자이다

- 형식 : .classname { }
- ex) p.center { }

Universal selector : 문서의 모든 요소에 스타일을 적용할시 사용하는 선택자이다

- 형식 : * { }

Grouping selector : 스타일을 적용시킬 요소들을 한번에 묶어서 적용시킬 수 있다

- 형식: element1, element2 ... { }
- ex) h1, p { }

CSS Insertion

External CSS : 별도의 css 파일을 html문서와 연결시키는 방법.

<head> 섹션 안에 <link> 를 사용하여 별도의 .css 파일을 참조하게 할 수 있으며 그 별도의 파일에선 html 태그를 포함하지 않고 스타일만 적용하면 된다.

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

Internal CSS : 현재 페이지 전체에 스타일을 적용시킬 수 있다. html문서 <style> 섹션 안에 스타일을 정의하면 된다.

<style>
body {
  background-color: linen;
}
</style>

Inline CSS : 한개의 요소에 직접 스타일을 적용시키는 방법이다.

<h1 style="color:blue; text-align:center;">This is a heading</h1>

※ 한꺼번에 많은 스타일을 적용시켰을 경우 더 나중에 정의된 스타일이 적용된다.

적용순서

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

CSS Comments

CSS Coment : /* */

html Comment : < !-- ... -- >

CSS Colors

background-color : 배경색

color : 글씨색

border : 경계선 ex) border:2px solid DodgerBlue; (굵기, 종류,색)

RGB : rgb(red, green, blue)

RGBA : rgba(red, green, blue, alpha)

HEX : #rrggbb

HSL : hsl(hue, saturation, lightness)

HSLA : hsla(hue, saturation, lightness, alpha)

CSS Background Color

background-color : 적용하는 부분에 배경색을 넣을 수 있다

opacity : 0.0 ~ 1.0 투명도를 결정하는데 글씨도 같이 투명해진다.

RGBA : RGBA를 이용해 투명도를 조절하면 글씨는 투명해지지 않는다.

CSS Background Image

background-image : 배경에 이미지를 넣을 수 있다. background-image: url(" ");

background-position: 배경에 이미지를 넣을 곳을 선택할 수 있다

background-repeat : 배경에 이미지를 반복해서 넣을 수 있다.

repeat-x : 가로반복 / repeat-y : 세로반복 / no-repeat : 반복없음

CSS Background Attachment

backgound-attachment : 배경이미지가 스크롤 되야하는지, 고정되어있어야하는지 결정한다

scroll: 페이지를 스크롤하면서 같이 스크롤된다
fixed: 화면 한 쪽에 고정되어있어 스크롤해도 그림이 이동하지 않는다

CSS Background Shorthand

배경에 적용할 스타일을 하나하나 적는것이 아니라 한꺼번에 적용할 수도 있다.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

다만 스타일을 한번에 적용시 순서를 잘 지켜야한다. 몇개의 스타일 값을 적용하지 않더라도 순서를 지켜줘야한다.

입력 순서는 다음과 같다.

background-color
background-image
background-repeat
background-attachment
background-position

CSS Border Style

border : element의 경계선의 스타일을 정의한다.

border은 1개 부터 4개까지 값을 가질 수 있어 순서대로 위, 오른쪽, 아래, 왼쪽 면의 경계선에 다른 스타일을 적용 할 수 있다.

border-style : 경계선의 종류를 결정한다

CSS Border Width

border-width : 경계선의 너비를 결정한다. (in px, pt, cm, em, etc) 로 직접 결정하거나 thin, medium, or thick 을 사용해도 된다.

CSS Border Colors

border-color : 경계선의 색을 결정한다

name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

CSS Border Sides

border은 1개 부터 4개까지 값을 가질 수 있어 순서대로 위, 오른쪽, 아래, 왼쪽 면의 경계선에 다른 스타일을 적용 할 수 있다.

border-style, border-width, border-color 에 모두 적용 가능하다

4개의 값을 가질때 : 위, 오른쪽, 아래, 왼쪽 순서대로 적용

3개의 값을 가질때 : 위, 오른쪽, 아래 순서대로 적용

2개의 값을 가질때 : 위, 오른쪽 순서대로 적용

1개의 값을 가질때 : 스타일이 모든 면에 다 적용

CSS Border Shorthand

CSS border도 경계선에 적용시킨 여러개의 스타일을 한번에 적용시켜 코드를 짧게 만들 수 있다

Background shorthand와 다르게 스타일을 입력해주는 순서는 없다

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

CSS Rounded Borders

border-radius : 경계선을 둥글게 만든다

Border property는 border-direction-property 의 형식으로 혼합해서 사용이 가능하다

ex) border-left-width: 15px; / p.dotted {border-bottom-style: dotted;}

CSS Margins

margin : element 바깥쪽 여백을 만들기 위해 사용한다.

margin-top / margin-right / margin-bottom / margin-left 로 모든 면의 여백을 제어할 수 있고
auto (수평 가운데로 자동여백) / length ( px, pt, cm, etc ) / percent % / inherit (상속) 으로 여백 범위를 조절할 수 있다

margin도 위, 오른쪽, 아래, 왼쪽 순서대로 값을 적어 한번에 여백관리를 할 수 있다.

4개의 값을 가질때 : 위, 오른쪽, 아래, 왼쪽 순서대로 적용

3개의 값을 가질때 : 위, 오른쪽, 아래 순서대로 적용

2개의 값을 가질때 : 위, 오른쪽 순서대로 적용

1개의 값을 가질때 : 스타일이 모든 면에 다 적용

※ margin은 음수 값이 허용된다.

p {
  margin: 25px 50px 75px 100px;
}

Margin Collapse

바깥쪽 여백은 서로 만났을때 둘 중 더 큰 여백을 정해서 하나의 여백으로 맞춰진다.

어느 element의 아래 여백 50px과 어느 element의 위 여백 20px이 만나면 둘은 더해져 70px이 되는것이 아니라 둘 중 큰 여백인 50px로 정해지게 된다.

※ 이 margin collapse는 위, 아래 margin에서만 발생한다

CSS Padding

padding : element 안쪽여백을 만들기 위해 사용한다.

padding-top / padding-right / padding-bottom / padding-left 로 모든 면의 여백을 제어할 수 있고
length ( px, pt, cm, etc ) / percent % / inherit (상속) 으로 여백 범위를 조절할 수 있다

※ padding은 음수 값이 허용되지 않는다.

padding도 위, 오른쪽, 아래, 왼쪽 순서대로 값을 적어 한번에 여백관리를 할 수 있다.

4개의 값을 가질때 : 위, 오른쪽, 아래, 왼쪽 순서대로 적용

3개의 값을 가질때 : 위, 오른쪽, 아래 순서대로 적용

2개의 값을 가질때 : 위, 오른쪽 순서대로 적용

1개의 값을 가질때 : 스타일이 모든 면에 다 적용

div {
  padding: 25px 50px 75px 100px;
}

Padding and Element Width

width가 정해진 어떤 element에서 padding이 추가된다면 총 width와 padding의 길이가 합쳐져 여백을 만들어낼 것이다.

div.ex1 {
  width: 300px;
  background-color: lightsteelblue;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}

이 문제의 해결을 위해 box-sizing을 사용할 수 있다.

box-sizing : element가 자신의 width를 유지할 수 있게 한다. padding을 늘린다면 컨텐츠가 들어갈 자리가 좁아지게 된다.

div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}

CSS Height and Width

height : 높이 width : 너비 를 결정한다

auto (default) / length ( px, pt, cm, etc ) / percent % / initial / inherit (상속) 으로 길이를 조절할 수 있다
height와 width는 padding, borders, margins를 포함하지 않는다

Setting max, min

max-width : 최대 너비를 결정 min-width : 최소 너비를 결정

max-height : 최대 높이를 결정 max-height : 최소 높이를 결정

length value / percent (%) / none(default) 을 이용해 설정할 수 있다

어떤 요소의 최대를 지정하므로 요소의 값이 최대로 설정되거나 최소로 설정된 값보다 커지거나 작아지는것을 방지한다

※ max-width는 width 속성값을 무효화시킨다. (다른 property 모두 적용)

CSS Box Model

'Box model' 이라는 용어는 CSS의 디자인이나 레이아웃을 말할 때 사용된다.

CSS 박스 모델은 HTML의 모든 요소를 감싸며 margin, border, padding, content로 구성된다.

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Width and Height of an Element

높이와 너비는 padding, margin, border 을 포함하지 않으며 오직 content area의 높이 와 너비를 결정하기 때문에 제대로 된 요소의 사이즈를 결정하기 위해선 모든 속성들을 합쳐서 계산해야한다.

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px

총 너비 : width + left padding + right padding + left border + right border + left margin + right margin

총 높이 : height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Outline

outline : 요소 주변에 둘러진 선. border 바깥 쪽에 위치한다.

※ Outline은 border과 다른 것이며 다른 컨텐츠에 겹칠 수 있다. Outline은 element의 면적에 포함 되지 않는다

CSS Outline Style

outline-style : 아웃라인의 스타일을 결정한다

CSS Outline Width

outline-width : 아웃라인의 너비를 결정한다

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

CSS Outline Color

outline-color : 아웃라인의 색을 결정한다

name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

CSS Outline Shorthand

CSS outline도 여러개의 스타일을 한번에 적용시켜 코드를 짧게 만들 수 있다

outline-width / outline-style(required) / outline-color 가 적용되며 순서는 상관 없다

p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS Outline Offset

outline-offset : 아웃라인과 border의 끝 사이에 공간을 주는 것이다. 공간과 아웃라인은 투명하다.

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Offset을 늘려도 컨텐츠의 위치는 변하지 않고 아웃라인과 공백만 커진다.

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

CSS Responsive (0)	2020.07.27
CSS Advanced 2 (0)	2020.07.24
CSS Advanced (0)	2020.07.24
CSS Tutorial 2 (0)	2020.07.24

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

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

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

Breezebee;

CSS Tutorial 1

CSS 문법

CSS Selector 종류

CSS Insertion

CSS Comments

CSS Colors

CSS Background Color

CSS Background Image

CSS Background Attachment

CSS Background Shorthand

CSS Border Style

CSS Border Width

CSS Border Colors

CSS Border Sides

CSS Border Shorthand

CSS Rounded Borders

CSS Margins

Margin Collapse

CSS Padding

Padding and Element Width

CSS Height and Width

Setting max, min

CSS Box Model

Width and Height of an Element

CSS Outline

CSS Outline Style

CSS Outline Width

CSS Outline Color

CSS Outline Shorthand

CSS Outline Offset

'CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

CSS Tutorial 1

CSS 문법

CSS Selector 종류

CSS Insertion

CSS Comments

CSS Colors

CSS Background Color

CSS Background Image

CSS Background Attachment

CSS Background Shorthand

CSS Border Style

CSS Border Width

CSS Border Colors

CSS Border Sides

CSS Border Shorthand

CSS Rounded Borders

CSS Margins

Margin Collapse

CSS Padding

Padding and Element Width

CSS Height and Width

Setting max, min

CSS Box Model

Width and Height of an Element

CSS Outline

CSS Outline Style

CSS Outline Width

CSS Outline Color

CSS Outline Shorthand

CSS Outline Offset

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역