[새싹(SeSAC) 프론트엔드] day05 221021 수업 복습

뉼👩🏻‍💻 2022. 10. 21. 11:41

728x90

SMALL

위치속성

방법	설명
절대	요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정
상대	요소를 입력한 순서에 따른 상대 위치를 지정

position

키워드	설명
static	(디폴트) 상대 위치 좌표 설정
relative	초기 위치에서 상하좌우로 이동
absolute	부모를 기준으로 절대 좌표
fixed	화면을 기준으로 절대 좌표

1. position : static -- top, bottom, left, right 속성 값은 적용 안됨

:브라우저의 디폴트 배치 방식

: HTML 태그의 작성된 순서대로 출력 위치를 정함

PowerPoint 프레젠테이션

2. position: relative -- 처음 있던 위치를 기준으로 이동

+ 값을 기준으로 옆에 무언갈 생긴다는 느낌으로 생각하기

- top/bottom 동시 지정 시 bottom 무시

- left/right 동시 지정 시 right 무시

(*) 실습

[코드]

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>relative- 2</title>
    <style>
      body {
        text-align: center;
      }
      div {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        background-color: red;
        display: inline-block;
        color: #fff;
      }
      .h:hover {
        position: relative;
        top: 15px;
        left: 15px;
        background-color: green;
      }
      .k:hover {
        position: relative;
        bottom: 15px;
        right: 15px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <h3>상대 배치, relative</h3>
    <hr />
    <div>t</div>
    <div class="h">h</div>
    <div>a</div>
    <div>n</div>
    <div class="k">k</div>
    <div>s</div>
  </body>
</html>

[결과]

(*) line-height : 글자 div 정 가운데 배치

[코드]

div {
  /* line-height 값을 height 값만큼 주면 글자가 정 중앙에 옴 */
  line-height:50px;
}

[결과]

3. position : absolute

1. 내 컨텐츠 영역만큼으로 크기가 줄어듦

2. 부모를 지정을 안해주면 position값이 지정된 부모까지 계속 올라감(statice이 아닌 relative가 있는 부모)
➡️ 없으면 (0, 0)을 기준으로 함
: 모든 부모에 relative가 있으면 제일 가까운 부모의 relative값을 기준으로 하게 됨

3. 부모를 기준으로 잡고 싶다면 원하는 부모에 relative를 넣어줘야 함

(*) 실습

[코드]

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>relative</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .parent {
        border: 3px solid blue;
        /* 바로 부모가 아니더라도 relative가 지정되어 있다면
        absolute를 지정한 자식은 여기를 기준으로 값을 설정하게 */
        position: relative;
      }
      .parent2 {
        border: 3px solid green;
        /* 부모를 기준으로 자식을 옮기고 싶으면 
        부모 : relative
        자식 : absolute */
        position: relative;
      }
      .child {
        border: 3px solid red;
        /* absolute 
        내 컨텐츠 영역만큼으로 크기가 줄어듦
        부모를 지정을 안해주면 최상위 부모를 기준으로 잡음 
        부모를 기준으로 잡고 싶다면 부모에 relative를 넣어줘야 함 
        */
        position: absolute;
        left: 200px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      parent
      <div class="parent2">
        parent2
        <div class="child">child</div>
      </div>
    </div>
  </body>
</html>

[결과]

4. position: fixed

: 스크롤하거나 브라우저의 크기를 변경해도 브라우저 화면에 항상 보임

: left, top, right, bottom 속성 값으로 특정 위치에 고정

(*) 실습

[코드]

<!DOCTYPE html>
<html lang="en">
<head>
  <title>fixed</title>
  <style>
    h3{
      text-align: center;
    }
  #fixed{
    position: fixed;
    bottom: 340px;
    right: 100px;
    width: 120px;
    padding: 5px;
    background: red;
    color: white;
  }
  </style>
</head> 
<body>
  <h3>Merry christmas</h3>
  <hr>
  <img src="tree.png" alt="크리스마스 트리">
  <div id="fixed">메리크리스마스</div>
</body>
</html>

[결과]

5. z-index

:HTML 태그들을 z축을 따라 수직으로 쌓는 순서를 지정

- 속성 값이 클수록 위에 쌓임

defalut 값으로 되돌리고 싶다면 값을 ' 0 '으로

(*) 실습

[코드]

<!DOCTYPE html>
<html lang="en">
<head>
  <title>z-index </title>
  <style>
  .box{
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .modell{
    background-color: red;
    left: 10px;
    top: 10px;
    /* z-index: 1/; */
    z-index: 3;
  }
  .model2{
    background-color: green;
    left: 50px;
    top: 50px;
    z-index: 1;
  }
  .model3{
    background-color: blue;
    left: 90px;
    top: 90px;
    z-index: 4;
  }
  </style>
</head>
<body>
  <!-- div는 겹쳐서 작성 시 맨 마지막에 작성한 것이 최상단에 올라옴 -->
  <div class="box modell"></div>
  <div class="box model2"></div>
  <div class="box model3"></div>
  
</body>
</html>

[결과]

6. overflow

:내부 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법

* 블록태그에만 적용됨

키워드	설명
visible	(디폴트) 내용이 잘리지 않고 영역을 넘어 출력
hidden	영역을 벗어나는 부분을 숨김
scroll	스크롤 생성
auto	내용이 부모 영역을 넘어가면 자동으로 스크롤 생성

float

- 태그를 오른쪽이나 왼쪽에 항상 배치

- 항상 같은 위치에 출력할 광고나 공지 등에 적합

키워드	설명
left	태그를 왼쪽에 붙이기
right	태그를 오른쪽에 붙이기

(+) 클래스에 이름 2개이상 넣기

- 필요한 만큼 넣으면 됨

- 구분은 띄어쓰기로

(*)실습

[코드]

<!DOCTYPE html>
<html lang="en">
<head>
  <title>class name - 2 </title>
  <style>
  .box{
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .modell{
    background-color: red;
    left: 10px;
    top: 10px;
  }
  .model2{
    background-color: green;
    left: 50px;
    top: 50px;
  }
  .model3{
    background-color: blue;
    left: 90px;
    top: 90px;
  }
  </style>
</head>
<body>
  <!-- div는 겹쳐서 작성 시 맨 마지막에 작성한 것이 최상단에 올라옴 -->
  <div class="box modell"></div>
  <div class="box model2"></div>
  <div class="box model3"></div>
</body>
</html>

[결과]

div는 겹쳐서 작성 시 맨 마지막에 작성한 것이 최상단에 올라옴

➡️ background-image 는 처음에 작성한 이미지가 최상단, 뒤로 쌓이는 느낌

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅(금)

728x90