💎목표

미려하게 꾸미기

⭐데이터와 눈에 보이는 것 분리

예전 HTML은 눈에 보이는 font, color 등 모두 포함 (이렇게 만들면 안됨)

<!DOCTYPE html>
<html>
<head>
    <title>나쁜 코드 예제</title>
</head>
<body bgcolor="#F0F8FF">
    <center>
        <font face="궁서체" color="#FF0000" size="7">
            <h1>환영합니다!</h1>
        </font>
    </center>
    <p>
        <font face="돋움체" color="#0000FF">
            <b>이것은 매우 비효율적인 HTML 코드입니다.</b>
            <br><br>
            <font size="3">
                <table border="1" bgcolor="#FFFFCC" width="50%" align="center">
                    <tr>
                        <td align="center">
                            <font color="#008000">
                                <p>제품 목록</p>
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            <font color="#333333">
                                <ul>
                                    <li><font size="4">노트북</font></li>
                                    <li><font size="4">마우스</font></li>
                                    <li><font size="4">키보드</font></li>
                                </ul>
                            </font>
                        </td>
                    </tr>
                </table>
            </font>
        </font>
    </p>
</body>
</html>

요즘은 data와 view 분리
- MVC (Model View Controller), MVP (Model View Presenter), MVVM (Model View ViewModel) 등 모두 같은 개념
Data는 HTML에 저장
View는 CSS에 저장

⭐Cascading Style Sheets

CSS 기초 - Web 개발 학습하기 | MDN

보기 좋게 보이도록 꾸미는 부분
Selector(선택자)로 어떤 것을 꾸밀지 지정하고 구체적으로 어떻게 보이도록 할지 명시

데이터베이스 및 웹을 사용한 프로그래밍 기초

웹 프로그래밍