본문 바로가기
[코자]아는 만큼 보이는 프런트엔드 개발

[2] 네트워크와 인터넷, HTML-CSS-Javascript

by borinunna 2024. 2. 21.

 

> 목차

  • 도메인과 DNS
  • HTML
  • CSS
  • Javascript

 

2.1 도메인과 DNS

 

IP 주소

컴퓨터와 컴퓨터를 네트워크로 연결하려면 각 컴퓨터의 위치를 식별할 수 있는 주소와 같은 개념이 필요한데, 컴퓨터 네트워크에서는 이러한 주소를 IP 주소(Internet Protocol Address) 라고 한다. IP 주소는 10진수를 4개로 이뤄진 고유한 숫자.

도네임 네임

10진수 4개로 이뤄진 고유한 숫자는 사람이 기억하고 사용하기 어렵기 때문에 이를 보완하고자 IP 주소와 일대일로 매칭되며 기억하기 쉬운 도메인 네임(domain name, 줄여서 도메인)을 만들어 냄.

예를 들어 네이버로 접속하려면 IP 주소(223.130.200.107)를 입력해야 하지만, 친숙한 문자열인 www.naver.com 으로도 접근할 수 있다. 이 문자열이 바로 도네인 네임인데, 도메인 네임은 www. 다음에 표시되는 고유한 이름을 말한다.

 

DNS

복잡한 IP주소는 도메인 네임 덕분에 비교적 기억하기 쉬운 문자열로 대체되었음. 한편 도메인 네임도 hosts.txt 파일처럼 어딘가에 기록하고 관리해야 하는데, 이를 위해 고안된 시스템 DNS는 'Domain Name System'의 약자로, 도메인 네임을 IP 주소로 변환해주는 시스템이다. 

동작 방식 : 사용자가 웹 브라우저의 주소 표시줄에 도메인 네임을 입력한다 -> DNS 서버가 이를 해석해 IP 주소를 반환한다 -> 웹 브라우저가 IP 주소를 받아 해당 IP 주소를 가진 컴퓨터에 접속

 

2.2 HTML

 

프런트엔드 개발은 웹 브라우저에 시각적으로 렌더링(rendering)되는 UI를 개발하는 것을 말하는데, 여기서 렌더링은 서버로부터 소스 코드를 읽어와 웹 브라우저에서 보이는 그래픽 형태로 출력하는 과정을 말한다. 이렇게 렌더링된 UI를 만드는 데 사용하는 언어가 바로 HTML, Hypertext Markup Language 이다.

 

HTML은 웹 브라우저에 시각적으로 보이는 웹 페이지를 만들기 위해 사용하는 표준 마크업 언어이다. 마크업 언어는 태그 등을 이용해 문서나 데이터의 구조를 표시한다. 

 

2.2 - 1 태그

 

일반 태그

태그는 HTML 언어를 구성하는 기본 단위이며, <> 안에 작성한다.

태그 자체에 아무런 의미를 부여하지 않고 시각적인 효과(스타일)만 나타냄.

 

<시작태그> or <시작태그></종료태그> : 시작 태그만 있는 경우와 시작과 종료 태그가 한 쌍으로 있는 경우가 있다.

시작 태그와 종료 태그가 있는 경우 반드시 콘텐츠가 포함된다. 이러한 태그는 콘텐츠에 의미를 부여하기 위해 사용한다.

<br> : 행갈이를 위한 빈 태그

 

시맨틱 태그

콘텐츠를 보다 의미 있게 전달하고 문서의 구조를 효율적으로 구분하기 위해 더욱 의미론적인 태그의 필요성이 부각됨. 이러한 점을 반영해 HTML의 다섯 번째 버전인 HTML5에는 시맨틱 태그(semantic tag)라는 개념을 담았다. 

시맨틱 태그는 사람이 이해하기 쉽도록 이름만 보고 역할이나 위치를 알 수 있게 만든 태그이다. 태그 이름을 통해 문서 내 요소의 위치와 역할을 알 수 있다. 

시맨틱 태그의 종류 : header, main, section, article, footer, nav, aside 등 

 

2.2 - 2 속성

 

태그만으로 모든 정보를 나타내기 어려운 경우가 있는데, 대표적으로 <a>태그가 그렇다. <a> 태그는 하이퍼텍스트(hypertext, 다른 문서를 참조할 수 있는 텍스트)를 위한 태그로, <a> 태그로 작성한 콘텐츠를 클릭하면 다른 콘텐츠로 연결된다. 하지만 단순히 <a> 태그만 사용해서는 어느 부분의 콘텐츠와 연결되는지 의미를 온전히 전달 할 수 없다. 

따라서 HTML은 태그와 더불어 속성(attribute)를 사용하는데, 속성은 태그에 의미나 기능을 더하는 역할을 한다. 

ex) <a> 태그에 href 속성을 사용하면 연결할 콘텐츠를 명시할 수 있음.

 

글로벌 속성

일부 속성은 태그의 종류와 상관없이 모든 태그에서 사용할 수 있는데, 이를 글로벌 속성(global attribute)라고 한다.

ex) id, class, style, data-*, lang

 

2.2 - 3 문서의 기본 구조

 

모든 태그는 <html></html> 태그 사이에 작성. 웹 브라우저는 html 태그 사이에 작성된 코드를 읽어 규칙에 맞게 해석한 뒤 그 결과를 화면에 표시함.

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    	<p>HTML Sample Page!</p>
    </body>
</html>

2.3 CSS

 

CSS(Cascading Style Sheet)는 웹 페이지에 시각적 디자인을 입히는 데 사용하는 스타일 시트 언어. 스타일 시트 언어란 문서에 스타일을 적용하는 언어를 말함. HTML이 웹 페이지의 의미론적 구조를 담당한다면, CSS는 웹 페이지의 시각적인 디자인을 담당.

 

캐스케이딩(Cascading)

캐스케이딩(Cascading)은 하나의 태그에 적용되는 스타일 규칙이 여러 개일 때 우선순위에 따라 스타일이 적용되는 원칙을 의미한다. CSS는 내부적으로 캐스케이딩 원칙이 적용되기 때문에 여러 스타일이 동시에 적용되더라도 오류가 발생하지 않음. 이러한 특징 덕분에 CSS 코드를 작성하는 데 유연성을 발휘할 수 있다. 

 

캐스케이딩에 따라 우선순위를 판별할 때 아래와 같은 원리로 사용한다.

  • 중요도

CSS 속성의 마지막에 !important 키워드를 붙이면 해당 CSS 속성은 캐스케이딩 원칙에 따라 가장 높은 우선순위를 가지게 된다. 만약 하나의 태그에 적용되는 스타일 규칙에 !important 키워드가 여러 개 사용됐다면 작성 순서가 더 늦은 것이 우선 적용된다. 

 

  • 명시성

명시성(specificity)은 CSS 선택자(selector)가 얼마나 구체적인지를 나타내는 값을 의미한다. 선택자란 말 그대로 스타일을 적용할 요소를 선택해주는 요소이다. CSS에는 내부적으로 선택자에 따른 명시성 값이 다음과 같이 정의돼 있다. 

 

인라인 선택자 : 1000

아이디 선택자 : 100

클래스 선택자, 가장 클래서 선택자, 속성 선택자 : 10

요소 선택자, 가상 요소 선택자 : 1

 

*명시성 값의 총합이 높은 스타일이 낮은 스타일보다 우선 적용됨.

 

  • 작성 순서

중요도와 명시성을 판단해도 우선순위가 결정되지 않는다면 마지막으로 적용하는 원칙은 작성 순서이다. 가장 늦게 작성된 CSS 속성일수록 우선순위가 더 높다.

 

상속

상속(inheritance)은 부모 요소에 적용된 속성이 자식 요소에 자동으로 적용되는 현상을 말함. 다시 말해 부모 요소에 적용된 속성이 자식 요소에 적용돼 있지 않더라도 자식 요소는 부모 요소의 속성과 동일한 값을 가지게 된다.

*단, 모든 속성이 상속되는 것은 아님. 일반적으로 텍스트와 관련된 속성(글꼴, 크기, 색상)이 상속되고, 박스 모델과 관련된 속성(너비, 높이, 여백, 마진)은 상속되지 않는다. 

 

 

2.3 - 1 CSS 적용 방법

 

내부 스타일 시트

head 태그 내부에 style 태그를 이용해 CSS를 적용한다.

<HTML>
	<head>
    	<style>
        	/* CSS 코드 작성*/
        </style>
    </head>
</HTML>

 

외부 스타일 시트

별개의 CSS 문서를 만들어 HTML 문서와 연결. 이때 CSS 문서 확장자는 반드시 *.css 이어야 함.

head 태그 내부에 link 태그를 이용해 css 문서를 연결하면 html 문서에 css가 적용된다.

<head>
	<link rel="stylesheet" href="style.css">
</head>

 

인라인 스타일

글로벌 속성 중 하나인 style 속성을 이용해 css 적용. 

<body>
	<p style="color:red">This color is red</p>
</body>

 

 

2.3 - 2 CSS 기본 문법

 

css 기본 문법은 크게 선택자와 선언부로 구분됨.

  • 선택자 : CSS 스타일을 적용할 HTML 요소를 선택한다.
  • 선언부 : 선택자에서 선택한 요소에 적용할 스타일을 작성한다. 선언부는 적용하고자 하는 스타일을 속성과 값의 쌍으로 중괄호{} 안에 작성한다. 이때 값 뒤에 세미콜론;을 넣으면 여러 스타일을 연달아 작성할 수 있다.

 

2.4 - 자바스크립트

 

자바스크립트(javascript)는 HTML과 CSS로 작성된 정적인 웹 페이지에 복잡한 기능을 구현해 생동감을 불어넣는 스크립트 언어이다. 

 

2.4 - 1 자바스크립트 적용 방법

 

내부 스크립트

head 태그 내부에 script 태그를 이용해 자바스크립트 코드를 작성한다. body 태그가 끝나기 직전에 사용하는 것이 유리.

<body>
    <script>
        // 자바스크립트 코드
    </script>
</body>

 

외부 스크립트

별개의 자바스크립트 문서를 만들어 HTML 문서와 연결. 이때 CSS 문서 확장자는 반드시 *.js 이어야 함.

body 태그 내부에 script 태그를 이용해 자바스크립트 문서와 연결. body 태그가 끝나기 직전에 사용하는 것이 유리.

<body>
	<link rel="stylesheet" href="style.css">
</body>

 

인라인

HTML 태그에서 제공하는 이벤트 속성을 사용해 자바스크립트 코드를 적용

<body>
	<button onclick="자바스크립트 코드"></button>
</body>

 

 

2.4 - 3 자바스크립트 기본 문법

 

자바스크립트의 기본 문법은 '실행문'과 '선언 및 할당' 구조로 이루어져 있다. 그리고 여기에 더해 자바스크립트로 다룰 수 있는 데이터의 자료형까지 알아야 한다.

 

실행문

자바스크립트 코드는 컴퓨터에 지시한 명령을 실행시키는 실행문(statement)으로 구성된다. 일반적으로 하나의 실행문은 세미콜론(;)으로 구분해 작성한다.

실행문;

 

선언 및 할당

  • 선언 : 프로그램에서 어떤 변수나 명령을 사용하기 위해 컴퓨터에게 알리는 것. 어떤 변수나 명령이든 먼저 선언을 해야 사용할 수 있다.
  • 할당 : 컴퓨터 메모리에 데이터를 저장하는 것을 말함.

보통은 선언과 할당을 하나의 개념으로 묶어 설명하는 경우가 많지만, 할당 없이 선언만 하는 경우도 많다. 다음은 userName이라는 변수를 선언하고 '철수'라는 문자열을 할당하는 코드이다.

const useName = "철수";

 

자료형

자바스크립트에서 다루는 데이터의 종류를 자료형(data type)이라고 한다. 자바스크립트의 자료형은 크게 기본 자료형과 참조 자료형으로 구분된다. 

 

  • 기본 자료형 : 문자, 숫자(정수, 실수), 논리(True, False), Undefined, Null, Symbol 등
  • 참조 자료형 : 함수, 배열, 객체

'[코자]아는 만큼 보이는 프런트엔드 개발' 카테고리의 다른 글

[1] 프런트엔드 시작하기  (0) 2024.02.20

관련글

티스토리툴바