목차
- 팝업창 만들기
- 블럭 위치 지정하기 (transform:translate)
- 그림자 생성하기(box-shadow)
- 여러 개의 선택자의 스타일을 동시 적용하기
- 절대 지정(다른 스타일 다무시: important)
- 특정 스타일 여러번 재사용하기
- 커서 클릭했을 때 스타일 적용(focus)
- 브라우저 별 스타일 다루게 적용하는 접두어
- border와 outline 차이
특정 버튼을 눌렀을 때 팝업창이 나오도록 만들기
원리는 label을 두 개 만들고 하나의 라벨에 100%*100% 뒷배경을 꽉채워 배경을 지정하는 것이다.
<<label은 element는 사용자가 input box, check box, radio button 등을 좀 더 쉽게 선택할 수 있도록 도와준다.
label 부분을 클릭하면 input box의 경우에는 자동으로 focus가 이동하고 check box, radio button의 경우는 자동으로 선택된다.
label의 for 속성의 이름과 폼요소의 id 값이 일치하게 작성한다.
웹접근성 ↑>>
1. input으로 체크박스를 넣는다.
<input type="checkbox" id="layer_popup">
<label for="layer_popup">
버튼
</label>label을 하위 엘리먼트로 넣느냐 동등한 엘리먼트로 넣느냐 고민 했지만, 출력값에 변화가 없는 걸로봐서
input 박스의 id와 label의 for값이 같은 게 중요하지 위치는 중요하지 않은 걸로 보임.
2. #layer_popup css 설정을 해보자.
#layer_popup{
display: none;
}체크박스의 체크모양을 지워준다.
3. #layer_popup 에 인접한 label을 선택한다.
#layer_popup + label {
display: inline-block;
padding: 7px 14px;
background: #000;
color: #fff;
}
이러한 버튼을 하나 만들었다.
4. 같은 선상에서 div 엘리먼트를 하나 더 만들어주겠다.
<div id="layer_bg"> /*전체배경(기존 페이지를 안보이게 가려주거나 불투명하게 보이게함)*/
<div id="popup"> /*팝업뜰창*/
<h2>
제목 /*제목*/
<label for="layer_popup">X</label>
</h2>
컨텐츠 영역입니다. /*내용*/
</div>
</div>X는 클릭했을 때 닫기 위한 모양이기 때문에 똑같이 label을 지정해주었다.
(X 모양에다가도 label for를 주면 여기에도 라벨 클릭 가능.)
5. CSS 설정해주기.
#layer_bg{
display: none;
position: absolute; /* 시작 지점을 버튼 위, 0픽셀부터 시작하려고 주는 것*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
display: none; 을 해주는 이유: 선택(체크)이 되기 전엔 보이지 않도록 설정하기 위해서
#popup{
position: absolute;
padding: 15px;
box-sizing: border-box;
border-radius: 15px;
width: 600px;
height: 400px;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2); /*x y 번짐 색상*/
}position: absolute;를 주어 top:50%, left:50%을 설정해 중간으로 맞춘다.
기준점 문제로 도형이 정가운데 맞춰지지 않는데,
이 때 transform을 이용하여 해결한다. translate(X이동값, Y이동값)
box-shadow를 이용하여 그림자도 설정할 수 있다.
#popup > h2{
margin-bottom: 25px;
}
#popup > h2 > label{
float: right;
}제목과 컨텐츠의 위치를 떼어놓고,
X자 모양을 오른쪽 정렬한다.
#layer_popup:checked + label + #layer_bg{
display: block;
}마지막으로! 체크박스가 체크됐을 때(클릭했을 때) 팝업창이 보이게 한다.
(원래 none이었던 것을 block으로 바꿔 나타나게 함.)
위 사진과 같이 만들어졌다.
오늘 배운 것들 정리
1. 넓이지정은 항상 해주어야한다.
2. css는 쉼표를 사용해서 여러 개의 선택자의 스타일을 동시 적용이 가능하다.
3. important
아래있는 코드를 무시하고 위에 있는 코드를 사용하고 싶을 때 사용한다.
<body>
background:red !important;
</body>
4. 특정 스타일을 여러번 재사용하고 싶을 때
<style>
.red{background:red;}
</style>
<div class = "box red">
/*박스라는 클래스에 red 속성을 적용한다. 이때 띄어쓰기 필수임*/
5. focus
input요소에서 사용하는 것이다.
<input type="text">
css) input:focus{}
인풋박스에 커서를 클릭했을 때 스타일을 적용하는 것이다.
6. 접두어
-webkit- : 크롬 사파리
-o- : 오페라
-moz- : 모질라(파이어폭스)
-ms- : 마이크로소프트(익스플로러)
쓰는 이유
브라우저별로 css처리를 다르게 하고 싶어서
7. border와 outline 차이
boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말한다.
outline 속성의 용도는 요소를 두드러져 보이게 만들고자 할 때 사용한다.
주로, 레이아웃을 완성한 후에 문제점을 보기 위해 요소를 눈에 띄게 표시할 수 있다.
border 선을 표시한다면, border 너비가 레이아웃에 관여하기 때문에 레이아웃이 흐트러질 수 있다.
하지만 outline 선의 너비는 레이아웃에 관여하지 않고, 눈에만 선이 보인다.
border와 outline을 동시에 이용해서 테두리 선을 두개 만들수 있다.
'프론트엔드 > html, css' 카테고리의 다른 글
| HTML, CSS로 게시판 만들기(따라하기), display:flex (0) | 2021.12.29 |
|---|---|
| CSS 나머지 기능, 선택자 (0) | 2021.12.27 |
| HTML/CSS 본문(contents)영역 만들기 (0) | 2021.12.23 |
| margin: 0 auto 와 text-align: center의 차이점 (0) | 2021.12.22 |
| HTML/CSS 홈페이지 헤드 만들기 기초 (0) | 2021.12.22 |