whatisthis?

practice - css ) ๋ชจ๋‹ฌ ํŒ์—…์ฐฝ ๋งŒ๋“ค๊ธฐ (JSโŒ) ๋ณธ๋ฌธ

WEB STUDY/HTML,CSS

practice - css ) ๋ชจ๋‹ฌ ํŒ์—…์ฐฝ ๋งŒ๋“ค๊ธฐ (JSโŒ)

thisisyjin 2022. 3. 12. 11:17

Modal pop-up 

- without JS

 

 

 

 

 

๐Ÿ“Œ ๊ธฐ๋ณธ ์›๋ฆฌ 

 

- <a href="#popup"> ์„ ํ•ด์„œ

ํ•ด๋‹น div#popup์— ๊ฐ€์ƒํด๋ž˜์Šค :target์„ ์ค€๋‹ค! - display block๊ณผ none ํ† ๊ธ€๋˜๊ฒŒ

 

- ๋‹ซ๊ธฐ๋ฒ„ํŠผ์—๋Š” <a href="#">๋กœ ๋‹ค์‹œ ๋˜๋Œ๋ฆฐ๋‹ค.

 

 

 

HTML

<a href="#popup" class="opene">Open</a>
<div id="popup">
  <h2>modal</h2>
  <a href="#">๋‹ซ๊ธฐ</a>
</div>

CSS

#popup {
  display: none;
}

#popup:target {
  display: block;
}

 

 

 

 

 

 

 

๐Ÿ”ป ์‘์šฉ ์˜ˆ์ œ

 

์œ„ ์›๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ ์‘์šฉ ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž.

 

div#popup์— class๋„ ์ถ”๊ฐ€ํ•ด์„œ ์Šคํƒ€์ผ ํ•˜๋‚˜๋ฅผ ๊ฐ€์ง€๊ณ  ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ชจ๋‹ฌ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ.

๋˜ํ•œ, display: block์ด์•„๋‹ˆ๊ณ  display: flex๋ฅผ ํ•ด์„œ ๊ฐ€์šด๋ฐ์ •๋ ฌ๋„ ๋ค์œผ๋กœ ํ• ์ˆ˜ ์žˆ๊ฒŒ.

 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal Popup</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <a href="#popupA" class="opener">Open Modal A</a>
    <a href="#popupB" class="opener">Open Modal B</a>
    <a href="#popupC" class="opener">Open Modal C</a>

    <div id="popupA" class="layer">
      <div class="box">
        This is popup A
        <a href="#" class="close">close</a>
      </div>
    </div>
    <div id="popupB" class="layer">
      <div class="box">
        This is popup B
        <a href="#" class="close">close</a>
      </div>
    </div>
    <div id="popupC" class="layer">
      <div class="box">
        This is popup C
        <a href="#" class="close">close</a>
      </div>
    </div>
  </body>
</html>

 

style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #eaa;
}

a {
  text-decoration: none;
  color: inherit;
}

.opener {
  display: block;
  text-align: center;
  background-color: #fff;
  width: 300px;
  margin: 10px auto;
  padding: 10px 30px;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

.opener:hover {
  background-color: #666;
  color: #fff;
}

.layer {
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.layer .box {
  position: relative;
  padding: 20px 20px 60px;
  margin: 20px;
  width: 500px;
  background-color: #fff;
  border-radius: 10px;
}

.layer .box .close {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #09f;
  color: #fff;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 13px;
  transition: all 0.2s ease-in-out;
}

.layer .box .close:hover {
  transform: scale(1.1);
}

.layer:target {
  display: flex;
  animation: open 0.5s;
}

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

 

 

result

 

 

 

- โœจ ์‹ค์Šตํ›„๊ธฐ

์šฐ์„  ๋ชจ๋‹ฌ์ฐฝ์€ ๋‹น์—ฐํžˆ js๋กœ ํด๋ž˜์Šค ํ† ๊ธ€ํ•ด๊ฐ€๋ฉด์„œ
display: none๊ณผ display: block์„ ์™”๋‹ค๊ฐ”๋‹ค ์Šคํƒ€์ผ ์ฃผ๋Š”๊ฑธ ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค.

๋ฌผ๋ก  ๊ทธ๋ ‡๊ฒŒ ํ•ด๋„ ๋˜๊ฒ ์ง€๋งŒ, css์˜ ๊ฐ€์ƒํด๋ž˜์Šค์ธ :target์œผ๋กœ ๋งŒ๋“ค์–ด๋ณด๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค!

์‹ค์Šตํ•˜๋ฉด์„œ ์˜๋ฌธ์ด์˜€๋˜ ์ ์ด, ๊ณ„์†ํ•ด์„œ ์ฃผ์†Œ ๋์— #popup์ด ๋ถ™๊ณ  #๊ฐ€ ๋ถ™๊ณ  ํ•˜๋Š”๋ฐ ์ด๊ฒŒ ์ข€ ๋ณด๊ธฐ์‹ซ๋‹ค.
์ฆ‰, aํƒœ๊ทธ href๋กœ ํ•˜๋‹ค๋ณด๋‹ˆ ์ด๋ ‡๊ฒŒ ๋์— ๋ถ™๋Š”๊ฑด๋ฐ , ๋‚ด๊ฐ€ ์ฃผ๋กœ ์ด์šฉํ–ˆ๋˜ ์‚ฌ์ดํŠธ๋“ค๋„ ์ด๋ ‡๊ฒŒ ํ–ˆ์—ˆ๋‚˜? ๐Ÿ˜ฅ

 

 

'WEB STUDY > HTML,CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CSS - Media Query (Landscape)  (0) 2022.03.05
CSS - BootStrap (๋ถ€ํŠธ์ŠคํŠธ๋žฉ)  (0) 2022.03.01
CSS - Grid System (design)  (0) 2022.03.01
CSS - ์„ ํƒ์ž (Selector) ์šฐ์„ ์ˆœ์œ„  (0) 2022.03.01
CSS - Selector ์ด์ •๋ฆฌ  (0) 2022.03.01
'WEB STUDY/HTML,CSS' Related Articles more