HTML styling

0-0eong
|2023. 9. 1. 13:35


거의 모든 태그는 style = "" 라는 속성을 열 수 있다.
안에 스타일 이름 : 스타일 값 형식으로 스타일을 넣어주면 된다.
여러 개를 넣고 싶다면 , 대신 ; 을 넣어주어 나열시켜주면 된다.

자주 사용하는 글자 스타일들

font-size : 20px;  
font-family : 'gulim';  
color : black;  
letter-spacing : -1px;  
text-align : center;  
font-weight : 600;  

이미지 정렬과 폭 조정

display : block;  
margin-left : auto;  
margin-right : auto;  
width : 150px;  

이미지는 width를 많이 사용한다 주로 px 혹은 %로 크기를 조정한다.
%는 부모태그의 최대 크기에 맞게 계산하는 방법이다.

이미지를 가운데 정렬하고 싶으면 `display : block; margin-left : auto, margin-right : auto ` 를 기입해주면 된다.

Q. 텍스트의 일부만 스타일을 변경하고 싶다면??

이라는 태그로 감싼 뒤에 스타일을 적용하면 된다.
태그는 가끔 글자 일부를 싸매고 싶을 때 쓰는 아무런 의미없는 태그이다.

 

(참고) span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며, display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없습니다 폭, 높이를 주고싶으면 얘를 감싸고 있는 <p>에 주십시오.

'HTML&CSS' 카테고리의 다른 글

HTML&CSS float  (0) 2023.09.01
HTML div  (0) 2023.09.01
HTML what is CSS  (0) 2023.09.01
HTML tag  (0) 2023.09.01
HTML basic  (0) 2023.09.01