코맛

position

요소의 위치 지정 기준을 나타낸다.

default는 static(기준없음)이며

relative 는 요소 자신을 기준으로 삼는다.

absolute는 위치 상 부모요소를 기준으로 삼는다.( 구조 상 X)

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

relative

다음은 relative를 설정한 예시이다.

relative를 2번 스스로에게 적용하여 자신의 기준으로 top 20px, left 20px를 이동한 것을 확인할 수 있다.

absolute

absolute는 relative와 같이 사용하는 요소이다.

위치 상 부모 요소를 기준으로 배치를 진행하는 데 다음 그림을 보자.

코드입력예시를 보면 1번 박스에 relative를 걸고 absolute를 2번박스에 걸었다.

이 경우 2번박스는 1번 박스를 부모로 삼는다.

이렇게 되면 2번 박스는 3번박스와의 상호작용이 이뤄지지 않는다.

오직 1번 박스와 상호작용을 이룬다.

그러므로 1번 박스를 기준으로 top 20px, left 20px 이동한다.

static

static은 기준이 없다는 걸 의미한다.

relative설정없이  absolute만 설정을 한다면 다음과 같이 화면이 출력된다.

absolute는 자신의 relative를 찾으려고 계속해서 상위부모를 탐색한다.

만일 따로 relative를 설정이 되어있지 않다면

뷰포트를 부모로 삼아 뷰포토의 기준에 맞게 이동한다.

fixed

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

fixed를 설정 시 스크롤를 내려도 그 위치에 고정시켜 놓는 성질을 갖게 만든다.

말이 다소 추상적인데... 직접 실행시켜보는 것이 도움이 될 것이다.

flex는 수평정렬을 할 때 사용한다.

아래를 보면

blue는 부모요소이며 이를 flex container라고 부른다.

부모요소 안에 있는 나머지 색상들은 flex item이라고 지칭한다.

flex-direction

주 축(Main-axis)을 설정한다. 즉, 수평정렬 또는 수직정렬을 할 것 인지 결정한다.

default는 row(좌->우)로 설정되어 있으며

row-reverse(우->좌)

column(위->아래)

column-reverse(아래->위)

로 설정이 가능하다.

flex-wrap

Flex items묶음(줄바꿈)여부를 설정한다.

default 는 nowrap(줄바꿈 없음) 이며 wrap으로 설정하여 여러 줄로 묶어 줄바꿈을 할 수 있다.

flex-wrap은 다음 사진이 가장 잘 설명해주는 것 같아 현재 패캠에서 듣고 있는 강의자료를 퍼왔다.

justifyy-content

주 축(Main-axis)의 정렬방법을 설정한다.

default는 flex-start이며 flex items를 시작점으로 정렬한다.

flex-end, center로 정렬방법을 설정할 수 있다.

align-content

교차 축(Cross-axis)의 여러 줄 정렬 방법을 말한다.

(한 줄인 경우는 작동을 안한다)

default는 stretch 이며 flex-start, flex-end, center 로 설정이 가능하다.

만약, 한 줄만 있는 경우는 align-items를 이용하여 정렬을 하면된다.

flex-basis

Item의 기본 너비 설정을 한다. 

default는 auto로 설정되어 있다.

flex-grow

Flex item의 증가 너비 비율을 설정한다.

default는 0로 설정되어있다.

flex-shrink

Flex item의 감소 너비 비율을 설정한다.

default는 1로 설정되어있다.

*주의사항!

auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다. 

Text-align

문자의 정렬방식 중 하나이다.

문자를 left, right, center, jusitfy 정렬시킬 수 있다.

다음 사진과 같은 기능이라고 생각하면 된다.

Text-decoration

문자의 장식(선)의 출력여부를 설정한다.

default 로는 none(장식없음) 이며 underline(밑줄), overline(윗줄),line-through(중앙선) 로 설정할 수 있다.

Text-indent

들여쓰기를 말한다.

default 로는 0(들여쓰기 없음)이다.

text-indent(50px)

반대로 내어쓰기도 가능한다. 이 경우에는 음수를 사용하여 나타내면 된다.

브라우저마다 적용되는 글꼴이 다르다.

그러므로 font-family를 이용하여 여러 글꼴들을 입력하여 상황에 맞게 적용시킬 수 있다.

요소의 투명도를 설정할 수 있다.

default: 1 를 가지며 0~1의 소수점숫자를 이용하여 설정하면 된다.

1에 가까울수록 불투명해지고 0에 가까울수록 투명해진다.

넘친 내용(content)를 제어하는 걸 도와줌.

visible: 넘친 내용을 그대로 보여줌

hidden: 넘친 내용을 잘라냄

auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

요소의 내용(content)으로 크기를 계산한다.

border-box : 요소의 내용 + padding + border로 크기를 계산.

width 400 = 352+40+8

content-box : 한 박스의 길이가 설정된 width + padding +border로 크기를 계산

 총 길이 448 =  400+40+8

요소의 외부 여백(공간)을 지정하는 단축 속성

default : 0 (외부 여백이 없음)

auto: 브라우저가 여백을 자동으로 계산한다.

margin은 여러 방향으로 동시에 크기를 지정하거나 필요한 방향으로만 크기를 지정할 수 있다.

문서의 특정 부분을 스타일할 수 있도록 도와준다.

ex)

ABC::before {

content : "앞!";

color: red;

}

선택자 ABC요소의 앞에 내용(content)을 삽입한다.

ABC::after {

content:"뒤!";

color: blue;

}

선택자  ABC요소의 앞 내용(content)를 삽입한다.