1. 포지션 4가지 옵션에 예를 들어 설명하시오.
1) static
position 속성을 별도로 지정하지 않으면 기본값 Static 이 적용
만약 다음과 같이 main 요소 아래 3개의 div 요소가 있다면 순서대로 배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
main {
width: 300px;
height: 400px;
background: tomato;
}
div {
width: 200px;
height: 100px;
border: 1px solid;
background: yellow;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
div:nth-of-type(2) {
position: static;
background: cyan;
opacity: 0.8;}
</style>
<body>
<main>
<div>position: static;</div>
<div>position: static;</div>
<div>position: static;</div>
</main>
</body>
</html>2)relative
요소를 원래 위치에서 벗어나게 배치할 수 있게 됨. 요소를 원래 위치 기준으로 상대적(relative)으로 배치해준다고 생각 위치 지정은 top, bottom, left, right 속성을 이용해서 요소가 원래 위치에 있을때 상하 좌우로 부터
얼마나 떨어지게 할지를 지정할 수 있다.
예를 들어, 두번째 div 요소의 position 속성을 relative로 변경하고, 요소의 원래 위치로 부터 위에서 28px, 왼쪽에서 48px 떨어지도록 top과 left 속성을 설정해보면!
두번째 스태틱과 겹치는 모습을 볼 수 있다.
main {
width: 300px;
height: 400px;
background: tomato;
}
div {
width: 200px;
height: 100px;
border: 1px solid;
background: yellow;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
div:nth-of-type(2) {
position: relative;
top: 28px;
left: 48px;
background: cyan;
opacity: 0.8;
}3)absolute.
가장 난해하고 주의해서 사용해야함. position속성이 absolute일때 해당 요소는 배치기준을 자기 자신이 아닌 상위 요소에서 찾습니다.
DOM 트리를 따라 올라갔다가 position 속성이 static이 아닌 첫번째 상위 요소가 해당 요소의 배치기준을 설정됨. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM트리에 있는 최상위 body 요소가 배치기준이 됨.
알고리즘이 복잡하지만, 실제로 absolute 속성값을 사용할 때 이러한 복잡한 특성을 활용하는 경우는 드뭅니다. 대부분 경우 부모요소를 기준으로 top, left, bottom, right 속성을 적용해야 하기 때문 따라서 어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례
부모요소 내부에 속박되지 않고 독립된 배치 문맥을 가짐
따라서 브라우저 화면(viewport)상 어디든지 원하는 위치에 자유롭게 배치시킬 수 있음
다만 상위요소 중 position 속성이 relative인 요소가 있다면 그중 가장 가까운 요소의 내부에서만 요소를 자유롭게 배치할 수 있음.
즉, 전체화면이 아닌 해당 상위 요소를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.
absolute 예제
다음과 같이 두개의 자식을 갖는 부모 요소가 있다고 가정해보자
<div class="parent">
Parent
<div class="child">Child #1</div>
<div class="child">Child #2</div>
</div>```
그리고 각 요소를 보기 편하도록 parent와 child 클래스에 간단한 스타일을
적용
```html
.parent {
border: 2px solid blue;
color: blue;
background: lightskyblue;
padding: 1rem;
}
.child {
border: 2px dotted red;
color: red;
background: lightpink;
padding: 1rem;
}아직까지는 position 속성을 거들지 않았기 때문에, 부모와 자식 요소간의 일반적인 배치흐름을 가지게 됩니다. 
그 다음, position 속성을 absolute로 변경하기 위해서 abs라는 클래스에 대한 스타일 추가로 정의합니다.
.abs {
position: absolute;
}그리고 두번째 자식 요소에 이 abs 클래스를 적용하는 순간
<div class="child abs">Child #2</div>부모 요소는 이 자식 요소를 테두리 밖으로 밀어내며 마치 없는 자식 취급을 하게 됩니다.
HTML CSSResult Skip Results Iframe
EDIT ON
.abs {
position: absolute;
}
.parent {
border: 2px solid blue;
color: blue;
background: lightskyblue;
padding: 1rem;
}
.child {
border: 2px dotted red;
color: red;
background: lightpink;
padding: 1rem;
}
/* Alignment styles */
body {
display: flex;
justify-content: center;
align-items: center;
}
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}그런데 여기서 밀려난 자식 요소는 왜 원래 자리에 멀뚱히 남아 있을까요? 그 이유는 offset 속성을 명시하지 않으면, 기본값인 auto가 적용되는데, 그러면 원래 position 속성이 static이었을 때의 위치와 일치하도록 offset 속성값이 자동 지정되기 때문입니다.
.abs {
position: absolute;
top: auto;
left: auto;
bottom: auto;
right: auto;
}위 처럼 대신에 top과 left 값을 각각 0과 10px로 수동 지정해주면
.abs {
position: absolute;
top: 0;
left: 10px;
}두 번째 자식 요소는 브라우저 상단에 딱 붙고, 좌측으로 부터는 10px 떨어진 지점에 배치됩니다.
자, 이 상태에서 인라인 스타일을 통해 부모 요소의 position 속성을 relative로 변경해보겠습니다.
<div class="parent" style="position: relative">
<!-- 생략 -->
</div>그러면, positioning context가 전체 화면(viewport)에서 부모 요소로 변경되어, top과 left 속성이 적용 됨을 알 수 있습니다.
4)fixed
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본적이 있으신가요? 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법인데요. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.
이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.
두번째 div 요소의 position 속성을 fixed로 변경하고, 뷰포트 기준으로 하단에서 8px, 우측에서 16x 떨어지도록 bottom과 right 속성을 설정해주겠습니다.
div:nth-of-type(2) {
position: fixed;
bottom: 8px;
right: 16px;
background: cyan;
opacity: 0.8;
} 
5)sticky
position 속성의 sticky 값은 CSS에서 비교적 최근에 추가된 속성값인데요. 특이하게도 브라우저 화면을 스크롤링할 때 효과가 나타납니다.
사실 말로 장황하게 설명하는 것 보다는 예제를 보는 게 이해가 빠를 수 있는데요.
먼저, div 요소의 부모인 main 요소의 높이를 줄이고 스크롤링이 가능해지도록 height외 overflow 속성을 조정해줍니다.
main {
width: 300px;
height: 120px;
overflow: auto;
background: tomato;
}그 다음, 두번째 div 요소의 position 속성을 sticky로 변경하고, top 속성을 0으로 설정해주겠습니다.
div:nth-of-type(2) {
position: sticky;
top: 0;
background: cyan;
opacity: 0.8;
} 이제 스크롤바를 아래로 내려서 화면을 위로 올려보면, 두 번째 요소가 화면 상단에 끈적하게(sticky) 붙어서 움직이지 않는 것을 알 수 있습니다. 반면에 position: static인 세 번째 요소는 이에 구애받지 않고 화면에 따라 올라가는 것을 알 수 있습니다.
2. flex 에서 부모 속성 자식 속성에 들어 가는 10가지 속성을 예를 들어 설명하시오.
- flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
- flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order
많다 많아..
부모요소 5가지
1)fire_direction 내부 요소들의 정렬 방향
.flex_container {
display: flex;
flex-direction: row; /* 가로방향 정렬 (default)
default를 사용할 경우, 생략이 가능하다. */
column; /* 세로방향 정렬 */
row-reverse; /* 가로방향의 반대에서부터 정렬 */
column-reverse; /* 세로방향의 반대에서부터 정렬 */
}2)flex-wrap : 줄 바꿈 설정, 자식요소들의 수가 많아져서 개수가 꽉 찼을 때 자동 줄바꿈을 해준다.
.flex_container {
display: flex;
flex-wrap: nowrap /* 한줄 정렬, default */
wrap /* 여러줄 걸쳐 정렬 */
wrap-reverse /* 반대 방향으로 여러줄 걸쳐 정렬 */
}3)justify-content 가로선상 정렬
.flex_container {
display: flex;
justify-content: flex-start /* 왼쪽 정렬 */
flex-end /* 오른쪽 정렬 */
center /* 가운데 정렬 */
space-between /* 화면에 딱맞게 정렬 */
space-around /* 양끝 공간을 일정하게 띄어 정렬 */
space-evenly /* 양끝과 가운데 공간이 모두 일정하게 띄어 정렬 */4)align-items 세로선 상 정렬
.flex_container {
display: flex;
align-items: flex-start /* 위로 정렬 */
flex-end /* 아래로 정렬 */
center /* 가운데 정렬 */
baseline /* 밑면 기준으로 정렬 */
stretch /* 정확한 높이값을 주면 변하지 않으나
최소높이를 주면 container 영역까지 정렬 */5)align-content:(세로선상 정렬에서 여분의 공간이 있다면) 컨테이너 사이 간격 조절
.flex_container {
display: flex;
align-content: flex-start /* 위로 정렬 */
flex-end /* 아래로 정렬 */
center /* 가운데 정렬 */
space-between /* 화면에 일정하게 정렬 */
space-around /* 라인사이에 동일한 간격으로 띄어 정렬 */
strech /* 줄이 늘어나 나머지 공간을 차지, default */자식요소 5가지
6)flex
증가 너비 flex-grow, 감소너비 flex-shrink, 기본너비 flex-basis 를 한 줄에 쓸 수 있는 축약형 속성
7)order
자식 요소의 순서를 결정한다. 기본값은 0이기 때문에 속성을 주지 않으면 첫번째 순서로 배치됨.
8)align-self
부모요소의 align-items 와는 별개로 따로 상단, 중앙, 하단 등 수직배치 변경
속성은 똑같이 flex-start flext-end center baseline stretch 로 줄 수 있다.
9)마진을 이용한 배치
margin: auto를 사용해서 자식 요소를 끝으로 밀어낼 수도 있다.
3.반응형 웹에서 미디어 쿼리에 대하여 설명하시오.
미디어 쿼리(media query)
다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport)너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 뷰포트의 해상도에 따라 CSS를 분기 시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.
- 기본적인 사용방법
@media (조건문) { 실행코드 }
or
<link rel="stylesheet" media="all and (조건)" href="desktop.css" >
- 모바일/데스크톱 우선
모바일우선 - min-width 사용 (최소 ~ 부터 적용)
작은 가로폭부터 큰 가로폭 순서로 만드는 것
모바일기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합.
//기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다.
// 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)
@media (min-width: 576px) { ... }
// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용)
@media (min-width: 768px) { ... }
// 데스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)
@media (min-width: 992px) { ... }
// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }데스트탑우선 - max-width 사용 (최대 ~ 까지 적용)
큰 가로폭부터 작은 가로폭 순서로 만드는 것
데스크탑은 해상도가 크기 때문에 큰게 먼저 조건에 부합
// 기본 CSS를 작성합니다.
// 기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.
// 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
@media (max-width: 575px) { ... }
// 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)
@media (max-width: 767px) { ... }
// 태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)
@media (max-width: 991px) { ... }
// 데스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)
@media (max-width: 1199px) { ... }- 예제 코드!
/* 화면사이즈가 600px 보다 크면 해당요소를 감춘다 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}- 실제 활용예 -
게시판을 만들 때 넓이가 줄어들면 항목을 모두 보여주기 힘듭니다. 이때 불필요한 항목을 감춤으로써 넓이를 확보할 수 있습니다. 또한 모바일 화면에서는 특정 블록을 생략하는 경우도 있는데, 이럴 때도 유용하게 사용할 수 있습니다.
그럼 수업시간에 배운 것을 활용하여 아래의 레이아웃을 구성해볼게요!
4.이미지를 반응형으로 만드는 방법은?
반응형 이미지(Responsive Image)는 화면 크기에 따라 이미지 크기를 자동으로 조정하여 사용자에게 최적화된 이미지를 제공하는 기술입니다.
반응형 이미지를 구현하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 CSS 미디어 쿼리를 사용하여 이미지 크기를 조절하는 것입니다. 다음은 예시 코드입니다.
<img src="image.jpg" alt="image" class="responsive-image">
.responsive-image {
width: 100%;
height: auto;
max-width: 1000px; /* 이미지 최대 너비 지정 */
}
@media (max-width: 768px) {
.responsive-image {
max-width: 500px; /* 화면 너비가 768px 이하인 경우 이미지 최대 너비를 500px로 조정 */
}
}
위 코드는 이미지를 HTML img 요소로 삽입하고, CSS를 사용하여 이미지를 반응형으로 만드는 예시입니다. width 속성을 100%로 지정하여 이미지가 부모 요소에 맞게 늘어나도록 하고, height 속성은 auto로 지정하여 이미지의 가로세로 비율이 유지되도록 합니다. max-width 속성은 이미지의 최대 너비를 지정합니다.
위 코드에서는 미디어 쿼리를 사용하여 화면 너비가 768px 이하인 경우 이미지의 최대 너비를 500px로 조정하도록 설정하였습니다. 이렇게 하면 모바일 화면에서는 이미지가 크게 보이지 않아서 페이지 로딩 속도가 빨라집니다.
반응형 이미지를 구현하는 방법은 위 코드와 같이 간단하게 구현할 수 있습니다. 하지만 더 복잡한 경우에는 JavaScript나 다른 기술을 사용해야 할 수도 있습니다.
- 미디어 쿼리는 화면 크기에 따라 CSS를 변경한다.
- absolute 포지션은 부모 요소의 relative를 기준으로 특정 위치에 배치한다.
relative 부모가 없을 경우 body를 기준으로 배치한다. - flex를 활용하여 레이아웃을 유연하게 배치하고 정렬할 수 있다.
