IT 강좌 CSS 기초 026_표시, 가시성, 효과

1
요소를 숨겨서 페이지에서 보이지 않게 하고 공간을 차지하지 않으며 레이아웃에 영향을 주지 않습니다. 요소가 페이지에 표시되지 않습니다.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">테스트 텍스트</div>ABC123

1
요소를 블록 요소로 표시합니다. 페이지에서 블록 형태로 표시되며, 너비는 기본적으로 부모 컨테이너의 100%입니다.
2
블록 요소는 전체 너비를 차지하며, 앞뒤에 줄바꿈이 있습니다.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">하이퍼링크 테스트</a>
2
    <br>
3
    <a class="base" href="">하이퍼링크 테스트</a>

1
요소를 인라인 요소로 표시합니다. 요소가 같은 줄에 표시되며, 한 줄을 독점하지 않고, 너비는 내용에 의해 결정됩니다.
2
인라인 요소는 필요한 너비만 차지하며, 강제 줄바꿈을 하지 않습니다.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">단락 테스트</p>
2
    <p class="base">단락 테스트</p>

1
요소를 인라인 블록 요소로 표시합니다. 요소가 같은 줄에 표시되지만, 너비, 높이 등 블록 요소의 속성을 설정할 수 있습니다.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">단락 테스트</p>
2
    <p class="example1">단락 테스트</p>
3
    <p class="example2">단락 테스트</p>

1
요소를 보이게 설정합니다.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">테스트 텍스트</div>ABC123

1
요소를 보이지 않게 설정하지만, 숨겨진 요소는 여전히 이전과 같은 공간을 차지합니다. 즉, 요소가 숨겨져 있지만 여전히 레이아웃에 영향을 줍니다.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">테스트 텍스트</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% 투명도 */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px 수평 오프셋, 5px 수직 오프셋, 5px 흐림 반지름, 색상 rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">테스트 텍스트</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* 위에서 아래로의 그라디언트, 빨강에서 파랑 */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* 원형 그라디언트, 빨강에서 파랑 */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* 수평으로 50px 이동, 수직으로 20px 이동 */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* 요소를 0.5배로 축소 */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* 시계 방향으로 45도 회전 */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* 수평으로 50도 기울이기, 수직으로 20도 기울이기 */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>