가상 클래스 선택자 - 여러 태그 중 사용자가 원하는 태그를 지정하기 위한 선택자
:hover :focus
:first-child :nth-child(n)
:not(#id) 등
가상 요소 선택자 - "문서에 없는 요소를 만들어 선택"
- 내용의 일부만 선택해 스타일을 적용할 때 사용
- 가상선택자는 스타일로만 존재 (요소검사로만 확인됨!)
- 컨텐츠이므로 '인라인 성향' (인라인스타일이 먹힌다!)
① ::first-line / ::first-letter - 첫번째 줄 / 해당 요소의 첫번째 글자에 스타일 적용
② ::before / ::after 요소 - 내용의 앞/뒤에 콘텐츠 추가
- 특정 요소의 내용 앞(::before) or 뒤(::after)에 지정한 내용을 넣을 수 있다.
- 즉, 요소의 앞/뒤에 문서에 없는 요소를 만들어 텍스트나 이미지를 추가함
ex) ::after 가상 요소를 사용해 제품 목록에 'NEW'라는 텍스트를 추가
HTML
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="hot">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="hot">제품 D</li>
</ul>
</div>CSS
<style>
.container {
width: 960px;
margin : 0 auto;
}
ul li {
margin:15px;
}
</style>'NEW'라는 내용을 화면에 표시하기 위해 실제로 HTML 문서를 수정하지 않아도,
가상 요소를 사용하면 쉽게 스타일을 적용할 수 있다.
<style>
.container {
width: 960px;
margin : 0 auto;
}
ul li {
margin:15px;
}
li.hot::after {
content:"NEW!!";
font-size:x-small;
padding:2px 4px;
margin: 0 10px;
border-radius:2px;
background:#f00;
color:#fff;
}
</style>1. 팝업시 노출 화면 어둡게
1-0. 닫기 버튼
HTML
<body class="popupShow">
<!-- ::before 자리 -->
<div id="popup1">
<button id="btn1">닫기</button>
</div>
<script src="./js/common.js"></script>
<!-- ::after 자리 -->
</body>CSS
<style>
.popupShow div{ display: block; } /* <button> 태그 블록 레벨화 */
div{ display: none; } /* div 영역을 화면에서 아예 지워버림 */
</style>
1-1. .popupShow::before{ 검정 배경색 }
1-1-1) body의 클래스 popupShow에 ::before 지정
- ::before == 내용(body=흰화면) 앞에 콘텐츠(검정 배경색) 추가
- body 앞에 (HTML에 없는 요소를 가상으로 만들어) '검정 배경색'을 추가할 수 있다.
- '검정 배경색'을 화면에 표시하기 위해 HTML 문서를 수정하지 않아도,
::before 가상 요소를 사용해 스타일을 적용할 수 있다.
※※ 닫기버튼과도 상관없고, 제이쿼리가 .popupShow를 제거/생성하는 것과도 상관없음.
::before의 역할은 걍 body 앞에 검정 배경색을 가상으로 추가한 것임!! ※※
1-1-2) .popupShow가 생기면 → 검정 배경색에 가려졌던 화면(body=흰화면)이 나타난다
CSS
<style>
.popupShow::before{
content: ""; /* 가상선택자에 붙이는 키워드 */
display: block;
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,0.5);
}
/* (1) 클래스 .popupShow가 생기면 */
.popupShow div{ display: block; }
/* (2) 가려졌던 화면이 나타난다 */
div{ display: none; }
</style>
1-2. 하얀 정사각형 팝업창에 닫기 버튼 넣기
div를 좌우에 붙여라, left:0; right:0;
근데 width가 600px이라고??
해답은 margin: auto; ---> 가운데 정렬됨!!
<style>
.popupShow::before{
content: ""; /* 가상선택자에 붙이는 키워드 */
display: block;
position: fixed; /* 단지 body 앞에 검정 배경색을 깐 것임 */
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,0.5);
}
.popupShow div{
display: block; /* 버튼 태그를 블록레벨로 지정 */
}
div{
display: none;
/* 블록레벨로 지정된 버튼태그가 정사각형 안으로 들어감 */
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* 좌우에 붙이라, 좌0 우0 */
width: 600px; height: 600px; /* 근데 width가 600px이라고?? */
margin: auto; /* 정답은 margin 자동! ---> 가운데 정렬됨!! */
background-color: white;
}
</style>
1-3. 제이쿼리 연동
.ready = "파일이 준비되면 실행할게!"
.click = "#byn1 버튼 클릭하면"
.removeClass = "body의 클래스 .popupShow 지운다"
<script>
$(document).ready(function(){ // ready = "파일이 준비되면 실행할게!"
$('#btn1').click(function(){ // click = "#byn1 버튼 클릭하면"
$('body').removeClass('popupShow'); // .removeClass = "body의 .popupShow 지운다"
});
});
</script>제이쿼리 설명 포스트
https://velog.io/@la_sta/7%EC%9D%BC%EC%B0%A8-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A4%EB%AA%85
닫기 버튼 클릭 시, body의 클래스 .popupShow 제거
요소 검사를 하면, body에서 클래스 .popupShow가 사라짐!
↓↓말하자면 아래와 같은 모습↓↓ (실제 HTML 문서를 수정하지 않고 클래스 지워짐)
<body class=" ">
<!-- ::before 자리 -->
<div id="popup1">
<button id="btn1">닫기</button>
</div>
</body>
(제이쿼리) 닫기 버튼 클릭 시 →→→ .popupShow에 지정한 스타일이 모두 없어짐!
즉, 하얀 상자만 남는 셈!
↓↓말하자면 아래와 같은 모습↓↓
<body class="popupShow">
<!-- ::before 자리 -->
<div id="popup1">
<button id="btn1">닫기</button>
</div>
</body><style>
/* body 앞에 깔았던 검정 배경색 사라짐 */
/* .popupShow::before{
content: "";
display: block;
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,0.5);
} */
/* 버튼 태그 다시 인라인 레벨화? */
/* .popupShow div{
display: block;
} */
div{
display: none;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 600px; height: 600px;
margin: auto;
background-color: white;
}
</style>body 앞에 깔았던 검정 배경색 사라짐.
그래서 닫기 버튼을 클릭하면 검정 배경+팝업창(+닫기버튼)이 사라지는 것처럼 보임.
