CSS의 다양한 기능들

1. level 요소
1-1. block level 요소

• 화면 전체를 사용하는 태그
• 한 개의 독립된 덩어리 = 하나의 큰 그룹
• 블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다.
  

1-2. inline level 요소

• 화면의 일부를 차지하는 태그
• "행 안의 일부"라는 의미로 "텍스트와 동격의 요소"이기 때문에 "텍스트 레벨 요소"라 부르기도 한다.
• 블록 레벨 요소는 포함할 수 없다.
  

2. 박스모델
2-1. border

border: 굵기 종류 색상;

2-2. padding

padding: 값;

• 내용 영역과 border 사이의 여백의 크기
• 값의 지정(공백으로 구분)
  -> 값1개 : 상/하/좌/우 모두 같은 크기의 여백을 지정
  -> 값2개 : 공백으로 구분. 첫번째 값은 상/하, 두번째 값은 좌/우
  -> 값4개 : 공백으로 구분. 첫번째 값이 상단, 두번째 값이 우측, 세번째 값이 하단, 네번째 값이 왼쪽

2-3. 백분율로 사이즈를 지정하는 경우의 관계

• 박스에 대한 width나 height 속성을 백분율로 지정할 경우, 비율에 대한 기준이 되는 것은 부모 요소의 width값과 height값이다.
• 부모 요소에 지정된 width속성이 200px이고, height속성이 50px일 경우, 자식 요소에게 width와 height값을 각각 100%로 지정하게 되면 부모 요소의 사이즈를 기준으로 하여 각각 200px, 50px을 부여한 것과 같다.
• 이 상태에서 자식 요소에게 padding과 border를 부여하게 되면 100%로 부여된 내용영역의 크기에 padding과 border만큼 사이즈가 확장되므로, 자식 요소는 부모 요소보다 크기가 커지게 된다.

2-4. auto

• width, height, margin-left, margin-height에 대해서 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.

• width : auto
  -> 부모 요소의 width값으로부터 padding과 border의 크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용한다.
  -> 부모 요소의 width - (border-left + padding-left + padding-right + border-right)

• height : auto
  -> 자신이 포함하고 있는 내용 영역에 대한 높이만큼만 height를 설정한다.

3. 상속

• 상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미한다. 상속은 CSS의 생산성을 높이기 위한 중요한 기능이다.

4. 우선순위

5. 포지션

• 엘리먼트의 위치를 지정하는 4가지 방법

• static

• relative

• absolute

• fixed

• bottom vs top : top이 우선

• right vs left : left가 우선

• css 각각의 엘리먼트는 각각의 위치가 정적으로 존재한다. 즉, static하게 위치하게 된다.

• me 엘리먼트는 부모 엘리먼트 안에 존재해야 하기 때문에 top, left 등등의 옵션이 무시된다.

6. float

• 이미지를 삽화로 삽입할 때 사용하는 기법.
• 레이아웃을 잡을 때도 사용한다.

7. multi-column

8. background

• background-size: cover
  -> 이미지를 공간 안에 꽉 채운다.
• background-size: contain
  -> 이미지의 삭제 없이 다 채운다.

9. link와 import

• 외부로 css파일을 빼는 방법은 2가지
• 재사용성을 높이고, 소스코드가 간단해서 유지보수의 편의성을 높인다.

10. 캐시

• cache : 자주 접근하는 데이터를 복사해놓는 임시 저장소
• browser Cache : 서버의 지연을 줄이기 위해 사용하는 웹 캐시의 일종

10-1. 웹 캐시

• WEB Cache
  -> 사용자(clinet)가 웹사이트(server)에 접속할 때, 정적 콘텐츠(이미지, js, css 등)를 특정 위치에 저장하여, 웹사이트 서버에 해당 콘텐츠를 매번 요청하여 받는 것이 아니라, 특정 위치에서 불러옴으로써 사이트 응답시간을 줄이고, 서버 트래픽 감소 효과를 볼 수 있다.

• Browser Cache
  -> 브라우저 또는 HTTP 요청을 하는 Client Application에 의해 내부 디스크에 캐시
  -> 브라우저의 Back버튼 또는 이미 방문한 페이지를 방문한 경우 극대화

• Proxy Cache
  -> Browser Cache와 동일한 원리로 동작하며, Client나 Server가 아닌 네트워크 상에서 동작
  -> 큰 회사나 IPS의 방화벽에 설치되며 대기시간&트래픽 감소, 접근정책&제한우회, 사용률 기록 등 수행

• Gateway Cache
  -> 서버 앞 단에 설치되어 요청에 대한 캐시 및 효율적인 분배를 통해 가용성, 신뢰성, 성능 등을 향상