2022-10-21 [새싹 프론트엔드] 강의정리

2022-10-21 강의 내용

• 위치속성
• z-index 속성
• overflow 속성
• float 속성

 

position속성

-position 속성의 값은 body안쪽으로 움직이는건 + body 바깥으로 움직이는건 -이다.

static	기본값
relative	본인자리 기준, 본인자리는 두고 본인만 움직인다.
absolute	static 이 아닌 부모의 기준대로 움직인다. 없으면 그 위의 부모 없으면 그 위의 부모를 계속 찾아가다가 끝까지 모~든 부모가 static 이면 body를 기준으로 잡는다. block요소라해도 inline처럼 본인 자리만 차기하게된다
fixed	고정된 위치

---

z-index 속성

• <position: static;> 이 아닌 요소들간 위아래 배치 순서를 정한다.
• <z-index> 를 쓰지않았을때 기본 적용값 = auto(0과 같다)
• 음수양수 전부 사용가능
• z-index: 1; 로 하면 auto(0) 요소위에 올라온다
• 숫자가 클수록 위로 올라와진다. 3 > 2 > 1 > 0

 

---

overflow 속성

- 자식이 부모이 영역을 넘어 섰을때 사용한다.

- 부모에 height가 없을 시 작동하지않는다.(height가 없으면 부모는 자식이 가진 height만큼 늘어나게 된다.)

---

float

 

float: 뜨다, 떠오르다.

그 자리에서 붕 뜨기 때문에 밑에서 자리를 차지하고 있던 block요소들 float가 된 요소의 자리를 밀고 들어 온다.

div>inline요소들은 block인 div는 밀려올라가지만 div안에 있는 텍스트 요소는 float된 요소의 자리를 밀고 들어갈 순 없고 나머지 자리만 차리한다(예시1-3확인). float이 적용된 요소는 block으로 적용된다 

float 속성은 말그대로 그 자리에 붕 뜸

예시 1-3 div>텍스트,span요소들은 float된 요소의 밑으로 들어가지않고 나머지 자리만 차지하게 된다.

clear (취소하다)

위의 예시에 회색 부분이 말려들어가지 않게 하려면 회색영역 div에 clear: both를 준다.

파랑,빨강에 float를 넣은모습 부모(회색)가 높이값을 잃어버림

 

clearfix

부모가 있는 자식요소 div에 float를 쓰게 되면 부모는 그 자식을 감싸지않고 높이값을 잃는다(width값은 잃지않음)

1. float를 준 태그의 마지막자식에 clearfix

2. 가상요소 clearfix (권장)

 

 

1. float를 준 태그의 마지막자식에 clearfix

1. float를 준 태그의 마지막자식에 clearfix (예시 1-1참고_)

<div class="test01">
      <div class="test02">파랑</div> 
      <div class="test03">빨강</div>
      <div class="empty"</div>
</div>

style

.test02 {
	float: left;
}

.test03 {
	float: right;
}

.empty {
	content: "";
    display: block;
    clear: both;
}

 

예시)1-1 empty 에 공란인 content를 삽입하여 파랑, 빨강아래에 들어가지않게 clear(취소)를 해줌

2. 가상요소 clearfix (권장)

2. 가상요소 clearfix (권장) (예시 1-2참고)

<div class="test01">
      <div class="test02">파랑</div> 
      <div class="test03">빨강</div>
      <div class="empty"</div>
</div>

style

.test02 {
	float: left;
}

.test03 {
	float: right;
}

.test::after {
	content: "";
    display: block;
    clear: both;
}

.test01::after 가 적용된 모습

 

 

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  n주차 블로그 포스팅