[css 선택자] ::after, ::before 가상 선택자와 content 추가하여 태그에 border 만들기

::after, ::before 가상 선택자와 content 추가하여 태그에 border 만들기

홈페이지 네비게이션에서 태그사이에 보더가 있거나 태그 위에 보더가 있는 경우를 많이 봤었다.

보더 없이 일렬로 나열되는 것 보다는 장식적 요소를 줌으로써 

사용자들에게 현재 사용하고 있는 카테고리를 정확히 보여주고 

유저의 편리함과 접근성을 높이게 된다.

 

보더를 만드는 방법에는 여러가지가 있을 텐데 

내가 시행착오를 겪었던 방식과

::after,::before의 가상 선택자로 만드는 방법을 

중점적으로 활용해보겠다.

 

먼저 가상선택자에 대해 알아보자면

이러한 html코드가 있을 때

간단한 style을 주면 

이렇게 나올 것이다.

 

여기서

각각 ::before과 ::after을 적용하면 

'start'라는 텍스트와 고양이 이미지가 나온다!

::after, ::before 선택자에는 항상 

content : ""; 가 동반되어야 하고 

text를 추가할 때는 content안에 써주면되고,

이미지나 다른 속성을 추가할 때는 content는 공백으로 남겨둔 채 써주면 된다.

---

이제 본격적으로 선을 만들어 보려고한다.

html 목록 태그를 이용하여 간단하게 만들어준다.

큰 div.ex의 기본 스타일은 이렇게 설정

1. content 중간 border

1. border 을 이용하여 만들기

border을 이용하여 만드는 방법은 아주간단.

목록태그들을 정렬한 후에 

border-right(or left도 가능)을 이용해서 

li나 a 요소에 선을 만들어주면 된다. 

 

그런데.. 문제점은

선이 왤케 길지..?

현재 li에 border를 주었고, 그렇기 때문에 li의 높이에 맞추서어

border가 생성된 것이다 ㅡ..ㅡ

각 태그의 높이는 줄일수 있는 

한계가 있어서 저기서 더이상은 줄이기 힘듬 

 

2. content 를 이용하여 만들기

정확히 말하자면 border속성을 사용할 수도 있으니 border라고하는데 

"|"도 일종의 content가 될 수 있다.

 

content 방식이라하면 두가지로 나누어질 수 있겠는데 

키보드의 "|"를 바로 넣기

처음보다는 낫긴 한데 솔직히 마음에는 안듬 ㅋㅋㅋㅋ

content 자체에 width와 height를 주면?

이제야 적당한 높이와 간격이 설정되어서 조화롭다.

li와 a의 padding이나 margin 값 없이 ::after 로 들어간 content에 값을 적용하여 

만들수 있는 방법이다.

 

접근성 측면에서 좀더 공부해야겠지만,

확실히 border보다는 시각적으로 발전한 모습이다.

 

2. content 왼쪽 상단 border

왼쪽상단에 짧은 border를 만드는 방법은

내가 처음에 시도했던 span으로 만들기와 위에 짧은 선과 

마찬가지로 before을 이용하여 만드는 방법 두가지를 보려고한다.

1. span을 이용하여 만들기

span을 이용하여 만드는 방식은 코드를 짤때부터 

span 태그를 삽입하고 visibility:hidden(or display:none)을 해놓았다가 

hover 되면 visibility:visible(or display:block)로 변경하는 방식이다.

 

전자로 하게 되면 hidden은 되었지만 공간차지는 있기 때문에 그 자리에서 

border가 보였다 사라졌다 하고 display:none을 하게 되면 

공간 차지도 사라지기 때문에 hover되면 네비게이션이 살짝

아래로 움직이는 animation 효과도 줄 수있는 것을 발견했다.

 

이건 중요한게 아니고..

css코드를 이렇게 짜게되면 

li에 hover할 때 상단에 border가 생기게 할 수있음!!

 

active 되었을 때도 잘 작동되는 모습

그런데 학원에서 다르게 접근하는 방식을 가르쳐 주셨으니..

참고로 지금껀 nav를 flex방식으로 만들었고 

아래는 position 사용한 후 li들을 float 시켰음.

 

2. ::before을 이용하여 만들기

a::before에 content를 넣고 그 content들을 

부모요소인 a의 좌표에 맞추어서 position:absolute적용한 것이다.

두 방식의 결과는 동일한 모습!

border의 높낮이는 설정하기에 따라서 다른것이니..

 

하나의 디자인을 만드는데도 

여러가지 방식을 차용할 수 있다는 것을 직접적으로 보여준 예제였다.