[IT]] CSS - 가상 요소 선택자란 ? / CSS로 말풍선 모양 테두리 만들기 (border)

ㅇ 가상 요소 선택자

ㅡ 실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용한다

ㅡ 문법     selector::가상_요소_선택자 { } 

ㅡ 보통 추가 메뉴를 만들거나, 테두리를 말풍선 형태로 디자인할 때 , 작은 배너효과 등등에 사용한다.

 

ㅇ 필수적인 몇가지 확인해보자

ㅡ ::before  , ::after   앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함

문법에 content:""; 를 필수로 함께 적어야한다. ( 가상 요소의 컨텐츠를 만들어 줘야함. 텍스트,이미지 등이 들어갈 수 있음)

ex) 인기 있는 메뉴에 BEST를 붙이고 싶을 때도 가능

.number::after {

  content: "Best";

  font-size: 20px;

  color: red;

 

}

ㅡ ::placeholder  플레이스홀더 값을 수정한다. 

ㅡ ::first-leftter  첫번째 글자

p::first-letter {

  font-weight: bold;

  font-size: 20px;

}

ㅡ ::first-line 브라우저에서 보이는 기준으로 첫번 째 라인

ㅡ ::selection 마우스로 드래그해서 선택한 영역

a::selection {

  background-color: red;

}

 

 

ㅡ 예제 . footer   li와 li다음에 오는 경우에 +그리고 before요소에 ㅣ 넣기.

li+li&::before {

content:'l';

margin : 0.8px

color :gray 

}

---

ㅇ 말풍선 만들기

 

1. 먼저 이 사각형안의 삼각형 4개를 떠올려 보자 !

 

 

2. 말풍선의 DIV영역에 ::before 속성으로 DIV 추가

content=" " ; 로 DIV 추가

3. 추가된 DIV에 border-width 을 주고 

color 도 지정한다. transparent(투명한)도 속성값 부여

ㅡ border-width 는 삼각형을 기점으로 꼭지점이 0 ; 이다. 

아래 사진처럼 떠올려서 삼각형의 width값을 준다,

4. 추가된 DIV에 border-color  지정한다. transparent(투명한)도 속성값 부여

말풍선의 DIV영역과 같은 배경색으로 지정. (말풍선 꼬리 만들기)

5. 위치를 잘 지정하여 말풍선처럼 배치한다.

( 부모에게 position:relation; 주고 , 말풍선꼬리에 position:absolute; 로 값을 주기 )

 

6. 추가로 말풍선의 테두리만 설정할 때는 2개의 말풍선을 만들어서

하나의 위치만 1px 조정해서 z-index를 이용하여 border값만 남기고 배경색상으로 위에서 덮어준다.

(그러면 여집합만 남는다. border처럼 보이는 효과)

 

 

---

ㅇ 아래의 말풍선 + 텍스트 예제를 만들어 보자 ! 

css 말풍선 테두리 만들기

 

position의 위치값은 부모값에 따라 달라진다 

.cart--empty::before {

  content: "장바구니에 담긴 상품이 없습니다.";

  width: 288px;

  height: 99px;

  color: black;

  background-color: white;

  border: 1px solid gray;

  text-align: center;

  line-height: 99px;

  font-size: 14px;

  position: absolute;

  top: 82px;

  right: 0px;

}

.count::after {

  content: "";

  position: absolute;

  top: 83px;

  right: 25px;

  border-style: solid;

  border-width: 0 8px 10px 8px;

  border-color: gray transparent;

  display: block;

}

.count::before {

  content: "";

  position: absolute;

  top: 84px;

  right: 25px;

  border-style: solid;

  border-width: 0 8px 10px 8px;

  border-color: white transparent;

  z-index: 1;

}

 

 

 

---

참조 블로그

https://jw910911.tistory.com/137

CSS : 말풍선 만들기 (border 속성)