HTML 꾸미기

📌 HTML 꾸미기

• style=” 속성; 속성; … 속성 ”
• 속성 간 ;로 구분

---

📌 img 이미지 스타일링

• 이미지 너비
  • width
• 이미지 여백
  • margin-left/top/bottom/right

🗒️이미지 너비, 여백 적용

<img src="lion.jpg" style="width:100px; 
margin-left: 30px">

• 이미지 가운데 정렬
  • display : block
  • margin-left : auto
  • margin-right : auto

🗒️이미지 가운데 정렬

<img src="lion.jpg" style="width:100px; 
display: block; margin-left: auto; 
margin-right: auto">
       

---

📌 글자 스타일링

• 글자 사이즈
  • font-size
  • px(-픽셀) / vx / %(-부모 사이즈에 비례)
• 폰트종류
  • font-family : ‘gulim‘
• 색상
  • color: red / #FFFFFF
• 자간 간격
  • letter-spacing: 5px
• 글자 가운데 정렬
  • text-align: center
• 일부 글자만 스타일링
  • <span></span> 테그로 감싸기 (별 뜻 없는 테그)
  • <span style=”color: red”>일부글자</span>
• 글자 굵게
  1. font-weight: 100~900
  2. <strong></strong>

🗒️ 글자 스타일링

<h3 style="font-size: 30px; 
        font-family:'Times New Roman'; 
        color:darkolivegreen; 
        letter-spacing: normal;
        text-align: center">Minji Lee</h3>

<p style="text-align: center; margin-right: 10px; font-family: 'Times New Roman'">
    <span style="color: red;">
        <strong>¡Hola!</strong>
    </span>
    Buenos tardas. Soy coreano y soy muy amable. ¡Mucho gusto!
</p>

 

🔎 <strong> 태그는 <h1> 처럼 제목 글자에는 안 되는 듯. 이미 두꺼워서 그런가