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/