CSS - border edge 만들기

border는 태그의 테두리를 만드는 css 속성이다 하지만, 테두리를 더욱 이쁘게 edge만 테두리 효과(아래 사진처럼)를 만들 수 있다

 

#object

   * 하단 그림에 우측상단과 좌측하단에 부분에만 border 효과 만들기

 

## ::before / ::after

우선, CSS 속성 before와 after를 확인 해보면

   *before: 선택자의 첫번째 자식으로 먼저 실행

   *after: 선택자의 첫번째 자식으로 나중에 실행

 

ex) 

   * 아래와 같이 div 태그가 있다면...

   *.feature-box::before{} > .feature-box{}  > .feature-box::after{} 순으로 UI를 그린다.

   * before 와 after의 기준은 feature-box 이고, 부모 태그가 된다.

<div class='feature-box'>content</div>

 

before와 after를 사용할 때, 핵심은 content 이다. content가 있어야만 실행이 된다. content 값으로 빈문자열도 가능! 빈문자열은 아무것도 표시 안하겠다는 것이다.

 

먼저 전체 코드를 보면

.feature-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(216deg, #ffffff, #000000, #000000, #000000, #ffffff);
  opacity: 0.5;
  z-index: -1;
  border-radius: 10px;
}

.feature-box::after {
  content: '';
  position: absolute;
  top: 1.3px;
  bottom: 1px;
  left: 1.5px;
  right: 1px;
  background: #000000;
  z-index: -1;
  border-radius: 10px;
}

 

아래 코드를 확인 해보면

   *feature-box::before 는 feature-box 태그가 먼저 그려지기 전에 그려지고 feature-box의 내부 배경이라고 생각하면 된다.

   *feature-box::after는 feature-box 태그가 생성되고 나서 그려진고 위에 덮어주는 커버라고 생각하면 된다.

   *feature-box CSS 속성 보다 before와 after의 z-index는 낮아야 내용물이 보인다.

 

feature-box::before 속성만 있을 때,

 

feature-box::before 와 feature-box::after 속성 같이 있을 때,

after 속성이 추가되고 나서 테두리 edge만 생긴걸 알 수 있다.

 

 

그리고 나서 after에 있는 top, left, rigth, bottom 속성을 통해서 테두리의 두께를 만들 수 있다.

   * after에 top, left, rigth, bottom 값들은 양수 일수도 음수 일수도 있다. 부모태그에 어떻게 되어있느냐에 따라 다르다.

// top, left, rigth, bottom 값들이 10px 일때

 

// top, left, rigth, bottom 값들이 3px 일떄

 

 

 ### 참조 - before, after

https://developer.mozilla.org/ko/docs/Web/CSS/::before

::before (:before) - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/::after

::after (:after) - CSS: Cascading Style Sheets | MDN