HTML 코드 이용한 웹페이지 만들기, 어떻게 이루어질까?

HTML 코드 이용한 웹페이지 만들기, 어떻게 이루어질까?: 이은지 / 2021-03-30 14:43:54

많은 사람이 코드를 짜서 웹페이지를 만든다고 말합니다. 그런데, 코드를 통한 웹페이지 제작은 도대체 어떤 방식으로 이루어질까요?

우선, 하이퍼텍스트 마크업 언어인 HTML(HyperText Markup Language)로 웹페이지의 구조를 만들어줍니다. 그리고, CSS(Cascading Style Sheets)가 마크업 언어를 꾸며 주는 역할을 해, 같은 HTML 코드를 꾸며주는 방식에 따라 보이는 화면이 달라집니다. 그다음으로 동적으로 콘텐츠를 바꾸고 움직이는 역할을 하는 자바스크립트를 적용해 줍니다.

이후, HTML에 <button></button>을 입력하면, 누르기가 가능한 버튼 모양이 생깁니다. 이렇게 만들어준 코드에 border-radius로 버튼의 네 모서리를 둥글게 만들고, 타원에 비슷한 모양을 만들어 줍니다.

여기까지는 버튼만 만들었을 뿐, 누르면 아무 일도 일어나지 않습니다. 이때 onclick이라는 이벤트 넣어 버튼을 클릭했을 때, "Hello World!! 가 경고 창으로 뜨게 하라!"라는 자바스크립트 코드를 넣어주면 됩니다.

특정 웹페이지의 코드 구성을 보고 싶다면, F12 키를 눌러 확인할 수 있습니다. 그리고, 웹페이지 제작 과정에서 코드 작성 관련 사항을 더 자세히 참고하고자 한다면, MDN 웹 닥스(MDN Web Docs)에 접속하면, 상세 코드와 기능을 참고할 수 있습니다.