5. CSS 속성2

in Lang on HTML


1. 위치속성

  • 절대적 위치 좌표
    • 요소의 x좌표와 y좌표를 설정해 절대적 위치 지정
  • 상대적 위치 좌표
    • 요소를 입력한 순서대로 상대적 위치 지정
  • CSS의 positioning
    • 일반흐름
      • normal flow
      • 기본값
    • 절대위치
      • absolute positioning
      • 키워드 absolute, relative
    • float 방식
<head>
  <style type="text/css">
    *{margin:0;}
    div{width:150px;height:120px;text-align:center;position:absolute;}
    .box1{background:pink;top:30px; }
    .box2{background:skyblue;left:40px;bottom:20px; }
    .box3{background:yellow;right:0px;top:50%;}
  </style>
</HEAD>
<BODY>
  <div class="box1">
    top:30px
  </div>
  <div class="box2">
    left:40px;bottom:20px
  </div>
  <div class="box3">
    right:0px top:50%
  </div>
</body>

캡처

static

  • position의 기본값
  • 요소가 본래 가지고 있는 흐름을 가진다

relative

  • static 속성값과 기본적으로 같은 흐름을 가진다
  • 위치 조절을 위한 좌표값을 가질 수 있다
  • 위치의 기준점을 상대적으로 잡는다
  • 기본값인 static일 때의 위치를 기준으로 위치값을 가진다

absolute

  • 요소의 순서에 따른 흐름을 무시하고 절대적인 위치를 가진다
  • 다른 요소들은 절대위치를 가진 엘리먼트를 인식하지 않는다
    • 겹쳐서 표현
  • 자식요소가 absolute일 경우 부모요소는 영역을 차지하지 않는다
    • 부모요소에 크기설정을 하여 영역을 차지하게 만들 수 있다
    • 부모 요소를 relative로 설정하여 자식이 부모의 위치를 기준으로 좌표를 설정하게 할 수 있다

z-index

  • 요소의 z 좌표값을 처리
  • position 값이 absolute, relative인 경우 적용
  • 정수 및 음수값을 가지며, 숫자가 클 수록 위에 위치

overflow

  • 내부 요소가 부모의 범위를 벗어날 때 처리할 속성
    • hidden
      • 영역을 벗어나는 부분을 보이지 않게 한다
    • scroll
      • 영역을 벗어나는 부분을 스크롤로 만든다
      • 특정한 방향으로만 스크롤을 생성할 때
        • overflow-x, overflow-y

float

개요

  • left : 태그를 왼쪽에 붙인다
  • right : 태그를 오른쪽에 붙인다
  • 부유하는 대상을 만들 때 사용하는 속성
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
  <img src="sun.jpg"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>In hac habitasse platea dictumst. Donec lobortis augue a metus.</p>
</body>

캡처

  • img태그는 inline, p태그는 block 속성으로 그림과 글자가 분리되어 출력
<style>
img {
  float: left; 
   /*이미지를 왼쪽에 떠 있게 함*/
  }
</style>

캡처

  • img 태그에 float 속성 적용 시 글자위에 부유하게 된다

float을 이용한 수평 정렬

  • 첫번째 위치한 태그가 먼저 붙고, 두번째 위치한 태그가 이어붙는다
<head>
<title>Float Style Property</title>
<style>
  .box {
    width: 100px; height: 100px;
    background-color: red;
    margin: 10px; padding: 10px;
    /* 태그를 왼쪽으로 붙입니다. */
    float: left;
  }
</style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
</body>

캡처

clear 속성

  • float 속성 이용 시, 다음에 넣는 요소들에도 똑같은 속성이 전달된다

    clear : 속성값;

  • float 속성을 무효로 만든다
    • clear:left, clear:right, clear:both, clear:none

float의 예

box1이 float:right

캡처

box1이 float:left

캡처

box 3개 모두 float:left

캡처

clear 적용 시

div#wrap{width:500px;}
*{margin:0;}
div{width:150px;height:50px;font-weight:bold;}
.box1{background:pink;float:left;}
.box2{background:skyblue;float:left;}
.box3{background:yellow;clear:both;}
.box4{background:green;float:right;}
.box5{background:silver;float:right;}

캡처