JSP: CSS
- ::before & ::after (feat. +버튼) -
KeyPoint
- css를 이용하여 + 버튼 만들기
- ::before >> 선택한 요소의 앞부분에 적용할 css
- ::after >> 선택한 요소의 뒷부분에 적용할 css
들어가며
새 프로젝트에 들어가기 전, 참고할 코드를 받았다.
분석하는 도중에 위젯 추가를 위해 +버튼이 있었는데 이미지를 넣은건가? 싶어서 jsp를 봤다. (하라는 분석은 안하고)
jsp에 class만 적용되어 있어 css파일을 열어봤는데 이곳에서도 img파일경로를 찾을 수 없었다.
그러던 중, 같은 class명에 :before와 :after가 붙은 것이 있어서 개발자도구에서 하나하나 on/off해보며 어떤 기능을 하는건지 봤다.
하다보니 흥미로워서 나중에 또 사용하기 위해 기록하기로 했다.
+(추가, 플러스)버튼 만들기
▶ jsp파일 생성
먼저, 테스트를 하기 위해 jsp파일을 하나 생성하고 <body>태그 안에 <button>을 넣어주었다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button><span>추가</span></button>
</body>
</html>
그러면 이렇게 덩그러니 버튼 하나가 나온다.
▶ css 적용
→ .btnAdd CSS 추가
<head>태그 안에 <style type="text/css">태그를 넣어주고, 아래 코드를 넣었다.
.btnAdd {
position: relative;
width: 24px;
height: 24px;
margin-left: 10px;
border-radius: 50%;
background: #8faadc;
}그리고 아까 생성한 <button> 태그 안에 class="btnAdd"를 추가해줬다.
<button class="btnAdd"><span>추가</span></button>
그랬더니 이렇게 버튼이 바뀌었다.
글자가 저렇게 있는게 싫어서 글자는 가려주기로 했다.
→ .hidden CSS 추가
.hidden {
display: block;
margin: 0;
padding: 0;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
visibility: hidden;
}그리고 <span>태그 안에 class="hidden" 추가
<button class="btnAdd"><span class="hidden">추가</span></button>
글자가 사라진 것을 확인
→ :before CSS 추가
.btnAdd:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
content: '';
width: 16px;
height: 2px;
background-color: #fff;
}
가로줄이 생겼다..!
→ :after CSS 추가
이번에는 :before를 잠시 주석처리하고 :after를 넣어보았다.
.btnAdd:after {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
content: '';
width: 2px;
height: 16px;
background-color: #fff;
}
이번엔 세로줄이 생겼다.
:before와 :after에서, 위치 관련 내용들은 빼고 차이가 있다면 width와 height이다.
그리고 content에 아무 내용도 넣지 않아서 width와 height만큼 background-color: #fff;(=white)로 나온 것이다.
기존의 .btnAdd 전과 후에 ㅡ ㅣ를 각각 넣고, 위치조정을 통해 +버튼을 만든 것이다.
이 둘을 합치면 +가 나오겠지..
→ 완성된 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.hidden {
display: block;
margin: 0;
padding: 0;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
visibility: hidden;
}
.btnAdd {
position: relative;
width: 24px;
height: 24px;
margin-left: 10px;
border-radius: 50%;
background: #8faadc;
}
.btnAdd:after {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
content: '';
width: 2px;
height: 16px;
background-color: #fff;
}
.btnAdd:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
content: '';
width: 16px;
height: 2px;
background-color: #fff;
}
</style>
</head>
<body>
<button class="btnAdd"><span class="hidden">추가</span></button>
</body>
</html>
완성된.. 모양.. 완벽..
마치며
CSS is Awesome...을 또 느꼈다..
다시 코드 분석하러 가야지,,
참고
:before와 :after에 대한 정리 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/::before
::before (:before) - CSS: Cascading Style Sheets | MDN
CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/::after
::after (:after) - CSS: Cascading Style Sheets | MDN
CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
developer.mozilla.org
End.
heisely's 괴발개발 개발일지
'Programming > JSP' 카테고리의 다른 글
| [JSP: CSS] white-space:pre (feat. vertical-align) (0) | 2022.04.19 |
|---|
