이미지에 style 추가하기
style을 통한 이미지 조정
<img src="lion.png" style="width: 100px; margin-left: 30px"> width를 통해 사진의 크기를, margin-left,margin-top 등을 통해서 이미지를 얼마나 띄울지 결정할 수 있다.
이미지 크기 조절
px, vw, %
px: pixel 단위 vw: 현재 브라우저 창의 너비 %: 부모 태그의 몇% 사이즈로 설정
폰트 스타일링
글자 위치: text-align
글자 크기: font-size
폰트 종류: font-family
글자 색깔: color
글자 간격: letter-spacing<h3 style="text-align: center;font-size: 16px; font-family: 'nanumsquare'; color: black; letter-spacing: 4px">bell-person-ii</h3>
span 태그
의미 없는 태그로 스타일링을 한정해서 적용할때 사용함
<span></span>
적용예시
코드 -><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="lion.png" style="width: 100px; display: block; margin-left: auto; margin-right: auto"> <h3 style="text-align: center;font-size: 16px; font-family: 'nanumsquare'; color: black; letter-spacing: 4px">bell-person-ii</h3> <p style="text-align: center"><span style="color: dimgray; font-weight: 100">Back-end</span> Developer</p> <div> <p style="text-align: center; font-family: 'nanumsquare'">-소개-</p> <p style="text-align: center; font-family: 'nanumsquare'"> <span style="color: limegreen">스프링</span>을 메인으로 공부하고 있는 학생입니다.</p> </div> </body> </html>
BackEnd 공부 중인 학부생