[4주차] 1. CSS 띄움(정렬), 위치에 관한 속성

float

: 요소를 좌우 방향으로 띄우는(부유하는) 개념(수평 정렬)

• 요소를 수평방향으로 정렬하는 용도로 많이 사용
• flex box가 생기면서 수평 정렬하는 개념은 많이 퇴색됨
• float : 방향;
• 기사처럼 요소 주변에 글(문자)이 흐르게 하는 용도로 사용 가능

 

1. 속성 값

• none : 기본 값으로 요소 띄움 없음
• left : 왼쪽으로 띄움
• right : 오른쪽으로 띄움

 

2. 수평 정렬

• float이 적용되기 전에는 위에서부터 아래로 쌓임
• float이 들어간 요소들은 다 수평 정렬
• float: left; 좌측부터 수평으로 쌓는 개념
• float: right; 우측부터 수평으로 쌓는 개념

 

3. float 해제

• 거의 대부분 필수 적
• float이 가진 문제점 : float 속성이 적용된 요소 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함
• 중간에 clear 속성 삽입해 해제 가능
• float을 해제해서 쓰지 않으면 요소가 부유하는 개념이라 float이 적용되지 않은 새로운 요소을 float요소가 덮어버리게 되는 문제점이 생긴다(복잡한 레이아웃일 경우 더욱)
• 다음 형제 요소에 clear : (left, right, both) 추가하여 해제 (기본원리)- > 다음 형제 요소 없을 시 다음 형제 요소를 만들어줘야 한다는 문제점이 있음
• 부모 요소에 overflow: (hidden, auto) 추가하여 해제(추천x), -> 다음형제요소 없이 특정한 영역을 wrapping하는 것만으로도 그 영역 안에서만 float을 사용하게 할 수 있다. 하지만 overflow는 float과 아무 관련없다. 그래서 이건 편법이나 마찬가지다.
• float 속성이 추가된 요소의 부모 요소에 clearfix 클래스 추가하여 해제(추천)
  • clearfix 클래스가 부여된 부모요소에 after(내부의 뒤쪽에 가상요소 추가) 가상요소 선택자 사용(content 필수)
• clearfix 클래스가 부여된 부모요소의 자식요소들은 무조건 float이 있는 요소들만 있어야 한다.
• float이 있는 형제요소에는 float이 없는 다른 형제요소가 있으면 안된다.
  • clearfix 클래스가 부여된 부모요소 안에서는 float을 자유자재로 사용해도 after을 사용해서 내부 젤 끝부분에서는 clear:both가 적용된 content가 추가되게 되면서 자연스럽게 해제된다.

.clearfix::after {

 content: "";

 clear: both;

 display:block;/\*줄바꿈 되야해서\*/

}

 

4. display 수정

• float 속성이 추가된 요소는 display 속성 값이 대부분 block으로 수정됨
• float 속성이 추가됐을 때 변화값(대부분의 경우 block으로 변경)

지정값	변화값
inline	block
inline-block	block
inline-table	block
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex/float 속성 효과없음
inline-flex	inline-flex/float 속성 효과 없음
그외	변화없음

---

clear

• clear는 float을 해제하는 용도로 쓰임(float 속성이 주변에 더 이상 영향을 끼치지 못하도록)
• 해제하지 않을 경우 float이 적용되지 않은 요소는 float이 적용된 요소 그 다음으로 오는 것이 아니라 float이 적용된 요소와 겹쳐있는 상태가 된다. 이를 해결하기 위해선 clear을 써야 한다. float이 끝나는 요소 바로 다음에 오는 요소에 clear(float과 같은 방향)를 써야 한다.
• clear: both(이걸로 통일) -> float: left가 오던 float:right가 오던 둘다 해제 하겠다.
• 속성
  • none : 기본값으로 요소 띄움을 허용하는 개념
  • left : float-left(왼쪽 띄움) 해제
  • right : float-right(오른쪽 띄움) 해제
  • both : 양쪽(왼쪽, 오른쪽) 모두 띄움 해제, 거의 대부분 이걸 사용

---

position

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

• 요소를 직접적으로 배치하는 것이 아니라 배치할 수 있는 기준 설정
• 기준이라는 개념 중요

 

1. 속성 값

• 기준에 따라서 화면에 어떻게 나오는지 확실히 이해해야 함
• static : 기본 값으로 유형(기준)이 없어서 배치가 불가능하다.(배치할 수 있는 준비가 안되어있음)
• relative : 요소 자신을 기준을 배치, 많이 씀
  • 이동하려면 자기자신이 원래 있었던 위치가 필요하다.
  • 이동은 했지만 원래 있던 위치에 자기 자신이 남아있는 상태이기 때문에 주변의 형제요소에 영향을 받거나 주게 되서 주의해서 써야 한다.
• absolute: 위치 상 부모 요소를 기준으로 배치, 많이 씀(추천)
  • 부모요소를 기준으로 배치하기 때문에 주변 요소들간의 상관관계가 무너짐
  • 위치 상 부모요소를 인지할 수 있게 지정해줘야 한다. (부모요소에 position 값 지정)
  • 위치 상의 부모요소를 찾을 때 없으면 한뎁스씩 올라가면서 position 값이 있는 요소들을 찾아 나감
  • 모든 부모요소, 조상요소(html까지 걸쳐 올라갔을 때)에 position이 다 없다면 뷰포트를 기준으로 위치 이동하게 된다.
  • 부모요소로서의 기준으로 잡혀야 하기 때문에 부모요소에 static을 제외한 relative 등의 position 값을 부여해야 함. absolute, fixed, sticky 같은 경우 기준이 변경되기 때문에 부모요소가 지정 위치에 존재할 수 없게 될 수도 있으니 position: relative로 작성해주면 좋다.
• fixed: 브라우저(뷰포트)를 기준으로 배치
  • 주변 요소들간의 상관관계가 무너짐
  • 쇼핑몰의 헤더, 배너광고, 고정된 메뉴 등 화면에 붙어있는 것들
  • 브라우저(뷰포트) 기준으로 배치
  • 뷰포트가 커지거나 줄어들어도 위치 고정
• sticky: 스크롤 영역 기준으로 배치
  • 주변 요소들간의 상관관계가 무너짐
  • 스크롤 영역에 어디에 배치할 것인지 지정
  • ex) top:0 -> 위에 붙은 개념
  • top, left, right, bottom 이 한 개 이상 있어야 하면 부여된 값이 scroll 영역에 맞닿았을 경우에만 작동
  • 스크롤 영역 전체의 어딘가에 특정한 요소를 붙여서 동작하게 함, 스크롤과 굉장히 연관이 깊은 속성이다.
  • 인터넷 익스플로어에서 작동 불가
  • js로 구현하는 기능 이였으나 이 속성을 통해 쉽게 구현 가능

 

2. position과 같이 사용되는 속성들

• top : 요소에 position 값 지정 후 잡혀있는 기준에 맞는 위쪽에서의 거리(위치)를 설정
  • auto: 기본값으로 브라우저가 계산
  • 단위 : px, em, cm 등 단위로 지정 ,이걸 많이 씀, 기본값은 0
  • % : 부모(위치 상의 부모(조상)) 요소의 세로 너비(top,bottom은 위아래를 아우르므로)의 비율로 지정, 음수 값 허용(반대방향으로 이동)
• bottom : 요소의 position 값 지정 후 잡혀있는 기준에 맞는 아래쪽에서의 거리(위치)를 설정
  • auto: 기본값으로 브라우저가 계산
  • 단위 : px, em, cm 등 단위로 지정 ,이걸 많이 씀, 기본값은 0
  • % : 부모(위치 상의 부모(조상)) 요소의 세로 너비(top,bottom은 위아래를 아우르므로)의 비율로 지정, 음수 값 허용(반대방향으로 이동)
• left : 요소에 position 값 지정 후 잡혀 있는 기준에 맞는 왼쪽에서의 거리(위치)를 설정
  • auto: 기본값으로 브라우저가 계산
  • 단위 : px, em, cm 등 단위로 지정 ,이걸 많이 씀, 기본값은 0
  • % : 부모(위치 상의 부모(조상)) 요소의 가로 너비(left, right는 수평을 아우르므로)의 비율로 지정, 음수 값 허용(반대방향으로 이동)
• right : 요소에 position 값 지정 후 잡혀 있는 기준에 맞는 오른쪽에서의 거리(위치)를 설정
  • auto: 기본값으로 브라우저가 계산
  • 단위 : px, em, cm 등 단위로 지정 ,이걸 많이 씀, 기본값은 0
  • % : 부모(위치 상의 부모(조상)) 요소의 가로 너비(left, right는 수평을 아우르므로)의 비율로 지정, 음수 값 허용(반대방향으로 이동)

 

3. position 특징

• 요소 쌓임 순서(Stack order): 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자가 보는 그 시선과 조금 더 가깝게 있는지(더 위에 샇이는지) 결정(z축 : 우리의 시선과 동일한 축, 눈에 보이진 않지만 뭔가가 가깝고 뭔가가 먼느낌)
  • position이 있으면 position이 없는 개념보다 위에 쌓이게 된다.(position 유무 중요)
  • position 사용 안하거나 position: static을 제외한 position 속성 값(relative, absolute, sticky, fixed) 있을 경우 일단 위에 쌓이게 됨, 우리의 시선에 가깝게 됨(값은 무관)
  • position 유효한 값이 모두 존재(동일) 한다면 z-index(position이 있어야만 사용 가능) 속성에 특정한 값을 부여, 숫자 값이 높을수록 위에 쌓임
  • position 속성 값도 동일하고 z-index의 숫자 값도 동일하다면 html의 마지막 코드일수록 위에 쌓임(나중에 작성한 코드(요소))
  • z-index는 기본값이 0
• display 수정: static, relative, sticky가 부여된 요소에는 해당사항 없음, absolute, fixed 속성 값이 부여된 요소는 display의 속성 값이 아주 일부분을 제외하고는 다 block으로 변경 됨(float과 동일한 개념)
  • float이 부여되었거나 absolute, fixed 속성 값이 부여된 요소는 display가 뭐가 있었던 간에 상관없이 일부분 제외하고 block으로 변경된다.

지정값	변화값
inline	block
inline-block	block
inline-table	block
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex/ position 속성 효과없음
inline-flex	inline-flex/position 속성 효과 없음
그외	변화없음