레이아웃

display를 통하여 inline 요소를 block 요소로, block 요소를 inline 요소로 바꿀 수 있음.

 

<inline>

-ex. span

-영역의 크기가 내부 콘텐츠 크기로 정해짐.

-margin, padding의 top과 bottom을 지정할 수 없음 (좌우여백은 가능)

-여러 요소가 가로 배치가 된다. 

 

 

<block>

-ex. div

-영역의 크기를 width와 height를 지정할 수 있음.

-width를 지정하지 않으면 가로 전체를 차지한다

-여러 요소가 세로 배치가 된다.

 

<inline-blick>

-ex. input

-영역의 크기를 width와 height를 지정할 수 있음.

-여러 요소가 가로 배치가 된다. 

 

    <span>1</span>

    <span>2</span>

    <span>3</span>

span{

  display: block;

}

 

---

요소 없애는 방법 

display none

    <div class="box1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque velit sint iusto quos cumque itaque voluptatem odio totam nihil autem ratione consectetur, ad impedit vitae nam in quasi facilis repellat.</div>

    <div class="box2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque velit sint iusto quos cumque itaque voluptatem odio totam nihil autem ratione consectetur, ad impedit vitae nam in quasi facilis repellat.</div>

    <div class="box3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque velit sint iusto quos cumque itaque voluptatem odio totam nihil autem ratione consectetur, ad impedit vitae nam in quasi facilis repellat.</div>

 

 

div {

  height:200px;

  border: solid;

}

.box2 {

  display: none;

}

.box1 {

  background-color: aqua;

}

.box2{

  background-color: green;

}

.box3{

  background-color: blueviolet;

}

box2의 green 색이 없어짐 (코드상으로는 존재하지만 보여지지않음)

 

visibility hidden

문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨긴다.

기본값: visivility: visible;

div {

  height:200px;

  border: solid;

}

.box2 {

  visibility: hidden;

}

.box1 {

  background-color: aqua;

}

.box2{

  background-color: green;

}

.box3{

  background-color: blueviolet;

}

자리는 차지하지만 눈엔 보이지 않음

---

float 

한 요소가 보통흐름으로부터 빠져나와 또다른 배치가 가능해짐.

-float: left / right ;

   <div class="image"></div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ipsa ratione maxime veniam reiciendis unde rerum commodi quo consequuntur saepe, obcaecati aliquam repellat, iure, natus ex hic autem recusandae fugit.</p>

.image {

  width: 100px;

  height: 100px;

  background-color: hotpink;

  border: 5px solid blue;

  float: left;

  margin:10px;

}

<div>는 블록요소이기 때문에 가로 전체를 차지하는데 float를 통해 <p>를 옆으로 흐르듯이 데려올수 있다. (image를 자기가 갈수 있는 왼쪽 끝으로 감)

 

 

---

normal flow

요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법

---

position

기본값: position:static (=normal flow)

블록요소는 가로 최대, 인라인요소는 컨텐츠에 맞춰서 ... 

position- relative

-일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top, right, bottom, left 의 값에 따라 적용됨.

-top과 bottom을 같이 지정할경우 bottom 값은 무시하게 됨 (left, right일경우 right가 무시) 

-음수값도 적용 가능

    <div></div>

    <div id="box"></div>

    <div></div>

div{

  width: 200px;

  height: 200px;

  border: 5px solid orangered;

  margin-left: 150px;

}

#box{

  background-color: peachpuff;

  position: relative;

  top: 50px;

}

원래 있던 위치에서 아래로 50px 내려옴

 

position- absolute

-일반적인 문서 흐름에서 제거하고 대신 가장 가까운 위치 지정 부모요소에 대해 상대적으로 배치한다. 

-부모 요소 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 

----> 부모요소 중에서 position이 staric이 아닌 요소를 찾아 기준점을 삼는다. 

-부모 요소 중 위치지정 요소기 앖디면 초기 컨테이닝블록 (body) 을 기준으로 삼는다. 

   <div></div>

    <div id="box"></div>

    <div></div>

 

div{

  width: 200px;

  height: 200px;

  border: 5px solid orangered;

}

#box{

  width:  150px;

  height: 100px;

  border-color:  darkblue;

  background-color: cornflowerblue;

  border-radius: 30px;

 

}

#box{

  width:  150px;

  height: 100px;

  border-color:  darkblue;

  background-color: cornflowerblue;

  border-radius: 30px;

  position: absolute;

}

position :&nbsp; absolute ;

 

position- fixed

-요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 x 

-뷰포트의 초기 컨테이닝블록을 기준으로 삼음

 

    <div></div>

    <div id="parent">

        <div id="box"></div>

        </div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

 

div{

  width: 200px;

  height: 200px;

  border: 5px solid orangered;

}

#parent {

  position: relative;

}

#box {

  width: 150px;

  height: 100px;

  border-color: darkblue;

  background-color: cornflowerblue;

  border-radius: 30px;

  position: fixed;

  bottom: 40px;

  right: 40px;

뷰포트를 기준으로 하기 때문에 스크롤을 올리고 내리고 할때에도 저 위치를 계속 유지.

웹페이지 보면 top 버튼이나 네비게이션바를 이용 할때 많이 사용 

 

position- sticky

요소를 일반적인 문서 흐름에 따라 배치하고 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는 부모과 표 관련 요소를 포함한 컨테이닝블록 (가장 가까운 블록레벨 부모)를 기준으로 위치

-자식의 자식 요소에 붙이면 효과 x 

    <div></div>

    <div id="parent">

        <div id="box"></div>

        </div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

div{

  width: 200px;

  height: 200px;

  border: 5px solid orangered;

}

#parent {

  position: sticky;

  top: 100px;

  left: 100px;

}

#box {

  width: 150px;

  height: 100px;

  border-color: darkblue;

  background-color: cornflowerblue;

  border-radius: 30px;

스크롤을 내리면 같이 딸려옴, 다시 올라가면 자기 자리에 배치

overflow

-바깥쪽에 있는 컨테이너보다 내부에 있는 콘텐트가 내용이 넘쳐 흐를때 

-단축속성. over-flow-x, overflow-y 

기본값: overflow:visible

overflow: hidden (숨겨짐)

overflow: scroll (스크롤이 만들어짐)

overflow: auto (내용이 넘치지 않으면 visible, 흐른다면 자동으로 scroll 됨)

 

    <div>

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto molestias obcaecati cupiditate et. Veniam, provident id eligendi adipisci laborum veritatis esse libero cum accusamus rerum ratione a vitae soluta tempora?

        <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur atque autem optio quo accusamus incidunt dignissimos odio libero tenetur nemo? Veniam odio numquam at deserunt autem temporibus pariatur dolorem consequatur!

    </div>

    <h1>안녕하세용</h1>

    <h1>안녕하세용</h1>

    <h1>안녕하세용</h1>

    <h1>안녕하세용</h1>

div {

  background-color:  bisque;

  width: 200px;

  height: 225px;

  overflow: scroll;

}

---

z-index

z축의 순서를 지정

기본값: z-index : auto ;

 

    <div id="box1">1</div>

    <div id="box2">2</div>

    <div id="box3">3</div>

   

div{

  width: 150px;

  height: 150px;

  background-color: blanchedalmond;

  border: 3px solid orangered;

}

#box2, #box3 {

  margin-top: -30px;

}

#box2 {

  margin-left: 40px;

}

코드 순서에 따라 1번위에 2번 2번위에 3번

#box2 {

  margin-left: 40px;

  position: relative;

}

relative들은 01static인 애들보다 앞으로 나오게 됨.

#box2 {

  margin-left: 40px;

  position: relative;

  z-index: 1;

}

#box3 {

  position: relative;

  z-index: 99;

}

z-index가 3번이 더 크기 떄문에 더 앞으로 나옴

 

웹페이지를 만들때 최상위에 올라와야하는 것들 (ex경고창)이 있을경우 z-index 값을 큰 값을 줘서 무조건 위에 뜰 수 있도록 한다.