😢 강조하는 부분을 이쁘고 편하게 바꾸고 싶다
포스팅을 하다 보니까 강조하는 부분을 표시하는 방식이 여러 가지가 있더라.
글자 크기, 글자 색, 하이라이트, 밑줄, 굵게, 기울기 등 그렇지만 매번 글자 크기를 바꾸거나 글자 색을 주거나 하이라이트를 칠하는 건 귀찮다.
어떤 색을 써야 눈에 잘 띄면서 디자인도 좋은지 생각해야 하고..
미적 감각이 없는 나는 그냥 굵게, 밑줄, 기울기를 사용하는게 편하다.
공책에 밑줄도 항상 색이 있는 펜이나 형광펜을 써왔기 때문에 까만 줄이 거슬린다.
이쁘지도 않고ㅠㅠ
그렇다고 매번 하이라이트 효과를 주자니 귀찮아, 색도 너무 많고.
그래서 css를 이용해서 밑줄를 꾸며보기로 했다.
✨ 밑줄 효과 꾸미기: 원하는 목표 2가지
첫 번째, 그라데이션
두 번째, 색상
🔧 포트폴리오 스킨 수정하기
✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.
코드 수정이 끝났다면 적용을 누른다.
📌 밑줄 효과 조정하기
📝 코드 설명
👉 CSS 코드
(1) text-decoration : 텍스트에 밑줄, 취소선, 위줄 등의 효과를 적용하는 속성
text-decoration: underline; /* 기본 밑줄 */
text-decoration: underline wavy red; /* 물결 모양의 빨간 밑줄 */✔ text-decoration-line: 선의 유형 지정 (예: underline, overline, line-through)
✔ text-decoration-style: 선의 스타일 지정 (예: solid, dashed, dotted, wavy)
✔ text-decoration-color: 선의 색상 지정
✔ text-decoration-thickness: 선의 두께 지정
(2) text-underline-offset : text-decoration: underline;과 함께 사용해 밑줄의 위치를 조정하는 속성
text-decoration: underline;
text-underline-offset: 4px; /* 기본 밑줄보다 아래로 4px 이동 */
(3) background : 배경색을 적용하는 속성 → 밑줄처럼 활용 가능
background: linear-gradient(to top, red 50%, transparent 50%);아래쪽 50%는 빨간색, 위쪽 50%는 투명
(4) border-bottom : 요소의 하단에 테두리를 추가하는 속성 → 밑줄처럼 활용 가능
border-bottom: 3px solid red;✔ 3px : 선 두께
✔ solid : 선 스타일 (dashed, dotted 등이 있음)
✔ blue : 선 색상
(5) box-shadow : 요소의 테두리 안팎으로 그림자를 추가하는 속성 → 밑줄처럼 활용 가능
box-shadow: inset 0 -3px 0 red;✔ inset : 내부 그림자 효과 (기본적으로는 외부 그림자)
✔ 0 : X축 이동 (왼쪽, 오른쪽 조절)
✔ -3px : Y축 이동 (아래쪽으로 그림자 배치)
✔ 0 : 흐림 정도 (0이면 선명한 그림자)
✔ red : 그림자 색상
(6) text-shadow : 글자에 그림자를 추가하는 속성 → 강조 기능으로 활용 가능
text-shadow: 0 3px 0 red;✔ 0 : X축 이동
✔ 3px : Y축 이동 (아래쪽으로 그림자 이동)
✔ 0 : 흐림 정도 (선명한 효과)
✔ red : 그림자 색상
💻 적용 코드
👉 CSS의 적당한 위치에 아래 코드를 입력한다.
1) 부드러운 밑줄
u {
text-decoration: none;
display: inline;
box-shadow: inset 0 -5px 0 rgba(138, 205, 215, 0.6);
}
2) 점선 밑줄
u {
text-decoration: none;
border-bottom: 2px dotted red;
}
👀 적용 모습
나는 1번 방식으로 적용했다.
📍 참고(box-shadow 속성)
box-shadow: h-offset v-offset blur spread color inset;✔ h-offset : 그림자의 수평 위치. 값이 양수이면 오른쪽, 음수이면 왼쪽으로 이동
✔ v-offset : 그림자의 수직 위치. 값이 양수이면 아래쪽, 음수이면 위쪽으로 이동
✔ blur : 그림자의 흐림 정도. 값이 클수록 더 흐려진다.
✔ spread : 그림자의 퍼짐 정도. 양수일수록 그림자가 퍼지고, 음수일수록 그림자가 좁아진다.
✔ color : 그림자의 색상
✔ inset : 그림자가 요소의 안쪽으로 그려진다.(그림자는 기본적으로 바깥쪽에 그려진다)
/*예시*/
① box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.5); /* 아래로 10px 이동 */
② box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 흐림 정도 10px */
③ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); /* 그림자가 5px만큼 퍼짐 */
④ box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5); /* 빨간색 그림자, 반투명 */
⑤ box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); /* 내부 그림자 */
⑥ 기본 그림자
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); /* 수평: 10px, 수직: 10px, 흐림 정도: 5px, 색상: 반투명 검정색 */
⑦ 아주 흐린 그림자
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* 수평: 0px, 수직: 0px, 흐림 정도: 15px */
⑧ 살짝 퍼진 내부 그림자
box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.4); /* 내부 그림자, 퍼짐 정도: 5px */
⑨ 다중 그림자 효과
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(255, 0, 0, 0.3); /* 검은색과 빨간색의 그림자 두 개를 겹침 */
