DogFootRuler

웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS

8.CSS_활용

Zoo_10th 2024. 1. 26.

1. 문서의 흐름

HTML과 CSS를 사용하여 웹 페이지를 구성하고 디자인하는 데 주요한 요소이다. HTML 문서의 구조와 요소들의 순서는 웹 페이지의 표시 순서와 관련이 있으며, CSS를 통해 스타일과 레이아웃을 조정하여 웹페이지를 랜더링 할 수 있다. 텍스트, 이미지, 입력 필드 등의 요소들은 흐름 안에서 웹 페이지에 표시되며, 부동(floating)과 클리어(clear) 속성을 사용하여 요소의 위치와 배치를 조절할 수 있다.

 1) HTML 문서에는 텍스트, 이미지, 입력 필드 등의 요소가 포함된다.

 2) 웹 브라우저는 HTML 문서를 읽고, 요소들을 화면에 표시(렌더링)한다.

 3) 요소들은 HTML 문서에서 나타난 순서대로 화면에 나타나며, 텍스트를 왼쪽에서 오른쪽, 위에서 아래로 흐르는 방식으로 표시된다.

 4) 이미지와 미디어 요소는 텍스트와 함께 표시되며, 위치와 크기는 HTML 및 CSS로 제어된다.

 5) 입력 필드와 폼은 사용자와 상호작용하는 요소로, 웹 페이지의 일부로 표시된다.

 6) CSS를 사용하여 요소의 스타일과 레이아웃을 조정하여 웹 페이지를 디자인할 수 있다.

 7) 부동(float)과 클리어(clear) 속성을 사용하여 요소의 위치와 배치를 조절할 수 있다.

 

1-1. float

CSS의 float 속성은 웹 요소의 위치를 변경하는 데 사용된다. 이 속성은 주로 웹 페이지의 레이아웃을 조정하는 데 활용되며, 주로 텍스트 주위에 이미지를 둘 때나 다양한 컬럼 레이아웃을 만들 때 유용하게 사용된다.

 

1-1-1. float 속성

 1) left : 요소를 왼쪽으로 띄운다. 이 경우 요소는 부모 요소의 왼쪽에 배치된다.

 2) right : 요소를 오른쪽으로 띄운다. 이 경우 요소는 부모 요소의 오른쪽에 배치된다.

 3) none(기본값) : 요소를 띄우지 않고, 일반적인 문서 흐름에 따라 배치한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .left-float {
      float: left;
      margin-right: 20px; /* 왼쪽 띄움 요소와 간격을 주기 위해 */
    }

    .right-float {
      float: right;
      margin-left: 20px; /* 오른쪽 띄움 요소와 간격을 주기 위해 */
    }
  </style>
</head>
<body>
  <div class="left-float">
    <img src="left-image.jpg" alt="Left Floated Image">
    <p>This is some text that flows around the left floated image.</p>
  </div>

  <div class="right-float">
    <img src="right-image.jpg" alt="Right Floated Image">
    <p>This is some text that flows around the right floated image.</p>
  </div>

  <div>
    <p>This is regular text that follows the floated elements and is not affected by the float property.</p>
  </div>
</body>
</html>

float 속성을 사용하여 이미지를 왼쪽과 오른쪽으로 띄워 텍스트가 이미지 주위로 흐를 수 있게 만드는 코드이다.

 

1-2. clear

부동(float) 속성이 적용된 요소의 다음 요소가 부동 요소와 어떻게 상호작용할지 결정하는 속성이다.

 

1-2-1. clear 속성

 1) both : 부동 요소의 양쪽(왼쪽과 오른쪽) 영향을 모두 해제한다.

 2) left : 부동 요소의 왼쪽에서부터 받는 영향을 해제한다.

 3) right : 부동 요소의 오른쪽에서부터 받는 영향을 해제한다.

부동 요소 이후에 오는 요소가 부동 요소의 공간을 함께 사용할지, 아니면 부동 요소로부터 받는 영향을 해제할지 결정할 수 있다.

부동(float)된 이미지 요소 다음에 텍스트를 배치하고 싶다면 해당 텍스트 요소에 "clear" 속성을 적용하여 이미지의 영향을 해제할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear Example</title>
    <style>
        /* 이미지에 float 속성 적용 */
        img {
            float: left;
            margin-right: 20px; /* 이미지 사이 간격을 위해 마진 설정 */
        }

        /* clear 속성을 사용하여 이미지의 영향 해제 */
        p.clear-example {
            clear: left; /* 이미지의 왼쪽 영향을 해제 */
        }
    </style>
</head>
<body>
    <h1>Clear Example</h1>
    <img src="example.jpg" alt="Example Image" width="200" height="150">
    <p class="clear-example">
        이 텍스트는 이미지 아래에 표시됩니다. 이미지에 float 속성이 적용되어 있지만 clear 속성을 사용하여 이미지 영향을 해제했습니다.
    </p>
</body>
</html>

 

2. 위치 지정

2-1. Position

"position" 속성은 CSS를 사용하여 요소의 위치를 조정하는 중요한 속성 중 하나다. 아래 "position" 속성과 관련된 각 속성값 및 위치 이동 방식에 대한 간단한 설명을 포함한다.\

 

(1) static(기본값) :

  - 요소를 문서의 흐름에 따라 배치한다. 위치를 직접 조절할 수 없다.

.element {
    position: static;
}

 

(2) relative :

  - 요소를 자신이 원래 있던 위치를 기준으로 이동시킨다. 다른 요소에 영향을 미치지 않는다.

.element {
    position: relative;
    top: 20px; /* 위로 20px 이동 */
    left: 10px; /* 왼쪽으로 10px 이동 */
}

 

(3) absolute :

  - "absolute"는 요소를 가장 가까운 "position:relative;" 또는 "position:absolute;" 속성을 가진 상위 요소를 기준으로 이동시킨다. 부모 요소 중에  "position"이 상대적이거나 절대적인 요소가 없으면 문서의 최상위 요소(<html>)를 기준으로 이동한다. 다른 요소에 영향을 미치지 않는다.

.element {
    position: absolute;
    top: 50px; /* 부모 요소 기준에서 위로 50px 이동 */
    left: 20px; /* 부모 요소 기준에서 왼쪽으로 20px 이동 */
}

 

(4) fixed : 

 - "fixed"는 요소를 뷰포트(화면)의 상대 위치에 고정시킨다. 스크롤해도 화면에 고정된다.

.element {
    position: fixed;
    top: 10px; /* 화면 위에서 10px 위치에 고정 */
    right: 20px; /* 화면 오른쪽에서 20px 위치에 고정 */
}

 

2-2. Position 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position 예시</title>
    <style>
        /* 기본 스타일 */
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 300px;
            height: 200px;
            background-color: #f0f0f0;
            position: relative;
        }
        .element {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 50px;
        }

        /* static - 기본값 */
        .static-element {
            position: static;
        }

        /* relative - 자신을 기준으로 이동 */
        .relative-element {
            position: relative;
            top: 20px;
            left: 30px;
        }

        /* absolute - 가장 가까운 relative/absolute 요소 기준 */
        .absolute-element {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        /* fixed - 화면에 고정 */
        .fixed-element {
            position: fixed;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <h2>Position 속성 예시</h2>

    <h3>Static (기본값)</h3>
    <div class="container">
        <div class="element static-element">Static</div>
    </div>

    <h3>Relative (자신을 기준으로 이동)</h3>
    <div class="container">
        <div class="element relative-element">Relative</div>
    </div>

    <h3>Absolute (가장 가까운 relative/absolute 요소 기준)</h3>
    <div class="container">
        <div class="element absolute-element">Absolute</div>
    </div>

    <h3>Fixed (화면에 고정)</h3>
    <div class="element fixed-element">Fixed</div>
</body>
</html>

"position" 속성의 다양한 사용 사례이다. 페이지를 열면 다음과 같은 네 가지 속성 예시를 확인할 수 있다.

 - 1. Static(기본값) : "Static" 박스는 문서의 흐름을 따라 배치된다.

 - 2. Relative (자신을 기준으로 이동) : "Relative" 박스는 자신의 원래 위치를 기준으로 이동한다.

 - 3. Absolute (가장 가까운 relative/absolute 요소 기준) : "Absolute" 박스는 가장 가까운 상위 "position: relative;" 또는 "position: absolute;" 요소를 기준으로 이동한다.

 - 4. Fixed (화면에 고정): "Fixed" 박스는 화면에 고정되어 스크롤에 영향을 받지 않는다.

 

2-3. 요소 겹침

2-3-1. 겹침 현상 (Overlap)

웹 문서가 렌더링 될 때, 요소들은 일반적으로 문서의 흐름에 따라 순서대로 화면에 배치된다. 그러나 때로는 다양한 이유로 요소들이 서로 겹치는 현상이 발생할 수 있다. 

 - 1. Position 속성 사용 : 요소의 위치를 변경하기 위해 CSS의 position 속성을 사용한 경우. 특히 positiion: absolute; 또는 position: relative;를 사용하는 경우 요소들이 겹칠 가능성이 높아진다.

 - 2. Float 속성 사용 : 요소를 왼쪽 또는 오른쪽으로 띄워서 텍스트나 이미지 주위로 흐르도록 만든 경우. 이 역시 요소들이 겹칠 수 있는 결과가 있을 수 있다.

 - 3. Z-index 속성 미 사용 : 겹치는 요소들의 겹침 순서를 제어하지 않는 경우, 나중에 나오는 요소가 앞선 요소를 덮어쓸 수 있다.

    *겹친 요소 간의 순서를 제어하는 z-index. (웹 화면은 2차원 평면으로 구성되지만, CSS의 z-index 속성을 사용하여 웹 요소들의 겹침 순서를 제어할 수 있다.)

 

2-3-2. z-index 속성

웹 요소의 z-축 위치를 결정한다. 다른 요소들과 겹칠 때, z-index 값을 통해 어떤 요소가 먼저 표시되는지를 제어할 수 있다.

 - z-index 값은 정수로 지정되며, 높은 값일수록 화면에서 앞에 표시된다.

 - position 속성이 기본값인 static이 아닌 다른 값으로 설정된 요소에만 적용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>z-index 예제</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: relative;
    }
    .box1 {
      background-color: orange;
      z-index: 2;
    }
    .box2 {
      background-color: tomato;
      z-index: 1;
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</body>
</html>

위 코드에서는 두 개의 박스가 겹친다. box1과 box2 클래스의 z-index 값을 설정하여 box1이 box2 위에 표시되도록 제어하고 있다.

 

2-3-3. z-index 속성의 활용

 * 요소의 겹침 현상 해결 : 여러 요소가 겹칠 때, 중요한 요소를 앞쪽으로 끌어오거나, UI 요소를 더 명확하게 표시하기 위해 사용한다.

 * 레이어 팝업 : 모달 창과 같은 팝업 요소를 화면 상단에 띄우기 위해 z-index를 활용한다.

 * 드롭다운 메뉴 : 하위 메뉴가 상위 메뉴 위에 표시되도록 z-index를 설정하여 사용자 경험을 향상한다.

 

2-3-4. 주의사항

 - z-index를 남용하지 않도록 주의해야 합니다. 지나치게 높은 z-index 값은 다른 요소와의 관계를 복잡하게 만들 수 있습니다.

 - z-index는 부모-자식 관계에서도 영향을 미칩니다. 부모 요소의 z-index 값이 자식 요소의 값에 영향을 줄 수 있으므로 이 점을 고려해야 합니다.

728x90
저작자표시 비영리 변경금지

'웹 서비스 개발(FB,BE,SERVER,DB) > HTML & CSS' 카테고리의 다른 글

9. 동작반응  (0) 2024.01.31
7. Text  (0) 2024.01.22
6. CSS_Box Model  (0) 2024.01.21
5. CSS (Cascading Style Sheets)  (0) 2024.01.21
4. HTML 멀티미디어  (0) 2024.01.21

댓글

티스토리툴바