'2020/CSS'에 해당되는 글 30건

CSS Transition

2020/CSS 2020. 2. 16. 18:33
반응형

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

 

transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

developer.mozilla.org

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Transitions</title>
  <style>
  .box{
    background-color: green;
    /*color:white;
    transition:all을 하면 위의 bgcolor와 color 둘다 효과가 적용됨.
    하나만 하고 싶으면 color 이렇게 하나만 적어주면 됩니다
    범위 시간 효과;*/
    transition:all .5s ease-in-out;
  }
  /*state중에서 hover, focus,active에만 적용됩니다. */
  .box:hover{
    background-color: red;
    color:blue;
  }
  </style>
</head>
<body>
  <span class="box">
    Text
  </span>
</body>
</html>

출처: nomadcoder

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

css animation @keyframes  (0) 2020.02.16
CSS Transformations  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
PSEUDO SELECTOR  (0) 2020.02.16
NTH TEST SITE  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,

css states(hover, active, focus, visited)

2020/CSS 2020. 2. 16. 18:21
반응형
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS States</title>
  <style>
  .box{
    background-color: red;
    font-size: 40px;
  }
  .box:hover{
    background-color: pink;
  }
  .box:active{
    background-color: green;
  }
  input:focus{
    background-color:blue;
  }
  a:visited{
    color: yellow;
  }
  </style>
</head>
<body>
  <input type="text">
  <span class="box">lalalalalala</span>
  <a href="http://kakao.com">Naver</a>
</body>
</html>

hover : 마우스를 올렸을때

active : 클릭했을때

 

출처: nomad coder

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

CSS Transformations  (0) 2020.02.16
CSS Transition  (0) 2020.02.16
PSEUDO SELECTOR  (0) 2020.02.16
NTH TEST SITE  (0) 2020.02.16
CSS FLEX PRACTICE  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,

PSEUDO SELECTOR

2020/CSS 2020. 2. 16. 17:55
반응형
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Selectors and Pseudo Selectors</title>
  <style>
  
  /*PSEUDO SELECTOR*/
  input[required="required"]{
    background-color: red;
  }
  /*.box:first-child(){}
  .box:last-child(){}
  .box:nth-child(2){} */ 
  .box:nth-child(3n+2){
    background-color: pink;
  }
  /*.container 클래스의 직계 .box만 적용 */
  .container > .box{
    background-color: yellow;
  } */
  .box{
    border:1px solid yellow;
  }
  .box{
    background-color: green;
    display: block;
    height: 100px;
    border:1px solid black;
  }
  .child{
    width: 40px;
  }
  </style>
</head>
<body>
<div class="container">
  <div class="box">
    <div class="box child"></div>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">
    <input type="password" required="required" />
    <input type="submit" required="required" />
  </div>
</div>
</body>
</html>

출처: NOMAD CODER

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

CSS Transition  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
NTH TEST SITE  (0) 2020.02.16
CSS FLEX PRACTICE  (0) 2020.02.16
CSS POSITION  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,

NTH TEST SITE

2020/CSS 2020. 2. 16. 17:50
반응형

http://www.topdesignagencies.com/nth-test/

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

CSS Transition  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
PSEUDO SELECTOR  (0) 2020.02.16
CSS FLEX PRACTICE  (0) 2020.02.16
CSS POSITION  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,

CSS FLEX PRACTICE

2020/CSS 2020. 2. 16. 17:31
반응형

http://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

이곳에서 FLEX로 게임을 할 수 있어요.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex</title>
  <style>
  html,body{
    height: 100%;
  }
  .father{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    height: 100%;
    flex-wrap:wrap;
  }
  .box{
    background-color: red;
    width: 200px;
    height: 200px;
    border:1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</body>
</html>

출처 : 노마드 코더 깃 허브: https://github.com/nomadcoders/kakao-clone-examples/blob/master/05-flex/index.html

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

CSS Transition  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
PSEUDO SELECTOR  (0) 2020.02.16
NTH TEST SITE  (0) 2020.02.16
CSS POSITION  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,

CSS POSITION

2020/CSS 2020. 2. 16. 16:51
반응형

CSS에서 사용되는 4가지 포지션에 대해 말해 볼까 합니다.

Position 에는 static, pixed, absolute, relative가 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Position</title>
  <style>
    body,html{
      height: 100%;
      margin:0;
      padding:0;
    }
    body{
      height: 400%;
      background-color: red;
    }
    /* Position Fixed
    #boxOne{
      height:300px;
      width:300px;
      background-color: yellow;
      position:static;
    }
    #boxTwo{
      height:300px;
      width:100%;
      background-color: green;
      position:fixed;
      bottom:30%;
      left:0;
    }*/
    /* Absolute */
    .abs-box{
      width:400px;
      height: 400px;
      background-color: yellow;
      position: relative; /* Remember to put relative here or the child will go to the body*/
    }
    .abs-child{
      width:100px;
      height: 100px;
      background-color: green;
      position: absolute;
      right:10px;
      top:10px;
    }
  </style>
</head>
<body>
  <div class="abs-box">
    <div class="abs-child"></div>
  </div>
  <!-- Position Fixed
  <div id="boxOne">
    <div class="box-child"></div>
  </div>
  <div id="boxTwo">
    <div class="box-child"></div>
  </div> -->
</body>
</html>

 

static는 화면에 고정되어 스크롤을 내려도 움직이지 않습니다.

pixed는 스크롤을 내리면 같이 내려옵니다.

absolute는 <div><div>abc</div></div> 부모 div 내에서 영향을 받지 않고 부모 body 태그 내에서 영향을 받습니다.

하지만 부모 div에서 position: relative를 해주면 부모 영역 내에서 css효과를 적용받게 됩니다.

 

자료 출처: 유튜버 nomad coder

 

반응형
저작자표시

'2020 > CSS' 카테고리의 다른 글

CSS Transition  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
PSEUDO SELECTOR  (0) 2020.02.16
NTH TEST SITE  (0) 2020.02.16
CSS FLEX PRACTICE  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

티스토리툴바