[웹 개발 기초] 웹 개발 6일차 (라이브 서버 적용, HTML의 목록, 스타일 다시 꾸미기)

 

 

 

 

 

https://dash758.tistory.com/10

[웹 개발 기초] 웹 개발 5일차 (이미지 삽입 및 스타일링, 배경 스타일링, 홈 페이지 완성 및 두 번

지난 시간에는 이미지를 삽입하는 <img> 태그와 이미지 스타일링, 배경 스타일링, 홈 페이지 완성 및 두 번째 페이지 만들고, 공유 CSS 파일과 상대 경로 지정하는 방법에 대해 알아보겠습니다.

이번 시간에는 Visual Studio Code에서 수정사항을 바로바로 웹 페이지에 적용시킬 수 있는 라이브 서버 확장 프로그램 설치, HTML의 목록을 알아보고, 스타일을 좀 더 꾸미겠습니다.

 

 

 

 

 

먼저 더 편한 개발을 위한 확장 프로그램인 Live Server를 깔아줍니다.

이 익스텐션은 소스코드의 수정사항을 브라우저에서 새로고침 할 필요 없이 실시간으로 고쳐주고, 웹 사이트가 웹 서버에 로드된 것처럼, 인터넷에서 실행되는 것 '처럼' 보이게 해줍니다.

 

그 후 원하는 html 파일을 우클릭 한 후 다음 버튼을 클릭해주시면, 브라우저를 다시 실행할 필요 없이 소스 코드를 저장함으로써 실시간으로 웹 페이지에서 변경 사항이 적용됩니다.

 

라이브 서버를 통해 만든 웹 페이지에 접속해본다면 URL 부분이 무언가 바뀌었음을 알 수 있습니다. IP주소와 포트, 파일이 저장된 경로가 URL에 표시가 되는데, IP 주소는 127.0.0.1로 되어있을 것 입니다. 이는 자기 자신의 IP 주소입니다.

 

 

 

 

HTML의 목록

HTML에서 목록을 만들 수 있습니다. 월요일, 화요일과 같은 순서와 관련이 있는 것은 <ol> 태그, 바나나, 사과, 포도와 같이 서로 관련된 원소들로 이루어진 목록은 <ul> 태그로 묶을 수 있습니다.

#remain.html

    <ol>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
    </ol>

    <ul>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Grapes</li>
    </ul>

 

이때 각 태그 안에는 <li> 태그로 목록을 구분해줍니다. 이 상태로 웹 페이지를 실행하면 겉보기엔 별로 차이가 없지만 화면의 왼쪽을 보면 번호와 글머리 기호가 나타난 것을 알 수 있습니다.

 

이를 이용해서 금주의 과제를 목록을 이용하여 바꾸어 보겠습니다.

 

과제는 Project1, 2, 3과 같이 순서로 지정되어 있으므로 <ol>태그를 이용하여 만들겠습니다.

#remain.html

    <ol>
        <li>Project1 - Repeat what I learned about HTML & CSS</li>
        <li>Project2 - Do the exercise on HTML & CSS</li>
        <li>Project3 - Dive deeper into HTML & CSS and build more complex websites</li>
    </ol>

 

 

 

 

스타일 더 꾸미기

#remain.css

h1{
    font-size: 48px;
}

a {
    background-color: #38083b;
    border-radius: 5px;
    font-size: 24px;
}

a:hover {
    text-decoration: none;
    background-color: #95e8bb;
}

ol {
    list-style: none;
}

li {
    background-color: #fc3f81;
    border-radius: 5px;
    margin: 32px;
    font-size: 18px;
}

 

 

위 코드와 같이 과제 페이지를 조금 더 꾸며보았습니다. 대체적으로 글자 사이즈를 키우고, 배경 색상을 추가하였습니다. 또한 앵커 태그(하이퍼링크)가 적용된 코드를 보면 마우스를 올려 두었을 때 배경색상이 바뀌도록 바꾸었습니다. 과제가 들어있는 <li> 태그에서는 각 금주의 과제들 간의 글자 간격을 늘려주고, 배경 색상을 설정하였습니다.

 

설정한 모습은 다음과 같습니다.

 

앵커 태그에 마우스 올려 두었을 때

 

그러나 <li>태그를 보면 아직 부족한 스타일링이 많아 보입니다. 이는 다음 시간에 고쳐보도록 하겠습니다.