1. 띄움(정렬) & 위치 & 배경

01. float

• 요소를 좌우 방향으로 띄움(수평 정렬)
• none : 요소 띄움 없음 : default
• left : 왼쪽으로 띄움
• right : 오른쪽으로 띄움

- float : 방향;
img{
	float : left;
}

• 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다
• 단순 해제 : 다음 요소에서 속성 clear : 값;을 해준다

.text{
	clear : left;
}

• float 해제
  • flat 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해서 속성을 '해제' 해야 함
  • 형제요소에 clear : (left, right, both) 추가하여 해제

.next{
	// 다음 형제 요소가 꼭 필요하다는 단점이 있다
	clear : both;
}

• 부모 요소에 overflow : (hidden) 추가하여 해제

.parent{
	// overflow는 float이랑 전혀 관계 없지만 편법으로 사용 됨
	overflow : hidden; // or 'auto'
}

• 부모요소에 clearfix 클래스 추가하여 해제(추천)
  • 대신에 float 요소만 자식으로 존재해야 된다

.clearfix::after{
	content : "";
	clear : both;
	display : block; // or 'table'
}

• display : 수정
  • float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨
• flex, inlin-flex를 제외한 대부분의 display는 block으로 값이 변경 된다
• inline, inline-block, inline-table, table-*의 요소는 block으로 값이 변경된다(block은 유지)
• clear
  • float 속성이 적용되지 않도록 지정(해제)
• none : 요소 띄움 허용 : default
• left : 왼쪽 띄움 해제
• right : 오른쪽 띄움 해제
• both : 양쪽(왼쪽, 오른쪽) 모두 띄움 해제(추천)

02. position

• 요소의 위치 지정 방법의 유형(기준) 설정

• static : 유형(기준) 없음/ 배치 불가능 : default

• relative : 요소 자신을 기준으로 배치

  • 주변의 영향을 받거나 주변의 영향을 줌
  • 보이는 위치는 바뀌지만 처음에 배치된 곳을 기준이기에 기준이 바뀌면 위치도 바뀜

• absolute : 위치 상 부모 요소를 기준으로 배치

  • 위치상의 부모는 단순히 구조 상의 부모요소가 아닌 position : xxx;를 갖고 있는 요소가 부모요소이다

• static은 기준이 없어서 안됨, absolute, fixed, sticky는 부모의 위치가 바뀔 수 있으므로 비추천

• relative를 추천 함, 없으면 브라우저(window)가 기준이 된다

• fixed : 브라우저(뷰포트)를 기준으로 배치

• sticky : 스크롤 영역 기준으로 배치

  • IE 지원 불가
  • top, botton, left, right 중 한 개 이상 사용

• top

  • 요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 설정
  • auto : 브라우저가 계산 : default
  • 단위 : px, em, cm 등 단위로 지정 : 0

• % : 부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용

• bottom

  • 요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정
  • auto : 브라우저가 계산 : default
  • 단위 : px, em, cm 등 단위로 지정 : 0
  • % : 부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용

• left

  • 요소의 position 기준에 맞는 '왼쪽'에서의 거리(위치)를 설정
  • auto : 브라우저가 계산 : default
  • 단위 : px, em, cm 등 단위로 지정 : 0
  • % : 부모(위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정, 음수 값 허용

• right

  • 요소의 position 기준에 맞는 '오른쪽'에서의 거리(위치)를 설정
  • auto : 브라우저가 계산 : default
  • 단위 : px, em, cm 등 단위로 지정 : 0
  • % : 부모(위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정, 음수 값 허용

• 요소 쌓임 순서(Stack Order)

  • 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)

• static 을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

• position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수 록 위에 쌓임

• position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))

• position > z-index > HTML마지막 코드

• display 수정

  • absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정 됨
  • flex, inlin-flex를 제외한 대부분의 display는 block으로 값이 변경 된다
  • inline, inline-block, inline-table, table-*의 요소는 block으로 값이 변경된다(block은 유지)

03. background

• 요소의 배경을 설정, 단축
• background-color : 배경 색상 : transparent
• background-image : 하나 이상의 배경 이미지 : none
• background-repeat : 배경 이미지의 반복 : repeat
• background-position : 배경 이미지의 위치 : 0 0
• background-attachment : 배경 이미지의 스크롤 여부(특성) : scroll

- background : 색상 이미지경로 반복 위치 스크롤 특성
.box1{
	background : red url(경로) no-repeat left top scroll;
}
.box2{
	background : url(경로) no-repeat right 100px;
}
.box3{
	background : red;
}
-> 필요한 부분만 사용하고 생략해도 된다

-1. background-color

• 요소의 배경 색상을 지정, 개별
• 색상 : 요소의 배경 색상
• transparent : 투명 : transparent
• 개별속성보다 단축속성을 주로 이용 함

-2. background-image

• 요소의 배경에 하나 이상의 이미지를 삽입, 개별
• none : 이미지 없음 : default
• url("경로") : 이미지 경로(URL)
• 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있습니다

.box1{
	// 개별 속성
	background-image : url('경로'),url('경로'),url('경로');
	width : 300px;
	height : 300px;
}
.box2 {
	background : url('경로') no-repeat, url('경로') no-repeat 100px 50px, url('경로') repeat-x;
}
-> 하나 이상의 배경이미지를 삽입할 경우 ','로 구분합니다 먼저 작성된 이미지가 더 위에 쌓입니다 아론 '다중 배경 이미지'는 IE8 이하 버전에서 사용할 수 없습니다

-3. background-repeat

• 배경 이미지의 반복을 설정, 개별
• repeat : 배경 이미지를 수직, 수평으로 반복 : default
• repeat-x : 배경 이미지를 수평으로 반복
• repeat-y : 배경 이미지를 수직으로 반복
• no-repeat : 반복 없음

-4. background-position

• 배경 이미지의 위치를 설정, 개별
• % : 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100% : default(0% 0%)
  • background-position : X축 Y축;
• 방향 : 방향을 입력하여 위치 설정(top, bottom, left, right, center)
  • background-position : 방향1 방향2;
• 단위 : px, em, cm 등 단위로 지정
  • background-position : X축 Y축;

-5. background-attachment

• 요소가 스크롤 될 대 배경 이미지의 스크롤 여부(특성) 설정, 개별
• scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨 : default
• fixed : 배경 이미지가 뷰포트(viewport)에 고정되어, 요소와 같이 스크롤 되지 않음 (패럴렉스 효과를 줄 때 사용)
• local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

-6. background-size

• 배경 이미지의 크기를 지정
• auto : 배경 이미지가 원래의 크기로 표시 됨 : default
• 단위 : px, em, % 등 단위로 지정
  • width, height 형태로 입력 가능(E.g. 120px 370px)
  • width 만 입력하면 비율에 맞게 지정 됨(E.g. 120px)
• cover : 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐
  • 이미지가 잘릴 수 있음
• contain : 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐
  • 이미지가 잘리지 않음