지난번에는 메모장을 이용하여 소스 코드를 작성한 후 웹 사이트를 만들어 보았습니다. 이제부터는 편한 작업과 오타를 없애기 위해 Visual Studio Code에서 코드를 작성하겠습니다. 실행 방법은 똑같습니다. 폴더를 만들고 파일을 만들 때 확장자를 .html로 붙이면 끝입니다.
지난번에 <h1>태그에 대하여 알아보았습니다. <h1>태그는 제목과도 같은 역할을 하는 태그라고 하였습니다. 지난주에는 <h1>태그 안에 Hello World! 라고 작성하였습니다. 이번에는 목표를 도와주는 프로그램을 만들기 위하여
<h1>Max Challanages started at 8.23 Thr</h1>
이라고 작성해보겠습니다.
그 후 오늘의 목표인 HTMl과 CSS의 사용법을 이해하는 것을 문단으로 작성해 볼 것입니다. HTML 태그 중 문단을 작성할 수 있는 태그는 <p> 태그입니다.
자세한 내용은 https://developer.mozilla.org/ko/docs/Web/HTML/Element 에서 확인하실 수 있습니다. 이 사이트에는 HTML의 모든 태그를 정리한 사이트입니다.
<p>Learn about the basics of web devolopment - specifically dive into HTML & CSS</p>
라고 작성한 후 실행을 시켜보면
이렇게 나타나게 될 것입니다.
이번엔 CSS를 통하여 폰트를 바꾸고, 글자를 가운데로 정렬하며, 색상을 바꿔 보겠습니다. CSS는 HTML 여는 태그 안에 작성합니다.
<h1 style="font-family: sans-serif; text-align: center; color: red">Max Challanges started at 8.23 Thr</h1>
위와 같이 작성했을때 CSS코드는 h1태그에서 한칸 띄우고 작성을 시작합니다. 먼저 style이라는 키워드를 통하여 글자의 스타일을 지정할 수 있습니다.
font-family는 폰트를 지정하는 코드입니다. font-family: 원하는 폰트를 입력함으로써 폰트 변경이 가능합니다.
이후 여러가지 방식으로 글자를 꾸밀 때 세미콜론(;)을 통하여 여러개를 구분지어 사용할 수 있습니다.
text-align은 글자의 위치를 조정하는 코드입니다. 중앙, 왼쪽, 오른쪽 등 글자를 원하는 위치로 이동시킬 수 있습니다.
마지막으로 color: 원하는 색상을 통하여 색상 변경이 가능합니다. Visual Studio Code 편집기에서 이 코드를 작성한다면, 원하는 색상을 입력하면 그 색깔을 보여줍니다.
이렇게 코드를 작성하고 실행해본다면 다음과 같은 웹 사이트가 표시될 것 입니다.
