dev-sohee 님의 블로그
세트로 다니는 HTML, CSS, Javascript 본문
HTML은 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어입니다. 모든 웹사이트의 가장 기본적인 구성 요소이기 때문에 웹 개발자로서 경력을 쌓고 싶다면 반드시 배워야 할 언어이기도 합니다.
이 글에서는 HTML, CSS, Javascript가 무엇인지와 이 셋의 관계에 대해서 다룰 예정입니다.
* HTML
* CSS
* Javascript
# HTML(Hyper Text Markup Language)
: 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어
Hyper Text는 직역하면 'Text를 뛰어넘다'는 의미입니다. 그렇다면 Text를 뛰어넘는다는 건 또 무슨 뜻이야? 하는 분들도 계시겠지만 우리는 이미 Hyper Text를일상에서 너무나 자연스럽게 접하고 있습니다. 지금 이 글을 보고 있다는 것 자체가 이미 Hyper Text를 이용했다는 뜻입니다. 우리 모두 인터넷을 검색할 때 제목을 클릭해서 해당 링크로 들어가고 페이지 숫자를 클릭해서 다음 페이지로 이동하는 기능을 자연스럽게 이용하고 있을 것입니다. 그것이 바로 Hyper Text의 개념입니다.
Markup의 사전적 의미는 '문서의 활자·조판 지정 표시'입니다. 일단 어딘가에 어떤 표시를 한다는 뜻인 것 같습니다.
그렇다면 어디에, 어떻게, 왜 표시를 하느냐?가 다음 질문이 될 것입니다. 컴퓨터는 굉장히 똑똑해 보이지만 사실 알고보면 매우 단순한 친구입니다. 예를 들어 사람은 아래와 같은 광고를 보자마자
'신규 매장 오픈 기념 세일! 2024년 7월 07일 ~ 14일 일주일간 반값 할인! 강남역 11번 출구로 오세요!'
- 제목 : 신규 매장 오픈 기념 세일!
- 내용 : 2024년 7월 07일 ~ 14일 일주일간 반값 할인!
- 장소 : 강남역 11번 출구
이렇게 내용 정리가 가능하지만 컴퓨터는 그렇지 못합니다. 그래서 내가 전달하고자 하는 내용을 잘 표현하기 위해서는 웹 브라우저에게 아주 구체적이고 디테일하게 명령을 해야 합니다.
이때 필요한 것이 바로 태그(Tag)입니다.
**태그(Tag)란? : 웹 브라우저에서 텍스트를 다양하게 표현하기 위해 사용하는 기법. '<'와 '>' 안에 문자열을 넣어 표현하고 시작태그 <>와 종료태그 </>로 구성되어 있다.
| 태그 예시 | 의미 |
| <br> | 행 바꿈 |
| <body> | 해당 문서의 내용 영역을 정의함 |
| <title> | 해당 문서의 제목을 정의함 |
이렇게 태그를 활용해서 HTML 문서를 작성하면 웹 크롤러라는 로봇이 태그를 읽고 '아, 여기서 줄을 바꿔야 하는구나, 여기까지는 제목이고 여기부터가 본문이구나' 하고 내용을 파악할 수 있게 됩니다.
마크업 언어를 사용하는 이유는 웹 브라우저에게 명령을 하기 위함도 있지만 같이 문서를 작성하는 개발자나 디자이너와의 협업에서도 원하는 방향대로 콘텐츠를 제작하기에 용이하다는 장점도 있습니다.
# CSS(Cascading Style Sheets)
: 웹페이지의 스타일을 정의하는 언어
HTML이 웹페이지의 구조와 콘텐츠를 담당한다면, CSS는 외관을 꾸미고 배치하는 역할을 담당합니다.
CSS의 주요 개념
1.선택자(Selector): 스타일을 적용할 HTML 요소를 지정합니다.
ex) p { color: red; } - 모든 <p> 요소의 글자색을 빨간색으로 설정
2. 속성(Properties): 어떤 스타일을 적용할지 정의합니다.
ex) color, font-size, margin, padding 등
3. 값(Values): 속성에 설정할 구체적인 값을 지정합니다.
ex) color : red, font-size : 16px
// CSS 사용 예시
h1 {
color : blue;
font-size : 24px; }
p {
color : green;
line-height : 1.5; }
CSS 적용 방법
1. 인라인(In-line) 스타일
: HTML 요소 내부에 직접 스타일을 지정하는 방법
2. 내부(Internal) 스타일 시트
: HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 지정하는 방법
3. 외부(External) 스타일 시트
: 별도의 CSS 파일을 만들어 HTML 문서에 링크하는 방법
CSS를 사용함으로써 여러 HTML 문서에서 동일한 CSS 파일을 참조하여 일관된 디자인을 유지할 수 있고
코드의 재사용성을 높이며, 코드의 가독성과 유지보수성을 높인다는 장점이 있습니다.
# Javascript
: 웹페이지를 동적으로 만들기 위해 사용하는 프로그래밍 언어
HTML이 웹페이지의 구조를 정의하고 CSS가 스타일을 지정한다면, Javascript는 버튼 클릭 이벤트를 처리하여 동적인 기능을 추가합니다.(Java와 아무런 연관이 없는 별개의 언어입니다) 이제 Javascript가 할 수 있는 일들에 대해 알아보겠습니다.
1. DOM 조작
: HTML 문서의 DOM(Document Object Model)을 조작하여 웹 페이지의 내용을 동적으로 변경할 수 있습니다.
ex) 요소 선택 및 수정, 생성 및 삭제
2. 이벤트 처리
: 사용자의 행동에 반응하여 특정 작업을 수행할 수 있습니다.
ex) 클릭, 마우스 이동, 키보드 입력 등의 이벤트 처리
3. AJAX(Asynchronous Javascript and XML)
: 비동기적으로 서버와 통신할 수 있는 기능을 제공할 수 있습니다.
ex) 페이지를 새로 고치지 않고도 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 수 있음
4. 애니메이션
: CSS와 함께 Javascript를 사용하여 웹 페이지에서 애니메이션을 구현할 수 있습니다.
5. 프론트엔드 프레임워크와 라이브러리
: 다양한 프론트엔드 프레임워크와 라이브러리를 통해 웹 애플리케이션 개발을 효율적으로 할 수 있습니다.
6. 자동화 및 빌드 도구
: Javascript는 자동화 작업과 빌드 도구를 사용하여 개발 프로세스를 효율적으로 할 수 있습니다.
Javascript 코드를 실행시키는 방법 중 하나로, 구글에서 개발한 JavaScript V8 이라는오픈 소스 Javascript 엔진이 있습니다. JavaScript V8 의 주요 특징은 아래와 같습니다.
1. 성능 최적화
: V8은 자바스크립트 코드를 빠르게 실행하기 위해 Just-In-Time (JIT) 컴파일 방식을 사용합니다. 이를 통해 자바스크립트 코드를 기계어로 변환하여 실행 속도를 크게 향상시킵니다.
2. 가비지 컬렉션
: V8은 메모리 관리를 위해 효율적인 가비지 컬렉션 시스템을 사용합니다. 이를 통해 불필요한 메모리 사용을 줄이고, 메모리 누수를 방지합니다.
3. 내장된 엔진
: V8은 크롬 브라우저와 Node.js에 내장되어 있어, 이들 플랫폼에서 자바스크립트 코드를 매우 빠르고 효율적으로 실행할 수 있습니다.
4. 모듈화
: V8은 다양한 플랫폼에서 쉽게 통합할 수 있도록 설계되어 있으며, 다른 소프트웨어 프로젝트에서도 자바스크립트 실행 엔진으로 사용될 수 있습니다.
정리하자면, HTML과 CSS와 Javascript의 관계는
HTML이라는 뼈대와 CSS라는 살과 피부가 있을 때, Javascript는 생명을 불어 넣어
탄생한 웹 브라우저라는 인간이 움직이고 타인과 상호작용을 하는 것이라고 할 수 있겠습니다.
'웹' 카테고리의 다른 글
| War(Web Application Archive) 파일 구조 파헤치기 (0) | 2024.08.17 |
|---|---|
| EDA(Event-Driven Architecture) 쉽게 이해하기 (0) | 2024.08.17 |
| HTTP 상태 코드: 웹 요청의 결과 해석하기 (0) | 2024.08.11 |
| 왜 사이트 주소는 항상 www로 시작하는거지?(웹과 웹 표준에 대하여) (1) | 2024.08.11 |
| 웹 브라우저에서 Enter를 누른 후 일어나는 모든 일들 낱낱이 파헤치기 (0) | 2024.08.03 |
