[데브코스 웹 풀스택 과정 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>

[다음글에 이어서]

'Development > 데브코스(TIL, 회고록 등등...)' 카테고리의 다른 글

[회고록] 웹 풀사이클 데브코스 회고 - 23년 11월 (1)	2023.12.30
[데브코스 웹 풀스택 과정 TIL] 5주차 - Express.js, Postman 다뤄보기 (0)	2023.12.19
[데브코스 웹 풀스택 과정 TIL] 4주차 - REST API, Node.js, 그리고 Express.js (0)	2023.12.12
[데브코스 웹 풀스택 과정 TIL] Day 6~9 - 웹 생태계 전반에 대한 이론 및 실습 (3) - Node.js로 만드는 웹서버 (0)	2023.11.30
[데브코스 웹 풀스택 과정 TIL] Day 6~9 - 웹 생태계 전반에 대한 이론 및 실습 (1) - 웹 개요 (0)	2023.11.26

아무거나 다 적는 블로그

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

1. HTML

2. CSS

1. 인라인

2. 내부 스타일 시트

class와 id

3. 외부 스타일 시트

3. Javascript

변수

함수

조건문

1. 인라인

2. 내부 스크립트

3. 외부 스크립트

'Development > 데브코스(TIL, 회고록 등등...)' 카테고리의 다른 글

티스토리툴바

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

1. HTML

2. CSS

1. 인라인

2. 내부 스타일 시트

class와 id

3. 외부 스타일 시트

3. Javascript

변수

함수

조건문

1. 인라인

2. 내부 스크립트

3. 외부 스크립트

'Development > 데브코스(TIL, 회고록 등등...)' 카테고리의 다른 글

관련글

티스토리툴바