1. 밑줄
- 주로 text-decoration: underline; / border-bottom 사용
- text-decoration: underline; 사용 시 밑줄 : 장식용으로 사용 X
- text-decoration: underline과 같은 경우
1) 포털사이트 : 네이버, 다음, 네이트 접근성 준수해야 할 때
2) 링크 마우스 올렸을 경우
만 사용하며, 평소에는 사용 X
=> 밑줄 사용 시 border-bottom 사용 (**)
# 특이사항
(1) a 태그
- a태그는 기본 성격이 밑줄이 들어감
-> text-decoration: none; (필수 사용)
- a태그는 컬러가 상속되지 X
- a까지 경로 설정 후 컬러 변경
(2) .line
.line { text-decoration: line-through; }
가격 할인, 금액 중간 밑줄
리액트 일정관리 시에만 사용
.line { text-decoration: line-through; }
2. 세로 가운데 정렬
1) 문장 혹은 단어가 한줄일 때
line-height는 문장 혹은 단어가 한줄일 때만 사용
-> 여러줄일때는 사용 불가능
-> line-height : 높이
2) 여러줄 가운데 정렬
- padding + box-sizing로 정렬
- 한줄도 padding으로 가운데 정렬 가능하지만, line-height 권장
예시)
<style>
.box {
border: 1px solid #000;
width: 200px;
height: 100px;
margin: 30px;
text-align: center;
font-size: 20px;
}
.box1 {
/* 세로가운데 : 한줄일때만 (여러줄일때는 사용 불가능)
line-height : 높이*/
line-height: 100px;
}
.box2 {
/* 여러줄 가운데
padding + box-sizing */
width: 250px;
word-break: keep-all;
padding-top: 17px;
box-sizing: border-box;
}
/* 한줄도 padding으로 가운데 정렬 가능
하지만 line-height로 권장 */
</style>
</head>
<body>
<div class="box box1">금요일</div>
<div class="box box2">
오늘은 금요일 입니다.
오늘은 금요일 입니다.
</div>
<div class="box box3">토요일</div>
</body>
'CSS' 카테고리의 다른 글
| [css] border-radius (0) | 2024.02.19 |
|---|---|
| [css] 줄간격, 줄바꿈, 영문 대소문자, 공백 (0) | 2024.02.16 |
| [css] 단위 (0) | 2024.02.16 |
| [css] 다중클래스 (0) | 2024.02.16 |
| [css] text, border, font (1) | 2024.02.16 |
