6. CSS활용 - 팝업창, 회원가입 폼

1. 팝업창 만들기

어제 배운 개념을 응용해서 팝업창을 만들어보자!

 

1-1. 팝업창 설정

html

    <input type="checkbox" id="layerPopup">
    <label for="layerPopup">
        등록하기
    </label>
    <div id="layer_bg">
        <div id="popup">
            팝업창 내 컨텐츠 영역
        </div>
    </div>

어제와 마찬가지로 input - label - div 세트를 만들어준다.

 

#layerPopup{
    display: none;
}

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

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

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

#layerPopup:checked + label + #layer_bg > #popup{
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: white;
}

필수적인 설정은

1. input에 display:none; 넣기

2. #layer_bg를 input의 checked 유무에 따라 다르게 설정해주기.

이정도이고 

 

나머지는 사이즈나 위치 등의 설정이다.

특히 popup창의 위치를 잡아줄 때 어제 배웠던 position과 transform 속성을 응용해주었다.

부모요소와 자식요소에 둘 다 position:absolute; 를 주고 top과 left에 각각 50%의 위치를 지정해주면

화면의 정중앙이 자식요소의 상단좌측지점이 된다. 

따라서 transform: translate 속성을 사용하여 자식요소 크기의 50% 씩 다시 - 방향으로 움직여줘서 popup창이 화면의 정중앙에 위치할 수 있도록 해준다.

👉 상하좌우 중앙정렬을 하는 방법! 생각보다 간단하다.

 

 

 

1-2. 팝업창 닫기 버튼

팝업창 내에 label 요소 삽입하고, html에서 <label for="인풋ID"> 설정해주기

    <div id="layer_bg">
        <div id="popup">
            <h2>제목
                <label for="layerPopup">X</label></h2>
            컨텐츠 영역입니다.
        </div>
    </div>

checkbox 인풋과 열기버튼/닫기버튼이 모두 연결되며 조작이 가능해진다. (X마크가 닫힘 버튼 역할)

 

 

 

2. 회원가입 폼 만들기

 

*나중에 추가 예정

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 그 외

 

3-1. display:flex

레이아웃 배치 전용 기능으로 고안된 CSS속성.

 

❗️ https://flexboxfroggy.com/#ko

Flexbox Froggy

flexbox 속성을 연습해볼 수 있는 사이트. (나중에 해보고 따로 정리할 계획이다)

 

 

❗️ https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

자세하게 설명이 되어있다. 

 

flex를 사용하면 큰 레이아웃의 구성이 매우 쉬워진다. 하지만 세밀한 조절은 기존의 CSS 속성(float 등)을 활용하는 것보다 더 어렵다고 한다. 양 쪽을 모두 자유롭게 다룰 수 있도록 연습해두기.

 

👉 저번주에 만들었던 학원 홈페이지를 flex 속성을 활용하여 다시 만들어보기.

 

 

 

 

3-2. webkit

표준화가 되지 않은 새로운 CSS속성의 경우 웹 브라우저마다 호환여부가 다르다. webkit을 비롯한 여러 렌더링 엔진이 다양한 웹브라우저에 맞춰 사용된다.

• -webkit- : Chrome, Safari, Opera, iOS브라우저
• -moz- : 파이어폭스
• -o- : 구webkit, Opera
• -ms- : IE, 엣지

CSS 속성의 접두어로 붙어 사용된다.

 

 

 

 

 

3-3. class의 중복사용

동일한 속성이 부여된 여러 엘리먼트가 있다고 해보자. 이런 엘리먼트들에 각각의 class를 지정해주고 중복된 속성을 부여해주면 아래와 같이 나타낼 수 있을 것이다.

.box1  {width, height, background:red}
.box2  {width, height, background:yellow}
.box3  {width, height, background:blue}

👉 width, height가 동일하고, 배경색만 다른 세가지 엘리먼트가 있을때 class를 다음과 같이 지정해줄 수 있다.

.box {width,height}
.red {background:red}
.yellow {background:yellow}
.blue {background:red}

👉 이런 식으로 바꿔 준 것이 효율적인 코드라고 할 수 있다. width, height 변경 시 하나씩 바꿔줘야하는 경우에도 편리하다. 각 엘리먼트에는 다음과 같이 class를 지정해 줄 수 있다. (띄어쓰기로 여러 class를 구분한다.)

<div class="box red">
<div class="box yellow">
<div class="box blue">

레이아웃 할 때 이런 식의 class를 많이 사용한다.  .w1200 .center 이런식으로 자주 쓰이는 속성은 따로 class를 만들고 편하게 css 속성을 부여할 수 있다. 

 

 

 

 

 

3-4. 기타

-그림자효과

아래와 같은 css속성으로 그림자 효과를 줄 수 있다. 부여하는 값은 좌측부터 X폭, Y폭, 번짐효과 픽셀, 그림자 색상 순서이다. 

box-shadow: 7px 7px 5px rgba(0,0,0,0.4);

 

 

 

-!important

CSS는 같은 속성을 여러 번 정의했을 때 가장 마지막에 설정된 값이 출력된다.

나중에 설정한 값이 아닌 해당 라인의 속성설정을 유지하도록 하기 위해서는 !important를 속성의 맨 마지막에 붙이면 된다. 

협업으로 진행한 경우 다른 사람과 선택자가 겹쳐 속성이 제대로 부여되지 않는데 중복된 선택자를 찾지 못하는 경우 이를 이용해 강제적으로 원하는 css를 줄 수 있다.

p { color: red !important; }

 

 

-input:focus { }

a 엘리먼트에 커서를 올렸을 때의 속성을 따로 설정해주기 위해 a:hover { }를 사용한 것과 마찬가지로

input 엘리먼트를 선택했을 때의 속성을 따로 설정해줄 수 있다.

input박스의 focus 설정은 브라우저마다 디폴트 처리방식이 조금씩 다르므로 미리 리셋을 해준 뒤 작성을 하는 것이 좋다.