'Front-End/HTML5 + CSS' 카테고리의 글 목록 (3 Page)

[CSS3] @media 쿼리

Front-End/HTML5 + CSS 2016. 12. 18. 14:21

@media 쿼리

1. 정의

- CSS3 부터 @media 쿼리 사용

- @media 타입 다음으로 나옴

- @media 타입보다 더 세세한 조작이 가능하다

2. 사용방법

1) <head>의 사용

2) CSS 내부의 사용

@media screen and(min-width:960px) and (min-width:600px), screen and(min-width:400px), print{ } //or @media screen and(min-width:960px){ ... } @media screen and(max-width:959px){ ... } @media screen and(color){ ... } @media screen and(monochrome){ ... }

3. @media 쿼리 문법

1) 미디어 타입

2) 논리 연산자

- and : 전체 미디어 쿼리에 해당하는 경우에만 스타일 적용

@media screen and (min-width:960px){ ... }

- 일반 화면에서 900픽셀 이상의 해상도를 가지는 경우에 적용

- comma : 여러 미디어 쿼리를 결합합니다. 여러개 중 하나에 해당하는 경우

@media (min-width:700px), handheld and (orientation:landscape){ ... }

- 화면 폭이 700픽셀 이상이거나 손으로 들 수 있는 작은 장치에서 가로로 볼 때

- not : 전체 미디어 쿼리에 해당 안됨(조건에 해당x)

@media not screen and (min-width:960px){ ... }

- 일반화면 900픽셀 이상의 해상도를 가지는 경우에는 적용 x

- only : 미디어 타입과 미디어 쿼리를 지원하지 않는 이전의 웹 브라우저에서 사용

@media only screen and (color){ ... }

- 컬러를 지원하는 화면에만 적용하고 싶다면

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS3] Transform - 위치, 모양 크기 지정 (0)	2016.12.18
[CSS] overflow-x /overflow-y (0)	2016.12.18
[CSS] @media 타입 (0)	2016.12.18
[CSS3] Flex Position - Flexbox Layout (0)	2016.12.18
[CSS] HTML 요소 가운데 정렬 쉽게 하기 (0)	2016.12.13

리딩리드

,

[CSS] @media 타입

Front-End/HTML5 + CSS 2016. 12. 18. 12:20

@media 타입

1. 정의

- CSS 2.1 버전부터 사용

- 지금은 사용하지 않는다

2. 정의방법

1) <head> 의 정의

- media = "all" 전체에 적용되는 속성

- media = "print" 인쇄할때 적용

- media = "screen" PC 화면

- media = "print, screen" 인쇄와 PC 화면에서

2) CSS에 직접 사용

@import url("print.css") print; or @media print{ body{ font-size : 12px; } }

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] overflow-x /overflow-y (0)	2016.12.18
[CSS3] @media 쿼리 (0)	2016.12.18
[CSS3] Flex Position - Flexbox Layout (0)	2016.12.18
[CSS] HTML 요소 가운데 정렬 쉽게 하기 (0)	2016.12.13
[CSS] Height 100% 하는법 (0)	2016.12.13

리딩리드

,

[CSS3] Flex Position - Flexbox Layout

Front-End/HTML5 + CSS 2016. 12. 18. 11:20

Flex Position - Flexbox Layout

1. 정의

- CSS3에서 새롭게 명세된 레이아웃 방법

- 요소들을 자유롭게 빈공간을 채워 나간다

- 아직 버그가 발견되며 IE10에서는 -ms-붙여 사용

- flex layout은 크게 부모와 자식으로 이루어져 있다

2. 부모요소

1) flexbox layout 선언

<style> .container{ display : flex; } </style> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div>

- display : flex(inline-flex) 부모 객체의 선언 함으로서 flex layout 생성한다

2) flexbox layout 옵션

A. flex-direction

- 컨테이너 자식 요소들의 방향성을 결정

- row : 기본값, 수평으로 요소의 방향성은 좌 -> 우

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div>

- row-reverse : 수평, 우 -> 좌

- column : 수직(행) , 상 -> 하

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div>

- column-reverse : 수직(행), 하 -> 상

B. flex-wrap

- 자식 요소들 줄넘김 처리

- nowrap : 기본값, 요소들 한 줄에 모두 표현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div>

- wrap : 적정 길이가 넘어가면 줄 아래로 이동

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div>

- wrap-reverse : wrap과 동일, 하지만 역 방향

c. justify-content

- 컨테이너에 빈공간이 있다면 자식 요소들을 수평으로 정렬하는 방법

- flex-start : 하나로 묶어서 시작점에 위치

- flex-end : 하나로 묶어서 끝에 위치

- center : 가운데 위치

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div>

- space-between : 양쪽 끝에 맞춰 정렬

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div>

- space-around : 일정한 간격으로 정렬

D. align-items

- 컨테이너의 빈공간이 있다면 수직으로 정렬, justify-content의 수직 버전

- flex-start : 시작점의 위치

- flex-end : 끝에 위치

- center : 가운데 위치

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="storm" content="width=device-width, initial-scale=1"> <style>  </style> </head> <div class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div>

- baseline : baseline 기준

- stretch : 양 끝을 기준으로 일정 공간을 만든다

E. flex-flow

- flex-direction 과 flex-wrap 을 한 줄에 정의할 때 쓴다

<style> .container{ display:flex; flex-flow : row wrap; } </style>

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS3] @media 쿼리 (0)	2016.12.18
[CSS] @media 타입 (0)	2016.12.18
[CSS] HTML 요소 가운데 정렬 쉽게 하기 (0)	2016.12.13
[CSS] Height 100% 하는법 (0)	2016.12.13
[CSS] 3단 레이아웃 (float, display) (0)	2016.12.11

리딩리드

,

[CSS] HTML 요소 가운데 정렬 쉽게 하기

Front-End/HTML5 + CSS 2016. 12. 13. 16:05

HTML 요소 가운데 정렬 쉽게 하기

1. 방법

- Position과 margin 을 이용한다

- 상위 element에 position: relative 를 추가한후 하위에 position:absolute, margin, top, left, right, bottom 설정

body{ position:relative; border : 2px solid black; width:100%; height:100%; } #container{ position:absolute; border: 2px solid coral; width:500px; height : 500px; left:0; top:0; right:0; bottom:0; margin: auto; }

- margin : auto

- left:0, top : 0, left: 0, right: 0

- 위 두 속성을 꼭 추가 해야 가운데 위치한다

2. 예제 소스

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html{ height:100%; } body{ position:relative; border : 2px solid black; width:100%; height:100%; } #container{ position:absolute; border: 2px solid coral; width:500px; height : 500px; left:0; top:0; right:0; bottom:0; margin: auto; } section{ background-color: antiquewhite; height:500px; float: left; width:200px; } aside{ background-color : aquamarine; height:500px; float: right; width:200px; } </style> </head> <div id="container"> <section> content </section> <aside> sidebar </aside> </div>

- 가운데 자리 잡힌 요소에 float 속성으로 태그들을 배치한다

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] @media 타입 (0)	2016.12.18
[CSS3] Flex Position - Flexbox Layout (0)	2016.12.18
[CSS] Height 100% 하는법 (0)	2016.12.13
[CSS] 3단 레이아웃 (float, display) (0)	2016.12.11
[CSS] 고정 <header>, <footer> 만들기 (0)	2016.12.11

리딩리드

,

'Front-End/HTML5 + CSS'에 해당되는 글 36건

[CSS3] @media 쿼리

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] @media 타입

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS3] Flex Position - Flexbox Layout

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] HTML 요소 가운데 정렬 쉽게 하기

'Front-End > HTML5 + CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30