[중앙정보처리학원] CSS* Position

 

 

Position을 사용하면 문서상 요소를 자유롭게 배치가 가능하다.

 

속성 값들

 

 

쉽게 말해 relative를 쓰면 형제 요소들한테 영향이 갈 수 있다.

absolute 는 반드시 조상요소에 position이 있어야 그 요소를 기준으로 움직일 수 있다. 없다면 전체 뷰포트를 기준으로 움직인다.

 

 

 

 

 

      /* 텍스트 중앙 정렬 */
      
      /* 1번 */
      /* text-align: center; */
      
      
      /* 2번 */
      /* line-height: 100px;  글자 높이를 박스크기랑 맞추기 */
      
      
      /* 3번 */     
      display: flex; 
      justify-content: center;
      align-items: center;

그 외 텍스트 중앙 정렬 하는 방법들. 

 

 

 

 

ㅡ

 

 

fixed는 언제나 화면전체 기준으로 움직인다. 

fixed와 absolute를 사용하면 가로 100%가 깨지기 때문에 width 100%를 꼭 지정해 주어야 한다.! 

 

예제 코드

  <style>
    body {
      height: 2000px;
    }
    .clearfix::after {
      content:'';
      display: block;
      clear: both;
}

    header {
      width: 100%;
      border-bottom: 2px solid gray;
      position: fixed;
      /* 픽스나 앱솔 쓰면 가로 100%깨져서 width 100% 써줘야함 */
      /* fixed는 언제나 화면전체 기준으로 움직임 */
      top: 0;

    }
    header h1 {
      font-size: 40px;
      padding: 0;
      margin: 20px 20px 30px;
      /* background: orange; */
      float: left;
    }

    header nav {
      /* background: tomato; */
      float: right;
    }

    header nav ul {
      list-style: none;
      padding: 0;
      margin-top: 30px;
    }

    header nav ul li {
      /* border: 1px solid #000; */
      float: left;
      font-size: 1.5em;
      text-wrap: 700px;
      margin-right: 30px;
    }

    span {
      width: 200px;
      height: 200px;
      background: orange;
      font-size: 3em;
      margin-top: 150px;


      /* 인라인 요소에 float이나 position : absolute를 걸면
         자동으로 블록요소로 변경됨 */
      /* float: left; */
      /* position: absolute; */

    }

  </style>

 

 

 

 

box-shadow를 통해 x과 y축을 지정 하여 그림자를 만들 수 있다. tex-shadow도 같은 형식으로 된다.

보통 여러 Position들이 나열 되어있을 때 마지막에 작성한 것이 위로 온다. 

 

 

z-index를 사용하면 요소들에 값을 직접 정해 앞뒤를 나열 할 수 있다. 

 

예제 코드

  <style>

    .clearfix::after {
      content:'';
      display: block;
      clear: both;
    }

    .container {
      width: 80%;
      margin: 50px auto;
    }
    .box {
      width: 100px;
      height: 100px;
      background: tomato;
      border: 4px solid red;
      border-radius: 15px;
      font-size: 2em;
      display: flex;    
      justify-content: center;
      align-items: center;
      float: left;
      color: #fff;

      /*          x축 y축 블러크기 색상 */
      box-shadow: 2px 2px   20px  #000;
      text-shadow: 1px 1px  20px #000;

      margin-right: -30px;
      position: relative;
    }
    .box2 {
      position: relative;
      left: 100px;
      z-index: 1;
    }
    .box4 {
      position: relative;
      z-index: -1;
    }
    /* 보통 나중에 작성한게 맨위 */
    
  </style>