'2020'에 해당되는 글 497건

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
블로그 이미지

꽃꽂이하는개발자

,

javaScript 시간 출력

2020/Momentom 2020. 2. 15. 15:38
반응형

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div class="js-clock">
            <h1>00:00</h1>
        </div>
        <script src="clock.js"></script>
    </body>

</html>

 

index.js

const clockContainer = document.querySelector(".js-clock");
const clockTitle =  clockContainer.querySelector("h1")

function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours <10 ? `0${hours}` : hours }:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

반응형
저작자표시
블로그 이미지

꽃꽂이하는개발자

,

마우스로 글자 색 변경하기

2020/JAVA SCRIPT 2020. 2. 14. 21:28
반응형
const title = document.querySelector("#title");

const BASE_COLOR = "red";
const OTHER_COLOR = "#7f8c8d";

function handleClick(){
    const currentColor = title.style.color;
    if(currentColor === BASE_COLOR){
        title.style.color = OTHER_COLOR;
    }else{
        title.style.color = BASE_COLOR;
    }
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("mouseenter", handleClick);
}
init();

 

마우스를 올리면 색이 변경됨

mouseenter을 click 로 바꾸면 클릭시 색이 변경됨

 

반응형
저작자표시

'2020 > JAVA SCRIPT' 카테고리의 다른 글

spread연산자  (0) 2020.03.28
<noscript>  (0) 2020.01.29
<script>  (0) 2020.01.25
블로그 이미지

꽃꽂이하는개발자

,

java script(const, let)

2020/IT Q_A 2020. 2. 14. 15:55
반응형

초기화와 생성을 해주는 것입니다.

const(constant)는 상수

let은 변수 입니다.

아래처럼 let으로 사용하게 되면

 

let a = 100;

let b = a - 5;

a = 10;

console.log(b);

 

console에는  95가 출력됩니다.

하지만 

 

const a = 100;

const b = a - 5;

a = 10;

console.log(b);

입력하게 되면

index.js:3 Uncaught TypeError: Assignment to constant variable. 에러가 뜨게 됩니다.

이 말은 const 타입으로 a를 100으로 정의를 했는데 상수이기 때문에 a에 10을 대입하지 못하기 때문입니다.

 

const는 변경할 수 없는 상수

let은 변수!

 

위를 예로 입력한 수를 변경하면 안되는 경우는 const를 사용하고

변경해도 상관 없는 경우는 let을 사용하면 됩니다.

 

 

 

반응형
저작자표시

'2020 > IT Q_A' 카테고리의 다른 글

MONgo db 환경변수 설정  (0) 2020.02.21
Visual Studio Edit in settings.json  (0) 2020.02.17
증감연산자 x++, ++x  (0) 2020.02.13
Ajax란?  (0) 2020.02.13
xml에서 주석처리 단축키  (0) 2020.01.30
블로그 이미지

꽃꽂이하는개발자

,

증감연산자 x++, ++x

2020/IT Q_A 2020. 2. 13. 20:29
반응형

 

var a = 100;
var x = 1;
var y = a + x++;

y의 값은 무엇일까요?

x++는 현재 수식에 x의 값을 먼저 대입한 후에, 자신을 1증가시키기 때문에 y=100+1이 먼저 계산되고 그런 후에 x++이 되므로 최종적으로 y의 값은 101, 값은 2가 됩니다.

 

반대로 ++x를 한다면?

x가 먼저 2가 되고 a와 합쳐지고 y에 대입되게 됩니다.

 

반응형
저작자표시

'2020 > IT Q_A' 카테고리의 다른 글

Visual Studio Edit in settings.json  (0) 2020.02.17
java script(const, let)  (0) 2020.02.14
Ajax란?  (0) 2020.02.13
xml에서 주석처리 단축키  (0) 2020.01.30
model1, model2, mvc 패턴  (0) 2020.01.29
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
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

티스토리툴바