- Margin & Padding
Margin: box model 에서 각 박스(동급노드) 사이의 간격(여백)
Padding: box model에서 각 박스(노드)내 콘텐츠와 보더 사이의 여백
1 value: all sides
2 values: top-bottom right-left
3 values: top right-left bottom
4 values top right bottom left
- div p span
div, p: block-level
span: inline-level
- display
inline: 1개의 라인에 나열, 컨텐츠 사이즈만큼 (span 효과)
inline-block: 지정한만큼불륵, 줄바꿈없음(마치 float처럼보임)
block: 블럭으로 라인전체 차지(or부모의 폭, 자식의길이)
none: 안보임
- Position
static: 디폴트
relative: 원래 아이템이 있어야 할 자리에서 지정한 만큼 이동
absolute: 부모 요소 기준으로 지정한만큼 이동
fixed: 바디로부터 지정한 만큼 이동, 계속 그자리, 스크롤 다운해도 그위치 그대로 있음
sticky: 원래 있어야할 자리에 있으나 스크롤하면 끝에 존재. top right bottom left 속성필요하며, 스크롤 위치가
임계점에 이르면, fixed같이 박스를 고정시킴
fixed Vs. sticky: fixed는 스크롤 다움하다 상단으로 올리고 싶거나, 고정광고 놓을때 사용할 수 있으며, sticky는 상단 메뉴바처럼 특정위치에 있다가, 스크롤 하면 상단에 고정 놓을때 사용할 수 있다
기본적으로 자식에 포지션이 있으면 부모에도 포지션이 있어야 설정이 맞음
relative - absolute (부모: 자신기준, 자식:부모기준)
absolute - absolute (부모:바디기준, 자식:부모기준)
relative - relative (부모:자기기준, 자식: 부모안에서 자기기준)
absolute - relative (부모:바디기준, 자식:부모안에서 자기기준)
x-absolute (body기준 위치)
자식이 absolute로서 부모요소를 기준으로 위치를 정하고 싶으면 부모는 relative로 설정되어야 함
부모의 설정을 못찾으면 <body>를 기준으로 함
<div class="parent">
<div class="child">Test</div>
</div>
<style>
.parent{position:relative; border:1px solid red; height:50px}
.child{position:absolute; left:10px;} // 부모기준으로 10px만큼 레프트로부터 이동해서 위치
</style>
/* 부모의 height가 설정되지 않으면 자식의 요소들도 볼수 없다. 블록처리됨 */
/* 자식이 absolute가 아니라 relative로 설정되면 부모안에서 내자신을 기준으로 움직임 */
- float
float is a CSS positioning preperty.
요소를 한쪽방향으로 위치시킨다
float: left|right;
clear: left|right|both
float로 생겨난 버그 해결은 ::after사용, overflow속성 사용등
float:left; clear:left; 같이 쓰면 모든걸 왼쪽 정렬가능
float 후에 clear 해줘야 라인바꿈이 됨
- :before, :after
가상요소(pseudo-elements)로써 content와 함께 사용되며, 주어진 엘리먼트의 앞뒤 속성값 설정
- stacking order: z-index 가 높으면 위로, 낮으면 아래로 간다.
- stacking context: 같은 부모밑에 쌓임순서에 따라 앞뒤로 한꺼번에 움직일 수 있는 요소
- z-index
겹치는 요소의 쌓이는 순서를 제어. position:static이 아닌 값에만 영향을 줌
- opacity
opacity를 주면 stacking context가 형성된다. opacity값이 1보다 작으면 쌓임 맥락이 만들어짐
순서: html요소 -> position값 있고 z-index음수(부모보다 아래로 갈수 있음) -> position값이 없음 -> posoition값 있고 z-index가 auto -> position값 있고 z-index 양수
- outline (border와 다름)
outline-width, outline-style, outline-color
outline: 10px solid red;
- overflow
visible: 컨텐츠가 박스를 뚫고 나감
hidden: 컨텐츠가 커지면 박스 이후로는 보이지 않음
scroll: scroll장착
auto: 컨텐츠크기에 따라 scroll이 나타남
- text-overflow // 모든 브라우저에서 사용되지는 않는다
clip: 엘리먼트의 테두리에 맞춰서 글자를 자름
ellipsis: 잘라지는 부분에 ... 을 넣어줌
- white-space
normal: 디폴트, 연속공백과 줄바꿈등을 통합해서 표현, 단어로 끊어서 줄바꿈됨
pre: 원문 그대로, 스페이스도 칸수만큼 출력
nowrap: 스페이스의 연속공백은 통합(normal), 줄바꿈 안되고 그대로 표현
inherit: 부모 요소의 값 상속
- word-wrap
break-word: 박스의 가로 영역을 넘친 단어 내에서 임의의 분리여부 결정, 단어로 줄바꿈 되기에 불필요한 공간 없애기 위해서 word-break 사용
- word-break (white-space와 같이 사용하지 말것)
normal: 단어 단위로 끊어서 줄바꿈
break-all: 특수 문자 제외 강제로 줄바꿈, 음절로
break-word: 특수문자 포함 강제로 줄바꿈
nowrap: 줄바꿈하지 않음
keep-all: 스페이스로 줄바꿈
- Pseudo-classes
a:link|hover|visited|focus
ol li:first-child|last-child
table tr:nth-child(2n) td{}
- Pseudo-elements
p::first-line|first-letter
h1::before, h1::after
- gradient (색이 점차 변하는것, 브라우저 버전에 따른 설정 필요)
: top to bottom
- background: red; background: linear-gradient(yellow);
- background: linear-gradient(red, yellow);
: left to right
- background: red; background: linear-gradient(left, red, yellow); // safari and ie
- background: red; background: linear-gradient(to right, red, yellow); // chrome
- background: linear-gradient(to right, red, yellow);
: diagonal
- bottom left // safari and ie
- to top right // chrome
이외 앵들, 여러색 넣기 등의 gradient가 있으며, 브라우저에 대한 설정은 항상 동반