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를 써도된다)

※일반적으로 Browser에 데이터를 저장할 수 있는 3개의 공간이 있다.

Local Storage, Session Storage 와 Cookies 의 차이점을 알고 어느 상황에 사용이 적합한지 알아보도록 한다.

Local Storage

특징:

• key/value 의 pair로 데이터를 저장한다.
• Javascript/HTML 을 통해서만 데이터에 접근 가능하다.

• no expiration date. 직접 지울때까지 남아있다.
• 5MB의 저장 공간을 가진다
• Local Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회 가능)

• string data로 저장이 제한된다. 따라서 용이하게 사용하려면 직렬화(String화) 가 필요하다
  
  • 직렬화란?

Session Storage

특징:

• session 기간에만 데이터를 저장한다. 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다. (보안 측면에서 유리)
• 5-10 MB의 저장 공간을 가진다
• Session Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회가능)
• 같은 주소의 URL의 창을 여러개 열어도 각각의 창은 별도의 Session Storage를 갖는다.

※ 일반적으로 HTTP Reqeust/Response 에서 말하는 Session과는 다른 개념이다.

Cookies

특징:

• expiration date는 각 데이터마다 설정된 기간동안으로 지정된다.
• 4KB 이하의 저정공간을 가진다.
• Server-Side에서 사용되는 데이터를 주로 저장한다.
• 매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정 시)
• HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다. (document.cookie 로 직접 실험가능)

Summary

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가 충돌할때는 다시 위의 우선순위로 속성값이 적용된다.

CSS란

Cascading Style Sheets의 약자로 번역하면 "계단식(폭포형) 스타일 시트" 가 된다.

CSS는 브라우저와 사용자와 저자가 조화를 이뤄 웹페이지를 디자인한다.

이로인해 브라우저 사용자 저자가 모두 동일한 우선순위를 가지고 있다면 뒤죽박죽이 되기때문에 엄격한 규칙의 우선순위가 지정되어야 하는데 기본적으로 브라우저 < 사용자 < 저자 순의 우선순위를 가지고 있다.

이러한 우선순위를 가지는 모양이 마치 폭포와 같다고하여 cascading style sheet라는 명칭의 유래가 되었다.

css 공부 Tip

모든 선택자를 외울 필요는 없다. 빨리 찾을 수 있는 팁

• selector 게임사이트 http//flukeout.github.io/

• css cheatsheet https://appletree.or.kr/quick_reference_cards/CSS/CSS%20selectors%20cheatsheet.pdf

중요한 속성(빈도수 기반)

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/