Fast Campus - F.E 3기 html, css(4)

: )·2022년 9월 22일
MegabyteSchool개발자취업부트캠프국비지원교육내일배움카드메가바이트스쿨패스트캠퍼스

안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 html, css 4편입니다.

css 속성

css의 속성은 여러가지가 있습니다.

박스모델
글꼴, 문자
배경
배치
플렉스(정렬)
전환
변환
띄움
애니메이션
그리드
다단
필터

정도로 대분류를 할 수 있습니다.

width, height

블럭요소이며, 박스모델의 너비입니다.
기본값은 auto에요.
단위는 px, em, vw등이 있습니다.

span

인라인요소입니다.
아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도입니다.
기본값은 auto입니다.
인라인요소답게 가로너비가 최소한으로 줄어들기위해 노력합니다.

div

대표적인 블록요소입니다.
span처럼 아무것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도입니다.
기본값 역시 auto이고, 블럭요소이므로 가로넓이가 최대한 넓어지려 합니다.

max-widht, max-height

요소가 커질 수 있는 최대의 가로, 세로 너비입니다.
기본값은 none이며, 최대 너비 제한이 없습니다.
단위는 px이 제일 많이 쓰이고, em과 vw도 존재합니다.

min-widht, min-height

요소가 작아질 수 있는 최소의 가로, 세로 너비입니다.
기본값은 0입니다.
단위는 px이 제일 많이 쓰여요.

밑의 예시를 볼게요.

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
}
.child {
  min-width: 400px;
  height: 100px;
  background-color: orange;
}

부모요소인 parent의 크기는 300px, 자식요소인 child의 크기는 최소값이 설정되어있네요. min-width는 400px입니다.
결과는 어떻게 나올까요?


이렇게 자식요소가 부모요소의 크기를 넘어서는 모습입니다.

단위

px : 픽셀. 말 그대로 점입니다.
% : 백분율.
em : 요소의 글꼴 크기.
rem : 루트(html)의 글꼴크기. root+em인듯 해요.
vw : 뷰포트 가로 너비의 백분율입니다. viewport+width. 1vw=1/100.
vh : 뷰포트 세로 너비의 백분율입니다. viewport+height. 1vh=1/100.

margin

요소 외부여백을 지정합니다.
기본값은 0이고, 음수(마이너스값)도 지정이 가능합니다!
그리고 auto가 있는데요.
auto는 가로세로 너비가 있는 요소의 가운데 정렬에 활용합니다!
단위는 px, em, vw 등으로 지정할 수 있습니다.
중요하진 않아도, %도 있습니다.

margin: 10px

10px : top, right, bottom, left

margin: 10px 20px

10px : top, bottom
20px : right, left

margin: 10px 20px 30px

10px : top
20px : right, left
30px : bottom

margin: 10px 20px 30px 40px

10px : top
20px : right
30px : bottom
40px : left

앞서 봤던, 음수를 적용시켜볼게요.

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid black;
  margin: -20px 10px;
}


위 예시에서, margin: -20px이 적용되면서 top과 bottom이 서로 겹쳐지면서 쪼그라들고 있습니다.

padding

요소의 내부 여백을 지정하는 단축속성입니다.
따라서, 여백이 생기는 만큼 요소 자체의 크기가 커지는 특성이 있습니다.
기본단위는 0입니다.
단위는 margin과 같이 px, em, vw가 있습니다.
그리고, padding에서는 %가 유용하게 쓰이는 경우가 있습니다!

padding: 10px

10px : top, right, bottom, left

padding: 10px 20px

10px : top, bottom
20px : right, left

padding: 10px 20px 30px

10px : top
20px : right, left
30px : bottom

padding: 10px 20px 30px 40px

10px : top
20px : right
30px : bottom
40px : left

이 부분은 margin과 동일합니다.

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid black;
}
.container .item:first-child {
  padding: 20px;
}


첫 번째 박스의 크기가 커졌어요!

border

테두리선입니다.
border: 두께(4px) 종류(solid) 색상(red)
이런 순으로 작성하는 것이 표준!
각 기본값은 두께는 medium, 종류는 none, 색상은 black입니다.

border-width

테두리 선의 두께이며, medium이 기본값입니다.
margin과 padding에서 봤던 개별속성 방향이 동일하게 적용됩니다.

border-style

테두리 선의 종류이며, 기본값은 none입니다.
solid(실선), dashed(절취선, 파선)이 제일 많이 사용되요.
이 두가지는 무조건 기억해야 합니다.
물론, dotted(점선), double(두줄) 등등도 있어요.
margin과 padding에서 봤던 개별속성 방향이 동일하게 적용됩니다.

border-color

테두리 선의 색상이며, 기본값은 black입니다.
transparent라는 투명도 속성도 있어요.
margin과 padding에서 봤던 개별속성 방향이 동일하게 적용됩니다.

색상을 표현하는 방법은 여러가지가 있습니다.
색상이름 : 브라우저에서 제공하는 색상입니다. red, tomato, blue같이요.
Hex 색상코드 : 16진수 색상입니다. #000, #FFFFFF 이런 식으로 사용하며, 가장 많이 사용하게 될 색상방식입니다. 실무에서는 Hex 혹은 RGB등이 많이 사용됩니다.
RGB : 빛의 삼원색 방식입니다. rgb(255, 255, 255)처럼 사용하며, 자바스크립트에서 많이 사용합니다.
RGBA : RGB에 투명도가 더해집니다. rgba(0, 0, 0, 0.5) 방식으로 사용됩니다. 투명도는 0(투명)~1(불투명) 사이 소수값을 사용합니다.

border-radius

요소의 모서리를 둥글게 깎습니다.
기본값은 0이며, px이나 em, vw를 단위로 사용합니다.
예시를 볼게요.

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid black;
  border-radius: 10px;
}


원리는 간단합니다.
모서리에 반지름이 10px인 원을 갖다대고, 그 외에 나머지 부분을 깎아버리는거죠.

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid black;
  border-radius: 0 10px 50px 5px;
}


역시 띄어쓰기로 이렇게 만들어줄 수도 있습니다.

box-sizing

요소의 크기 계산 기준을 지정해줍니다.
기본값은 content-box이며, 요소의 내용(content)로 크기를 계산합니다.

border-box는 요소의 내용+padding+border로 계산됩니다.
요소의 크기를 지정하고, border나 padding등을 사용하게되면 크기가 변하는 것을 막아줍니다.

예시를 볼게요.

<div class="item">hello</div>
<div class="item">hello</div>
.item {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.item:first-child {
  box-sizing: border-box;
  border: 4px solid red;
  padding: 20px;
}

html div의 class가 item이고, 그 div요소는 가로 100px, 세로 100px, 배경색상은 오렌지색입니다.
그 후 div의 첫 번째 자식요소에 내부여백 20px과 4px짜리 선이 들어가있습니다.
20+20+4+4=48이므로, box-sizing이 없다면 width값은 52로 써야겠죠.
하지만, box-sizing 속성을 넣어줌으로써 기가막히게 100px로 맞춰집니다.

overflow

요소가 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 속성입니다.

기본값 visible은 넘치는 내용 그대로를 보여줍니다.

hidden은 넘치는 내용을 잘라줍니다.

scroll은 넘치는 내용을 잘라주면서, 스크롤까지 만들어줘요.

auto는 넘치는 내용이 있다면 자동으로 잘라주면서, 스크롤까지 만듭니다.

예시를 볼게요.

  <div class="parent">
    <div class="child"></div>
  </div>
.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}

child class의 가로값이 부모요소보다 크네요.
그럼 당연히 삐져나갈겁니다.
그 삐져나가는 값을 제어하는 부분을 부모요소에 삽입해줍니다.
overflow를요.

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
  overflow: auto;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}

scroll과 auto의 차이점이 있습니다.
scroll은 잘리지 않은 부분에도 스크롤바가 생성되지만, auto는 잘리는 부분에만 스크롤바가 생성됩니다.
예시에서 auto대신 scroll을 사용하면, 넘치는 부분이 없는 세로 부분에도 스크롤바가 생깁니다.
그렇기에, auto를 주로 사용합시다!

display

요소의 화면출력 특성입니다.

block : 상자(레이아웃) 요소
inline : 글자 요소
inline-block : 글자+상자 요소
위 3가지는, 각각의 요소에 이미 지정되어 있는 값입니다.
무슨말인고 하니
div는 block 요소,
span은 inline 요소 등등은 이미 지정되어 있는거란 얘기에요.
다만 display 속성으로, div를 inline으로 span을 block으로 바꿔줄 수도 있습니다.

flex : 플렉스 박스(1차원 레이아웃)
grid : 그리드(2차원 레이아웃)
none : 화면에서 사라짐
위 3가지는, 각각의 요소에 직접 지정해야 하는 값입니다.
필요한 사람이 직접 지정해서 써야하는 요소에요.

기타 : table, table-row, table-cell....

예시를 볼게요.

  <span>Hello world!</span>
span {
  display: block;
  width: 120px;
  height: 30px;
  background-color: yellow;
  color: blue;
}

inline요소인 span을 display: block;을 추가해주면, 가로와 세로의 값을 가질 수 있는 block요소로 변합니다.

opacity(투명도)

요소의 투명도를 결정합니다.
기본값은 1(불투명)이며, 0(투명)부터 1(불투명)까지의 소수점을 활용해 투명도를 지정할 수 있습니다.
0.01(1%)라고 생각하면 되요.
예시를 볼게요.

div {
  width: 120px;
  height: 30px;
  border: 6px slolid black;
  background-color: black;
  opacity: 0.5;
}


분명히 배경색을 검정으로 지정했죠?
하지만, 투명도를 0.5(50%)로 지정하니 저렇게 반투명상태가 되었습니다.

좀 더 확실하게 해보죠.

.parent {
  width: 200px;
  height: 200px;
  padding: 30px;
  background-color: royalblue;
}
.child {
  width: 300px;
  height: 200px;
  background-color: red;
  opacity: .3;
}

opacity를 작성할 땐 0을 생략하고 .x를 입력해도 동일하게 적용됩니다.

짠!

글꼴

  <h1>This is My page</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, aliquam.
  </p>

이번엔 예시가 먼저 나왔습니다.
이번에는 글꼴을 배워볼건데요.
글꼴이니 기본적으로 브라우저에서 제공하는 css를 초기화해주기로 했어요.
히이익
참고로 모든 기본 font-size는 16px입니다.
아무튼 좀 보기가 불편하네요.
얼른 바꿔주겠습니다.

h1 {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  font-family: serif;
}
p {
  width: 350px;
  padding: 10px;
  border: 2px solid;
  box-sizing: border-box;
  line-height: 1.4;
}


우와

그럼 이제 본격적으로 배워볼게요.

font-style

글자의 기울기입니다.
기본값은 normal, 기울기가 없어요.
예시에서 나온 italic 외에도 oblique(기울임)라는 값도 있지만, italic을 입력하는 경우가 대부분입니다.

font-weight

글자의 두께입니다.
기본값은 normal, 숫자는 400입니다.
좀 더 두꺼운 두께인 bold, 숫자는 700 이 값도 평소에 잘 쓰인다고 합니다.
100부터 900까지 9단계를 지정할 수 있습니다.

font-size

글자의 크기이고, 기본값은 16px입니다.

line-height

한 줄의 높이, 행간과 유사한 개념입니다.
기본값은 normal, 숫자로 1 입니다.
숫자는 글꼴 크기의 배수를 지정합니다.
예를 들면, line-heigh: 1.4;를 입력하면,
한 줄의 높이가 글자 크기의 1.4배가 됩니다.
예시를 볼게요.

h1 {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  font-family: serif;
}
p {
  font-size: 16px;
  line-height: 5;
}

이렇게 한 줄의 높이가 훌쩍 높아집니다.
즉, 한 줄의 높이는 16px의 5배이고, 16px의 글자는 가운데 정렬됩니다.
line-height 속성은 되도록 px보다는 배수를 사용하는 편이 권장됩니다.

font-family

폰트, 서체를 지정합니다. 나눔고딕같은 것들이요.
font-family: 글꼴1, "글 꼴 2", ... 글꼴계열;
우리가 원하는 글꼴 후보를 쉼표로 구별해, 갯수 제한 없이 쭉 작성해둘 수 있습니다.
만약 글꼴 이름에 띄어쓰기가 들어간다면, 큰 따옴표("")로 묶어야 합니다.
물론 글꼴 후보작성이 필수 사항은 아니에요. 그런데 왜 있는걸까요?

  1. 예를 들어, 저는 -apple-system 폰트나 맑은고딕 폰트를 사용하고 싶어요.
  2. 그래서 전
    font-family: -apple-system, "Magun Gothic", "맑은 고딕", sans-serif;
    라고 작성했습니다.
  3. 그럼 우선 브라우저는 제일 먼저 명시되어있는 -apple-system 폰트를 사용해봅니다.
  4. 그런데 사용할 수 없다면???
  5. 그 다음에 명시된 "Malgun Gothic", "맑은 고딕" 순서로 사용을 시도합니다.
  6. 그런데 저 후보들 중 사용할 수 있는 폰트가 단 한 가지도 없다면?
  7. 브라우저는 제일 마지막에 작성한 sans-serif(고딕폰트 계열)에서 고딕체 계열 폰트 전체중 사용가능한 폰트를 로드해 사용하게 됩니다.

즉, 제일 마지막에 작성한 글꼴계열;은 필수입니다!!!!
방금같은 경우엔 에서는 sans-serif가 글꼴계열이 되겠죠.

글꼴 계열은 크게 5개정도가 있습니다.
1. serif(바탕체 계열)
2. sans-serif(고딕체 계열)
3. monospace(고정너비글꼴 계열)-코드작성시 가독성이 용이!
4. cursice(필기체 계열)
5. fantasy(장식글꼴 계열)

문자

color

글자의 색상입니다.
**font-color, text-color가 아니고

글자색=color입니다!!!!!!!!!!**

기본값은 검정색, rgb(0,0,0)이에요.
갖가지 색상을 지정할 수 있습니다.

text-align

문자 정렬방식입니다.
기본값은 left이고, right와 center가 있습니다.

text-decoration

문자에 선을 넣어줍니다.
기본값은 none(장식없음)입니다.
밑줄이 필요하면 underline, 중앙선은 line-through를 입력하면 됩니다.
특이하게도, a 태그는 underline이 기본값이에요.

  <a href="https://google.com">
    Google
  </a>
a {
  display: block;
  width: 200px;
  height: 100px;
  background-color: orange;
  font-size: 22px;
  color: white;
  text-decoration: none;
  text-align: center;
  line-height: 100px;
}

위 예시처럼, a 태그에서 밑줄을 제거하고 싶다면, css에서 a태그의 texr-decoration을 none으로 입력해줘야 합니다.

text-indent

문자 첫 줄의 들여쓰기입니다.
기본값은 0이며, 음수를 사용하여 내어쓰기도 가능합니다.
단위는 px, en, rem 등을 사용해요.

배경

background-color

요소의 배경 색상입니다.
기본값은 transparent(투명)이며, 색상지정 가능합니다.

background-image

요소에 배경 이미지를 삽입합니다.
기본값은 none이며, url("경로");를 통해 이미지 경로를 추가해줄 수 있습니다.
이미지는 바둑판식으로 출력됩니다.

background-repeat

요소 배경 이미지 반복을 제어합니다.
바둑판으로 반복되는 걸 막기위해서 사용할 수 있겠군요.
기본값은 repeat(반복)이며, no-repeat은 반복없음입니다.
repeat-x는 수평반복, repeat-y는 수직반복입니다.

background-position

배경 이미지의 방향을 결정합니다.
top, bottom, left, right, center 사용이 가능합니다.
1개 혹은 2개(예를 들면...bottom left 처럼)도 사용이 가능합니다.
단위(px, em, rem)를 사용하게되면, x축과 y축 위치를 결정할 수 있습니다.
background-position: 100px 35px
을 입력하게 되면 x축(가로) 100px, y축(세로) 35px 이동한 위치에 배경 이미지가 나오겠네요.

background-size

배경 이미지의 크기를 지정합니다.
기본값은 auto인데, auto는 이미지의 실제 크기를 그대로 출력합니다.
단위는 px, em, rem 등이 있어요.
비율을 유지하는 속성은 두 가지가 있는데요.
하나는 cover, 하나는 contain입니다.
cover는 요소의 더 넓은 너비에 맞추고, contain은 요소의 더 짧은 너비에 맞춘다는 차이점이 있네요.

background-attachment

배경 이미지의 스크롤 특성입니다.
기본값은 scroll이며, 이미지가 요소를 따라서 같이 스크롤됩니다.
fixed를 사용하면 이미지가 viewport에 고정되어 스크롤되지 않습니다. 뒷 배경이 움직이지 않으면서, 스크롤 됩니다.

배치

position

요소의 위치를 지정해주는 기준입니다.
같이 사용하는 css속성은 top, bottom, left, right, z-index가 있습니다.
top, bottom, left, right의 기본값은 auto이며, 음수를 사용할 수 있습니다.
기본값은 static입니다.
relative는 요소 자신이 기준이 됩니다.
absolute는 위치 상 부모 요소를 기준으로 합니다.
fixed는 뷰포트를 기준으로 합니다.

relative

요소 자신이 있던 위치를 기준으로 재배치됩니다.
예시를 볼게요.

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}


여기서 2번 박스에 relative를 이용해보겠습니다.

.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: relative;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

여기까지는 아무런 변화가 없어요.
왜냐면 relative는 본인을 기준으로 움직이는 속성인데, relative 이후에 얼만큼을 움직여야 하는지 명시해주질 않았거든요.

.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: relative;
  top: 30px;
  left: 200px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

자, 이제 변화를 볼게요.

2번박스가 원래 있던 위치를 기준으로,
위에서부터 30px, 왼쪽으로부터 200px 떨어진 위치로 이동을 했습니다.

그런데 가만히 보면, 1번과 3번이 덩그러니 떨어져있는 것 처럼 보입니다.
사실 이 현상은 비정상적이라고 보면 됩니다.
2번 박스의 left 값을 2000px로 설정해볼까요?

전 분명히 2번 박스의 위치를 잡아줬어요.
하지만, 이렇게 2번 박스가 보이지 않게 된다면???
1번과 3번 사이 공간이 왜 있는지에 대한 의문이 생깁니다.

아까 예시 사진을 다시 들고왔습니다.
디스플레이 상으로는 2번 박스가 우리가 원하는 장소에 배치된 것 처럼 보입니다.
하지만,
2번 박스는 원래 2번 박스가 있던 장소에 그대로 있고,
우리가 보는 저 주황색 2번 박스는 허구의 데이터라고 생각하면 됩니다.
즉, 구라 허구라는거죠.
그래서, 실제로 relative를 이용하는 배치는 거의 사용되지 않는다고 합니다.

absolute

그래서 우리가 사용할 것은, 바로 absolute입니다.
위치상 부모요소를 기준으로 배치가 됩니다.
예시를 볼게요.

.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

relative가 있던 자리에 absolute가 자리하고 있습니다.

???????
이게 뭘까요???
우리는 2번에 absolute를 사용했더니, 3번이 2번 밑으로 기어들어갔어요.

저런 결과가 나온 이유가 뭘까요?
2번에 absolute를 사용하면,
2번은 더 이상 1번, 3번과의 상호작용을 끊어버리게 됩니다.
2번이 제자리에서 붕 뜨고, 그 자리에 3번이 밀고 들어가며 겹쳐졌다고 보면 되겠네요.
아까처럼 2번에도 위치값을 주어보겠습니다

.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

top과 right에 각각 30px씩 이동하도록 시켰습니다.

붕 뜨더니 결국 정신나간곳에 자리잡고 있네요.
부모요소인 파란 박스에서 30px씩 움직여야 하는데,
viewport, 즉 브라우저 기준으로 위에서 30px 오른쪽에서 30px 이동했습니다.
이 현상이 발생하는 이유!

2번의 부모요소인 파란색이
위치 상 부모요소의 기준이 없었기 때문에
2번 박스는 망망대해로 나가 viewport를 부모요소로 여기는 것 입니다.

2번 박스를 부모의 품으로 돌려보내겠습니다.

.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

2번 박스의 부모요소인 container 클래스에 position relative 속성을 추가했습니다.

따스한 부모의 품으로 돌아간 모습입니다.

이를 통해, 우리는 유의해야 할 점이 또 하나 늘었습니다.

position: absolute;
를 사용해 배치를 하고 싶다면,

그 구조상의 부모요소에는 반드시!!

position: relative;
를 사용해 위치 기준을 줘야 한다는 점이죠.

그럼 또 다른 예시를 볼게요.

  <div class="bontainer">  
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </div>
.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

container의 부모요소인 bontainer가 등장했습니다.
두 요소 다 부모요소로써의 위치 기준에 충족하고 있어요.

그런데, container가 부모요소 위치 기준을 상실한다면 어떻게 될까요?

.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: static;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

position의 기본값은 static입니다.
즉, 현재 파란색 박스는 위치가 없는 상태라고 봐도 되죠.

container가 부모요소 위치 기준을 상실했지만,
bontainer가 기준에 충족하기에
2번 박스는 조상 요소, 즉 상위 요소의 품으로 갑니다.

그런데,

결국 조상도 2번 박스를 저버렸다고 합니다.

.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: static;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: static;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}


결국 이런 안타까움을 금치 못하는 상황이 또 발생합니다.

fixed

뷰포트를 기준으로 배치합니다.

.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: fixed;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}


fixed 선언 후 위치값을 지정하지 않았더니 여기까진 absolute와 동일합니다.

.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: fixed;
  top: 60px;
  right: 100px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

이번에는 위치값을 지정했습니다.
결과는??????

부모요소와 조상요소를 제끼고 바로 viewport를 기준으로 자리를 잡은 모습이네요.

이런 fixed는 상당히 유용하게 쓸 수 있어요.

body {
  height: 3000px;
}
.bontainer {
  width: 700px;
  height: 400px;
  background-color: violet;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: fixed;
  top: 60px;
  right: 100px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

body에 높이를 3000px로 지정했습니다.

오른쪽 스크롤을 보시면, 아래로 내려가도 2번 박스는 저 자리에 고정되어 있어요.

배너, 상단바 등 어딘가에 고정시켜 노출시킬 때 유용하게 사용 가능해 보입니다.




분량조절 실패했습니다.
To be continued

profile
: )
수제 에러코드 전문점 / 불량코드 원조 맛집
이전 포스트

Fast Campus - F.E 3기 html, css(3)

다음 포스트

Fast Campus - F.E 3기 html, css(5)

0개의 댓글