.png)
정말 어떻게 지내왔는지 생각도 못 할 정도로 빠르게 하루가 지나갔는데 벌써 8주 차를 코 앞에 두고 있다.
그리고 그와 함께 드디어 “웹!”을 시작했다.
하...디자인이라니.. 걱정이 앞서지만, 이제 본론이라는 현실을 느슨해진 일상에 긴장을 준다 :)
무튼 오늘은 개론과 함께 HTML에 대해서 배웠다.
📝목차
- 웹의 발달
- 프론트엔드 기술
- HTML5
- 정리
1. 웹의 발달
웹이 어떻게 시작했는지는 생활코딩만 봐도 잘 나오기 때문에 각설하고, 나는 웹 시장이 어떻게 발달했는지에 대해 짚고 넘어가고 싶다.
일단, 원인은 프로그램의 ‘불법 복제’ 때문이었다. 옛날에는 회사의 솔류션을 팔 때, Package로 묶어서 팔았다, 그러나 패키지는 복제가 쉬웠고 기업은 이를 막을 수 없다.
때문에 기업들은 HTTP로 통신하는 Web 시장으로 진출하여서, 자신들의 서비스를 웹이라는 고객에게 제공했고 고객은 브라우저를 통해 기업의 웹 서버에 접속하여 서비스를 이용한다.
이런 웹 시장 자체는 브라우저라는 환경의 한계로 인해서 네이티브 프로그램만큼의 고성능 개발을 하기 어려웠다. 따라서 고성능을 추구하는 게임 시장은 네이티브 환경으로 떨어져 나갔다.
그럼 고성능 프로그램 개발이 어려워도 기업은 웹으로 진출했을까?
이는 클라이언트와 서버가 통신할 때, 서비스를 이용할 수 있다는 웹의 특성 때문이다.
고객은 서버에 요청하고, 서버는 그 요청에 대한 작업을 실행한 뒤 응답을 한다. 이 과정은 반드시 통신하였을 때만 가능하고, 그에 대한 보장을 ‘로그인’이라는 기능을 통해서 한다.
결과적으로 기업은 패키지 산업을 몰락시킨 원인을 ‘로그인’이라는 기능 하나로 극복하기 때문에 몰리게 되었다.
그럼 웹 서비스는 무엇이냐?
- Searching Engine
- Web Game
- Management Console (Ex: 공유기 관리 콘솔)
서비스 자체는 단순한 개념이다. 우리가 클라이언트가 사용할 특정 기능을 서버에다가 구현해 놓는 것이다. 다만 이익이 창출되어야 하기에 안에 비즈니스 로직이 포함되게 된다.
하지만 고객은 서버가 어떻게 운영되는지 궁금하지 않다.
고객은 자신이 사용하는 사이트의 UI가 편하고 가독성이 높은 게 중요하다.
이런 부분은 웹 개발 안에 존재하는 사실이기 때문에 디자인에 대해서도 배워야 한다.
2. 프론트엔드 기술
디자인을 위해 사용하는 기술은 크게 3가지가 있다.
- HTML5 : 정적문서용 언어
- CSS3 : 다루는 정도에 따라 상, 중, 하
- JavaScript : 동적 프로그래밍 언어
위 세 가지 중 HTML, CSS는 프로그래밍 언어가 아닌 것은 모두 알 것이다.
물론 구현의 있어서 중요한 부분이지만 개발자에게 있어서는 단순 문서에 생동력을 불어넣는 JS이다.
이를 기반으로 반응형 웹, 프레임워크를 이용해서 화면을 구현한다.
더불어 요즘 프론트엔드 개발자들은 API를 이용해 가져온 데이터를 이용해 비즈니스 로직을 포함한 기능들까지 구현한다.
3. HTML5
그럼 가장 기초인 HTML을 우선 배워보자.
HTML
HTML은 “Hyper Text Markup Language”의 약자로 이를 반으로 갈라서 그 의미를 분석해보자.
1) Markup Language
Markup 언어는 기본적으로 데이터를 구조화시켜서 표현하는 문서를 작성하는 방식이다.
흔히, 네트워크로 데이터를 보낼 때, int, string 같은 형태가 정해진 거 말고 클래스와 같이 가변적이고 추상화된 데이터를 보낼 때 ‘직렬화’라는 기법을 사용한다.
말 그대로 메모리 안에 있는 데이터의 정보들을 넘겨주는 건데, 이때 사용하는 게 Markup이랑 JSON이다.
이런 방식으로 데이터를 받으면 컴퓨터는 이 문서를 분석하여 자기 메모리 안에 다시 추상화시킨다.
즉, Markup 언어의 목적은 데이터를 구조를 가진 문서로 만드는 것이다.
2) Hyper Text
우리 PPT에 참조하는 URL을 거는 걸 “Hyper Link”라고 하는데, Hyper Text는 링크를 텍스트에 걸어서 다른 문서로 이동이 가능하다.
이를 종합하면 HTML이란 “링크를 통해 다른 문서로 넘어갈 수 있는 마크업 문서”이다.
구성 요소는 다음과 같다.
- Element
- Attribute
- Value
요소를 <> 안에 넣으면 태그가 되고 브라우저는 태그를 보고 자체 렌더링 엔진을 통해서 시각적으로 사용자에게 보여준다.
[ 기본 골격 ]
HTML은 기본적으로 다음 두 영역으로 나뉜다.
다음 영역들 역시 Tag로 이뤄져 있으며, 이 안에 태그, text 등을 추가한다.
- head : 페이지의 설정 또는 정보에 대한 태그로 구성되는 영역
- body : 시각적 요소 전반을 포함하는 영역
<!DOCTYPE html> : HTML5를 사용한다는 표기
<html lang="eng">
<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>
시각적 영역
</body>
</html>4. 정리
오늘은 실습해보면서 사용한 것들에 대한 정리이다.
(1) 태그
<itle></title>: 유일하게 노출되는 head의 태그<h1></h1>: 헤더 태그, 자동 굵기 h1~6까지 존재<br>: 라인을 깨는 태그, 영역이 필요가 없기에 종료 태그가 없다.<a></a>: 링크를 거는 태크, 이 사이에 들어가는 모든 것은 클릭이 가능<table></table>: 표를 만드는 태그, 초기에는 레이아웃을 잡는데 사용하는데, 그냥 사용하면 아무것도 없음<tr></tr>: 1행을 의미, 가로가 추가됨<td></td>: 1열을 의미, 세로가 추가됨, 최종 데이터는 열 안에만 들어간다.<input>: 종료 태그 없음. 사용자로부터 정보를 입력받는데 사용. type 속성을 통해 여러 양식이 존재함.<select></select>: 콤보 박스, 선택창 만들 때 사용한다.<textarea></textarea>: text형식과 달리 enter 가 가능, 정해진 크기 안에서 입력
(2) 속성
- width : 가로 길이
- align : 정렬
- href : hyper references, 참조할 링크를 값으로 가짐
- rowspan : 행 병합
- colspan : 열 병합, 셀 병합은 상단에서 하단 / 좌측에서 우측으로만 가능
- type : 태그에 정의된 여러 양식을 사용할 때 사용.
- name : 같은 속성을 가진 태그들을 하나의 그룹으로 묶어줌
- placeholder : 요소에 알맞은 힌트를 제공할 때 사용.
- size : select에서 사용 시 기본 선택 값을 정의
- multiple : boolean이라, 값 없이 사용함. 사용시 다중 선택 가능
(3) 값
- radio : 여러 개 중에서 하나만 선택이 가능, name으로 묶어서 사용한다.
- checkbox : 여러 개 중 여러 개 선택이 가능
