HTML

Visual Studio Code :: 모달 팝업(레이어 팝업) 만들기

화사비 2021. 12. 28. 13:58

목차

  1. 수업 목표
  2. HTML
    2-1. input
    2-2. label
  3. CSS
    3-1. Input 꾸며주기
    3-2. Background
    3-3. Pop-up 창
    3-4. Box-shadow
  4. 최종화면
  5. 오류 및 수정
  6. !important
  7. class 여러개 지정하기

 

1. 수업 목표

 

 

  • 버튼 클릭 했을 때 팝업 나오고, 팝업에 X키 누르면 팝업이 사라지게 만들기

2. HTML

 

 

 

  • <body> 부분의 전체적인 코드입니다.

 

<body>
    <input type="checkbox" id="layerpopup">
    <lable for="layerpopup">
        버튼
    </lable>
    <div id="layer_bg">
        <div id="popup">
            <h2>
                제목
                <label for="layerpopup">X</label>
            </h2>
            컨텐츠 영역입니다.
        </div>
    </div>
</body>
</html>

HTML만 적용하게 되면

 

이런식으로 렌더링 됩니다.

 

2-1. input

 

 

 

    <input type="checkbox" id="popup">
    <label for="popup">
        버튼
    </label>

 

  • 어제와 마찬가지로 input type를 checkbox로 주게 되면 아래와 같이 선택 가능한 체크박스가 생성됩니다.

 

input

 

 

2-2. label

 

 

 

    <div id="layer_bg">
        <div id="poop">
            <h2>
                제목
                <label for="popup">X</label>
            </h2>
            컨텐츠 영역입니다.
        </div>
    </div>
  • <div>를 주어 제목과 컨텐츠 영역을 생성해 주면 아래와 같은 결과값이 나옵니다.

 

input+label

 

 

3. CSS

 

 

  • CSS style sheet의 전체적인 구성은 다음과 같습니다.
/* CSS STYLE SHEET*/
*{
    margin:0;
    padding:0;
}

ul,li{
    list-style:none;
}

a{
    text-decoration:none;
}

#layerPopup{
    display:none;
}

input[id="layerpopup"] + label {
    display:inline-block;
    padding:7px 14px;
    background:#333;
    color:#fff;
}

#layer_bg{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5)
}

#layer_bg > #popup {
    position: absolute;
    padding:15px;
    box-sizing: border-box;
    border-radius: 15px;
    top:50%;
    left: 50%;
    transform:translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background:#fff;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.2);
    /* x y 번짐 색상 */
}

#layer_bg > #popup > h2{
    margin-bottom: 25px;
}
#layer_bg > #popup > h2 > label{
    float: right;
}

#layerpopup:checked + label + #layer_bg{
    display: block;
}

하나씩 살펴보겠습니다.

 

 

3-1. input 꾸며주기

 

 

#popup{
    display: none;
}

#popup + label {
    display: inline-block;
    padding: 7px 14px;
    background: #333;
    color: #fff;
}
  • input 속성 id=popup으로 설정한 부분을 꾸며주었습니다.
  • display:none;을 통해 체크박스 자체를 없애주었습니다.
  • label을 이용하여 display:inline-block; 으로 inline-block 속성을 주었고 이어서 padding 값을 주어 박스 크기를 조절하였습니다.
  • background와 color를 이용하여 버튼처럼 보이는 부분의 가독성이 용이하도록 만들었습니다.

3-2. Background 작업

 

 

  • 팝업이 올라왔을 때 화면이 어두워지도록 하기 위해 Background를 검은색에 투명도 0.5로 설정하였고,  display는 우선 잘 되는지 확인하기 위해 block으로 주었습니다. (이 부분은 추후에 none;으로 바꿀 예정) 
  • 크기는 전체 화면을 덮어야 하므로 width:100%; height:100%를 주었습니다.
#layer_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

3-3. Popup 창

 

 

  • popup 창의 이름을 poop으로 설정했기 때문에 선택자 #를 사용하여 poop을 지정해주었습니다.
  • 크기는 600px, 400px 정도로 설정을 해 주었습니다.
#layer_bg > #poop {
    position: absolute;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 15px;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.2);
}

 

 

 

  • 위치는 가운데쯤에 오게 하기 위해 top 50%, left 50%를 설정하였습니다.
  • 위치를 설정할 때 기준이 왼쪽 상단부분을 기준으로 잡기 때문에 정확하게 가운데로 위치 하게 만들기 위해 transform:translate(-50%, -50%);를 주었습니다.

    ※(transform:translateX(-50%); (transform:translateY(-50%);를 주었는데 제대로 안됐었다. )
    ↑Why? [[ Display:inline을 주고 Display:block을 준 것과 같은 원리 ]] 라고 말씀해 주셨다. translate에 (값, 값)을 주면 X,Y 좌표에 대한 값이 적용 되는데 X 따로 주고 Y따로 주면 마지막에 입력한 Y만 인식되는 것!

transform 하지 않은 상태

  • 팝업의 왼쪽 상단 부분의 위치가 top50% left50% 지점에 위치한 상태입니다.

 

transform:translate(-50%, -50%); 한 상태

  • transform:translate(-50%, -50%)를 하여 팝업의 왼쪽 상단의 위치를 옮겨주었고, 이를 통해 팝업상자의 전체적인 위치가 가운데로 위치하는 것처럼 보여지게 했습니다.

 

3-4. box-shadow

 

 

  • box-shadow를 통해 팝업 상자에 그림자 효과를 넣어줄 수 있습니다.

box-shadow 없는 상태

 

  • box-shadow: 15px 15px rgba(0,0,0,1);을 하면 아래로 15px, 오른쪽으로 15px 만큼 이동한 부분에 rgb000(검은색) 상자가 그림자처럼 붙은 것을 볼 수 있습니다. 투명도를 1로 주었기 때문에 투명도가 전혀 없는 검은색인 것을 확인할 수 있습니다.

box-shadow 적용

  • 간격을 좁히고, 그림자를 좀 더 연하게 만들어 주면 아래처럼 은은한 그림자 효과를 줄 수 있습니다.
  • box-shadow 값에는 x, y, 번짐, 색상 값을 줄 수 있습니다. 숫자 세개를 쓰면 마지막 숫자는 번짐을 나타내줍니다.
    ※그림자 효과가 이쁘다고 여기저기 막 쓰게 되면 오히려 지저분해 보일 수 있다고 합니다.

그림자 조절 7px 7px 5px

 

4. 최종화면

 

 

  • 앞에 설명 했던 #layer_bg 부분에서 작업의 편의성을 위해 display를 block 으로 놓은 상태로 작업을 진행 했었습니다. 작업이 끝났으니 display를 block > none 으로 변경 해 주었고, 결과물을 확인할 차례입니다.
#layer_bg{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}​

 

 

버튼 클릭 전(팝업 활성화 전)

 

버튼 클릭 후(팝업 활성화 후)

 

5. 오류 및 수정

 

 

 

/* CSS style sheet*/
*{
    margin:0;
    padding:0;
}

ul,li{
    list-style:none;
}

a{
    text-decoration:none;
}

#layerPopup{
    display:none;
}

#layerPopup + label {
    display:inline-block;
    padding:7px 14px;
    background:#333;
    color:#fff;
}

#layer_bg{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5)
}

#layer_bg > #popup {
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    transform: translate(-50%,-50%);
    background:#fff;
}

#layerPopup:checked + label + #layer_bg{
    display: block;
}
  • 처음 오류가 나서 교수님께서 보내주신 코드값입니다. 근데 이것 또한 오류가 났기 때문에 어디가 잘못 된 것인지 오랫동안 방황하였고, 어제도 한 번에 성공하지 않았었는데 다 지우고 다시 만드니까 잘 됐었던 것이 기억나서 똑같이 다 지우고 다시 타이핑 하였으나 오류는 고쳐지지 않았었습니다.
  • CSS 부분에는 틀린 것이 없다고 판단하여 HTML 부분부터 새로 써나가고, 선택자 이름 또한 다 변경해 주었습니다. 

 

오류가 난 HTML
수정한 HTML

  • 수정을 하면서도 이건 되는데 왜 이전에 것은 안되었을까? 생각했는데 오류가 난 부분에 오타(label을 lable로)가 있음을 발견했습니다. 볼때는 몰랐지만 완성한 뒤에 두개를 비교해 보니 확연하게 차이가 났고 너무 어이가 없었지만 어느 부분이 잘못 되었는지 짚고 넢어갈 수 있었기 때문에 다행이라고 생각합니다.

 

6. !important

 

 

  • CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 
  • 협업을 하여 코딩을 했을 때 상대방과 내가 만든 부분이 같은데 값이 다를 경우 사용한다고 합니다.
body{
	background:red;
    }
    
body{
	background:black;
    }
  • 이런 식으로 코딩이 되었을 경우 마지막에 설정된 값이 black 이기 때문에 나오는 색깔은 black으로 표출이 됩니다.

 

body{
	background:red !important
    }
    
body{
	background:black
    }
  • 이렇게 red 뒤에 !important를 붙여주게 되면 black이 아닌 red 값이 우선적으로 선택이 됩니다. 따라서 black 이 나중에 입력 되었지만 !important가 붙은 red 색상으로 표출이 됩니다. 

 

7. Class 여러개 지정하기

 

 

 

  • 하나의 class 안에 값을 여러개 지정할 수 있습니다.

 

  • sytle 값을 이렇게 넣어 준 뒤에 <div class="box red"></div> 를 하면 .box의 속성인 width:300px; height:300px; font-size:50px;이면서 background 색깔이 red이며 fontcolor은 green인 상자가 만들어집니다.

&lt;div&gt;

 

  • 위의 코드를 보면 <div>에서 맨 위에는 box class와 red class를 지정한 것을 보실 수 있습니다.

 

결과값

 

  • 그에 대한 결과물 입니다.

 

 

오늘 배운 부분은 오류를 찾아내는데 시간을 다 쏟아 부은 것 같았다. 다만 시간을 쏟아부었던 만큼 오류를 빠르게 찾아내지 못하였고, 결국 찾지 못한 상태로 다시 만들어 보았고, 새로만들고 나서도 어디가 잘못 되었는지 조차 몰랐었다. 두개를 비교하면서 보았고 그제서야 발견을 하는 나를 돌이켜 보면서 아직 갈길이 많이 멀다는 것을 다시 한 번 생각하게 되었다. 고작 스펠링 하나 차이 때문에 결과값이 변하지 않았다는 것에 굉장히 스트레스를 받았었다.

 

728x90