[SeSAC DT 과정] CSS float, position, 가상선택자

1️⃣ float 속성

• 블럭 요소들을 가로 정렬 할때 사용 하는 속성. 요소를 공중에 붕 띄우는 개념.

• float: left;
  float: right;
  

• /* float 초기화 */ clear:both;
  

• 하위요소를 float 설정할 때 상위요소 height 값이 지정되어있지않다면 height 값은 0이 됨

  💡 해결 방법

  1. 상위요소의 높이값을 설정(문제: 하위요소 높이 달라지면 같이 바꿔줘야함)
  2. overflow : hidden; 속성을 이용
  3. float을 float으로 대응(권장)
  4. 가상 요소를 만들어서 clearfix를 사용(권장)
     -> 마지막 요소만 float 안시키고 고정시켜줌

---

2️⃣ position 속성

• 문서 상에 요소를 배치하는 방법을 지정하는 속성 ⭐️참고링크

• static(기본값) / relative / absolute / fixed

  1. static(기) : 기본 흐름( 마크업된 순서대로)
  2. relative : 현재 대상 요소의 위치를 기준으로 위치를 지정(현재 흐름 유지)
  3. absolute : 레이어(층)를 바꿈! cf) float 는 같은 레이어 안에서 요소를 띄우는 개념
     (포지션 relative / absolute / fixed 값을 가지고 있는)상위 요소 를 기준으로 위치를 지정
  4. fixed 레이어(층)를 바꿈!
     브라우저 기준으로 위치를 지정(현재 흐름을 바꿈)

• 위치 속성 : left right top bottom: % / px
  - 포지션 값 셋 중에 하나(기본값 빼고) 지정되어야 적용됨

• position: absolute / fixed 가운데 맞추기
  - position: absolute / fixed 는 현재 흐름에 빠져서 레이어를 띄우는 것이기 때문에 margin: auto 같이 남은 여백을 계산해서 가운데 지정하는 것이 불가능

  💡 해결방법

  1. left:50%;margin-left:-넓이 1/2;
  2. left:0; right:0; top:0; bottom:0; margin:auto;
  3. left:50%;transform:translate(px / %);

---

3️⃣ 가상선택자 (pseudo 선택자, 슈도 선택자)

1. 가상클래스

• 있는 요소의 가상 속성
• 사용자가 선택한 상황에 반응을 만들어줌
• 앵커 태그의 가상 클래스

  a:link 링크가 걸린 상태
  a:visited 링크 방문 후의 상태를 표시(전에 방문했다)
  a:hover 링크에 마우스 커서 올려졌을 때
  a:active 링크를 클릭

2. 가상요소

• 정적인 마크업에는 불필요해서(의미가 없어서) 동적인 css에 추가하는 요소

• ::after{content:””;} /*대상요소의 마지막 자식으로 요소를 동적으로 추가*/
  ::before{content:””;} /*대상요소의 첫 번째 자식으로 요소를 동적으로 추가*/

• 콘텐츠 content 속성 필수!