0. 준비

추천 학습 사이트:

W3Schools (W3C 중국 커뮤니티 멤버들이 만든 비영리 웹사이트) - HTML, CSS, JS 학습에 적합

W3Schools 링크

MDN Web Docs (파이어폭스 개발자용 온라인 학습 자료):

MDN 링크

VSCode 플러그인 추천:

Live Server: 파일 저장 시 자동으로 브라우저를 새로 고침하여 HTML 결과를 실시간으로 확인 가능 (로컬 서버 생성, 포트 5500 사용, WebSocket 프로토콜을 통해 동기화)

1. 경로 설정

> / : 루트 디렉토리 (VSCode Live Server의 경우 프로젝트 디렉토리가 루트이며, HBuilder X는 프로젝트 디렉토리의 상위 디렉토리)

> ./ : 현재 디렉토리 (예: abc/css 는 ./abc/css 와 동일)

> ../ : 상위 디렉토리

2. CSS 박스 모델: 패딩, 보더, 마진

음수 값은 논외로 하겠습니다.

<div id="container">
    <p>내용</p>
</div>

<style>
#container {
    padding: 10px; /* 내용 주변 여백 */
    border: 2px solid red; /* 테두리 */
    margin: 15px; /* 다른 요소와의 간격 */
}
</style>

박스 모델에서 각 부분은 다음과 같습니다:

• 마진: 다른 요소와의 거리
• 보더: 요소의 테두리
• 패딩: 내용과 테두리 사이의 공간

4. 제작한 웹페이지 공유

나의 정적 블로그

웹 페이지 작업 예시:

<div id="header-nav">
    <h1>
        <span style="color:rgba(255, 20, 184, 0.671)">개인</span>
        <span style="color:grey">블로그</span>
    </h1>
    <nav>
        - [홈](index.html)
- [블로그](blogs.html)
- [공유](share.html)
- [정보](about.html)
    </nav>
    <div id="search-bar"><input type="text" placeholder="검색"></div>
</div>

<style>
* {
    margin: 0;
    padding: 0;
}

#header-nav h1 {
    float: left;
    padding-left: 50px;
}

#header-nav nav ul li {
    display: inline-block;
    margin-right: 40px;
}

#header-nav nav a {
    text-decoration: none;
    font-size: 20px;
}

#header-nav nav a:hover {
    background-color: rgba(75, 199, 236, 0.5);
    font-size: 130%;
    color: skyblue;
    padding: 10px;
    border-radius: 6px;
}
</style>

5. 흥미로운 웹사이트 분석

예를 들어, 코드하이라이트 기능을 제공하는 블로그나 대담한 색상 조합을 사용하는 국내외 웹사이트들을 살펴보세요.

6. 다양한 해상도 지원

다양한 화면 크기에 맞게 반응형 디자인을 적용할 수 있습니다. @media 쿼리를 활용하면 쉽게 해결됩니다.