지난 시간 HTML을 배우고 실습을 진행했습니다. 이어서 CSS를 사용해 화면을 어떻게 꾸미는지, JS를 사용해 어떻게 동작시킬 것인지에 대해 배우겠습니다.
📖CSS
CSS는 Casecading Style Sheet의 약자로 HTML이 웹의 뼈대를 만들었다면, 그 위에 살을 붙여가며 디자인할 수 있는 웹의 구성요소입니다.
자세한 내용은 제 다른 글을 참고해 주시면 감사하겠습니다. CSS를 적용할 수 있는 세 가지 방법(인라인, 내부 스타일 시트, 외부 스타일 시트), CSS를 적용시키기 위한 선택자(Selector)를 통한 요소(element) 접근하기를 중점으로 보시면 좋을 것 같습니다.
🍯tip! HTML, CSS 주석(적어도 실제 코드에는 반영이 되지 않고 주로 설명을 위한 글) 각각 <!-- 내용 -->과 /* 내용 */을 사용한다.HTML 주석CSS 주석
📄실습 이미지
인라인(inline)CSS내부(inner) CSS외부(external) CSS 연결외부(external) CSS 내용CSS 적용 결과 화면
📖JS
JS(JavaScript)는 HTML(뼈대)와 CSS(살)을 만들었다면 동작을 제어할 수 있도록 해주는 웹의 구성요소입니다. JS 단어를 자세히 보면 Script라는 단어가 있는데 이는 스크립트 언어임을 의미합니다.
스크립트 언어란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어로 응용 프로그램과 독립하여 사용된다.
좀 더 쉽게 보면, JS를 통해 웹 브라우저(크롬, 사파리 등)를 어떻게 동작하게 할지 제어하기 때문에 스크립트 언어라고 할 수 있습니다. 어떻게 보면 스크립트 언어는 제한적인 공간(= 응용 소프트웨어 내부)에서 사용된다라고 할 수 있습니다. 하지만 최근 런타임 환경의 발달로 인해 스크립트 언어로 충분히 프로그래밍이 가능해져 제한이 사라지고 있습니다.
📄세가지 적용 방법
HTML 내부에서 CSS와 비슷하게 세 가지 적용 방법이 있습니다.
인라인(inline) : CSS의 경우 모든 요소(element)에 적용이 가능했지만, JS의 경우 요소가 사용자와 상호작용이 있을 때만 적용이 가능합니다. 예를 들어 사용자와의 상호작용은 클릭과 같은 행동을 말합니다.
내부 스크립트(inner) : 하나의 HTML 문서 안에 같이 작성합니다.
외부 스크립트(external) : HTML 문서 외부에 작성하고 연결합니다.
🍯tip! JS 주석의 경우 CSS 주석과 동일한 /* 내용 */을 사용하거나 // 내용을 사용할 수 있습니다.JS 주석
📄기본 문법
함수(function) : 특정 기능을 수행할 수 있는 코드 덩어리.
조건문(if ~ else) : 조건에 따라 다른 동작을 할 수 있게 해주는 구분 코드.
변수(variable) : 값을 저장할 수 있고 이름을 부여할 수 있는 저장소. var, let, const가 있지만 현재는 var는 사용하지 않는다. const의 경우 값을 지정하면 변경할 수 없기 때문에 상수라는 표현이 좀 더 적합하다.
📄특정 태그 찾기
CSS의 선택자(Selector)와 비슷하게 JS에서도 태그를 찾아서 값을 가져오거나 다른 동작을 시킬 수 있는 함수가 존재한다.
document.getElementById('id') : 요소(element)의 id와 같은 태그를 찾는다.
document.getElementsByClassName('classname') : 요소의 class이름이 classname과 같은 태그들을 찾는다.
document.getElementsByTagName('tagname') : 요소의 태그가 tagname과 같은 태그들을 찾는다.
📄실습 이미지
인라인(inline) 및 결과 화면
내부 스크립트(inner script) & JS function 및 결과 화면내부 스크립트(inner script) & JS function2JS if ~ else(조건문)
결과 화면2외부 스크립트(external script) 연결변수 let, const 및 외부 스크립트(external script)
