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

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 : 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐
    • 이미지가 잘리지 않음

좋은 웹페이지 즐겨찾기