Portfolio


구현한 결과물은 이곳[링크]에 코드와 실행결과 캡쳐본을 남겨주세요! 😎


// 여기서 offset parent는 위치를 잡는데 "기준"을 말합니다!
// BFC, IFC 경우 위치의 "기준"을 적어주세요!
// ex) ㅇㅇ를 기준으로 right: ~ 했네? -> ㅇㅇ가 기준입니다.
<div style="
			width: 100px; 
			height: 100px; 
			background-color: greenyellow"> // 1
	  <div style="
				width: 10px; 
				height: 10px; 
				background-color: purple"> // 2
		</div>
    <div
      style="
        position: fixed;
        left: 10px;
        width: 10px;
        height: 10px;
        background-color: red;"> // 3
		</div>
    <div
      style="
        position: absolute;
        left: 20px;
        width: 10px;
        height: 10px;
        background-color: blue;">// 4
		</div>
    <div
      style="
				float: right; 
				width: 10px; 
				height: 10px; 
				background-color: white"> // 5
		</div>
    <div
      style="
        position: relative;
        right: 10px;
        float: right;
        width: 10px;
        height: 10px;
        background-color: green;">// 6
		</div>
 </div>


1. 브라우저의는 각각의 요소들의 위치 변경 명령을 모아놓아 프레임을 만들고, 다수의 프레임이 쌓이면 한꺼번에 계산한다
2. 브라우저가 요소의 이동 명령을 받고 offset을 계산할 때 가장 먼저 하는 일은 어떤 단위로 명령을 했는지 파악하는 것이다.
3. position: absolute가 적용된 요소에 위치 값을 주지 않았을 때의 기본 위치 값은 static일 때와 같다.
4. position:relative일 때의 offset parent돔 구조상의 가장 가까운 부모 요소이다.
5. 같은 속성을 적용해도 브라우저마다 계산하는 값은 다를 수 있다.

[3. 76 - CSS Rendering 2회차] Quiz

1. [공통] 구현해봅시다! (1개 / 색깔 자유)

2. [송이] 다음 div들의 offsetparent를 구하세요!

3. [윤] position속성에 관한 설명 중 틀린 것을 모두 고르세요!