2023. 1. 20. 13:46ㆍ기술/HTML,CSS
박스 내부의 글자와 이미지를 디자인을 조정하는 속성들에 대해 알아보겠습니다.
ㅣ
ㅣ
V
[HTML]
<div>안녕소프트<br>anyeong-soft</div>
<body> 안에 위와 같이 넣어주면, 가장 기본적인 폰트와 기본색, 기본 크기로 표기가 됩니다.
[CSS]
div {
color: #fa0;
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: bold;
letter-spacing: 5px;
line-height: 1;
text-align: center;
text-decoration: underline;
}
color: 글자색을 지정
글자색을 주황색 (#fa0)으로 지정합니다.
font-family: 사용할 폰트 지정
"Montserrat" 또는 "고딕계열의 폰트(sans-serif)"로 지정합니다.
font-size: 폰트 크기 지정
글씨를 더 크게 해 주기 위하여 32px로 지정합니다.
font-weight: 폰트 두께를 지정
기본적인 두께는 "normal"이고, 두껍게 설정하고 싶을 때는 "bold"등으로 지정합니다.
letter-spacing: 글자의 간격(자간) 조정
글자 간의 간격을 조금 떨어 뜨리기 위해 5px로 지정합니다.
line-height: 줄 높이를 지정
폰트 크기와 같은 높이(1배)로 지정합니다.
text-align: 박스 내부에 있는 글자 정렬
왼쪽정렬은 "left", 중앙정렬은 "center", 오른쪽정렬은 "right"로 지정합니다.
text-decoration: 글자의 장식을 지정
밑줄은 "underline", 윗선은 "overline", 취소선은 "line-through", 필요 없을 때는 "none"으로 지정합니다.
| color | 글자색을 지정 | letter-spacing | 글자의 간격(자간) 조정 |
| font-family | 사용할 폰트 지정 | line-height | 줄 높이를 지정 |
| font-size | 폰트 크기 지정 | text-align | 박스 내부에 있는 글자 정렬 |
| font-weight | 폰트 두께 지정 | text-decoration | 글자의 장식을 지정 |
ㅣ
ㅣ
V
[HTML]
<div> <img src="logo.jpg" alt=""> 안녕소프트 </div>
<body> 안에 위와 같이 넣어주면, 로고 사진과 안녕소프트가 줄 바꿈이 들어가지 않고, 한 줄에 출력됩니다.
이때는 이미지와 글자는 기본설정으로 나타납니다.
[CSS]
img {
vertical-align: middle;
}
vertical-align: 한 줄 내부에서의 이미지, 인라인박스, 인라인 블록 박스의 정렬 위치를 지정
이미지 상단에 글자가 위치하고 싶으면 "top", 이미지 중간에 글자 위치를 원하면 "middle", 이미지 하단에 원하나면 "bottom"을 설정한다.
'기술 > HTML,CSS' 카테고리의 다른 글
| [HTML/CSS] 커서(cursor)디자인 정하기 (0) | 2023.01.26 |
|---|---|
| [HTML/CSS] 리스트 마크 디자인 정하기 list-style 종류 (0) | 2023.01.25 |
| 파비콘(Favicon) 설정하기 (0) | 2023.01.06 |
| [HTML/CSS] 링크 박스 만들기 (0) | 2022.12.29 |
| [HTML/CSS] 토글 버튼 만들기 (0) | 2022.12.29 |