티스토리 뷰

HTML & CSS

기본적인 웹사이트의 구성 : Html + CSS + JavaScript 는 무엇인가?

Chokeys 2023. 4. 23. 20:21

https://pxhere.com/ko/photo/559689

1. HTML은 무엇인가?

(H)ype (T)ext (M)arkup(L)anguage, 따라 읽어보면 "하이퍼 텍스트 마크업 랭기지" 하이퍼는 뛰어넘다는 뜻을 가지고 있고, 마크업은 표시한다 라는 뜻을 가졌다. 그대로 직역해보면 "텍스트를 뛰어넘는다" 그리고 "언어를 표시하다" 인데 인터넷에 정말 잘 설명되어 있어 간략하게 요약.

 

Hype Text 텍스트를 뛰어넘는다, 책의 목차와 같은 개념이다. 책에서 우리가 원하는 항목으로 가기 위해서는 목차를 보고 그 페이지를 찾아 책을 펼치면 된다.  Hype Text도 이와 비슷하다. 텍스트로  구성되어 있는 문서에서 임의의 텍스트를 클릭하면 우리가 지정한 텍스트로 이동하는 것이다. 인터넷에서는 "순차적 접근" 이 아니라 "비순차적 접근" 이라는 표현을 썼는데 꽤나 적절한 표현이라고 생각한다. 클릭하면 내가 원하는 위치로 한번에 이동하는것!  이라고 간단하게 요약하자.

 

 내가 지금 사용하고 있는 티스토리, 네이버 , 구글등 모든 사이트들은 HTML언어로 구성되어 있다. 배너나, 아이콘을 클릭하면 내가 들어가려는 그 곳이 딱 열리는것을 볼 수 있다. 이 자체가 그냥 HTML언어를 설명해준다.

 

위키백과 링크를 클릭하면 그 정보가 있는 페이지로  이동한다. 

 

 

 

Markup Langue 언어를 표시하다.  우리가 쓴 문서를 마크업 언어를 통해 구조적으로 표현하는 것. 우리가 쓴 텍스트는 우리만 알아볼 수 있지, 컴퓨터는 모른다. 사람들은 정보를 보면 "아 이게 주소구나", "이게 휴대폰 번호구나" 하고 보면 알 수 있지만, 컴퓨터는 알 수 없기에 무엇인지 알 수 있도록 텍스트에 표시를 해줘야한다. 이게 마크업 언어다. 

 

저자가 누구이고, 출판사는 어디인지, 발행이 언제인지 등의 정보들을 각각 표시해놓은것(알려주는 것) 요것이 마크업 언어이다.

 

즉 HTML은 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. 그리고 이러한 HTML 문서나 데이터의 구조를 명시하는 역할을 해주는 것이 태그이다. 그리고 그 태그 안에는 또 속성이라는 것 이 존재한다. 

 

2. 웹사이트 구성 

 

출저 : https://velog.io/@gga4638/HTMLCSS

 

우리가 쓰는 웹사이트는 3가지 요소로 구성되어있다. 웹표준기술이라고 부르는데 HTML은 위에서 설명했듯이 마크업 랭기지로 웹사이트의 전체 내용과 요소들이 무엇인지 알려주는 역할을 한다. CSS는 그렇게 작성된 HTML 문서에 스타일을 지정하여 웹페이지를 꾸며주는 역할을 한다. 마지막으로 JavaScript는 사용자의 반응에 따라 작동하여 여러가지 로그나 이벤트를 만들어준다.

 

2-1. HTML

왼쪽에 보이는 그림은 vsc에서 작성된 html 텍스트들이다. html 형식은 크게 head 와 body로 나뉘어 지는데 head부분에는 CSS, 아이콘, jQuary등을 이용한 여러 이벤트등이 작성되고, body에는 우리가 웹사이트를 들어갔을때 직접 보게되는 글, 이미지, 영상 들이 쓰여진다.

css를 적용하지 않은 네이버  화면...

마찬가지로 우리가 흔히 사용하는 네이버, 구글 등 모든 웹사이트들은 html언어로 구성되어 있는것을 볼 수 있다.  왼쪽이 네이버 메인화면에 소스코드인데 css를 적용하지 않으면 저렇게 body에 있는 내용들로만 적혀진 투박한 화면을 볼 수 있다. 

 

※ body에서도 style 속성을 통해 html 태그 요소들을 꾸며줄 수 있다. 이것말고도 태그 요소들을 꾸며줄 수 있는 방법이 몇가지가 있는데 밑에 CSS부분에서 적으려고 한다.

 

2-2. CSS 

CSS(Cascading Style Sheets) : 계단식 스타일 시트, 원래 해석은 "폭포처럼 떨어져 내리다" ,"계속되다" 이런 의미인데 말 그대로 CSS의 특징은 순서대로 스타일을 적용시키는 것이다. html 태그들의 요소에 옷을 입힌다고 생각하면된다. 글자의 크기나 줄간격, 색, 도형의 모양등 시각적으로 보여지는 요소들을 꾸며주는 역할을 한다.

 

1. CSS의 특징

 

 ① 똑같은 태그에 스타일을 주더라도 마지막에 적용시킨 스타일을 사용한다. 그래서 CSS를 작성할 때는 순서가 중요.

 ② 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 번 불러 사용할 수 있어 재사용성이 높다.

 ③ 적당한 크기와 아름다운 색상, 원하는 위치를 지정하는데 집중할 수 있다.

 ④ 선택자를 사용하여 원하는 작업을 할 수 있다. 

 

2. CSS  적용방식

 

 ① 인라인 방식 : <body> 안에있는 <html> 태그에 style 속성을 주어 바꾸는 방법.

 

 ② 내장 방식 : <head>안에 <style> 태그를 주어 html문서 내에서 바꾸는 방법.

 

 ③ 링크 방식 : <head>안에 <link> 태그를 주어 외부 문서로 css 파일을 불러와 작성하는 방법.

이렇게 css파일을 따로 만든후에 link태그를 이용하여 적용시켜준다.

 

방법은 여러가지가 있으니 자신이 원하는 방법을 선택하여 쓰면 된다. 간단한 작업이나 테스트 같은 경우에는 1번과 2번 방식을 쓰면 좋겠지만, 좀 큰 작업 같은 경우에는 너무 많은 코드를 html 문서 하나에 집어 넣기보다 외부문서 방식으로 구분하는것이 좀 더 좋을거 같다. 보기에 깔끔하기도 하고 후에 유지보수도 쉽다는 장점이 있다.

 

<네이버 CSS>

보기에는 전혀 알아볼 수 업는 문자들로 도배 되어있지만 왼쪽에 보이는 저 수많은 글자들이 css이다. (공백을 다 넣어서 쓰게 되면 용량이 크기 때문에 저렇게 한줄로 하여 파일을 만들어 놓는다.) 저 css 언어들이 네이버 html 텍스트에 적용되어 우리가 평소보는 네이버의 화면을 만들어준다.

 

2-3. JavaScript

JavaScript (자바 스크립트) :  JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다. 가만히 정적인 정보만 보여주는 것이 아니라  주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나 하는 정보들에 사용된다. 클릭을 했을 때 무언가 창을 뛰운다거나 여러가지 애니메이션도 구현할 수 있다.

 

하지만 이런 기능들보다 더 재밌는건 클라이언트 사이드 JavaScript 언어 위에 올라가있는 기능들이다. 애플리케이션 프로그래밍 인터페이스(API)라고 부르는 이 기능들은  JavaScript 코드를 통해 생각지도 못하는 기능들을 수행할 수 있게 한다.

예를들면 지도의 좌표를 가져오거나, 날씨의 정보를 가져오는 이러한 기능들을 구현할 수 있다.

 

"HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어가" 좀 딱딱한 표현일 수 있지만 가장 적절한 표현이기도하다. 우리가 가진 데이터들이 그래프나 지표로 시각화되는것도 JavaScript의 역할이라고 볼 수 있다. 

 

<창을 뛰운다거나...>

 

 

우리가 사이트를 들어가서 아이디와 비밀번호를 틀리게 입력했을때 뜨는 창들이  JavaScript로 만들어 졌다. (jQuary를 썼을 수도 있지만..  JavaScript 기장 먼저쓰인 동적 프로그래밍 언어이다.)

<그래프 Script>

 

script를 통해 데이터를 그래프, 테이블을 이용해 시각적으로 표현해줄 수도 있다.

 

<카카오 우편번호 API>

 

<>

카카오에서 만든 지도 API이다. 이렇게 만들어진 여러종류의 API들을 쓰게되면 자바스크립트에서 특별한 기능을 구현할 수 있다. (지도, 날씨 ,번역, 자동검색 등...)

 

대략적인 웹사이트의 구성요소는 설명을 마치고 이제는 강의에서 배운 순서대로 내용을 정리해야겠다. 태그따로 속성 따로 이렇게 하고 싶지만 그 양이 방대하기도 하고 이번 주제에서는 배운대로 정리하는게 더 깔끔할거 같다.