100%

• gives the element 100% height of its parent container.#innerDiv is going to have height: 50px
• <div style="height: 50px"> <div id="innerDiv" style="height: 100%"></div> </div>

auto

• means the element height will depend upon the height of its children.#innerDiv is going to have height: 10px
• <div style="height: 50px"> <div id="innerDiv" style="height: auto"> <div id="evenInner" style="height: 10px"></div> </div> </div>

inherit

• inherit the height value from it's parent.
  • absolute value inherit#innerDiv is going to have height: 50px;
  • <div style="height: 50px"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>
  • relative value inherit#innerDiv is going to have height : 50%; (= 25% of page height)
  • <div style="height: 50%"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>

transform

element의 모양,크기,위치,회전 변경시키는 CSS attribute.

translate( )

element를 현재 위치에서 x,y만큼 이동

See the Pen transform - translate by zakelstorm (@zakelstorm) on CodePen.

rotate( )

rotate() 메소드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킨다.

주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전시킨다.

See the Pen abmZNGP by zakelstorm (@zakelstorm) on CodePen.

sclae( )

scale() 메소드는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.

주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다.

• transform-origin

  • transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정한다.

See the Pen wvzWGEJ by zakelstorm (@zakelstorm) on CodePen.

skew( )

skew() 메소드는 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다.

See the Pen transform - skew by zakelstorm (@zakelstorm) on CodePen.

matrix( )

해당 메소드는 모든 transform 메소드를 한 줄에 설정할 수 있도록 해준다.

이 메소드는 2D 변형(transform)과 관련된 6개의 매개변수를 가진다.

matrix() 메소드의 매개변수 순서는 다음과 같다.

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Flex의 탄생 배경

기존 css로는 layout을 표현하기 어렵다는 단점을 보완하기 위해 만든 css attribute.

과거 layout을 표현하기 위해 사용한 attribute의 역사는 다음과 같다.

1. tabe -> layout을 위한 table과 실제 의미가 있는 table과 헷갈림.
2. position -> 좋은 방법. 하지만 element겹침 문제 발생
3. float -> 본래의도(어울림 효과)와 거리가 있다.

오직 layout 설정용으로 불의의 element 겹침을 방지하기위해 탄생한 것이 flex 되시겠다.

Flex

기본적으로 container와 item의 역할을 하는 tag가 존재해야한다.

<container>
  <item>...</item>
  <item>...</item>
</conatainer>

container(=flex container) 와 item(=flex item) 각각에는 다음과 같이 적용이 가능한 flex 관련 css attribute가 정해져있다.

 이중에 많이 쓰이는 요소만 뽑아 예시를 보이도록 하겠다.

flex-direction / justify-content / align-items

container속성으로 가장 빈번히 쓰이는 flex 관련 css attribute이다.

item의 정렬을 간단히 하며 주로 item간의 배치를 유연하게 만들 때(item 간 겹치지않는다) 사용한다.

각 css 속성이 가질 수 잇는 값은 다음과 같다.

justify-content는 flex-direction과 수평한 방향으로의 item배치를 하고 align-items는 flex-direction과 수직한 방향으로의 item 배치를 한다. 그러므로 justify-content와 align-items는 항상 수직관계를 가지고 있다.

See the Pen Flex - direction, justify content, align-items by zakelstorm (@zakelstorm) on CodePen.

flex-wrap

container에서 사용하는 속성으로 Flex container에서 Flex item을 한 줄로 표시할 지, 또는 행(行)을 개행(줄 바꿈)해서 복수의 행(行)으로 표시할지 여부를 지정

wrap: flex item이 flex container 안에서 표시되도록 개행 허용.

nowrap: flex item이 flex container 밖에서 표시되더라도 개행 불허.

wrap-reverse: flex item이 flex container 안에서 표시되도록 개행 허용. 단, 역순으로 표시된다.

See the Pen Flex-flex-wrap by zakelstorm (@zakelstorm) on CodePen.

align-content

flex-wrap이 wrap상태일때 개행이 이뤄졌을때 내부 item을 어떻게 배치할 것인지에 대한 속성이다.

기본속성은stretch이다.

• flex-start: 개행이 될때 stretch되지 않은상태로 아이템들이 맨 윗줄에 배치된다.
• flex-end: 개행이 될때 stretch되지 않은상태로 아이템들이 맨 아랫줄에 배치된다.
• center: 개행이 될때 stretch되지 않은 상태로 가운데에 배치된다.
• space-between: 개행이 될때 stretch 되지 않은 상태로 맨윗줄과 맨 아랫줄에 배치된다.
• space-around: 개행이 될때 stretch 되지 않은 상태로 동일한 여백을 가지도록 배치된다.

align-self

item의 속성으로 item의 개별 align 상태를 지정한다. (align-items의 개별item 적용 버전)

auto(default) : align-items의 속성을 상속받는다.

stretch : container에 맞게 늘어난다:

center : container기준 중앙 align

flex-start : container 시작점에 위치.

flex-end : container 끝점에 위치

baseline : container의 기준선에 위치

See the Pen Flex - align-self by zakelstorm (@zakelstorm) on CodePen.

flex-grow / flex-shrink / flex-basis / flex

flex-grow

• flex item의 너비를 늘어나도록 정의해 줄 수 있는 속성. (default 0)
• flex-basis로 배치 후 남은 공간 중 얼마를 지정된 플렉스 항목에 비례하여 분배해야하는지 그 정도를 제어.
  
  • flex-grow가 0일 때의 경우에 container 너비를 기준으로 늘어나지 않기 때문에  각각의 item의 너비 지정값이 고정 너비가 된다.
• flex-direction에 따라 기준이 달라진다. row=>width, column=>height

flex-shrink

• flex item의 너비를 줄어들도록 정의해 줄 수 있는 속성. (default 1)
• flex container가 item의 너비의 합보다 작아졌을 때 각 아이템의 지정된 너비는 무시되면서 flex container 너비를 기준으로 각 item이 줄어들게 된다.
• flex-direction에 따라 기준이 달라진다. row => width, column=>height

flex-basis

• CSS에서 요소의 너비는 width로 정의하여 사용했지만 flex의 경우 item의 너비는 flex-basis를 사용하여 지정
• 기본공간을 의미하며 남는공간이나 부족한 공간은 flex-grow, flex-shrink에 의해 분배된다.
• px, %, em, rem 등의 실수치가 입력가능하다.

flex

• flex-grow [flex-shrink] [flex-basis]의 조합 (default : 0 1 auto)
• auto : 1 1 auto
• initial : 0 1 auto
• none : 0 0 auto 

See the Pen Flex- flex-grow/flex-shrink/flex-basis by zakelstorm (@zakelstorm) on CodePen.

• 수평 정렬

1. margin

2. text-align

3. position

4. float

• 수직 정렬

1. padding

2. line-height

3. position & transform

수평정렬 - 가운데정렬

Margin

• display 가 block인 Element에 width가 설정되어있는 경우 가운데 정렬 시 margin을 auto로 설정
• Image의 경우 display를 block으로 설정 후 가운데 정렬 시 margin-left, margin-right auto로 설정

See the Pen align - margin by zakelstorm (@zakelstorm) on CodePen.

Text-align (for text inside)

• Text Element 가운데 정렬 시 text-align:center로 설정 

See the Pen align-text-align by zakelstorm (@zakelstorm) on CodePen.

수평정렬 - 좌우정렬

Position

• position : absolute으로 설정 후 right 또는 left값을 0으로 설정 시 좌/우쪽 정렬을 할 수 있다.

Float

• float :right; 또는 float:left; 속성을 통해 좌/우측 정렬할 수 있다.
  • container보다 클 경우 밖으로 overflow되어 보이는데 이는 clearfix hack(부모가 다시 자식요소를 감쌀 수 있게 float 초기화하는 기법)을 통해 해결 할 수 있다.

  See the Pen align-float & clearfix by zakelstorm (@zakelstorm) on CodePen.

수직정렬 - 가운데정렬

Padding

• padding 값으로 top,bottom에 여유공간을 적당히 설정 (일종의 노가다)

Height & Line-height (for text inside)

• text를 세로 가운데 정렬하는데 사용하며 height와 line-height를 동일하게 설정.

        ※ 단, text의 개행이 발생하면 가운데 정렬을 보장하지 않는다

See the Pen align-height & line-height by zakelstorm (@zakelstorm) on CodePen.

Position & Transform

• position: absolute; top:50%; transform: translate(0, -50%) (height의 50% 만큼 위로 이동) 의 조합으로 설정

See the Pen align-position & transform by zakelstorm (@zakelstorm) on CodePen.

수직정렬 - 상하정렬

Position 

• position absolute; top 또는 bottom 값을 0 으로 설정 시 상/하 정렬을 할 수 있다.

float

한글에서 어울림 효과와 동일하다.

See the Pen float 예제 by zakelstorm (@zakelstorm) on CodePen.

어울림 효과 외에도 웹페이지의 layout을 위해서도 사용된다.

See the Pen float 속성을 이용한 layout by zakelstorm (@zakelstorm) on CodePen.

clear

float가 있다면 float가 아닌 element는 위치를 지정하기 힘들어진다.

float가 적용된 요소에 display: block을 하더라도 해결되지 않는다.

See the Pen float/clear 문제상황 by zakelstorm (@zakelstorm) on CodePen.

이를 해결하기위해 float에 영향 받지 않도록 하는 attribute가 clear다.

왼쪽 float 요소에 어울림 적용을 받고 싶지 않다면 clear:left;

오른쪽 float 요소에 어울림 적용을 받고 싶지 않다면 clear:right;

left와 right 두 요소 모두 어울림 적용을 받고 싶지 않다면 clear:both;

만약 한 라인에 float left와 right가 둘다 존재하는 상황에서 둘 중 한 방향만 clear를 적용하면 어떤 현상이 발생할까?

해당 요소는 float는 적용받지 않게되어 다음줄에 출력되게 된다.

See the Pen clear 예제 by zakelstorm (@zakelstorm) on CodePen.

overflow

overflow는 자식요소의 내용(contents)의 크기가 부모 요소의 박스를 넘어갈 때 어떻게 처리할지를 설정함

• visible : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.
• hidden : 넘치는 부분은 잘려서 보여지지 않는다.
• scroll : 스크롤바가 항상 추가되어 보여진다.
• auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정한다.

※주의: overflow가 예상외로 안먹히는 경우가 종종 있다. 이때는 position과의 관계를 봐야한다.

부모 요소라고 해도 위치종속적이지 않은 관계에서는 overflow가 자식요소에게 먹히지 않는다.

대표적으로 fixed 자식요소와 static의 부모요소를 가진 absolute 자식요소가 해당된다.

See the Pen overflow problem by zakelstorm (@zakelstorm) on CodePen.

static

• default position
• top,right,bottom,up 에 영향을 받지않고 정적으로 배치됨

relative

• static 위치를 기준으로 offset attribute value(top,right,bottom,up) 만큼 상대적으로 이동
• offset attribute value가 없다면 초기 position은 의미상으로 static과 같아지게 된다.

absolute

• ancestor 요소를 기준으로 위치를 설정한다.
  • ancestor 요소는 위치가 설정된 ancestor 요소인 relative, fixed, absolute의 position을 가지는 요소를 의미
  • 만약 위치가 설정된 ancestor 요소가 없다면 body를 기준으로 움직이게 된다.

• offset attribute value가 없다면 초기 position은 의미상으로 static과 같아지게 된다.

fixed

• viewport를 기준으로 상대적으로 위치한다.
• offset attribute value가 없다면 초기 position은 의미상으로 static과 같아지게 된다.

block

새로운 라인에서 시작하며 해당라인의 모든 너비 차지.

요소의 너비 및 높이를 css로 설정 및 조정 가능.

<div>, <h1>, <p>, <ul>, <ol>, <form> 등이 기본적으로 block 요소.

inline

새로운 라인에서 시작하지 않으며 해당 요소의 크기만큼만 너비 차지.

요소의 너비 및 높이 css로 설정 및 조정 불가능.

<span>, <a>, <img> 등이 대표적인 inline 요소.

inline-block

새로운 라인에서 시작하지 않으며 해당 요소의 크기만큼만 너비 차지.(inline)

요소의 너비 및 높이 css로 설정 및 조정 가능.

table

부모요소에 사용하며 table 요소처럼 사용하고 싶을때 사용. (<table>의 개념과 동일) 

table-layout : auto/fixed는 table크기를 지정한대로 고정하고 사용하거나 유동적으로 싶을때 사용

자식요소는 다음과 같이 설정함으로서 각각의 다음과 같은 특성을 얻는다

▶예시

.boxwrap {
    display:table;
    width:100%;
    table-layout: fixed;
}
.boxwrap .box {
    display:table-cell;            
    vertical-align: middle;
}

(요즘엔 대부분의 브라우저에 flex가 지원되니 table대신 flex를 써도된다)

pseudo class selector (의사 선택자)

선택자

Cascading (폭포형)

• 웹브라우저 사용자 저자가 동시에 같은 css를 지정
• 웹브라우저 < 사용자 < 저자
• 선택자 우선순위  (하나의 태그에 중첩적 css가 적용되었을때 구체적인 selector일수록 더 강력하다.)

      inline > id selector > class selector > tag selector > inherit attribute  (※!important로 뒤집을 수 있다)

• 이러한 우선순위를 가짐이 폭포와 비슷하게 생겼다고 하여 cascading style sheet라 명칭을 붙였다.

!important

• CSS는 기본적으로 나중에 설정한 값이 적용된다.

• selector의 유형에 따라 적용되는 우선순위가 다르다.
  • 상속속성 < tag < class < id < inline 순으로 강력하다.

• 위와같이 정해진 우선순위를 뒤집을 수 있는 것이 !important 이다. !important가 붙은 속성이 모든 상황에서 가장 우선적으로 적용된다.
  • !important가 충돌할때는 다시 위의 우선순위로 속성값이 적용된다.