CSS 포지션

# CSS 포지션 ## 미션 포지션 속성을 활용하여 아래와 같은 페이지를 만드시오. ![클라우드스터딩-HTML-CSS-포지션](https://i.imgur.com/a1LfSDL.png) ## 개념 #### ⭐️ CSS 포지션 HTML 요소를 화면에 배치를 위한 개념! 이를 CSS 포지션이라 한다. - static - 기본 값 - relative - static을 기준하여, 상대 위치로 이동 - absolute - 가장 가까운 relative 조상을 기준으로, 절대 위치 이동 - fixed - 화면을 기준으로한, 절대 위치 - sticky - 스크롤 시, 화면에 들러 붙게 함 ## 구글링 힌트 - "CSS 포지션" - "CSS static relative absolute" - "CSS fixed sticky"

by sehongpark

코드: java 1.8

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS 포지션</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>CSS 포지션!</h1> <h2>무엇?</h2> <p>요소 배치를 위한 속성.</p> <h2>종류?</h2> <ul> <li>static - 기본 값(디폴트)</li> <li>relative - 기본 위치를 기준, 상대 이동!</li> <li>absolute - 부모(relative) 기준, 절대 위치로 이동!</li> <li>fixed - 화면 기준, 절대 위치!</li> <li>sticky - 스크롤 시, 화면에 들러 붙음!</li> </ul> <h2>사용 예</h2> <div class="container"> <div class="block" id="a">A</div> <div class="block" id="b">B</div> <div class="block" id="c">C</div> <div class="block" id="d">D</div> <div class="block" id="e">E</div> </div> </body> </html>

입력

정답이 궁금하다면? 코드를 제출해보세요!