[데브코스 웹 풀스택 과정 TIL] Day 6~9 - 웹 생태계 전반에 대한 이론 및 실습 (2)

[2023. 11. 21 ~ 24 학습 분]

1. HTML

HyperText Markup Language의 약자이다.

일단 코드 먼저 보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    Body!
</body>
</html>

앞서 설명했다시피 웹 상의 정보는 하이퍼텍스트로 표현한다고 설명한 바 있다.

이를 웹페이지의 구조로서 구현한 언어가 HTML이고, 이를 통해 웹페이지를 구성한다.

기본적인 구조는

<tag></tag>

과 같이 태그를 여닫는 구조이다.

예외인 태그들이 있긴 하나 일부이고 대부분의 태그는 여닫는 구조로 되어있다.

위의 코드를 자세히 살펴보자.

<!DOCTYPE html> - 이 파일이 HTML로 이루어져 있음을 선언한다
<html> - HTML 문서의 최상위 요소. 이 태그 안에 모든 내용을 작성한다
<head> - 웹페이지의 헤더. 제목이나 웹 페이지의 메타데이터, 디자인 요소 등이 들어간다
<meta> - 웹페이지의 메타데이터(웹페이지에 대한 정보라고 이해하면 쉽다)를 나타내는 태그
<title> - 웹페이지의 제목
<body> - 웹페이지의 내용을 담는 태그

2. CSS

Cascading Style Sheet의 약자로, HTML의 요소들을 꾸며주는 역할을 하는 언어이다.

HTML의 태그들을 element(요소) 단위로 꾸미는 것이 가능하며 각 요소의

색상
크기
위치
텍스트 정렬
등등...

과 같은 속성을 지정하여 웹페이지를 꾸밀 수 있다.

어떤 역할을 하는지 알았다면 적용법을 알아볼 차례이다.

CSS를 적용하는 방식에는 3가지가 있는데 각각,

인라인(inline): HTML 태그 내에 작성
내부 스타일 시트: HTML 문서 내에 작성
외부 스타일 시트: HTML 문서 외부에 작성하고 연결

이다.

먼저 인라인 방식부터 살펴보자.

1. 인라인

인라인 방식은 HTML 요소(태그) 내 style 속성에 직접 CSS를 적용하는 방식이다.

<h1>Text</h1>

이런 태그가 있다. 이 태그는 알다시피 검은색 제목 태그이다.

이 태그의 글자를 파란색으로 바꾸고 싶다면 아래와 같이 속성을 추가하면 된다.

<h1 style="color: blue;">Text</h1>

2. 내부 스타일 시트

이 방식은 HTML 문서 내에 CSS를 분리 작성하여 적용하는 방식이다.
<style> 태그를 사용하여 적용 가능하다.

<h1>Red Text</h1>
<h1>Blue Text</h1>

이런 HTML 요소를 예로 들어보자.

<h1> 태그의 글자 색상을 빨간색으로 바꾸려면

<!DOCTYPE html>
<head>
    ...
    <style>
        h1 {
            color: red;
        }
    </style>
    ...
</head>
<body>
    <h1>Red Text</h1>
    <h1>Blue Text</h1>
</body>

이렇게 작성하면 된다.

이러면 태그 단위로 CSS를 적용할 수 있다.

그런데 이렇게 하면 두 태그의 텍스트 색상을 서로 다르게 지정할 때 태그 단위로 묶여서 속성이 지정되는 문제가 생긴다.

이때 등장하는 것이 태그의 class와 id 속성이다

class와 id

두 속성은 비슷한 역할을 하나 약간의 차이가 있다

class 같은 분류에 속하는 요소들의 집합, 같은 class값을 가지는 요소들은 동일한 스타일이 적용됨
id 특정 1개 요소의 고유값, 페이지 내 단 하나의 요소에만 적용 가능하며 2개 이상의 요소에 같은 값 적용 불가

class는 HTML 태그 내에 class=[클래스명]을, id는 id=[id값]을 추가하여 적용 가능하다.

적용법은 아래와 같다.

<!DOCTYPE html>
<head>
    ...
    <style>
        // class 적용시에는 '.'  사용
        .class_red {
            color: red;
        }

        .class_blue {
            color: blue;
        }

        // id 적용시에는 '#' 사용
        #id_red {
            color: red;
        }

        #id_blue {
            color: blue;
        }
    </style>
    ...
</head>
<body>
    <!-- class 적용시 -->
    <h1 class='class_red'>Red Text</h1>
    <h1 class='class_blue'>Blue Text</h1>

    <!-- id 적용시 -->
    <h1 id='id_red'>Red Text</h1>
    <h1 id='id_blue'>Blue Text</h1>
</body>

3. 외부 스타일 시트

이 방식은 HTML 문서 바깥에 CSS를 분리 작성하고 그 파일을 HTML 파일에 연결하여 적용하는 방식이다.
이때는 <link> 태그를 사용하여 적용 가능하다.

이때 CSS 파일의 내용은 내부 스타일 시트와 동일하게 작성한다.

/* index.css */

.class_red {
    color: red;
}

#id_blue {
    color: blue;
}

<!-- index.html -->

<!DOCTYPE html>
<head>
    ...
    <link href='index.css' type="text/css">
    ...
</head>
<body>
    <h1 class='class_red'>Red Text</h1>
    <h1 id='id_blue'>Blue Text</h1>
</body>

이런 식으로 분리하여 작성하는 형태로, 문서의 가독성이 높아지기 때문에 주로 사용하는 방식이다.

3. Javascript

Javascript는 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어^*로, 사용자와 상호작용을 하는 등 동적 웹사이트를 만들기 위해 쓰인다.

* 스크립트 언어?: 독립적인(Standalone 한) 프로그램을 개발할 수 있는 프로그래밍 언어가 아니라 프로그램 내부 구성 요소 중 하나로 프로그램을 제어하는 스크립트 역할을 하는 언어

초창기에는 말 그대로 단순히 웹 브라우저 내 HTML 요소에 동적인 기능을 부여하고자 사용되었다.

하지만 시간이 지나면서 컴퓨터의 성능도 많이 향상되고 특히 node.js 같이 Javascript를 독립적으로 실행할 수 있는 소프트웨어들이 등장하면서 현재는 독립적인 프로그래밍 언어로도 사용할 수 있게 되었다.

개요를 알아보았다면 JS의 변수, 함수, 조건문을 잠깐 짚어보도록 하자.

(물론 전공자이거나 배워 본 적이 있다면 이미 알고 있겠지만 그래도 한번 짚고 가는 게 좋을 듯하다)

변수

JS에서 변수를 만드는 방법은 두 가지이다.

/* 예전에는 var도 사용하였으나 현재는 let을 쓰는 추세 */

let var_1;              // 가변 변수 (흔히 알고 있는 변수), 선언 시 초기화 필수 아님
const var_2 = 'value';  // 변하지 않는 변수 (= 상수), 선언 시 반드시 초기화

함수

JS에서 함수를 선언하는 방법은 다음과 같다

/* 기본적인 함수 선언 형태 */
function func_1(var1, var2, ...) {
    // 함수에 들어갈 내용 작성
}

/* 함수 호출 예시 */
let val_1 = func_1(var_1);

/* JS에서는 함수를 변수 형태로 주고 받을 수 있음 */
let var_func = func_2(var1, var2, ...) {
    // 함수에 들어갈 내용 작성
}

함수 이름은 함수명을 보고 어떤 기능을 하는지 유추할 수 있도록 작성하는 것이 좋다.

조건문

if([조건식]) {  // 조건식이 참일때
    ...
} else {       // 조건식이 거짓일때
    ...
}

조건문에서 조건식이 참인 경우 if블록을, 거짓이면 else 블록을 수행한다.

CSS와 마찬가지로 적용법을 알아볼 차례이다.

JS를 적용하는 방식에는 3가지가 있는데 각각,

인라인(inline): HTML 태그 내에 작성
내부 스크립트: HTML 문서 내에 작성
외부 스크립트 : HTML 문서 외에 작성하고 연결

이다.

먼저 인라인 방식부터 살펴보자.

1. 인라인

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="Button" onclick="alert('Button clicked!')">
</body>
</html>

CSS와 마찬가지로 태그 내에 속성으로 적용하는 방식이다.

위의 코드를 보면 버튼 형태의 input 태그의 onclick 속성에 alert() 함수를 넣어 버튼 클릭 시 메시지를 띄우게 설정하였다.

2. 내부 스크립트

이 방식은 HTML 문서 내에 JS를 분리 작성하여 적용하는 방식이다.

<script> 태그를 사용하여 적용 가능하다.

아래 코드는 위의 1번의 코드와 동일한 기능을 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="Button" onclick="onClick()">
<script type="text/javascript">
    function onClick() {
        alert('Button clicked!');
    }
</script>
</body>
</html>

3. 외부 스크립트

CSS와 같이 스크립트 파일을 분리 작성하고 그 파일을 HTML 파일에 연결하여 적용하는 방식이다.

이때는 <script src='[스크립트 경로]'> 를 사용하여 적용 가능하다.

아래 코드는 위의 1번의 코드와 동일한 기능을 한다.

/* index.js */

function onClick() {
    alert('Button clicked!');
}

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<input type="button" value="Button" onclick="onClick()">
</body>
</html>

[다음글에 이어서]

티스토리