다양한 속성

1. border

1-1. border 속성

border : 굵기 종류 색상;

1-2. 표시 위치에 따른 border 속성의 세분화

• 테두리의 상/하, 좌/우 영역을 각각 개별적으로 지정하기 위해 다음과 같이 세분화 한다.

  border-top : 굵기 종류 색상;
  border-right : 굵기 종류 색상;
  border-bottom: 굵기 종류 색상;
  border-left : 굵기 종류 색상;

2. padding 속성

padding : px값;

• 내용 영역과 border 사이의 여백의 크기

2-1. 표시 위치에 따른 값의 세분화

padding-top : 상단여백 px단위로 지정
padding-right : 우측여백 px단위로 지정
padding-bottom : 하단여백 px단위로 지정
padding-left : 왼쪽여백 px단위로 지정

2-2. 값의 지정 형식(공백 구분)

• 1개의 값 : 상/하/좌/우 모두 같은 크기의 여백 지정
• 2개의 값 : 공백으로 구분하여 2개의 값을 지정할 경우, 첫번째 값은 "상/하", 두번째 값은 "좌/우"가 된다.
• 4개의 값 : 공백으로 구분하여 4개의 값을 지정할 경우, 첫번째 값은 상단 여백, 그 후 우측, 하단, 왼쪽의 순서(시계방향)로 적용된다.

3. 중첩된 div 간의 크기 관계

• child는 parent의 내용이므로 child의 border와 padding을 합한 모든 크기 요소의 합이 parent의 width나 height를 넘을 수 없다.
• 만약 child의 전체 크기가 parent의 width나 height의 값보다 커진다면 child는 parent를 벗어나게 된다.
• width와 height의 값은 한 번 부여되면 고정 사이즈를 갖는 특성이 있으며, 내용이 많아질 경우 자동으로 확장되지 않는다.

3-1. 백분율로 사이즈를 지정하는 경우

• 박스에 대한 width나 height 속성을 백분율로 지정할 경우에도 비율에 대한 기준이 되는 것은 부모 요소에 대한 width와 height 값이다.

3-2. auto값

• width, height, margin-left, margin-height에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.
• width : auto;
  -> 부모 요소의 width값으로부터 padding과
  border의 크기를 뺀 나머지 값을 자동으로 계산하여 자식의 width에 적용한다.
• height : auto;
  -> 자신이 포함하고 있는 내용 영역에 대한 높이
  만큼만 height를 설정한다.

4. margin

4-1. margin 겹침 현상

• margin 겹침 현상은 상하 margin값이 어떤 상황에서 사라지는 현상을 의미한다.

4-2. margin의 적용원리

• 움직일 수 없는 요소를 밀어내어 스스로의 위치를 변경시키거나 다른 요소를 밀어내는 특성을 갖기 때문에 위치와 관련된 속성이다.
• 바꾸어 말하면 margin 속성은 요소의 위치를 변경시키면서 주변 요소에게 영향을 주게 된다.

5. display

5-1. block-level

• display : block;
• block레벨 요소의 기본값, 이 속성이 적용되면 해당 요소는 width와 height를 적용할 수 있다.
• 이 요소는 하나의 문단으로 처리되기 때문에, 태그 다음에 나타나는 요소는 자동으로 줄바꿈 된다.

5-2. inline-level

• display : inline;
• inline 레벨 요소의 기본값.
• 이 속성이 적용되면 해당 요소는 width, height를 부여하더라도 적용되지 않는다.
• 이 요소는 하나의 단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄바꿈 되지 않는다.

5-3. 공통

• display : none;
• 이 속성이 적용된 요소는 화면상에 표시되지 않는다.

5-4. display 속성에 대한 inline-block 값

• block-level 요소의 특성과 inline-level 요소의 특성을 혼합한 형태
• block : 크기 지정 가능
• inline : 문장으로 형성됨
• 즉, 크기를 지정할 수 있는 inline-level 요소로 처리

6. float

6-1. float란?

• float 속성은 뉴스 페이지와 같은 곳에서 흔히
  볼 수 있다
• 이미지나 박스를 화면의 우측 혹은 좌측에 고정시켜 놓고 텍스트가 그 옆을 흐르듯이 지나가도록 하는 것을 floating처리라 하고, 이때 사용되는 속성이 float 속성이다.

6-2. float 속성

float : left; 요소를 부모 박스 안에서 왼쪽에 고정
float : right; 요소를 부모 박스 안에서 오른쪽에 고정
float : inherit; 부모 요소에 적용된 float 속성값을 상속
float : none; float 속성을 적용하지 않음. 기본값

6-3. float 속성 사용시, 주의사항

• width 속성에 대한 auto값을 사용할 수 없게 된다.
• %나 px 단위의 값만 사용 가능하다.

6-4. 서로 이어지는 두 개의 문단

• float 속성은 서로 문단이 다르더라도 이후에 명시되는 모든 요소에 대하여 영향을 준다
• 그러므로 float 속성이 사용된 후, 이 기능을 off하지 않는다면 문단은 새로 시작되지 않는다.

6-5. 중첩된 박스 구조에서의 float 속성

• float 속성이 적용된 요소는 부모 요소가 감싸지 못한다.
• float 속성이 적용되면 부모 요소가 감싸지 못하기 때문에 레이아웃 안에서 다른 요소의 영역을 침범하게 된다.
• 부모 요소가 종료하기 전에 float 마감 처리를 추가하면 정상적으로 float가 적용된 요소를 감쌀 수 있다.
• 빈 HTML 태그로 처리
• 부모 요소의 after 가상 클래스를 사용해서 처리

7. 포지션

7-1. 엘리먼트의 위치를 지정하는 방법

• static
• relative
• absolute
• fixed

7-2. 위치 값

• bottom vs top : top이 우선
• right vs left : left가 우선
• css에서 위치는 정적으로 존재, static하게 위치한다.
• me기준으로 부모 엘리먼트 안에 존재해야 하기 때문에 left, top 등등의 옵션이 무시된다.

8. link와 import

8-1. 외부로 파일을 빼는 방법은 크게 두가지

• link

  <link rel="stylesheet" href="style.css">

• import

  <style>
	@import url("style.css");
  </style>

9. cache

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