[CSS] 동그라미 안에 텍스트 넣기, 대각선 그리기

[그림 1] "정상, 대각선" 그리기

 

text-align, display, vertical-align을 이용해 보더 정중앙에 텍스트 배치

[그림 1]의 겉뚜껑 카드 안에 "정상, 대각선"을 그려 넣고자 했다. 보더 안에 텍스트를 넣는 것은 어렵지 않았다. 하지만 보더 안의 정중앙에 글자를 배치하기 위해서는 몇 가지 설정을 더 해줘야 했다. 아래 코드에서 주석에 해당하는 부분을 참고하자!

.card-message-wrap {
  height: 40px;
  width: 40px;
  border-style: solid;
  border-width: thin;
  border-radius: 50%;
  /* 이하 텍스트 중앙 배치 코드 */
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

 

background을 이용해 대각선 그리기

검색해보니 대각선을 그리는 몇 가지 방법이 있었다. 그중에서 아래의 코드가 사용하기 편리했다. "background"가 대각선을 그려주는 속성이다.

.reverse_diagonal {
  width: 120px;
  height: 120px;
  position: relative;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="93%" y2="28%" stroke="white" /></svg>');
}

 

참고 자료

https://velog.io/@madpotato1713/HTMLCSS-%EB%8C%80%EA%B0%81%EC%84%A0-%EA%B7%B8%EB%A6%AC%EA%B8%B0

[HTML/CSS] 대각선 그리기

 

※ SVG의 stroke속성
- stroke : 선색 속성
- stroke-width : 선 굵기 속성
- stroke-linecap : 선의 양쪽 끝 모양 속성
- stroke-dasharray : 점선처리 속성