position 속성, Block level element&Inline element(박스 기본 영역)

2021. 11. 4. 17:34

position 속성

html에서 position 속성을 통해 요소의 위치를 결정시킬 수 있다.

position속성을 통해 실제 화면에 원하는 방식으로 위치되게끔 만드는 것.

CSS에서 요소의 위치를 결정하는 방식에는 4가지 방식이 있다.

1. 정적 위치(static position) 지정 방식

2. 상대 위치(relative position) 지정 방식

3. 고정 위치(fixed position) 지정 방식

4. 절대 위치(absolute position) 지정 방식

1. 정적 위치(static position) 지정 방식

정적 위치는 단순히 웹 페이지의 흐름에 따라 차례로 요소를 위치시키는 방식이다.

모든 html 요소의 position 속성값은 기본적으로 정적 위치(static position)이다.

2. 상대 위치(relative position) 지정 방식

상대 위치(relative position)는 해당 HTML 요소의 기본 위치를 기준으로 요소를 위치시키는 방식이다.

HTML 요소의 기본 위치란→ 해당 요소가 정적 위치(static position)일 때 결정되는 위치를 의미한다. 한마디로 기본값!

3. 고정 위치(fixed position) 지정 방식

고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 요소를 위치시키는 방식이다.

뷰포트를 기준으로 상대적인 위치를 설정하게 된다.

뷰포트(viewport)란→ 각각의 기기마다 요구되는 화면 크기.

예를 들어 pc모니터와, 태블릿, 스마트폰은 각기 다른 기준의 화면을 갖게 된다. 반응형 웹사이트 제작 시 중요.

4. 절대 위치(absolute position) 지정 방식

절대 위치가 작동하기 위해서는 기준이 필요하다.

바로 상위의 부모요소를 기준으로 상대적인 위치를 설정하게 된다.

반드시 부모 요소가 있어야 하는 것은 아니다.

부모 요소를 설정하지 않을 시→ body를 기준으로(body를 부모요소로 인식) 작동한다.

Block level element, Inline element - 박스 기본 영역

영역 사용 범위

Block level element	화면(display)의 전체 영역을 사용.
Inline element	화면(display)의 특정 영역(한정된 영역)만을 사용.

화면(display) 영역을 얼마만큼 사용하는가, 하는 특성.

얘네는 태그는 아니고 일종의 특성이다.

~~속성...같은 걸로 봐도 되나?~~

예를 들어 h1태그는 특성상 기본적으로 Block level element에 해당한다.

화면의 전체 영역 → 이 말은 화면 가로 최대치를 쫙 차지한다고 보면 됨.

▶예시1

<!DOCTYPE html>
<html lang="en">
<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>box01</title>

  <style>
    /*block level element -> 
    화면의 전체 영역을 사용.*/
    h1 {
      border-width: 5px;
      border-color: green;
      border-style: solid;
    }

    /*inline element ->
    화면의 특정 영역만을 사용.*/
    a {
      border-width: 5px;
      border-color: blueviolet;
      border-style: solid;
    }
  </style>

</head>
<body>

  <h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.

</body>
</html>

영역 사용 범위를 바꾸고 싶을 때

뭔 소린고 하면...

· Block level element를 → Inline element처럼 사용하고 싶다면,

css에서 Block level element특성에 해당되는 곳에 → Inline element요소를 넣으면 됨. 혹은,

· Inline element를 → Block level element처럼 사용하고 싶다면,

css에서 Inline element특성에 해당되는 곳에 → Block level element요소를 넣으면 됨.

▶예시2

위 예시1을 바탕으로,

· h1에 display:inline;을 삽입해, Block level element를 → Inline element로.

· a에 display:block;을 삽입해, Inline element를 → Block level element로.

<!DOCTYPE html>
<html lang="en">
<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>box02</title>

  <style>
    /*block level element -> 
    화면의 전체 영역을 사용.
    inline처럼 화면의 일부분만을 사용하고 싶다면, 
    inline요소를 넣어주면 됨.*/
    h1 {
      border-width: 5px;
      border-color: green;
      border-style: solid;
      display:inline;
    }

    /*inline element ->
    화면의 특정 영역만을 사용.
    block처럼 화면 전체를 사용하고 싶다면,
    block요소를 넣어주면 됨.*/
    a {
      border-width: 5px;
      border-color: blueviolet;
      border-style: solid;
      display:block;
    }
  </style>

</head>
<body>

  <h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.

</body>
</html>

개발자를 꿈꾸며