CSS / 팝업창 만들기 + 여러 CSS 속성들

1/ 여러 CSS 속성 정리

1. box-shadow:

2. input:focus;

3. !important

4. class 여러개 넣기

 

2/ 팝업창 만들기

---

1/ 여러 CSS 속성 정리

1. box-shadow:

박스 뒤 쪽에 그림자 효과를 주기 위한 CSS 속성이다. 

box-shadow: X축위치 Y축위치 blur의 정도 color;

- X축 / Y축 위치 : 각 행/열 방향으로 얼만큼 튀어 나올지 결정

- blur의 정도 : 그림자의 번짐 정도 (픽셀이 작을수록 그림자가 투박하게 나옴)

- color: 그림자의 컬러

 

See the Pen Untitled by YeonJeong Lee (@hoochu) on CodePen.

2. input:focus{ }

input 박스는 기본적으로 마우스 커서를 갖다대고 클릭하면 박스모양이 뜬다. 

클릭했을 때의 디자인적인 부분을 수정하고 싶다면, 속성값 focus 를 쓴다.

input:focus {outline:none} 을 쓰면 클릭해도 박스테두리가 나타나지 않는다. 

outline뿐만 아니라 background, font 컬러,사이즈 등도 적용된다. 

 

See the Pen Untitled by YeonJeong Lee (@hoochu) on CodePen.

3. !important

기본적으로 CSS는 같은 속성이 여러 번 나오면, 가장 마지막 값이 적용되어 화면상에 렌더링 되고, 나머지 이전의 속성값들은 덮여진다.

(ex. background:red; 로 적었는데, 뒤에 다른 누군가가 background:blue;로 적는다면, 화면색은 blue가 나오게 된다.)

이 때, 나중에 넣는 값이 적용되지 않게 하려고 속성값 뒤에 !important를 쓰는데, 이러면 뒤에 아무리 같은 속성을 주어도 나오지 않고, !important를 입력한 속성값만이 화면상에 나오게 된다.

 

4. class 여러개 넣기

이 개념을 배우기 전에는 보통 여러 element에 중복되는 속성값을 넣어야 할 때,

html 상에서 태그를 여러 개 만들어놓고 class명을 다 다르게 적고, css 상에서도 하나하나 class명에 따라 다른 속성값을 배치한다. 이럴 경우 코드가 길어지게 되는데, 이를 대비해 좀 더 심플하게 만들기 위한 방법을 배웠다.

 

1/ CSS 상에서 .줄임말{속성:속성값} 으로 정의내려두고

2/ HTML 상에서 해당 태그의 class명 옆에 한 칸 띄고 정의한 줄임말을 쓴다고 한다. <tag class="class명 줄임말">

 

예를 들자면, 여러 div들을 width:1200px로 맞춰야한다면,

CSS 상에 .w1200{width:1200px;} 를 정의해두고,

HTML상에선 <div class="box w1200"></div> 로 적는 방식 

 

컬러, 크기나 여백 등 중복되는 속성값들이 있다면, 줄임말을 정의해놓고 반복해서 쓰기도 한다.

이럴 경우, 코드가 심플해지긴 해도 모르는 사람들이 보면 가독성이 떨어질수도 있다고 한다. 

 

.center{margin: 0 auto;}

<div id="footer" class="w1200 center"></div>

또는 시멘틱적으로 <footer class="w1200 center"></footer> 이런식으로 줄인다.

---

2/ 팝업창 만들기

팝업창 역시 어제 만든 햄버거 버튼+사이드메뉴 처럼 on/off switch 개념으로 생각하며 만든다.

 

See the Pen Untitled by YeonJeong Lee (@hoochu) on CodePen.

 

1. HTML 구조 잡기

 

#1. on/off 를 위해 input의 checkbox 속성을 사용한다.

#2. 클릭하기 쉽게 바로 <label> 태그를 써준다.

#3. 클릭(checked) 하면 뜰 팝업창의 효과를 위해 큰 바탕을 먼저 만들어주고 그 안에 팝업 블럭을 하나 더 만들어준다.

#4. 마지막으로 팝업창 내부에 제목/영역/닫기버튼(X)을 만들어줬다.

      이 때, 닫기버튼(X)은 같은 버튼 효과(누르면 display:none;)를 위해 위의 label과 동일한 id를 부여해줌

 

2. CSS로 꾸며주기

 

#1. checkbox 속성을 이용하지만 checkbox 모양 자체가 나오는 건 원치않으므로 display:none 값을 주어 가려준다.

#2. input의 id값과 인접형제개념인 label에도 CSS 효과를 주기 위해 인접형제선택자인 '+'를 써서 버튼 쉐잎을 잡고 꾸민다.

#3. 그 다음 클릭하면 나올 팝업창의 뒷배경을 전체적으로 잡아준다.

오늘 배울 땐 w 100% h 100%를 주어 전체창으로 잡았다. 근데 이렇게 하면 아래 스크린샷처럼 버튼이 위에 있기 때문에 

팝업창 뒷배경이 버튼 밑으로 내려오며, height 100%도 먹지 않는다. 

 따라서, 여기에 가까운 엘리먼트의 기준으로 움직이게 해주는 position:absolute;를 주면, 전체 body를 기준으로 (즉, 좌측상단 기준으로) h 100% 가 먹으며, top:0px 까지 적용하면 위쪽 click me를 덮고 전 화면을 차지한다. 

당연히 이것 또한 버튼 누르기 전엔 안보여야 하니까 display:none 값을 주어 가려준다.

 

(**CSS 작업할 때는 보여야 하므로 display:block값을 준 채로 작업하고 마지막에 display:none으로 바꿔주는 센스)

 

 

#4. 이제 팝업창 자체틀과 컨텐츠들을 꾸며준다. 이때 입체감을 위해 위에서 정리한 개념인 box-shadow: 속성을 사용했다.

그리고 해당 팝업창도 position:absolute;를 적용하여 부모 엘리먼트(가장 가까운 엘리먼트)인 팝업창 뒷배경을 기준으로 움직이게 만들었다. 완벽한 센터를 찾기 위해 어제 배운 transform:translate(-50%,-50%); 가 또 쓰인다. 

transform:translateX(x) + tranform:translateY(y) = transform:translate(x,y) 

 

#5. 클릭했을 때 팝업창이 나타나게끔 :checked + 인접형제들 설정하기

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