들어가면서
이전 블로그의 내용 중 HTML에 관한 내용들을 본 적 있을 것이다. 또는 이전 블로그의 내용이 아니더라도 개발을 한다면 꼭 한번씩은 들어봤을 것이라 장담한다. 이 HTML이 무엇이고 그와 같이 사용이 되는 CSS와 JS가 무엇인지 각각의 차이는 무엇인지에 대해서 알아보는 시간을 가져보자!
알아야하는 이유는?
웹 페이지를 제작하기 위해선 HTML, CSS, JS라는 3가지 구성 요소를 이해하고 사용할 줄 알아야 한다. 하지만 이거 프론트엔드의 역할 아니야? 그래서 이걸 왜 알아야하는데? 난 백엔드 할건데? 라고 생각하는 사람들이 분명 있을 것이다. 나 역시도 그랬다..
하지만 기본이라고 할 수 있는 HTML, CSS, JS가 무엇인지 각각 어떤 역할을 하는지 이해하게 된다면 웹 개발의 기본기가 탄탄해지고, 완성도 높은 프로젝트를 리드할 때 큰 도움이 될 수 있다.
어떻게 도움이 되는지 3가지로 정리를 해보자면
- 전반적인 구조의 이해
: HTML은 웹 페이지의 구조를 정의하기 때문에 HTML을 알게 된다면 웹 페이지의 기본 뼈대를 이해할 수 있다! - 일관된 디자인 기획
: CSS는 웹 페이지의 디자인과 레이아웃을 담당하며, CSS를 알게 된다면 예쁘고 일관된 디자인을 만들 수 있다! - 효율적인 동작 구현
: JS는 웹 페이지의 동작과 상호작용을 담당하며, JS를 알게 된다면 웹 페이지를 사용자 친화적으로 만들 수 있다!
이렇게 정리를 할 수 있다. 이제 이해하면 좋다는 건 알았으니 하나씩 알아보는 시간을 가져보자!
HTML이란?
정의는?
웹 페이지 표시를 위해 개발된 지배적인 마크업 언어
이 HTML은 Hyper Text Markup Language 의 약어이다. Hyper Text란 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것이며, 이 기능을 가진 문서를 만드는 마크업 언어이다.
즉, 구조를 설계할 때 사용되는 언어로 Hyper Link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어이다.
구조는?
HTML은 head와 body부분으로 나뉜다.
body 부분에서는 웹 페이지의 구조와 구성을 작성하게 되며 head 부분에서는 웹 페이지의 제목과 어떤 규약을 지키고 있는지 설명을 작성한다.
그리고 이 body와 head를 총괄하는 태그가 바로 html 태그인 것이다.
간단한 예시와 함께 조금 더 자세히 살펴보자!
<!doctype html>
<html>
<head>
<title>벨로그</title>
<meta charset="utf-8>
</head>
<body>
<h1>HTML 예시</h1>
<p>HTML 예시입니다.</p>
</body>
</html>맨 위에서부터 차근차근 살펴보면 이 보일 것이다. 이는 모든 HTML 문서를 작성할 때 선언문처럼 쓴다.
html 태그가 가장 포괄적인 최상단 태그이며, 그 안에 head 태그와 body 태그가 속해있다.
head 태그에 작성한 내용은 본문에 나타나지 않고 title 태그에 작성한 사항이 웹 페이지의 제목으로 뜨게 된다.
body 태그에 작성한 내용은 본문에 나타나게 된다.
h1 태그는 제목을 표시할 때 사용하는 태그로 heading이라는 뜻을 가지고 있다. h1~h6까지 총 6개가 있으며 h 태그 옆의 숫자가 커질수록 크기가 작아진다.
p 태그는 하나의 문단을 표현할 때 사용하는 태그이며 태그와 태그 사이에 약간의 간격이 생성된다.
시멘틱 마크업이란?
마크업 언어를 숙지하고자 한다면 시멘틱 마크업을 목표로 나아가야한다는 말이 있다! 시멘틱 마크업이란 무엇일까?
Semantic Markup은 의미를 담은 마크업이라는 뜻이다. 기존의 마크업은 div 라는 태그로 묶어서 퉁치는 경우가 많았다.
하지만 무분별한 div 태그의 사용은 가독성을 떨어뜨리며, 의미없는 마크업은 검색엔진 봇이 어떤 목적을 가지고 있는지 파악하지 못해 검색엔진 최적화인 SEO(Search Engine Optimization) 점수가 부족해져 검색엔진 최상단에 노출되지 못하게 된다.
따라서 이를 방지하기 위해 태그들에 이름을 붙여주는 것이다. 대표적으로 header, nav, footer 등이 있다.
이처럼 태그에 이름을 붙여준다는 것은 각각에 용도를 정해주어 해당 부분이 페이지의 어떤 부분이고 어떤 역할을 하는지 알기 쉽도록 하는 것이다!
CSS란?
정의는?
HTML 등의 마크업 언어로 작성된 문서가 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어
Cascading Style Sheets의 약어로 주로 HTML 구성 요소의 컬러, 폰트 스타일, 레이아웃, 반응형 특징 등을 개선하는 데 사용하는 스타일 시트 언어이다. 이처럼 CSS를 사용하여 웹 사이트를 시각적으로 봤을 때 매력적으로 만드는 기능을 제공한다.
CSS에 대한 기본 지식이 있으면 웹 사이트의 전반적인 외관과 느낌을 변경할 수 있다. 즉, 브랜드의 미적 요소에 맞게 웹사이트의 디자인을 조정하는 데 유용하다. 특히 최신 버전의 CSS에서는 간단한 애니메이션 효과도 적용할 수 있다.
적용 방법은?
HTML에 CSS를 적용 시키는 방법은 총 3가지가 있다.
- Inline Style Sheet
: HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법 - Internal Style Sheet
: HTML 문서 안에 안에 CSS 코드를 넣는 방법 - External Style Sheet
: 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법
보통 CSS를 적용할 때 여러 문서에 적용이 되는 스타일은 External Style Sheet로 만들고, 특정 문서에만 적용되는 스타일은 Internal Style Sheet 또는 Inline Style Sheet로 만들게 된다!
또한 우선순위 역시 존재하는데 위의 방식들이 혼합되어 사용이 될 경우 다음과 같은 순서에 따라 결정이 된다.
- !important가 적용된 속성
- Inline 속성
- id 속성
- class 속성
- 태그 선택자
- 동일한 점수의 선택자인 경우 나중에 적용한 것이 우선
속성 값에 !important를 붙이게 된다면 제일 최우선으로 하게 된다.
이 속성 값이 무엇인지는 CSS의 구조에서 자세히 살펴보겠다.
구조는?
Linking Style Sheet에서 설명했던 것 처럼 별도의 CSS 파일을 만들 때에는 그에 맞는 구조가 필요하다. 간단한 예시와 함께 설명을 해보겠다!
이 전체적인 구조는 rule set이라고 불린다.
선택자(selector)는 자신이 꾸밀 요소들을 선택한다. 이 예시에서는 HTML의 p 태그 전체를 바꾸겠다는 의미이다.
이 선택자에는 다양한 종류가 존재한다.
/* 전체 선택자 */
* { color: red; }
/* 태그 선택자 */
p { color: red; }
/* 클래스 선택자 */
.class { color: red; }
/* id 선택자 */
#id { color: red; }- 전체 선택자 : HTML 페이지 내부의 모든 태그를 선택
- 태그 선택자 : HTML 요소를 직접 지칭
- 클래스 선택자 : class 속성 값을 가진 HTML 요소를 찾아 선택
- id 선택자 : id 속성 값을 가진 HTML 요소를 찾아 선택
선언은 color: red와 같은 규칙으로 꾸미기를 원하는 요소의 속성을 명시한다.
속성(property)는 주어진 요소를 꾸밀 수 있는 방법으로 rule 내에서 영향을 줄 속성을 택한다. 이 예시에서는 p 요소 속성의 색상을 바꾸겠다는 뜻이다.
속성 값(property value)는 말 그대로 속성의 값을 뜻하며 color라는 요소의 속성을 red라는 색으로 바꾸겠다는 속성 값을 나타낸다.
추천 사이트는?
결국 이 웹 페이지는 시각적인 부분이 중요하고 각 요소를 CSS를 통해 얼마나 디테일한 부분까지 완성도 있고 조화롭게 작성하는지에 따라 많은 비중을 차지한다. 그러나 이를 위해선 많은 시간과 비용을 쏟아야하기 때문에 일종의 라이브러리처럼 CSS의 다양한 요소를 이미 작성된 오픈 소스로 제공하는 사이트가 존재한다.
바로 BootStrap이다. 이 사이트는 필요한 요소를 선택하고 그 요소 내에서도 다양한 디자인으로 사용자가 자유롭게 선택할 수 있게 제공하며 그대로 사용을 하는 것이 아니라 자신이 사용할 수 있도록 수정할 수도 있다!
JS란?
정의는?
HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어
JavaScript의 약어로 정의에서 말했던 것 처럼 HTML과 CSS로 웹 페이지를 작성했다면 JS를 사용해서 웹 페이지를 동적으로 표현을 하기 위해서 사용을 한다.
특히, 이번 블로그에서 소개하는 3가지 중 가장 복잡하다..
이 JS는 웹 사이트에 생동감과 상호 작용을 제공한다. 예를 들어 팝업, 애니메이션, 동영상 및 소셜 미디어 임베드 등 웹 사이트의 구성요소는 JS를 사용해서 만들어진다.
특징은?
이 JS는 다른 프로그래밍 언어와 다른 특징을 가지고 있다.
- 인터프리터 언어 : C, C++, Java와 달리 브라우저에서 직접 실행할 수 있는 인터프리터 언어이다.
- 동적 타입, 변수 선언 불필요 : 익숙하게 사용이 되는 int a = 100과 같은 형식이 아니라 ‘a’라는 변수에 100을 할당할 수 있다. 다만 변수의 유형이 잘못 해석될 수 있기에 이로 인한 버그와 오류가 발생할 가능성이 있다.
- 주로 실행에 사용 : 독특하게 사용자의 웹 브라우저에서 바로 실행이 된다는 점이 특징이다. 서버에서 실행이 되지 않기 때문에 서버와 통신할 필요없이 사용자와 상호작용을 한다. 때문에 사용자에 맞춰서 동적으로 업데이트를 할 수 있다.
- 유비쿼터스 : 보통 프로그래밍 언어는 특정 사용 분야에 국한이 되어있지만 JS는 범용 언어가 되어가고 있으며 모든 브라우저에서 지원된다.
장단점은?
우선 JS의 장점부터 살펴보면
- 비교적 쉽게 배우고 사용할 수 있다.
- 클라이언트 측과 서버 측, 프론트엔드와 백엔드에서 모두 사용할 수 있다.
- 역동적이고 상호작용하는 웹 사이트를 제공한다.
- 여러 플랫폼과 기기에서 실행된다.
- 크로스 플랫폼 호환성을 지원한다.
💡 크로스 플랫폼이란? 여러 플랫폼(Android, iOS, Web 등)에서 동일한 소스코드를 사용하여 개발하는 방법 - 많은 라이브러리, 프레임워크 및 API가 있다.
이 외에도 많은 장점들이 존재한다. 그렇다면 이 JS에는 단점이 없을까? 물론 아니다. JS에도 역시나 단점은 존재한다..
- 연산량이 많은 작업의 경우 속도가 느릴 수 있다.
- 버그를 찾고 해결하기 어려울 수 있다.
- 브라우저에 대한 액세스로 인해 보안 문제가 내재되어 있다.
- JS가 너무 많으면 웹 사이트 로딩 및 성능 문제가 발생할 수 있다.
- 브라우저마다 JS를 다르게 해석하여 서로 다른 환경을 생성할 수 있다.
차이는?
쉽게 얘기하자면, HTML이 웹사이트의 뼈대를 구성하고, CSS가 그 뼈대를 꾸미며, JS가 웹사이트에 생명을 불어넣는다고 정의할 수 있다. 이 세 가지의 조합으로 완성된 웹사이트는 구조적, 시각적, 기능적으로 완벽하게 구성된다.
조금 더 자세하게 얘기를 해보자면
HTML은 웹사이트의 구조를 만든다. 즉, 집으로 따지면 기초와 뼈대를 세우는 역할이다. 집을 지을 때 먼저 기반을 정하고, 벽을 세운 뒤 지붕을 올리는 작업을 수행하는데, 이처럼 HTML은 웹사이트에서 텍스트, 이미지, 버튼 등의 기본 요소를 배치하는 작업을 수행한다.
CSS는 웹사이트의 외관을 꾸민다. 집으로 따지면 마치 인테리어와 같다. 집을 완성한 후에는 벽지 색깔을 정하고, 가구를 배치하고, 조명을 설치하는 과정을 거치는 것처럼 CSS는 웹사이트의 글꼴과 색상, 레이아웃을 설정하는 작업을 수행한다.
JS는 웹사이트에 동작과 상호작용을 추가한다. 집으로 마저 예시를 들어보자면 스마트 가구와 비슷하다. 집에 스마트 시스템을 추가하면 버튼 하나로 모든 불을 켜고 끌 수 있고, 스마트 온도 조절기를 설치하면 자동으로 집의 온도를 맞춰주는 것처럼 JS는 버튼을 눌렀을 때 반응되는 형식이나, 스크롤했을 때 애니메이션이 실행되는 기능 등을 구현한다.
정리하자면
HTML은 웹 사이트의 구조를 만드는 역할을 한다!
CSS는 웹 사이트를 시각적으로 꾸미는 역할을 한다!
JS는 웹 사이트를 동적으로 만들며 사용자와 상호작용을 추가하는 역할을 한다!
