HTML 기초 실습하기
모델링, 의미론적 웹(Sementic Web), index.html 완성
* 본 포스팅은 이전 글에서 이어집니다.
본격적으로 HTML의 기초 실습을 해보도록 하겠다. 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다.
HTML 실습 1 : 모델링
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 실습, 모델링이번 실습에서는 왼쪽의 그림을 HTML로 풀어내는 작업이 진행된다.
태그를 작성할 때는 열린태그와 닫힌태그를 항상 쌍으로 작성하는 것이 중요하다. 나중에 깜빡할 수 있기 때문이다.
그림 (우)와 같이 입력하면 사이트에 제목의 순서대로 나타난다. h1이 가장 크게, h2가 그다음, 세번째줄은 일반 본문 크기이다.
이 부분에서는 태그의 중첩이다. 리스트 부분은 ol, li, ul 태그의 중첩으로 나타날 수 있다. 상세한 설명은 위 링크를 참고하면 된다.
다음은 소제목. 변수와 상수를 소제목으로 입력하기위해 h2 태그를 씌우면, h1태그를 씌운 JavaScript보다는 작은 글씨로 나타난다.
Balck 과 White 버튼 부분은 자바스크립 수업 때 설명해주신다고 했다.
그리고 ul 태그와 li태그를 중첩하면 들여써지고 점이 붙은 리스트 형태가 나타나는 것을 확인할 수 있다.
HTML 실습 2 : 의미론적 웹 (Sementic Web)
의미론적 웹이라면, 의미가 잘 드러나는 웹이라 간단히 생각하면 된다.
앞서 언급했든, 웹이라는 것에서 HTML이 차지하는 역할은 정보이다. 이런 정보라는 역할을 더 잘 수행하게 하기 위해, HTML은 꾸준히 발전을 해왔다.
과거 XHTML에서 현시점에서의 표준은 HTML5으로, 웹을 좀더 의미론적으로 잘 드러나도록 하는 방향으로 발전한 것이다.
즉, 웹에 의미를 부여하면서 사람에게 뿐만 아니라 기계에게도 가치가 있는 방향으로 발전해오고 있다고 볼 수 있다.
<nav>, <header>, <article>
기존 코드의 내용에서 <nav></nav> 태그를 추가해주면, 해당 부분은 일종의 네비게이션이라는 것을 기계와 검색엔진 같은 장치들에게 구별을 시켜줄 수 있다. 사람이라면 맥락적으로 네비게이션과 본문을 구분할 순 있겠지만, 기계들은 그것이 불가능하기 때문에 별도의 표기를 통해 의미를 부여해서 구별할 수 있도록 유도한다. <nav></nav> 태그가 기능상으로 의미있는 것은 아니기 때문에, 화면상에 달라지는 것은 없다.
마찬가지로 <header></header> 태그도 헤더, 즉 간판과 같은 역할이란 의미를 부여해주는 것이다. 추후에 <h1> 이후에 다른 이미지라든지 더 추가될 수 있기때문에 그런 것을 통털어서 <header></header> 태그로 감싸 의미를 부여한다.
<article></article> 태그도 마찬가지로, '본문'이라는 의미를 부여하기 위한 것이다.
HTML 실습 3 : 사이트 완성
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 실습3 : 사이트완성이번 실습에서는 대문 페이지에 링크를 걸어 완성할 것이다.
index.html은 보통 홈페이지의 정보를 담고있는, 대문 페이지라는 것으로 암묵적으로 정의되어 있다.
이에 index.html을 지우고 localhost:8080 (맥의 경우 :8080추가) 만 쳐도, 같은 페이지가 나옴을 확인할 수 있다.
index.html에서 각 텍스트에 링크를 걸기 위해 <a href></a> 태그로 각 텍스트에 맞는 페이지 링크를 걸어준다.
JavaScript란? 의 제목에는 대문페이지(localhost:8080) 링크를 걸어주고, 밑에 리스트들에는 각각에 해당하는 페이지를 걸어준다. 그리고 page_html, page_vc, page_op에 대한 파일을 만들면된다.
page_html.html 파일도 위와 같이 만들면, 실제 http://localhost:8080/page_html.html 링크로 들어갔을 때, 위에 네비게이션과 본문으로 구성된 것을 확인할 수 있다. 마찬가지로 page_vc.html , page_op.html 파일도 만들어주면, 대문페이지에 링크가 걸리고 클릭시 각각에 맞는 페이지가 나오면 대문페이지 완성!
HTML 실습 4 : 쉬어가기
웹을 현재 공부하는 우리는, 이미 복잡해져있는 웹을 공부해야하기 때문에 고충이 존재한다. 복잡하지만 그 안에서는 발전의 맥락이 존재하는 것이며 이렇게 복잡해진 상태에서 길을 잃지 않기 위해서는 본질에 집중해야한다. 지금까지 배워온 초창기의 웹은 웹의 본질이고, 골격이다. 그 웹의 골격이 튼튼하게 자리잡고 있을 때 이후 복잡한 것들을 쌓을 수 있는 것이다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 실습4 : 쉬어가기우리가 배워나가는 길에서는 두 가지 방향이 있다. 웹브라우저 이후에 등장한 기술들을 배우는 것과 웹 서버 이후에 생겨난 혁신들에 관한 것이다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 실습4 : 쉬어가기웹브라우저 중 HTML은 우리가 지금 배워왔다.
CSS라는 것이 디자인을 전담하면서 표현력이 높아졌으며, 자바스크립트를 통해 프로그래밍적인 제어가 가능해졌다.
HTML, CSS, JavaScript는 클라이언트 측에서 동작하는 기술이라는 의미로, Client Side Tech라 불린다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 실습4 : 쉬어가기웹 서버 이후의 혁신으로, 서버 쪽에서 동작하는 기술이기에 Sever Side Tech라 부른다.
PHP : 자바, 파이썬...
MySQL : 오라클, MS SQL, 몽고디비...
서버 사이드의 기술들은 처음 프로그래밍을 접한다면 낯설 것이다. 난이도 자체가 높다고 할 순 없지만, 서버쪽에서 일어나는 일이 일반인들에게는 잘 노출되지 않기때문에 낯설고 겁이 날 수 있다는 것이다.
이에 생활코딩 수업에서는 먼저 클라이언트 사이드의 기술을 먼저 다룬 후, 서버 사이드로 가는 것이 우리가 더 오래 지치지 않도록 다룰 것이라고 한다.
