HTML, CSS, JavaScript

양치는 하셨나요·2024년 8월 6일

HTML은 지난 XML과 JSON 블로그에서 다뤘지만 CSS와 JavaScript는 전혀 공부한 적이 없기 때문에 감도 잘 안잡힌다. 이번 시간에 셋의 개념과 특징, 차이점들을 자세히 알아보고자 한다.

우선! 그 전에 위의 세가지 모두 웹 개발에서 중요한 프론트앤드 영역의 구조적인 부분을 구현하는 중요한 부분을 담당하고 있고 이를 이해하는 것이 프로젝트의 완성도를 높일 수 있다는 것을 알고 가면 좋을 것 같다.

HTML

앞서 말했듯이 HTML은 XML을 설명하는 블로그에서 잠깐 나왔었다. 그 내용을 일부 가져와보자.

HTML과 XML의 차이
구조를 이루고 태그로 명시하는 마크업 언어라는 점은 비슷하나 HTML은 웹페이지의 구성 및 구조를 나타내는 데 목적이 있고 XML은 이런 웹과 다양한 시스템에 정보를 주고 받는 데이터 전송에 목적이 있다.
또한 HTML은 태그들이 정해져 있어 HTML을 지원하는 브라우저라면 공통적으로 동작할 수 있도록 하지만 XML은 데이터를 편리하게 주고 받을 수 있도록 태그에 제한이 없다.
결국 HTML은 XML의 형식으로 웹을 표현할 수 있도록 태그를 미리 정해 둔 언어라고 할 수 있다.

여기서 말했듯 HTML은 XML과 같은 구조를 가지고 있지만 태그가 정해져있다는 사실을 기억하고 아래의 내용들을 정리해 본다.

개념

간단하게 사전적 정의를 먼저 보자.

하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다.

이 사전적 정의 부분에서 알 수 있는 것들은 아래와 같다.

마크업 언어이다.
제목, 단락, 목록 등의 구조적 의미를 나타낸다.
구조적으로 데이터를 문서로 만들 수 있는 방법을 제공한다.
이미지와 객체를 내장해 대화형 양식을 생성하는 데 사용될 수 있다.

위의 의견을 종합해 본다면

→ HTML이란 인터넷 브라우저가 알아들을 수 있는 기본적인 마크업 언어로 다양한 데이터들의 구조적 의미와 문서화를 할 수 있도록 도와주는 언어이다.

예시

<!doctype html>
<html>
    <head>
        <title>HTML 예시</title>
        <meta charset="utf-8>
    </head>
    <body>
        <h1>HTML 예시</h1>
        <p>
        HTML은 꼭 알아야 할까요? 네~ 꼭 알아야합니다~
        </p>
    </body>
</html>

예시에서 보면 시작 할 때 이 문서의 타입이 HTML임을 명시하고 태그 안에 정보들이 들어가게 된다.

그리고 태그의 종류에서 봤듯 head와 body로 구분된다.

head에는 웹사이트의 제목과 인코딩 타입을 명시했다.
body에는 본문의 첫 번째 제목을 뜻하는 h1 안에 제목이 들어있고 p 라는 태그로 문단을 구분해서 내용을 작성하였다.
- heading의 h, paragraph의 p 이다.

태그를 정해 둔 이유?

이전 블로그에서 XML을 공부할 땐 HTML과 다르게 태그의 다양성을 부여해 원하는 태그를 생성함으로써 다양한 데이터를 전송할 수 있도록 한다고 했었다. 그렇다면 HTML의 태그를 특정 태그를 지정해 제한하는 이유는 무엇일까?

HTML Semantic Markup

단어의 뜻 그대로 의미 있는 마크업을 사용한 HTML이란 뜻이다. 위에서 말했듯 head, body 등으로 태그의 의미를 미리 정해둔 것을 의미한다. 이렇게 한다면 아래와 같은 장점들을 가질 수 있다.

가독성
- 태그의 의미가 정해져있다면 따로 의논할 필요나 주석을 남길 필요 없이 바로 이해 가능하다.
웹 접근성
- 태그들이 정해져있다면 다양한 확장 프로그램들이 동작 가능하기 때문에 HTML 문서를 기반으로 다양한 작업을 진행할 수 있게 할 수 있다.
검색 엔진 최적화
- 위의 접근성에 더불어 저장된 데이터가 어떤 영역의 데이터인지 구분 가능하기 때문에 검색 등의 데이터 가공에 활용하기 쉬워진다. 태그가 정해져있지 않고
  와 같이 단순히 데이터만 넣어둔다면 어떤 부분이 중요한 정보인 지 알기 어려울 것이다.

→ 결국 사람들이 보기 쉽고 데이터를 명확히 구분 지어서 추후 활용에 용이하게 하기 위해 시멘틱 마크업을 사용한다.

CSS

이 단어는 처음 들어보는 것이어서 감이 잘 안온다. 개념부터 차근차근 접근해보자.

개념

종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

위의 사전적 정의를 요약해 보자면.. 필요한 데이터들은 HTML 태그들을 이용해 구분 했으니 이를 시각적으로 더 예쁘고 직관적으로 보이게 하기 위해 style을 바꿀 수 있도록 도와주는 스타일 시트 언어인 것이다.

적용

CSS는 결국 HTML에 디자인적 요소를 추가하는 것이니 HTML에 CSS에 관한 내용들을 넣을 수 있어야 한다. 이것에는 크게 3가지 방법이 있다.

내부 스타일 시트

head 태그 사이에 style 태그를 이용해 작성한다.

HTML과 CSS가 한 파일에 있어 작업이 쉽고 간편하지만 CSS 재활용이 어렵다.

→ 권장되지 않는다.
외부 스타일 시트

가장 기본적인 방법. 별도의 파일에 CSS 문서를 작성하고 필요 시 파일을 불러온다. 이때 CSS는 동일한 서버에 있거나 url을 통해 다른 서버에서 불러올 수 있다.
인라인 스타일

HTML 태그에 필요한 디자인 속성을 직접 작성한다. 그때그때 적용 가능하다는 편리함이 있지만 일관된 디자인 체계를 유지하는 데엔 방해가 되기 때문에 꼭 필요한 경우가 아니면 사용이 권장되지 않는다.

우선 순위

위의 적용 방법들 처럼 다양한 방법으로 스타일을 작성 가능하다 보니 우선순위에 따라 먼저 지정되는 것이 있다. 이 순서는 아래와 같다.

!important 가 있는 속성
인라인 속성
id 속성
class 속성
태그 선택자

동일한 순위일 경우 나중에 적용된 것이 우선 적용된다.

구조

전체 구조는 rule set 혹은 rule 이라고 불린다. 여기엔 위의 사진과 같이 Selector, Declaration, Property, Property Value가 있다.

Selector
- 꾸밀 요소를 선택한다.
Declaration
- 꾸미기 위한 요소의 속성을 명시한다.
Property
- rule 내에서 사진과 같이 속성을 선택해 작성한다.
Property Value
- 속성의 오른쪽에 속성의 value를 작성한다.

위의 요소 뿐 만 아니라 아래의 문법도 중요하다.

각각의 rule set (셀렉터로 구분) 은 반드시 중괄호로 감싸져야 한다.
각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론을 사용해야 한다.
각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론을 사용해야 한다.

예시

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

위의 구조에 따라 이 예시를 보면

p에 속한 요소는 빨간색을 가지고 가로의 길이는 500px이며 경계는 1px의 검정 실선으로 되어있음을 알 수 있다.

Java Script

자바 스크립트, 흔히 JS라고 부르는 이것은 또 무엇인가? 진짜 모르겠다… 나는 이것 또한 이전에 쓴 블로그에서 JSON을 공부하며 JSON이 JS의 기본 구조를 활용한 문서 양식이란 것을 배웠었는데 이를 생각하며 알아본다.

개념

자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
스크립트 언어는 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다.

자바 스크립트와 스크립트 언어의 사전적 정의를 가지고 왔다. 이해가 가는 듯 하면서도 안가는.. 묘한 느낌이지만 결국 요약해 본다면 아래와 같을 것이다.

웹 페이지의 동작의 수행에 관여한다.
다른 응용프로그램과 독립적으로 구현되고 연결된다.

→ 웹 사이트의 생동감과 상호작용을 제공한다.

특징

JS는 프로그래밍 언어이면서 화면 구성과 동작을 연결 시켜 주는 언어인 만큼 독특한 특징들이 있다.

동적이며 타입을 명시할 필요가 없는 인터프리터 언어 이다.
- 인터프리터 언어는 간단하게 python을 생각하면 될 것 같다.
객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
HTML의 내용, 속성, 스타일을 변경 할 수 있다.
이벤트를 처리하고 사용자와의 상호작용을 가능하게 함.
AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공.
- AJAX(Asynchronous Javascript And XML): 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

장점

비교적 쉽게 배우고 사용 가능하다.
클라이언트 측과 서버 측, 프론트 엔드와 백엔드에 모두 사용할 수 있다.
역동적이고 상호 작용하는 웹사이트를 제공한다.
여러 플랫폼과 기기에서 실행 가능하다.
- 크로스 플랫폼 호환성을 지원한다.
  - 구동되는 플랫폼이 사용하는 환경과 상관 없이 동일한 코드를 이용해 개발하는 것.
- 모든 주요 웹 브라우저에서 지원된다.
많은 라이브러리, 프레임 워크 및 API가 있다.

단점

연산량이 많은 작업의 경우 속도가 느릴 수 있다.
클라이언트의 브라우저에 대한 액세스로 인해 보안 문제가 내재되어있다.
버그를 찾고 해결하기 어려울 수 있습니다.
JavaScript가 너무 많으면 웹사이트 로딩 및 성능 문제가 발생할 수 있다.
크롤러가 JS 콘텐츠를 크롤링하고 분석하는 데 어려움을 겪을 수 있다.
브라우저마다 JS를 다르게 해석하여 서로 다른 환경을 생성할 가능성이 있다.
- JavaScript 오류로 인해 웹사이트에 렌더링되지 않을 수 있다.

차이점?

쭉 살펴보면 HTML, CSS, JS는 각각 하지 못한 것들을 하나씩 추가해 간다. HTML이 구조적인 문서를 만들어 데이터를 요소에 따라 분류하고 CSS는 그런 데이터들을 시각적으로 보기 편하도록 스타일한다. 마지막으로 JS는 이렇게 구성된 웹페이지에 동적으로 상호작용 할 수 있도록 해 페이지에 역동성을 더해준다.

딱 이 그림에서 보이듯 HTML은 뼈대, CSS는 외관, JS는 신경망을 이룬다고 할 수 있다.

정리

HTML 웹 사이트의 구조를 태그를 이용해 구성한다.

CSS 웹 사이트를 시각적으로 구별하고 꾸밀 수 있게 한다.

JS 사이트에 동적 작용을 추가해 사용자와 상호작용을 할 수 있도록 만든다.

양치는 하셨나요

프로그래밍을 잘하고 싶어요..

이전 포스트

Tomcat과 Nginx

다음 포스트