2017-07-05 html 필기

@마크다운

## 레이아웃 해결법

임의의요소 삽입

<br style=clear:both>

부모요소도 띄우기

float: left,right,both

오버플로우 사용

overflow: auto;

overflow:hidden;

**가상선택자를 이용**

after(뒤) or before(앞) 가상 선택자 사용

ex)

.float-frame {

      width: 300px;

      background-color: #eee;

      border: 1px solid#ddd;

      padding: 10px;

      float: left;

    }

    

    .float-frame::after {

    <!-- 공백의값추가-->

      content:"";     

    <!-- 보이지않게 -->

      display: block;

      height: 0;

      clear: both;

    }

    .float-unit {

      width: 50px;

      background-color: #333;

      color: #fff;

      font-size: 18px;

      font-weight: bold;

      text-align: center;

      padding: 15px 0;

      margin-right: 5px;

      float: left;

    }

    

##css 포지션

- static 기본값

- relative :top,left,right등의 속성 사용가능 (-값가능)

- .relative1 {

   width: 200px;

   height: 200px;

   /*position: relative;*/

 }

 .relative2 {

   position: relative;

   width: 50px;

   height: 50px;

   top: 30px;

   left: 20px;

 }

- fixed 브라우저 창 기준으로 위치

-  .fixed {

   position: fixed;

   width: 100px;

   height: 50px;

   background-color: blue;

   right: 10px;

   bottom: 10px;

 } 

- absolute 자신가 가장 가까운 position이 static이 아닌 부모를 기준(없으면 본문(body)기준)

##CSS 가운데 정렬

### 가로 가운데 정렬

전체크기가 정해져있지 않은경우 내용의 width를 지정후 좌/우여백(margin)을 auto로 지정

### 가로/세로 가운데 정렬

- line-height 사용시

잘 안씀;;

- absolute 사용

-요소를 absolute포지션으로 설정 후 

상단과 왼쪽에서 부모의 50%만큼 이동시키고 자신의 높이와 가로를 -50%만큼 이동(보정개념)

.innerbox {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 150px;

    height: 30px;

    background-color: green;

    color: white;

    text-align: center;

  }