국비지원 JAVA 풀스택 과정/HTML+CSS3

[HTML+CSS3] 위치 속성

ODaram 2022. 9. 29. 11:47
스타일 시트 속성
1. 박스 속성
2. 글자 속성
3. 위치 속성
4. 배경 속성

 위치속성 : position 속성

· 박스의 위치를 지정하는 스타일 속성이다.
· position 속성을 지정하면 블록형 박스의 너비값의 기본값이 '0'이된다.     
  따라서 반드시 width 속성으로 너비값을 지정해야한다.

  position 속성의 속성값

1. relative : 상대적인 위치를 지정, 위치 지정 속성을 잘 쓰지 않는다.     
                    ※부모 요소에 사용한다.
2. absolute : 절대 위치를 지정, 위치 지정 속성을 반드시 사용한다.     
                     ※자식 요소에 사용한다.
                     ※자식 요소가 여러 개일 경우 자식 요소들이 겹친다.
                    (absolute : relative를 기준값으로 하기 때문에 부모 값이 바뀌지 않으면 위치가 변경되지 않음)
3. fixed : 고정 위치를 지정, 위치 지정 속성을 반드시 사용한다.
                     ※ 박스 요소가 부유한다.
                     위치 지정 속성 : left, top, right, bottom(단위 : px, %)
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>위치속성</title>
  <style>
    * {margin:0; padding:0; border-sizing:border-box;} /*여백 없애기*/
    .box1 {/*브라우저 크기가 바뀌면 여백의 크기도 바뀐다. 브라우저 해상도가 바뀌면 위치가 바뀐다.*/
    /*위치*/ /*position:absolute; left:50%; top:50%; margin:-150px 0 0 -200px; */ /*중앙정렬 시*/
    position:absolute; left:300px; top:150px;
    /*박스*/ width:500px; height:350px;  
    /*글자*/
    /*배경*/  background:orange;  
    }
    .pbox {
      /*position:absolute; left:50%; top:50%; margin:-150px 0 0 -200px; */ /*relative 에서는 잘 쓰지 않음 */
      position:relative; 
      width:400px; height:300px; margin:200px 0 0 100px; /*위 오른쪽 아래 왼쪽*/
      background:skyblue;
    }
    .cbox1 {
      /*위치*/position:absolute; left:100px; top:50px; /*absolute : left,top 무조건 써야함*/ 
      /*박스*/width:200px; height:150px;
      /*배경*/background:brown;
    }
  </style>
</head>
<body>
  <div class="box1"></div>

  <div class="pbox">
    <div class="cbox1"></div>
  </div>

 

    > position 속성값을 이용한 기본 예제

 <!DOCTYPE html>
 <html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>위치속성</title>
   <style>
     * {margin:0; padding:0; border-sizing:border-box;} /*여백 없애기*/
     .container { /*부모*/
       width:350px; margin:100px 50px; /*위아래 100, 좌우 50*/
       border:1px solid #000; border-radius:5px;
     }
     .container h3 { /*자식*/
       font-size:26px; color:sienna; line-height:50px; /*박스*/
       text-align:center; text-transform:uppercase;      /*글자*/
     }
     .container img { /*자식*/
       width:100%;
     }
     .container p { /*자식*/
       /*텍스트는 contents를 이동해서 p나 h박스는 margin을 쓰지 않는다.*/
       /*★ paading 을 사용한다. ★ */
     }
   </style>
 </head>
 <body>
     <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
       <h3>joayong</h3>
       <img src="../{01.HTML5}/images/150x150/joayong_run(1).jpg">
       <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
     </div>
     <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
       <h3>joayong</h3>
       <img src="../{01.HTML5}/images/150x150/joayong_run(1).jpg">
       <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
     </div>
 </body>
 </html>

수직 정렬되어 노출됨

1. 좌 우 정렬 시키기 위해 flex를 적용 시킴

<head>
	<style>
        .pcontainer { /*container를 좌 우로 배치 시키기*/
          display:flex;
          justify-content:left; /*아이템 수평 정렬*/
          align-items:center; /*아이템 수직 정렬*/
    	}
    </style>
</head>
<body>
	 <div class="pcontainer">

        <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
          <h3>joayong</h3>
          <img src="../{01.HTML5}/images/150x150/joayong_run(1).jpg">
          <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
        </div>
        <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
          <h3>joayong</h3>
          <img src="../{01.HTML5}/images/150x150/joayong_run(1).jpg">
          <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
    </div>
</body>

좌 우 배치됨

2. 부모 박스에 position값을 주게되면 height가 0이되어 무너지고, 아래(p) 있는 요소가 위(img>h>... 순으로)에 있는 요소를 덮는다. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>위치속성</title>
  <style>
    * {margin:0; padding:0; border-sizing:border-box;} /*여백 없애기*/
    .container { /*부모*/
      position:realtive;
      width:350px; margin:100px 50px; /*위아래 100, 좌우 50*/
      border:1px solid #000; border-radius:5px;
    }
    .container h3 { /*자식*/
      position:absolute;
      font-size:26px; color:sienna; line-height:50px; /*박스*/
      text-align:center; text-transform:uppercase;      /*글자*/
    }
    .container img { /*자식*/
      position:absolute;
    }
    .container p { /*자식*/
      position:absolute;
      /*텍스트는 contents를 이동해서 p나 h박스는 margin을 쓰지 않는다.*/
      /*★ paading 을 사용한다. ★ */
    }
  </style>
</head>
<body>
    <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
      <h3>joayong</h3>
      <img src="images/profile/joayong_soso(1).png">
      <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
    </div>
    <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
      <h3>joayong</h3>
      <img src="images/profile/joayong_soso(1).png">
      <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
    </div>
</body>
</html>

3. 부모 박스에 height 값을 지정해주고 좌표값으로 p의 위치를 지정해준다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>위치속성</title>
  <style>
    * {margin:0; padding:0; border-sizing:border-box;} /*여백 없애기*/
    .container { /*부모*/
      position:relative;
      width:350px; margin:100px 50px; /*위아래 100, 좌우 50*/
      height:550px;
      border:1px solid #000; border-radius:5px;
    }
    .container h3 { /*자식*/
      position:absolute;
      font-size:26px; color:sienna; line-height:50px; /*박스*/
      text-align:center; text-transform:uppercase;      /*글자*/
    }
    .container img { /*자식*/
      position:absolute;
    }
    .container p { /*자식*/
      position:absolute;
      left:15px; top:400px; right:15px;
      /*텍스트는 contents를 이동해서 p나 h박스는 margin을 쓰지 않는다.*/
      /*★ paading 을 사용한다. ★ */
    }
  </style>
</head>
<body>
    <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
      <h3>joayong</h3>
      <img src="images/profile/joayong_soso(1).png">
      <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
    </div>
    <div class="container"> <!--타이틀+이미지+텍스트 와 같은 형태로 많이 쓰임-->
      <h3>joayong</h3>
      <img src="images/profile/joayong_soso(1).png">
      <p>비둘기, 까닭이요, 내 있습니다. 새워 이제 당신은 나는 어머님, 하나에 하나에 멀리 봅니다. 별을 피어나듯이 멀듯이, 별 불러 까닭입니다. 그리고 옥 내 오면 사람들의 하늘에는 프랑시스 남은 릴케 까닭입니다. 이런 추억과 패, 이름자 멀리 밤이 멀듯이, 아침이 까닭입니다.</p>
    </div>
</body>
</html>

4. 이미지 영역에 top:50px 값을 주어 타이틀과 거리를 띄운다.

5. 타이틀의 위치를 가운데로 변경한다.

6. 가운데 정렬이 맞지 않는 경우

     ① transform:translateX(-50%)을 사용하거나 (X : (with 값을 알 수 없을 때) 수평으로 이동)

     ② width:100%; text-align:center; 를 사용하여 가운데 정렬해준다.

7. 부모(container) 박스에 마우스 오버 시 위로 15px 이동, 텍스트 색을 blueviolet으로 변경한다.

8. 컨테이너에 마우스 오버 시 박스 내부 이미지를 위로 70px 이동하고 투명하게 만든다.

9. 컨테이너에 마우스 오버 시 컨테이너 내부의 텍스트를 위로 250px 띄운다.