1. HTML과 CSS란 무엇이며 이것들이 필요한 이유는?
HTML이란 Hyper Text Markup Language의 약자로, 각각 뜯어보면 Hypertext와 Markup Language로 구분할 수 있다
Hypertext란 하이퍼링크를 이용해 원하는 순서에 따라 기존문서에서 다른문서로 접근할 수 있는 텍스트를 말합니다. 우리가 어떤 텍스트를 클릭했을 때, 의도한 다른문서로의 접근을 가능케하는 기능입니다.
Markup이란 어떤 표시를 뜻하는 것이며,Markup Language는 여러가지의 정보가 혼합된 문서나 구조들을 태그 혹은 속성에 맞게 명시하는 언어를 뜻합니다.
HTML에서의 Markup Language는 보통태그라고 하며, 해당하는 텍스트의 속성이나 정보를 부여할 때 사용할 수 있고, 사용문법은 열리는태그와 닫히는태그 사이에 텍스트를 넣어주어 그 기능을 해당 텍스트에 부여합니다.
<h1>제목입니다</h1>
<p>문단입니다</p>
<button>버튼입니다</button>CSS란 Cascading Style Sheets의 약자로 HTML로 만든 웹페이지의 뼈대에 스타일 등 디자인적으로 꾸며줄 수 있는 언어입니다.
CSS의 대표적인 언어규칙은 선택자와 속성이 있습니다.
선택자는 CSS로 스타일을 지정할 HTML 요소를 선택하는 것으로, 보통 HTML 태그 안에 속성으로 Id 또는 Class를 설정하여 그 속성을 이용해 요소를 선택하여 그 안에 객체로 CSS 속성을 입혀서 글자색, 글자크기 등의 스타일을 지정할 수 있습니다.
index.html
<h1 id="제목">제목입니다</h1>
style.css
#제목 {
color: red;
font-size: 50px;
}하여 HTML과 CSS가 필요한 이유는 HTML로 웹페이지의 뼈대와 구조를 설정하고, CSS로 스타일을 지정하여 보다 더 편하고 더 나은 비주얼의 웹페이지로 정보를 제공할 수 있기 때문입니다.
2. HTML, CSS, Javascript의 관계
위의 설명과 같이 HTML과 CSS로 만든 웹페이지에 조금 더 동적인 요소들을 추가하기 위해서는 Javascript라는 프로그래밍 언어를 사용하여 사용자와 웹페이지간에 더 많은 의사소통을 가능하게 할 수 있습니다.
쉽게 말해서는, 기존에 HTML과 CSS로만 만든 웹페이지는 사용자의 어떤 행동을 감지할 수 없지만, Javascript를 이용하면 사용자가 어떤 배너위에 마우스가 hover되어 있어 어떤 배너를 더 크게 보이게 할 것인지, 영어로만 작성해야하는 ID칸에 한글을 입력하는 것을 감지하고 영어로만 입력할 수 있다는 경고문구를 노출시키는 등 더 많은 상호작용을 통해 사용자가 더 좋은 사용경험을 가질 수 있도록 할 수 있습니다.
3. HTML, CSS, Javascript 세 종류의 파일을 연결하는 방법
기본적으로 HTML로 만든 문서위에 CSS는 head부분에 rel속성으로 어떤 역할인지, href속성으로 .css 파일을 지정해주어 연결이 가능하다.
<head>
<link rel="stylesheet" href="style.css">
</head>Javascript를 연결하는 방법은 body부분의 맨 끝에 src속성으로 .js파일을 연결해줄 수 있다.
<body>
<script src="index.js"></script>
</body>4. script태그의 위치에 따른 차이점
어떤 웹페이지를 열게되면 먼저 HTML과 CSS를 파싱한 결과물로 페이지를 화면에 표시하고, 그 후에 script태그를 만나면 파싱을 멈추고 Javascript 해석기에서 해석을 진행한다.
script태그가 body의 제일 위에 있으면, HTML요소들이 전부 파싱되기 전에 script태그를 만나게 되어, script파일이 조작해야하는 HTML요소들이 불러와지기 전이기 때문에 예상할 수 없는 오류들이 생길 수 있다.
때문에 body의 맨 끝에 script태그를 두어 HTML요소들이 전부 파싱된 이후에 Javascript 파일이 HTML요소들을 조작할 수 있게 두는 것이 효과적이다.
5. 웹페이지에서 일어날 수 있는 이벤트의 종류
Javascript를 사용하여 얻을 수 있는 가장 큰 장점 중 하나는 사용자의 행동을 감지하고, 그 행동에 맞는 결과물을 보여주어 사용경험을 더 좋게 만들어 줄 수 있다는 것인데, 웹페이지에서는 마우스클릭이나 마우스의 위치에 따른 이벤트, 키보드를 눌렀을 때와 뗐을 때 같은 키보드이벤트, 그리고 Input이나 Submit와 같은 버튼류의 Form에 관련한 이벤트 등이 있다.
6. 이벤트와 자바스크립트 함수의 관계
보통 이벤트를 감지하는 addEventListener로 이벤트의 종류, HTML요소 등을 지정하여 해당 HTML요소에서 이벤트를 감지해내고, 감지해낸 데이터를 가지고 다시 반응하는 함수를 지정하여 '어떠한 이벤트가 생겼을 때, 어떠한 로직을 통해 특정 반응을 돌려준다' 라는 식의 로직을 구현할 수 있다.
