[HTML] STYLING 웹페이지 스타일링

💾 Editor: VSCode

 

---

🔎 STYLING

👉 text style

• font-size: 글자 사이즈
• font-family: 폰트 종류
• color: 폰트색
• letter-spacing: 자간 조절

 

👉 강의 듣는 중 완성

    <!-- width: 가로 , margin: 여백 -->
    <!-- 이미지 가운데 정렬 > display: block; margin-left: auto; margin-right: auto; -->
    <img src="main.png" style="width:100px; display:block; margin-left:auto; margin-right:auto;">

     <!-- 텍스트 가운데 정렬 > text-align: center; -->
    <h3 style="text-align:center;">devje</h3>
    <p><strong style="color:red;">Front-end</strong> Developer</p>

 

---

👉 실습 :: 소개글 알아서 완성

    <div
        style="display:block; margin-left:auto; margin-right:auto; width: 400px; background-color: gold; padding: 10px;">
        <img src="main.png" style="width:100px; display:block; margin-left:auto; margin-right:auto;">
        <h3 style="text-align:center;">devje</h3>
        <p style="text-align:center;"><strong style="color:red;">Front-end</strong> Developer</p>
        <p style="text-align:center;">I want my dream to come true. The future is <strong
                style="color:blue">mine</strong>.</p>
    </div>

이번 강의에서는 태그 내에 style 속성을 넣어서 스타일링 하는 실습을 했다.
div 태그 활용해서 프로필 이미지와 텍스트 뒤에 백그라운드 컬러를 넣었다.
컬러는 gold!
그리고 mine 글자에 blue 컬러 지정!

 

 

 

코딩애플 공부 기록