요소의 위치를 정의한다.
!!tip!!
html : 100% 길이배정
body : 100% 길이배정
h: 50% 길이배정
출력된다.
POSITION 프로퍼티의 기본값
POSITION 프로퍼티를 지정하지 않았을 때와 같다. (0,0)
부모 요소의 위치를 기준으로 배치된다.
기본적으로 설정할 확률이 없지만, 이미 설정된 position을 무력화하기 위해 사용된다.
STATIC을 기준으로 좌표 프로퍼티를 사용해 위치를 이동시킨다.
STATIC을 선언한 요소와 RELATIVE를 선언한 요소의 차이점 : 좌표 프로퍼티의 동작여부, 그 외에는 동일하게 동작한다. (X,Y)
WIDTH를 따로 설정하지 않으면 부모요소와 동일한 값이 적용된다.
RELATIVE, ABSOLUTE, FIXED 프로퍼티가 선언되어 있는 부모 또는 조상요소를 기준으로 위치가 결정된다.
따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소에 relative를 정의하여야 한다.
absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
RELATIVE & ABSOLUTE 차이점
- RELATIVE 프로퍼티 :
- 부모를 기준으로 위치한다
- ABSOLUTE 프로퍼티 :
- STATIC이외 지정되었을 때 부모를 기준으로 위치. IF, 부모 조상이 모두 STATIC인 경우, DOCUMENT 바디를 기준으로 위치
ABOSULTE는 부모요소의 영역을 벗어나 자유롭게 어디든 위치할 수 있다. (static인 경우)
absolute를 이용해서 움직이려 해야한다. relative는 부모에게만 적용하라!
BLOCK 요소의 WIDTH는 INLINE 요소와 같이 컨텐츠에 맞게 변화되므로 WIDTH를 지정해야 한다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
부모요소와 상관없이 브라우저 VIEWPORT를 기준으로 위치를 이동시킨다.
스티커 붙인것 과 같다!!
큰 숫자값을 지정할 수록 화면 전면에 출력된다.
자식 요소가 부모요소의 영역을 벗어났을 때 처리방법을 정의한다.
- VISIBLE
- 영역을 벗어난 부분을 표시(기본값)
- HIDDEN
- 영역을 벗어난 부분을 잘라내 보이지 않게한다.
- SCROLL
- 영역을 벗어난 부분을 잘라내 보이지 않게 한다.
- AUTO
- 영역을 벗어난 부분이 있을 때만 스크롤 표시한다.
특정방향으로만 스크롤을 표시하고자 할때는 OVERFLOW-X 또는 OVERFLOW-Y 프로퍼티를 사용한다.
LAYOUT을 구성하기 위해 사용되는 핵심 기술
큰틀을 먼저 생각해서 만들어라!
- 목적 :
- 1개 이상의 요소를 원하는 위치에 정렬 시키는 것
본래 이미지와 텍스트가 있을 때 , 이미지 주위를 텍스트로 감싸기 위해 만들어진 것
- none
- 요소를 떠있게 하지 않는다.(기본값)
- right
- 요소를 오른쪽으로 이동시킨다.
- left
- 요소를 왼쪽으로 이동시킨다.
- 중앙에 정렬
- margin: auto;
float none (기본값) : 수직정렬
float: left; : 왼쪽부터 정렬
float: right; : 오른쪽부터 정렬
오른쪽 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력순서가 역순이 된다.
/*float: left;*/
float: right;
두 번쨰 요소에 float 프로퍼티를 선언하지 않아서 발생하는 박스 모델상의 문제 해결
float 프로퍼티를 선언하지 않은 요소에 overflow: hidden 프로퍼티를 선언하는 것
overflow: hidden은 자식 요소가 부모요소의 영역보다 클 경우 넘치는 부분을 안보이게 해주는 역할을 한다.
float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제
float 요소는 일반적인 흐름상에 존재하지 않기 때문에 float 요소의 높이를 알 수 없다.
해결법 :
-
float 프로퍼티를 가진 요소의 부모요소(wrap)에 overflow: hidden 프로퍼티를 선언한다.
-
부모요소에 float 프로퍼티를 부여하는 방법
- 부모요소의 너비는 float 된 두개의 자식 요소의 컨텐츠를 표현할 수 있는 만큼만으로 작게 줄어들게 된다.(권장하지 않는다.)
-
float 프로퍼티 대신 display: inline-block; 설정
- inline-block 프로퍼티 요소를 연속 사용하는 경우, 좌우에 정의하지 않은 space가 자동 지정되는 것
-
부모 요소에 clearfix 클래스만 추가하거나, 해당 요소를 선택해 clear 문법을 선언한다.(추천)
.clearfix:after {
content: "";
display: block;
clear: both;
}
selector:after {
content: "";
display: block;
clear: both;
}
- float 대신 display: inline-block;을 선언
- 주의 : 인라인블록을 연속사용하면, 좌우에 정의하지 않은 space(4px)가 자동지정된다.
[space(4px)를 회피하는 것 참조] (https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
overflow: hidden; 과 많이 사용되는 방법 : ::after 가상 요소 선택자를 이용하는 것
[layout example 참조] (http://poiemaweb.com/css3-float)
상위 요소(부모,조상)의 프로퍼티를 하위 요소(자식,후손)가 물려 받는 것
상속 기능이 없다면 각 요소의 rule set에 프로퍼티를 매번 각각 지정해야 한다.
프로퍼티 중에는 상속이 되지 않는 것도 있다.
- 항상 부모에서 자식 방향으로 상속
- layout 계열은 거의 상속되지 않는다.
- 요소에 따라 프로퍼티를 안받는 요소가 존재한다. ex) 버튼
- 명시적으로 상속받게 할 수 있다. : inherit 키워드
CSS 적용 우선순위
이유 : css 선언의 충돌을 피하기 위해
규칙
- 중요도
- css가 어디에 선언 되어있는지
- 명시도
- 대상을 명확하게 특정했는지
- 선언순서
- 나중에 선언된 스타일이 우선 적용된다.
css가 어디에 선언되었는지에 따라 우선순위가 달라진다.
- head 요소내의 style요소
- head 요소내의 style 요소 내의 @import 문
- 로 연결된 css파일
- 로 연결된 css파일 내의 @import 문
- 브라우저 default stylesheet
대상을 명확하게 특정할 수록 명시도가 높아지고 우선순위가 높아진다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성
선언된 순서에 따라 우선순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.
요소를 사용하려 할 때 요소 앞머리에 브라우저마다 정해진 접두사를 붙이는 것
실험적으로 제공하는 기능을 사용하기 위해서 사용한다.
ex)
* {
-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 */
}
//-webkit-, -moz-, -ms- : 벤더 프리픽스
텍스트에 그림자 효과를 부여하는 프로퍼티
선택자 { 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 Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }
- inset
- 그림자가 요소안쪽에 위치(inset)
- horizontal-offset
- 그림자를 텍스트의 오른쪽으로 지정값만큼 이동(px)
- vertical-offset
- 그림자를 텍스트의 아래로 지정값만큼 이동(px)
- blur-radius
- 그림자의 흐림정도를 지정(px)
- spread
- 그림자를 더크게 확장(px)
- shadow-color
- 그림자의 색상을 지정(color)
2가지 이상의 색상을 혼합해 부드러운 색감의 배경을 생성
- 선형 그레디언트
- 방사형 그레디언트
css 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 에니메이션 속도를 조절
div{ /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
transition: all 2s;}
div:hover 에 설정하면 hover off에는 발생하지 않는다.
- transition-property - 트랜지션의 대상이 되는 css 프로퍼티를 지정(all)
- transition-duration - 트랜지션이 일어나는 지속시간을 초단위로 지정(0s)
- transition-timing-function - 트렌지션 효과를 위한 수치 함수를 지정(ease)
- transition-delay - 프로퍼티가 변화한 시점과 트렌지션이 실제로 시작하는 사이에 대기하는 시간(0s)
- transition - 모든 트렌지션 프로퍼티를 한번에 지정
가상클래스 선택자 또는 javascript onclick 이벤트를 사용해야 발동한다.
- transition-property 프로퍼티는 트렌지션의 대상이 되는 css 프로퍼티명을 지정
- 여러개를 지정할 땐 , 로 연결한다.
- transition-duration은 반드시 지정
- display property는 변경할 수 없다.
- layout에 영향을 주는 트랜지션 효과는 회피하기 위한 노력이 필요하다.
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
트렌지션에 일어나는 지속시간을 초단위로 지정
프로퍼티값을 지정하지 않으면 기본값 0초가 적용되어 어떠한 트랜지션 효과도 볼수 없다.
트렌지션 효과의 변화흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정
기본값 : ease
변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초단위로 지정
모든 트렌지션 프로퍼티를 한번에 지정할 수 있는 shorthand 이다.
지정방법
transition: property duration function delay
transition은 자동 발생하지 않는다.
즉, transition-duration은 반드시 지정해야 한다.
기본값(transition-duration)
all 0 ease 0
html 요소에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 변화시킨다.
css 스타일과 애니메이션의 시퀀스를 나타내는 복수의 키프레임들로 이루어진다.(@keyframs)
- transition 프로퍼티
- 단순히 요소의 프로퍼티 변화에 주안
- animation 프로퍼티
- 하나의 줄거리를 구성해 줄거리 내에서 세부 움직임을 시간 흐름단위로 제어할 수 있고, 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
장단점 특징
- css를 사용할 때:
- 비교적 작은 효과나 css만으로도 충분한 효과를 볼 수 있는 것 ex) 요소의 width변경 애니메이션
- javascript를 사용할 때:
- 세밀한 제어가 필요할 때 ex) 바운스, 중지, 일시중지, 되감기, 감속, 고급효과
브라우저에서 애니매이션 효과가 부드럽게 실행되는 것이 제일 중요하다.
애니메이션의 흐름중의 여러시점에서 css 프로퍼티값을 지정할 수 있다. 구간과 같다.
@keyframes rule 은 시간의 흐름에 따라 애니메이션을 정의한다.
from, to 키워드를 이용해서 정의해도 되고, %를 사용할 수 있다.
@keyframes move {
/* 애니메이션 시작 시점 */
from { left: 0; }
/* 애니메이션 종료 시점 */
to { left: 300px; }
}
@keyframes move {
0% { left: 0; }
50% { left: 100px; }
100% { left: 300px; }
}
애니메이션을 대표하는 임의의 이름을 부여한다.
animation-name: move, fadeOut, changeColor;
한 싸이클의 애니메이션의 소요되는 시간을 초 단위로 지정
animation-duration: 5s;
애니메이션 효과를 위한 수치함수를 지정
수치함수 설명은 트렌지션 transition-timing-function 을 참조
요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초단위로 지정
animation-delay: 2s;
애니메이션 주기의 재생횟수를 지정
기본값은 1, 무한반복할 수 있다.
animation-iteration-count: 3;
애니메이션이 종료된후 반복될 때 진행하는 방향을 지정
- normal
- 기본값으로 from에서 to 방향으로 진행
- reverse
- to에서 from 방향으로 진행
- alternate
- 홀수 번째: normal, 짝수번째 : reverse로 진행
- alternate-reverse
- 홀수번째 : reverse, 짝수번째 : normal 로 진행
애니메이션 미실행 시 (대기 또는 종료) 요소의 스타일을 지정
애니메이션 재생 상태를 지정 기본값은 running이다.
모든 애니메이션 프로퍼티를 한번에 지정한다.
값을 지정하지 않은 프로퍼티엔 기본값이 지정된다.
animation: name duration timing-function delay iteration-count direction fill-mode play-state
animation-duration은 반드시 지정해야한다. name도 마찬가지이다.
기본값
none 0 ease 0 1 normal none running
요소에 이동, 회전, 확대축소, 비틀기 효과를 부여하기 위한 함수를 제공한다.
단, 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.
프로퍼티값으로 변환함수를 사용한다.
변환 함수를 프로퍼티 값으로 쉼표없이 나열한다.
나열 순서에 따라 차례로 효과가 적용된다.
transform: func1 func2 func3 ...;
요소의 기본기준점을 설정할 때 사용한다.
어디를 중심으로 변형할 것인지가 관건.
기본기준점은 정중앙이다.(50%,50%).
이동은 기준점을 변경해 일정거리만큼 이동하기에 의미가 없다.
- 설정값
- %, px, top left, bottom right
0,0 : top left, 100% 100% : bottom right 와 같은 값이다.
프로퍼티값으로 변환함수를 사용한다.