랄지 IT
CSS 심화 정리 본문
CSS 란?
CSS는 HTML 문서를 어떻게 렌더링할 것인지를 정의하기 위한 언어이다.
즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.
* 랜더링: 코드를 읽은 후, 화면에 시각적으로 표시하게 되는 과정
HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다.
CSS 문법
h1 {
color: red;
}
h1 셀렉터(선택자)
{} 선언 블록
color: red; 데클러레이션(선언)
color 프로퍼티 (속성)
red 프로퍼티 밸류(값)
위와 같은 구문을 Rule Set(또는 Rule)이라 하며 셀렉터에 의해 선택된 특정 HTML 요소를 어떻게 렌더링(Rendering)할 것인지 브라우저에 지시하는 역할을 한다
이와 같은 Rule Set의 집합을 스타일시트(Style Sheet)라 한다.
CSS와 HTML을 연동하는 방법
1. Link style : 외부에 있는 CSS 파일을 로드 (가장 일반적인 방법)
<link rel="stylesheet" href="css/style.css">
2. Embedding style : HTML 내부에 CSS를 포함시키는 방식
<style>
h1 { color: red; }
p { background: aqua; }
</style>
3. Inline style : HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식이다.
<h1 style="color: red">Hello World</h1>
Reset CSS
모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어 CSS가 없어도 작동한다. 그런데 웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요하다. Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다.
Eric Meyer’s reset meyerweb.com/eric/tools/css/reset/
normalize.css necolas.github.io/normalize.css/
셀렉터
1. 전체 셀렉터 (Universal Selector)
*
HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)
2. 태그 셀렉터
태그명
지정된 태그명을 가지는 요소를 선택한다.
3. ID 셀렉터
#id
id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.
4. 클래스 셀렉터
.클래스
class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다.
HTML 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러 개 지정할 수 있다.
<p class="text-center text-large text-blue">Center Large Blue</p>
5. 어트리뷰트 셀렉터
셀렉터[어트리뷰트] : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.
셀렉터[어트리뷰트=”값”] 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.
셀렉터[어트리뷰트~=”값”] 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다.
셀렉터[어트리뷰트|=”값”] 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
셀렉터[어트리뷰트^=”값”] 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
셀렉터[어트리뷰트$=”값”] 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
셀렉터[어트리뷰트*=”값”] 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.
/* 사용예) a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
a[href] { color: red; }
셀렉터[어트리뷰트*=”값”] 과 셀렉터[어트리뷰트~=”값”] 다른이유:
*=”값”은 그냥 전체텍스트 중에 (섞여서)포함되어있기만하면 되고,
~="값"은 단어로서 포함해야함 _이런거가 붙어있지 않고 쌩으로 해당값이 포함
6. 후손 셀렉터
셀렉터A 셀렉터B {
....
}
후손 셀렉터는 셀렉터A의 모든 후손(하위) 요소 중 셀렉터B와 일치하는 요소를 선택한다.
부모요소와 자손요소
자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라한다.
자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.
7. 자식 셀렉터 (Child Combinator)
셀렉터A > 셀렉터B
자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.
8. 형제(동위) 셀렉터 (Sibling Combinator)
형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용한다.
- 인접 형제 셀렉터(Adjacent Sibling Combinator)
셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.
/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
p + ul { color: red; }
- 일반 형제 셀렉터(General Sibling Combinator)
셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.
/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
p ~ ul { color: red; }
<p>The first paragraph.</p>
<ul> *인접형제 셀렉터는 이것만 선택
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> * 요기까지
<h2>Another list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> *일반형제 셀렉터는 여기까지 ul 전부 선택*
9. 가상 클래스 셀렉터 (Pseudo-Class Selector)
요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.
특정 상태란,
마우스가 올라와 있을때
링크를 방문했을 때와 아직 방문하지 않았을 때
포커스가 들어와 있을 때 등등
이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.
콜론(:)을 사용한다.
selector:pseudo-class {
property: value;
}
/* a 요소가 hover 상태일 때 */
a:hover { color: red; }
/* input 요소가 focus 상태일 때 */
input:focus { background-color: yellow; }
링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)
:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터에 포커스가 들어와 있을 때
UI 요소 상태 셀렉터(UI element states pseudo-classes)
:checked 셀렉터가 체크 상태일 때
:enabled 셀렉터가 사용 가능한 상태일 때
:disabled 셀렉터가 사용 불가능한 상태일 때
10. 구조 가상 클래스 셀렉터(Structural pseudo-classes)
:first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
:last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.
/* p 요소 중에서 마지막 자식을 선택 */
/* body 요소의 두번째 p 요소는 마지막 자식 요소가 아니다.
body 요소의 마지막 자식 요소는 div 요소이다. */
p:last-child { color: blue; }
<body>
<p>This paragraph is the first child of its parent (body).</p>
<h1>Welcome to My Homepage</h1>
<p>This paragraph is not the first child of its parent.</p>
<div>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent.</p>
</div>
</body>
:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.
n은 0부터 시작하는 정수이다.
:first-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.
:last-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.
:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.
11. 부정 셀렉터(Negation pseudo-class)
:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택한다.
12. 정합성 체크 셀렉터(validity pseudo-class)
:valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터) 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.
13. 가상 요소 셀렉터 (Pseudo-Element Selector)
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.
요소 콘텐츠의 첫글자 또는 첫줄
요소 콘텐츠의 앞 또는 뒤 등등
가상 요소에는 두개의 콜론(::)을 사용한다.
selector::pseudo-element {
property:value;
}
::first-letter 콘텐츠의 첫글자를 선택한다.
::first-line 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.
크기 단위
CSS에서 사용하는 대표적인 크기 단위는 px, (r)em, % 가 있다.
px은 절대값이고 (r)em, %는 상대값이다.
대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.
px
픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상도가 1680 * 1050 인데 이것은 가로에 1680개의 픽셀, 세로에 1050개의 픽셀을 가진다는 의미이다.
200만 화소(픽셀)의 디지털 카메라로 찍은 사진은 1600 * 1200 = 1,920,000으로 통상 200만 화소라 한다.
픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다.
디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식한다.
%
백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.
em
배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.
중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다.
상대 단위인 em의 기준이 상속의 영향으로 바뀔 수 있기 때문이다. 즉, 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다.
body {
font-size: 14px;
text-align: center;
}
div {
font-size: 1.2em; /* 14px * 1.2 = 16.8px */
font-weight: bold;
padding: 2em; /* 16.8px * 2 = 33.6px */
background-color: rgba(255, 0, 0, 0.2);
}
<body>
<div class='box1'>
Font size: 1.2em ⇒ 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px
<div class='box3'>
Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px
</div>
</div>
</div>
</body>
rem
최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.
Viewport 단위
Viewport 단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.
반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다.
하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.
IE 8 이하는 지원하지 않으며 IE 9 ~ 11, Edge는 지원이 완전하지 않으므로 주의가 필요하다.
vw viewport 너비의 1/100
vh viewport 높이의 1/100
vmin viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax viewport 너비 또는 높이 중 큰 쪽의 1/100
예를 들어 viewport 너비가 1000px, 높이가 600px인 경우,
1vw : viewport 너비 1000px의 1%인 10px
1vh : viewport 높이 600px의 1%인 6px
vmin : viewport 높이 600px의 1%인 6px
vmax : viewport 너비 1000px의 1%인 10px
참고: quirksmode.org/css/units-values/
색상 표현 단위
키워드(red, blue…)를 사용할 수 있다.
HEX 코드 단위 (Hexadecimal Colors) #000000
RGB (Red, Green, Blue) rgb(255, 255, 0)
RGBA (Red, Green, Blue, Alpha/투명도) rgba(255, 255, 0, 1)
HSL (Hue/색상, Saturation/채도, Lightness/명도) hsl(0, 100%, 25%)
HSLA (Hue, Saturation, Lightness, Alpha) hsla(60, 100%, 50%, 1)
참조: www.w3.org/TR/css-color-3/
박스 모델
모든 HTML 요소는 Box 형태의 영역을 가지고 있다.
box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다.
width와 height 프로퍼티를 비롯한 모든 박스모델 관련 프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.
Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.
Padding 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다.
Border 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.
Margin 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다.
box-sizing
box-sizing 프로퍼티의 기본값은 content-box(패딩, 보더, 마진이 제외된 콘텐츠 본연의 값)이다.
box-sizing 프로퍼티에 border-box를 적용하면 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다.
(즉, 콘텐츠 영역, padding, border가 포함된 영역을 width / height 프로퍼티의 대상으로 지정할 수 있다.)
box-sizing 프로퍼티는 상속되지 않는다. 따라서 box-sizing 프로퍼티를 사용하도록 초기화하려면 아래와 같이 정의한다.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
overflow: hidden;
만일 width와 height로 지정한 콘텐츠 영역보다 실제 콘텐츠가 크면 콘텐츠 영역을 넘치게 되는데 overflow: hidden;을 지정하면 넘친 콘텐츠를 감출 수 있다.
방향
margin, padding, border는 content의 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.
-top, -right, -bottom, -left 4방향의 프로퍼티를 각각 지정하거나 한번에 지정할 수 있다
4개의 값을 지정할 때: 12시부터 시계방향
margin: 25px 50px 75px 100px;
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;
3개의 값을 지정할 때: 위 양옆 아래
margin: 25px 50px 75px;
margin-top: 25px;
margin-right: 50px; margin-left: 50px;
margin-bottom: 75px
2개의 값을 지정할 때: 위아래 양옆
margin: 25px 50px;
margin-top: 25px; margin-bottom: 25px;
margin-right: 50px; margin-left: 50px;
1개의 값을 지정할 때: 전체
margin: 25px;
margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;
max-, min-
max-width 프로퍼티는 요소 너비의 최대값을, min-width 프로퍼티는 요소 너비의 최소값을 지정한다.
브라우저의 너비가 크거나 작아져도 요소 너비는 max-width, min-width 지정 너비(예 300px)을 유지한다.
border-
border-style 프로퍼티는 테두리 선의 스타일을 지정한다
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden dotted dashed solid double 이런식으로 4방향 각각 지정할 수 있음
border-radius는 테두리 모서리를 둥글게 표현하도록 지정한다.
.border-rounded {
/* 4 꼭지점에 대해 Radius 지정 */
border-radius: 5px;
}
.border-circle {
/* 원 */
border-radius: 50%;
}
.border-football {
/* 풋볼 */
/* top-left & bottom-right | top-right & bottom-left */
border-radius: 15px 75px;
}
border 프로퍼티는 border-width, border-style, border-color를 한번에 설정하기 위한 shorthand 프로퍼티이다.
/* Syntax */
border: border-width border-style border-color;
display 프로퍼티
display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.
block, inline, inline-block, none 등의 값을 갖는다.
block 요소
div, h1 ~ h6, p, ol, ul, li, hr, table, form
항상 새로운 라인에서 시작한다.
화면 크기 전체의 가로폭을 차지한다. (width: 100%)
width, height, margin, padding 프로퍼티 지정이 가능하다.
block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다
inline 요소
span, a, strong, img, br, input, select, textarea, button
새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다.
즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
content의 너비만큼 가로폭을 차지한다.
width, height, margin, padding 프로퍼티를 지정할 수 없다.
상, 하 여백은 line-height로 지정한다.
inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
inline-block 요소
block과 inline 레벨 요소의 특징을 모두 갖는다.
inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.
inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
inline(-block) 요소 뒤의 자동 공백 회피 방법
1. 공백제거
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
2. 마이너스 마진
네거티브 4px의 여백을 사용하여 요소를 제자리로 되돌릴 수 있습니다.
* 이전 IE (6 & 7)에서 문제 있음
margin-left: -4px
3. 닫는 태그 건너 뛰기
<li>1
<li>2...
4. 글꼴 크기를 0으로 설정
* Android에서 몇 가지 문제 있음
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
5. float 속성으로 대체하여 사용
6. flexbox 속성으로 대체하여 사용
visibility 프로퍼티
요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의
visible 해당 요소를 보이게 한다 (기본값)
hidden 해당 요소를 보이지 않게 한다.
* display: none;은 해당 요소의 공간까지 사라지게 하지만
* visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.
collapse table 요소에 사용하며 행이나 열을 보이지 않게 한다.
none table 요소의 row나 column을 보이지 않게 한다.
* IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다.
opacity 프로퍼티
요소의 투명도를 정의한다. 0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명
background- 프로퍼티
background-image
background-image에 복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 전면에 출력된다.
background-image: url("...") url("...");
background-repeat: no-repeat, repeat;
background-size
배경 이미지의 사이즈를 지정한다.
배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있다.
프로퍼티값은 px, %, cover, contain 등을 사용한다.
배경이미지의 width, height를 모두 설정할 수 있다. 이때 첫번째 값은 width, 두번째 값은 height를 의미한다. 하나의 값만을 지정한 경우, 지정한 값은 width를 의미하게 되며 height는 auto로 지정된다.
%값 지정
배경이미지 크기가 지정된 %값에 비례하여 설정
화면을 줄이거나 늘리면 배경이미지의 크기도 따라서 변경되어 찌그러지는 현상이 나타난다.
cover 지정
배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰값에 배경이미지를 맞춘다. 따라서 이미지의 일부가 보이지 않을 수 있다.
contain 지정
배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정한다.
background-attachment 프로퍼티
일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다.
화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 fixed 키워드를 지정한다.
background-position 프로퍼티
일반적으로 background-image는 좌상단부터 이미지를 출력한다.
이때 background-position 프로퍼티를 사용하면 이미지의 좌표(xpos, ypos)를 지정 할 수 있다.
기본값은 background-position: 0% 0%;로 배경이미지는 우측 상단에 위치하게 된다.
center 등 사용
background-color 프로퍼티
요소의 배경 색상을 지정한다. 색상값 또는 transparent 키워드를 지정할 수 있다.
rgb(255, 255, 255); red; 등 사용
background Shorthand
background-position를 한번에 정의하기 위한 Shorthand Syntax이다
background: color || image || repeat || attachment || position
background: #FFEE99 url("...") no-repeat center;
font, text
font-family
폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다.
폰트는 여러 개를 동시에 지정이 가능하다. 첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용한다. 따라서 마지막에 지정하는 폰트는 대부분의 OS에 기본적으로 설치되어 있는 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적이다.
폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않아도 된다.
font-style 프로퍼티는 이탤릭체의 지정,
font-weight 프로퍼티는 폰트 굵기 지정에 사용된다
style: normal / italic / oblique
weight: 100 ~ 900 or normal / bold / lighter / bolder
line-height
텍스트의 높이를 지정한다. 텍스트 수직 정렬에도 응용되어 사용된다.
대부분 브라우저의 default line height는 약 110% ~ 120%.
.small {
line-height: 70%; /* 16px * 70% */
}
.big {
line-height: 1.2; /* 16px * 1.2 */
}
.lh-3x {
line-height: 3.0; /* 16px * 3 */
}
다음은 수직 중앙 정렬 예제이다.
a 요소의 line-height 값과 a 요소를 감싸는 div 요소의 height 값을 일치시킨다.
.button {
height: 70px;
}
.button > a {
font: italic bold 2em/70px Arial, Helvetica, sans-serif;
}
text-decoration
링크 underline을 제거할 수 있다.
또는 텍스트에 underline, overline, line-through를 추가할 수도 있다.
white-space 프로퍼티
공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다.
html은 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행되며 줄바꿈(line break)은 무시된다.
또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)된다.
white-space 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티이다.
값 line-break space/tab wrapping(자동줄바꿈)
normal 무시 1번만 반영 O
nowrap 무시 1번만 반영 X
pre 반영 그대로 반영 X
pre-wrap 반영 그대로 반영 O
pre-line 반영 1번만 반영 O
text-overflow 프로퍼티
부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다.
이 프로퍼티를 사용하기 위해서는 아래의 조건이 필요하다
width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 한다.
자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap으로 설정한다.
overflow 프로퍼티에 반드시 “visible” 이외의 값이 지정되어 있어야 한다.
/* 부모 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시한다. */
.truncate {
width: 150px; /* width가 지정되어 있어야 한다. */
white-space: nowrap; /* 자동 줄바꿈을 방지 */
overflow: hidden; /* 반드시 "visible" 이외의 값이 지정되어 있어야 한다. */
text-overflow: ellipsis; /* ellipsis or clip */
}
text-overflow 프로퍼티에 설정할 수 있는 프로퍼티 값은 아래와 같다.
clip 영역을 벗어난 텍스트를 표시하지 않는다. (기본값)
ellipsis 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(…)를 표시한다.
word-wrap 프로퍼티
한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다.
(띄어쓰기 없는) 긴단어에 이 프로퍼티를 사용하지 않으면 부모 영역을 넘어가게 된다.
.word-wrap { word-wrap: break-word; }
word-wrap 프로퍼티는 단어를 어느 정도는 고려하여 개행하지만(.,- 등을 고려한다)
word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.
position 프로퍼티
position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.
static
position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다.
기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 좌표 프로퍼티 사용할 경우에는 무시된다.
relative (상대위치)
static을 선언한 요소와 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부뿐이며 그외는 동일하게 동작한다.
absolute (절대위치)
부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.
만일 부모 또는 조상 요소가 static인 경우, document body를 기준으로 하여 좌표 프로퍼티대로 위치하게 된다.
absolute 선언 시, block 레벨 요소의 width는 inline 요소처럼 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
fixed (고정위치)
부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소처럼 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
z-index 프로퍼티
z-index 프로퍼티에 큰 숫자값을 지정할수록 화면 전면에 출력된다.
positon 프로퍼티가 static 이외인 요소에만 적용된다.
overflow 프로퍼티
자식 요소가 부모 요소의 영역를 벗어났을 때 처리 방법을 정의한다.
visible 영역을 벗어난 부분을 표시한다. (기본값)
hidden 영역을 벗어난 부분을 잘라내어 보이지 않게 한다.
scroll 영역을 벗어난 부분이 없어도 스크롤 표시한다.(현재 대부분 브라우저는 auto과 동일하게 작동한다)
auto 영역을 벗어난 부분이 있을때만 스크롤 표시한다.
float 프로퍼티
float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.
flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다.
float 프로퍼티는 본래 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.
float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.
float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다.
오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.
width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 프로퍼티가 선언되면 width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소 위에 떠 있게(부유하게) 된다.
.d1 {
float: left;
background: red;
}
.d2 {
background: orange;
overflow: hidden;
}
<body>
<div class="box d1"> float: left; </div>
<div class="box d2"> div </div>
</body>
d2 클래스 요소는 본래의 width(100%)를 유지한 상태에서 d1 클래스 요소가 그 위에 위치한다.
float 프로퍼티가 선언된 요소가 다음 요소 위에 떠 있는(부유하고 있는) 상태이다. 따라서 두 요소간의 margin은 제대로 표현되지 않는다.
이것은 두번째 요소에 float 프로퍼티를 선언하지 않았기 때문에 발생하는 박스 모델 상의 문제이다.
이 문제를 해결하는 가장 쉬운 방법은 float 프로퍼티를 선언하지 않은 요소(.d2)에 overflow: hidden 프로퍼티를 선언하는 것이다.
overflow: hidden 프로퍼티는 자식 요소가 부모 요소의 영역보다 클 경우 넘치는 부분을 안보이게 해주는 역할을 하는데 여기서는 float 프로퍼티가 없어서 제대로 표현되지 못하는 요소를 제대로 출력해준다.
* 두번째 요소에도 float 프로퍼티를 선언하면 overflow: hidden 프로퍼티는 선언하지 않아도 되지만 너비가 최소화된다.
부모요소 높이 문제
float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제가 있다.
float 요소는 일반적인 흐름 상에 존재하지 않기 때문에 float 요소의 높이를 알 수 없기 때문인데 이 문제는 부모 요소 이후에 위치하는 요소의 정렬에 문제를 발생시킨다.
- 해결방법1.
float 프로퍼티가 선언된 자식 요소의 부모 요소(.container)에 overflow: hidden 프로퍼티를 선언하는 것이다.
- 해결방법2.
부모 요소(.container)에 float 프로퍼티를 선언하는 방법도 있다. 하지만 부모 요소의 너비는 float된 두개의 자식요소의 콘텐츠를 표현할 수 있는 만큼만으로 작게 줄어들게 된다. 권장할 수 있는 방법은 아니다.
- 해결방법3.
container 영역이 끝나기 직전 빈 요소를 만들고 clear:both를 설정하는 방법도 가능하다. 하지만 의미 없는 빈 요소를 사용하여야 하기 때문에 이 방법 역시 권장할 수 있는 방법은 아니다.
- 해결방법4.
::after 가상 요소 선택자를 이용하는 것이다. 가상 요소 선택자는 CSS2 문법(:after)과 CSS3 문법(::after)이 있는데 IE8까지 지원하는 CSS2 문법(:)을 사용하는 편이 좋다.
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
/*overflow: hidden;*/
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
<body>
<div class="container clearfix">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div style="background:red;padding:10px;color:white;">3</div>
</body>
- 해결방법5.
float 프로퍼티 대신 display: inline-block;을 선언하는 것이다. 주의해야야 점은 inline-block 프로퍼티 요소를 연속 사용하는 경우, 두 요소 사이에 정의하지 않은 공백(4px)가 자동 지정되는 것이다.
이 현상을 회피하기 위해 부모 요소에 font-size: 0;을 선언하여 두 요소 사이에 정의하지 않은 공백을 제거한다.
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
/* 폰트 사이즈를 0으로 지정하여 두 요소 사이에 정의하지 않은 공백을 제거 */
font-size: 0;
}
.d1, .d2 {
display: inline-block;
width: 50%;
padding: 20px 0;
/* 폰트 사이즈를 재지정 */
font-size: 1rem;
}
스타일의 상속(Inheritance)
상속이란, 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것이다.
상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.
모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.
width/height no
margin no
padding no
border no
box-sizing no
display no
visibility yes
opacity yes
background no
font yes
color yes
line-height yes
text-align yes
vertical-align no
text-decoration no
white-space yes
position no
top/right/bottom/left no
z-index no
overflow no
float no
참조 www.w3.org/TR/CSS21/propidx
캐스캐이딩(Cascading)
요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.
캐스캐이딩에는 다음과 같이 세가지 규칙이 있다.
중요도, 명시도, 선언순서
중요도
CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. <link> 로 연결된 CSS 파일
4. <link> 로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트
명시도
대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
1. !important
2. 인라인 스타일
3. 아이디 선택자
4. 클래스/어트리뷰트/가상 선택자
5. 태그 선택자
6. 전체 선택자
7. 상위 요소에 의해 상속된 속성
선언순서
선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.
벤더 프리픽스
CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다.
Can I use?에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다.
브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다.
* {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
브라우저 별 벤더 프리픽스는 다음과 같다.
IE or Edge -ms-
Chrome -webkit-
Firefox -moz-
Safari -webkit-
Opera -o-
iOS Safari -webkit-
Android Browser -webkit-
Chrome for Android -webkit-
많은 브라우저를 위한 벤더 프리픽스를 사용하는 것은 코드의 양을 늘게 하고 또한 브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다. 사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리 를 사용하는 것은 매우 유용한 방법이다.
-shadow
텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티
text-shadow
선택자 {
text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color;
}
Horizontal-offset px 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다
Vertical-offset px 그림자를 텍스트의 아래로 지정값만큼 이동시킨다
Blur-Radius px 그림자의 흐림정도를 지정한다.
Shadow-Color color 그림자의 색상을 지정한다
box-shadow
Inset inset inset 키워드를 지정하면 그림자가 요소 안쪽에 위치한다. 가능
Horizontal-offset px 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다
Vertical-offset px 그림자를 텍스트의 아래로 지정값만큼 이동시킨다
Blur-Radius px 그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수) 가능
Spread px 그림자를 더 크게 확장시킨다. (음수, 양수) 가능
Shadow-Color color 그림자의 색상을 지정한다 가능
그레이디언트
그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.
그레이디언트는 2가지 종류가 있다.
선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
방사형 그레이디언트 (Radial Gradient: defined by their center)
대부분의 브라우저에 벤더프리픽스를 사용 브라우저에 따라 조금씩 문법이 상이하다.
그레이디언트를 직접 작성하는 것보다 작성 툴을 이용하는 것이 보편적이다.
참고: www.colorzilla.com/gradient-editor/
.dawn {
/* Old browsers */
background: #b3cae5;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(12%, #b3cae5), color-stop(46%, #dbdde4), color-stop(70%, #e4e3e4), color-stop(94%, #f7ddbb), color-stop(100%, #efcab2));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* W3C */
background: linear-gradient(135deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
}
트랜지션
트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.
/* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
transition: all 2s;
div 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 않는다.
transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다.
만약 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용하도록 한다.
transition-property 트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다. 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분 all
transition-duration 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 0s
transition-timing-function 트랜지션 효과를 위한 수치 함수를 지정한다. ease
transition-delay 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 0s
transition 모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)
모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다.
트랜지션의 대상이 될 수 있는 CSS 프로퍼티:
// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index
요소의 프로퍼티 값이 변화하면 브라우저는 브라우저에게 스트레스를 주어 성능 저하의 요인이 된다.
따라서 다음과 같이 layout에 영향을 주는 트랜지션 효과는 회피하도록 노력해야 한다.
width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space
transition-duration
프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.
transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다.
transition-property: width, opacity;
transition-duration: 2s, 4s;
/* shorthand syntax */
transition: width 2s, opacity 4s;
transition-timing-function
트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.
ease 기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear 시작부터 종료까지 등속 운동을 한다.
ease-in 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.
shorthand
transition: property duration function delay
기본값: all 0 ease 0
* transition-duration은 반드시 지정해야 한다.
애니메이션
애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.
* transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다.
:hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.
즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
JS 애니메이션과의 비교
일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다.
jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.
비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.
세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.
여러 사항들을 고려하여 자바스크립트를 사용하여야 할지 CSS를 사용하여야 할지 결정하여야 한다.
animation-name @keyframes 애니메이션 이름을 지정한다
animation-duration 한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 0s
animation-timing-function 애니메이션 효과를 위한 타이밍 함수를 지정한다. ease
animation-delay 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다 0s
animation-iteration-count 애니메이션 재생 횟수를 지정한다. 1
animation-direction 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다. normal
animation-fill-mode 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state 애니메이션 재생 상태(재생 또는 중지)를 지정한다. running
animation 모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax)
@keyframes rule
CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다.
이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.
div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* @keyframes rule */
@keyframes move {
/* keyframe */
from {
left: 0;
}
/* keyframe */
to {
left: 300px;
}
}
@keyframes rule은 시간의 흐름에 따라 애니메이션을 정의한다.
여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.
from, to 키워드 대신 %를 사용할 수 있다. 또한 시작과 끝 키프레임 사이에 % 단위로 키프레임을 삽입할 수 있다.
@keyframes move {
0% { left: 0; }
50% { left: 100px; }
100% { left: 300px; }
}
@keyframes 이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다.
하나 이상의 애니메이션 이름을 지정할 수 있다.
div {
position: absolute;
width: 100px;
height: 100px;
animation-name: move, fadeOut, changeColor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes move {
from { left: 0; }
to { left: 300px; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes changeColor {
from { background-color: red; }
to { background-color: blue; }
}
animation-direction
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
normal 기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverse to에서 from 방향으로 진행한다.
alternate 홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse 홀수번째는 reverse로, 짝수번째는 normal로 진행한다.
animation-fill-mode
애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.
none 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
animation-play-state
애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다.
div {
width: 100px;
height: 100px;
background: red;
position: relative;
/*name duration timing-function delay iteration-count direction fill-mode play-state*/
animation: move 5s infinite;
}
div:hover {
background: blue;
animation-play-state: paused;
}
div:active {
background: yellow;
animation-play-state: running;
}
shorthand syntax
모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.
animation: name duration timing-function delay iteration-count direction fill-mode play-state
기본값: none 0 ease 0 1 normal none running
animation-duration은 반드시 지정해야 한다.
지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.
트랜스폼
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.
단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.
트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.
2D 트랜스폼
translate(x,y) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. px, %, em 등
translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em 등
translateY(n) 요소의 위치를 Y축으로 y만큼 이동시킨다. px, %, em 등
scale(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다. 0과 양수
scaleX(n) 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. 0과 양수
scaleY(n) 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. 0과 양수
skew(x-angle,y-angle) 요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다. +/- 각도(deg)
skewX(x-angle) 요소를 X축으로 x 각도만큼 기울인다. +/- 각도(deg)
skewY(y-angle) 요소를 Y축으로 y 각도만큼 기울인다. +/- 각도(deg)
rotate(angle) 요소를 angle만큼 회전시킨다. +/- 각도(deg)
3D 트랜스폼
translate3d(x,y,z) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 Z축으로 z만큼 이동시킨다. px, %, em 등
translateZ(n) 요소의 위치를 Z축으로 z만큼 이동시킨다. px, %, em 등
scale3d(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다. 0과 양수
scaleZ(n) 요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다. 0과 양수
rotate3d(x,y,z) 요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다. +/- 각도(deg)
rotateZ(z) 요소를 Z축으로 z각도 회전시킨다. +/- 각도(deg)
변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.
transform: func1 func2 func3 ...;
transform-origin
요소의 기본 기준점을 설정할 때 사용된다.
기본기준점은 요소의 정중앙이다(50%,50%).
이동은 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다.
설정값으로 %, px, top left, bottom right을 사용할 수 있다.
0, 0은 top left, 100% 100%는 bottom right과 같은 값이다.
.scale1:hover {
transition: transform 1s linear;
transform-origin: 0 0;
transform: scale(.5);
}
웹폰트
웹폰트는 사용자가 웹페이지를 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다.
1. CDN(Content Delivery Network) 링크 방식
가장 간단한 방법은 CDN 링크를 사용하는 것이다.
Google Font 에서 사용하고자 하는 웹폰트를 선택하고, 아래 구문을 CSS 파일에 추가한다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
* { font-family: 'Nanum Gothic', sans-serif; }
*구글폰트: fonts.google.com/
2. 서버 폰트 로딩 방식
CDN 링크를 사용하는 방법은 간편하지만 로딩 속도가 느리고, CDN 링크를 제공하지 않는 폰트는 사용할 방법이 없다.
이러한 단점을 보완한 방법이 서버 폰트 로딩 방식이다.
@font-face 규칙으로 폰트를 등록하고 font-family 프로퍼티로 폰트를 선택하여 사용할 수 있다.
브라우저에 따라 지원하는 폰트 파일 형식이 다르다는 문제가 있다.
아래 코드는 일반적으로 사용되는 검증된 웹폰트 사용 방법이다.
브라우저에 따라 필요한 폰트만을 다운로드할 수 있다.
@font-face {
font-family: myFontName;
src: url("myFont.eot"); /* IE 9 호환성 보기 모드 대응 */
src:local("☺"), /* local font 사용 방지. 생략 가능 */
url("myFont.eot?#iefix") format('embedded-opentype'), /* IE 6~8 */
url("myFont.woff") format('woff'); /* 표준 브라우저 */
}
* { font-family: "Nanum Gothic", sans-serif; }
영문과 한글을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글 폰트를 지정하여야 한다.
한글 폰트부터 지정하면 영문에도 한글 폰트가 지정된다.
font-family: 'Lora', 'KoPub Batang', 'Times New Roman', serif;
레이아웃
layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.
공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.
CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다.
Navigation Bar는 기본적으로 링크들의 리스트이다. 따라서 ul, li tag를 이용하여 작성하는 것이 일반적이다.
콘텐츠의 영역을 Section, 콘텐츠에 대한 Navigation item이나 부가 정보 영역을 Aside라 한다.
Section 영역은 다시 article 영역으로 구분할 수 있다.
이 두개의 영역은 float 프로퍼티를 사용하여 수평 정렬하는 것이 일반적이다.
header 요소 뒤에 aside, section, article을 포함하는 content-wrap 요소를 정의한다.
2 column layout의 일반적인 골격은 다음과 같다.
<body>
<div id="wrap">
<header>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
</header>
<div id="content-wrap">
<aside>
<ul>
<li>...</li>
<li>...</li>
</ul>
</aside>
<section>
<article>...</article>
<article>...</article>
</section>
</div>
<footer></footer>
</div>
</body>
최소한의 Reset CSS를 추가한 링크들의 리스트이다.
주의할 점은 직관적인 box model을 위해 box-sizing: border-box;을 사용했다
/* Simple Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #58666e;
background-color: #f0f3f4;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
aside을 좌측정렬, section을 우측 정렬한다. 이때 float 프로퍼티 요소를 감싸는 content-wrap 요소에 clearfix을 부여하여 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결해야 한다.
/* clearfix */
#content-wrap:after {
content: "";
display: block;
clear: both;
}
aside {
float: left;
width: 20%;
}
section {
float: right;
width: 80%;
}
navigation bar가 화면에 없으면 조작이 불편할 수 있으므로 navigation bar를 화면 상단에 고정시키도록 한다.
fixed 프로퍼티를 사용하여 header 요소를 상단에 고정시킨다. contents 영역 상단이 header 영역과 겹치므로 contents 영역을 header의 height 만큼 아래로 끌어 내린다.
footer는 absolute 프로퍼티를 설정한다. absolute를 사용하면
다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다.
(이런 특성을 부유 또는 부유 객체라 한다)
HTML5의 시맨틱 요소
<header>
일반적으로 로고, 제목 및 탐색을 포함하는 페이지 영역을 정의합니다.
<article>, <section>, <aside>, 그리고 <nav>을 가질 수 있습니다
<header>이름에도 불구하고 헤더가 페이지 또는 섹션의 시작 부분에 반드시 배치되는 것은 아닙니다.
<nav>
사이트에 자주 나타나는 탐색 링크가 포함 된 섹션을 정의합니다.
기본 및 보조 메뉴를 가질 수 있지만 <nav>다른 <nav>요소 안에 요소를 중첩 할 수는 없습니다 .
<article>
자체 포함 된 콘텐츠를 정의합니다. 메인 콘텐츠 만 참조하지 않으며 댓글 및 위젯에 사용할 수 있습니다.
<section>
의미 론적 의미의 관련 그룹을 나타내는 문서의 섹션을 정의합니다. 섹션 요소를 사용하여 상위 요소에 대한 추가 컨텍스트를 제공하는 것이 좋습니다.
<aside>
설명 상자 또는 광고와 같이 기본 요소와 관련되어 있지만 기본 흐름에 속하지 않는 섹션(부가 정보)을 정의합니다.
<footer>
일반적으로 저작권 또는 법적 고지와 일부 링크를 포함하는 페이지 바닥 글을 정의합니다.
컨텐츠의 출판 날짜, 라이센스 정보를 포함 할 수 있습니다
<footer>이름에도 불구하고 바닥 글이 반드시 페이지 또는 섹션의 끝에 배치되는 것은 아닙니다.
비 HTML5 브라우저(주로 ie)에서 HTML5 요소 사용
1. 이전 브라우저에서는 특정 CSS 스타일이 필요합니다.
알 수없는 요소는 display: inline기본적으로 스타일이 지정 되므로 다음 과 같이 설정하는 것이 좋습니다.
article, aside, footer, header, nav, section {
display: block;
}
2. 이전 IE 버전은 DOM에서 인스턴스를 생성하지 않는 한 지원되지 않는 요소의 스타일을 허용하지 않습니다.
아래와 같이 특정 스크립트를 추가하여 이를 허용 할 수 있습니다.
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("time");
</script>
<![endif]-->
반응형 웹디자인
사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없다. layout은 방문자의 화면 해상도를 고려하여야 한다.
데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다.
이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다. 즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다.
meta tag
브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용된다.
viewport meta tag
viewport란 웹페이지의 가시영역을 의미한다. viewport는 디바이스에 따라 차이가 있다.
viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다.
일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.
가로폭을 디바이스의 가로폭에 맞추고 초기 화면 배율을 100%로 설정하는 것을 의미한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width viewport 너비(px). 기본값: 980px
height viewport 높이(px)
initial-scale viewport초기 배율
user-scale 확대 축소 가능 여부
maximum-scale viewport 최대 배율
minimum-scale viewport 최소 배율
@media
반응형 웹디자인에 사용되는 핵심 기술은 @media이다.
이것은 서로 다른 미디어 타입(print, screen…)에 따라 각각의 styles을 지정하는 것을 가능하게 한다.
@media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다.
디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.
Media Query의 표현식에서 사용할 수 있는 프로퍼티
width viewport 너비(px)
height viewport 높이(px)
device-width 디바이스의 물리적 너비(px)
device-height 디바이스의 물리적 높이(px)
orientation 디바이스 방향 (가로 방향: landscape, 세로방향: portrait)
device-aspect-ratio 디바이스의 물리적 width/height 비율
color 디바이스에서 표현 가능한 최대 색상 비트수
monochrome 흑백 디바이스의 픽셀 당 비트수
resolution 디바이스 해상도
* orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있다.
일반적으로 반응형 웹 디자인은 viewport 너비(width 프로퍼티)를 기준으로 한다.
viewport의 width 프로퍼티를 이용하여 viewport 너비에 따라 반응하는 범위(breakpoint)를 지정할 수 있다.
/* All Device */
/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* All Device */
/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {
}
CSS 적용 우선 순위 (Cascading Order)에 따라 나중에 선언된 스타일이 우선 적용된다.
따라서 Media Query는 기술 순서에 의미가 있다. 만일 스마트폰용 스타일을 태블릿용 스타일보다 먼저 기술하면 최종적으로 태블릿용 스타일이 적용된다. 따라서 Non Mobile First 방식의 경우, max-width의 값이 큰 것부터 기술하여 한다.
화면이 세로일 때, 가로일 때를 구분할때 주의할 점은 데스크탑은 언제나 가로 화면이기 때문에 device-width로 스마트폰의 해상도를 지정하지 않으면 데스크탑에서도 가로화면 시 style이 적용되는 문제가 발생하므로 다음과 같이 orientation: landscape와 max-device-width를 함께 추가해주어야 한다.
/* Landscape */
@media screen
/* 디바이스가 모바일일때(device-width 0 ~ 768px) */
and (max-device-width: 760px)
/* 가로 */
and (orientation: landscape) {
* { color: blue; }
}
* 참고:
mediaqueries 속성 지원여부: quirksmode.org/css/mediaqueries/mobile.html
w3c mediaqueries: www.w3.org/TR/css3-mediaqueries
메타태그: developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
플렉스박스 레이아웃
Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.
div 요소는 block 요소이므로 수직 정렬된다. 이를 수평 정렬하려면 자식요소(flex-item)를 inline-block으로 지정하거나 float 프로퍼티를 지정한다.
이때 각 자식 요소을 부모 요소 내에서 정렬하기 위해서는 각 자식 요소의 너비를 %로 지정하는 등 번거로운 처리가 필요하다. 자식 요소의 사이즈가 불명확하거나 동적으로 변화할 때에는 더욱 처리가 복잡해 진다. grid 시스템을 사용할 수 도 있으나 이 또한 새로운 학습이 필요하고 라이브러리를 로드해야하는 번거로움이 존재한다.
Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.
flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.
flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다.
.flex-container {
display: flex;
}
부모 요소가 inline 요소인 경우 inline-flex을 지정한다.
.flex-container {
display: inline-flex;
}
flex-direction
flex 컨테이너의 주축(main axis) 방향을 설정
flex-direction: row;
flex-direction: column;
flex-wrap
flex 컨테이너의 복수 flex item을 1행으로 또는 복수행으로 배치한다. flex-wrap 속성은 flex 컨테이너의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.
flex-wrap: nowrap; flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값이다
flex-wrap: wrap; flex item들의 width의 합계가 flex 컨테이너의 width보다 큰 경우, flex item을 다음행에 배치한다.
flex-flow
flex-direction 속성과 flex-wrap 속성을 설정하기 위한 shorthand이다. 기본값은 row nowrap이다.
.flex-container {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
flex container의 main axis를 기준으로 flex item을 수평 정렬한다.
.flex-container {
justify-content: flex-start;
}
main start(좌측)를 기준
main end(우측)를 기준
.flex-container {
justify-content: center;
}
flex container의 중앙에 정렬한다.
.flex-container {
justify-content: space-around;
}
모든 flex item은 균등한 간격으로 정렬된다.
align-items
flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. align-items 속성은 모든 flex item에 적용된다.
stretch; flex container의 높이(cross start에서 cross end까지의 높이)에 꽉찬 높이(기본값)
flex-end; 모든 flex item은 flex container의 cross end 기준으로 정렬된다.
center; 모든 flex item은 flex container의 cross axis의 중앙에 정렬된다.
baseline; 모든 flex item은 flex container의 baseline을 기준으로 정렬된다.
align-content
flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.
Flexbox item 속성
float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다.
order
flex item의 배치 순서를 지정한다.
.flex-item {
order: 정수값;
}
flex-grow
flex item의 너비에 대한 확대 인자(flex grow factor)를 지정한다.
flex-shrink
flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다.
flex-basis
flex item의 너비 기본값을 px, % 등의 단위로 지정한다.
align-self
align-items 속성보다 우선하여 개별 flex item을 정렬한다.
flex
flex-grow, flex-shrink, flex-basis 의 shorthand(기본값: 0 1 auto)
.flex-item {
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}
Flexbox의 장점
- 1줄의 코드 추가로 수평 정렬이 가능하다.
- 요소의 상하좌우 정렬, 순서 변경이 간단하다.
- 요소가 간격 조절이 간단하다.
- 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.
- 비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE계열은 IE8,9의 경우 지원하지 않고 IE10,11의 경우도 일부 지원하므로 주의가 필요하다.
- IE계열에서 Flexbox를 사용하기 위해서는 flexibility.js 를 사용하면 편리하다 jonneal.dev/flexibility
* 브라우저별 지원여부
* 참조
scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos
수평 정렬
Horizontal Align
inline/inline-block 요소
부모 요소에 text-align: center;를 지정
block 요소
해당 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다.
복수의 block 요소
복수의 block 요소는 기본적으로 수직 정렬된다. 이것을 수평정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정한다.
정렬 대상 요소에 width를 지정하지 않으면 콘텐츠에 너비에 맞추어 너비가 결정되므로 명시적으로 너비를 지정한다.
flexbox를 사용
정렬 대상의 부모 요소에 아래의 룰셋을 선언한다.
.flex-center {
display: flex;
justify-content: center;
}
수직 정렬
Vertical Align
inline/inline-block 요소
정렬 대상의 부모 요소에 padding-top과 padding-bottom 프로퍼티값을 동일하게 적용한다.
padding을 사용할 수 없는 경우, 요소의 height와 line-height 프로퍼티값을 동일하게 적용한다. 단 이 방법은 행간이 지나치게 넓어지거나 Click Dead Zone 이슈가 발생하는 등 여러 줄의 텍스트에는 사용할 수 없다.
Multiple lines
여러 줄의 텍스트의 경우, padding-top과 padding-bottom 프로퍼티값을 동일하게 적용하는 방법도 가능하다.
또 다른 방법으로 vertical-align 프로퍼티를 사용한 방법도 가능하다. 이 방법은 table 속성을 사용하여야 한다.
.parent {
display: table;
height: 100px;
}
.child {
display: table-cell;
vertical-align: middle;
}
block 요소
1. 요소의 높이가 고정되어 있는 경우
부모 요소를 기준으로 절대 위치를 지정한다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
/*요소의 높이(100px)의 반 만큼 위로 이동*/
margin-top: -50px;
}
2. 요소의 높이가 불확정 상태의 경우
부모 요소를 기준으로 절대 위치를 지정한다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
/*요소의 높이의 반(50%) 만큼 위로 이동*/
transform: translateY(-50%);
}
Flexbox
부모 요소에 Flexbox layout을 지정한다.
.parent {
display: flex;
/*위에서 아래로 수직 배치*/
flex-direction: column;
/*중앙정렬*/
justify-content: center;
}
수평/수직 정렬
Horizontal & Vertical Align
요소의 너비와 높이가 고정되어 있는 경우, 요소의 너비와 높이가 불확정 상태의 경우 모두 사용 가능한 방법이다
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
transform: translate(-50%, -50%);
}
Flexbox를 사용한 방법은 아래와 같다.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
* 참조
css-tricks.com/centering-css-complete-guide
img 여분공간 제거
image 요소는 inline 요소이다. 다시 말해 image 요소는 텍스트로 취급된다.
컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.
<div class="container">
<img src="...">
</div>
첫번째, image 요소를 블록 요소로 전환하면 더 이상 텍스트로 취급되지 않는다.
img {
display: block;
}
하지만 이 방법은 image 요소를 블록 요소로 전환할 수 없는 레이아웃에서는 사용할 수 없다.
두번째, inline 요소에 사용할 수 있는 vertical-align 프로퍼티를 사용하는 방법이 있다.
vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다.
img {
vertical-align: bottom;
}
스터디 사이트 (PoiemaWeb)
- CSS 기본 문법
- 셀렉터
- CSS 프로퍼티 값의 단위
- 박스 모델
- display, visibility, opacity 프로퍼티
- 백그라운드
- 폰트와 텍스트
- 요소의 위치 정의
- 요소 정렬
- 스타일의 상속과 적용 우선 순위
- 벤더 프리픽스
- 그림자
- 그레이디언트
- 트랜지션
- 애니메이션
- 트랜스폼
- 웹디자인 타이포그래피(Typography)
- 레이아웃
- 반응형 레이아웃
- 플렉스 박스 레이아웃
- 수평/수직 중앙 정렬
- image 요소 아래에 패딩된 여분의 공간 제거하기