IT/HTML&CSS

[CSS] overflow/box-shadow/text-shadow/border-radius/opacity(2021-10-19)

기록자 꼬비 2021. 11. 24.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>overflow / box-shadow / text-shadow / border-radius / opacity</title>
    <link rel="stylesheet" href="./css/study1.css">
  </head>
  <body>
    <h1>overflow 속성의 적용 결과(규격이 정해진 경우에 한해서)</h1>
    <p class="hidden">콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크기 만큼만 보이고 나머지 콘텐츠는 보이지 않도록 숨길 수 있다.</p>
    <p class="scroll">박스의 크기와 콘텐츠의 내용과 상관없이 박스에 스크롤바를 생성할 때는 overflow:scroll을 선언하면 된다. 이때 만약 박스의 크기가 콘텐츠보다 클 경우 스크롤 바는 비활성화 되어 나타난다.</p>
    <p class="auto">콘텐츠의 내용이 박스의 크기보다 많아서 박스에 자동으로 스크롤 바가 생성되도록 할 경우에 선언한다.</p>
    <p class="visible">콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크기를 무시하고 콘텐츠의 내용을 모두 보여지도록 할 때 선언, 블록요소의 기본값이기도 하다.</p>
    <!-- box-shadow -->
    <div class="abox">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <h1 class="ts">TITLE</h1>
    <div class="bbox"></div>
    <div class="cbox">
      <h1>title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="dbox">
      <h1>title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </body>
</html>

p{
  border:1px solid red;
  width: 150px;
  height: 80px;
}
.hidden{overflow: hidden;}
/* 콘텐츠 밖의 내용을 숨기는 것 = hidden */
.scroll{overflow: scroll;}
/* overflow-y:scroll이라고 하면 세로형 스크롤만 생긴다. */
.auto{overflow: auto;}
/* overflow-y:scroll은 auto와 다른 점이 박스의 크기안에 콘텐츠가 다 들어가더라도 스크롤이 표시되고, auto는 표시가 안된다. */
.visible{overflow: visible;}/* 기본값 */
.abox{
  margin-top:100px;
  width:500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: -30px -30px 70px blue;
  /* 태그에 그림자를 넣어주는 태그 >> box-shadow: x축, y축, 그림자확산정도, 그림자 색상을 의미  */
}
.ts{
  font-weight: 1000;
  font-size: 80px;
  text-shadow: 10px 10px 10px red;
  /* 태그에 텍스트 그림자를 넣어주는 태그 >> text-shadow: x축, y축, 그림자확산정도, 그림자 색상을 의미  */
}
.bbox{
  width:400px;
  height:400px;
  border: 1px solid black;
  /* border-radius: 50%;400px의 50%를 의미하여 200px 이 된다. */
  border-radius: 0px 10px 50px 100px;
  /* border-radius: 수치(모서리의 원형의 지름의 길이를 의미)가 높아질 수록 4각 모서리가 더 둥그랗게 된다. */
}
.cbox{
  width:500px;
  background: blue;
  overflow: hidden;
  opacity: 0.5;
}
  /* opacity는 0~1 사이 소수점으로 표시(0은 완전 투명, 1은 완전 불투명), 안에 있는 텍스트까지 스타일을 상속 받기 때문에 함께 투명도가 적용된다. */
.dbox{
  width:500px;
  /* background:rgb(0 0 255 / 50%); */
  background:rgba(0,0,255,0.5);
  overflow: hidden;
}
  /* but, 텍스트는 투명도를 적용하고 싶지 않을 때는..? >> 배경색을 투명하게 처리하면 됨 */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>pseudo-class(hover)</title>
    <link rel="stylesheet" href="./css/study2.css">
  </head>
  <body>
    <div class="abox">
      <h1>title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip   ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.</p>
    </div>
  </body>
</html>

.abox{
  width:400px;
  height: 400px;
  border: 1px solid red;
  transition: all 0.4s linear 0s;
  /* transition : 생동감 있게 애니메이션을 넣는 스타일
  전과 후의 중간스타일이 자동으로 설정됨 >>  모든 0.4초 동안 마우스를 올리고 시작하자마자 애니메이션 효과를 주고싶다.*/
}
/* hover = 마우스를 올렸을 때
abox 클래스에 hover 했을 때 - 그 스타일을 지정하는 태그 */
.abox:hover{
  background: red;
  border:none;
  border-radius:200px;
  overflow: hidden;
  box-shadow: 50px 0 0 blue;
}
/* abox클래스에 마우스를 올렸을 때 그 안에 있는 h1 or p 태그를 선택 */
.abox:hover h1{color:white;}
.abox:hover p{color:lime;}

저작자표시 비영리 (새창열림)

'IT > HTML&CSS' 카테고리의 다른 글

[CSS] html+css 활용 예제 풀기(2021-10-26) (0)	2021.11.25
[CSS] box-sizing / 가상태그 After, Before / 순서선택자(2021-10-21) (0)	2021.11.25
[CSS] 박스모델 예제_Box model 공부(2021-10-12) (0)	2021.11.24
[CSS] 박스모델 3요소(선, 바깥여백, 안여백)_border, margin, padding_별5개(2021-10-08) (0)	2021.11.24
[CSS] Background_배경 스타일 넣기(2021-10-07) (1)	2021.11.18

[CSS] overflow/box-shadow/text-shadow/border-radius/opacity(2021-10-19)

'IT > HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바