- 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가 있으며, 브라우저에 대한 설정은 항상 동반

'CSS' 카테고리의 다른 글

FlexBox  (0) 2020.12.30
미디어쿼리  (0) 2020.12.25
주요속성2  (0) 2020.12.23
선택자  (0) 2020.12.23
CSS Reset Vs. Normalize  (0) 2020.12.22

+ Recent posts