1.1 프로그래밍 언어
1.1.1 프로그래밍 언어
프로그래밍 언어란,
사람과 컴퓨터 사이의 약속
이다.
그리고
프로그래밍 언어로 만들어진 파일이 있을 때,
사람도 이해할 수 있고,
컴퓨터도 이해할 수 있는 언어를 코드(Code) 또는 소스(Source)라고 말할 수 있다.
이러한 코드를 만들어 내는 것을 코딩이라고 말하고, 코드를 만들어 내는 사람을 코더라고 말한다.
이 코드를 건축학적인 측면으로 설명하자면, '설계도'라고 말할 수 있지만,
건축학적인 측면에서의 설계도와 코드는 완전히 동일하지는 않다.
왜냐하면,
건축 쪽에서의 설계도는 '시작'에 불과하다.
설계도를 만들었다고 해서 그 뒤의 일이 자동적으로 일어나는 것이 아니라,
많은 자원, 인력, 노동을 통해 완성품을 만들어 내야 한다.
부과적인 노력이 들어가는 것이다.
하지만 코드는 그 하나로 완벽한 제품이다.
왜냐하면 코드를 작성하게 되면, 그 나머지는 사람의 손을 거치는 것이 아니라 컴퓨터에 의해 일사천리로 일이 이루어진다.
즉, 코드를 작성한다는 것은 하나의 제품을 만들어내는 것과 동일한 맥락이다.
1.1.2 HTML 이론
클라이언트와 서버의 관계에서
클라이언트가 서버에 어떠한 정보를 '요청'하면,
서버는 클라이언트에게 그 정보에 해당하는 언어를 전달하는 방식으로 '응답'하게 되고 이를 출력한다.
이때 전달되는 것이 HTML이다.
HTML이란, 웹을 위한 언어로
Hyptertext Markup Language
의 축약어이다.
Hypertext는 문서와 문서가 링크로 연결되어있음을 의미하는데,
이 속성은 HTML이라는 언어에서 매우 중요한 부분을 차지한다고 할 수 있다.
왜냐하면 Hyptertext 라는 것은 링크되었음을 의미하고, 이 링크된 문서들의 거대 덩어리를 웹이라고 일컫는다.
즉, 링크라는 HTML의 본질이 결국 웹의 본질이라고 말할 수 있기 때문이다.
Markup Language에서의 Markup은 TAG를 이해해야 한다.
일상생활에서의 TAG는 그것이 달려있는 하나의 물체에 대한 정보를 설명한다.
이는 HTML에서도 동일 맥락으로 쓰이는데, 기본 형식으로는
<시작태그> 컨텐츠 </끝태그>
의 형태를 가지며, 이러한 형식을 통해 태그는 컨텐츠에 어떠한 정보를 불어넣는다.
1.1.3 HTML 실습
1) 코드의 마크업
앞서 말했듯이, 기본적인 HTML 코드화 시키는 작업을 '마크업'한다고 말할 수 있는데
거기에는 정보를 표시하는 태그가 필요하다.
- 큰 틀의 주제(대제목)
대제목의 태그 <h1>
h는 head의 첫글자를 나타내며, h1->h2->..로 갈 수록 글씨는 두껍지만 그 크기가 작아진다.
- 리스트(목록)의 생성
순서가 있는 리스트의 생성
<ol>로 전체 리스트를 묶고,
각각의 리스트 앞뒤로 <li>라는 태그를 이용하여 묶는다.
- 소제목의 태그<h2>
- 내용의 태그<ul>
Caution> 항상 열림 태그와 닫힘 태그가 함께 나와야 한다.
2) 의미론적인 웹(Semantic Web)
웹에서의 html = 정보이기 때문에,
정보로서의 역할을 더 잘 표현하기 위하여 html에서 많은 변화가 있어왔다.
그 중 정보로서의 가치를 높여주는 태그, 즉 의미가 잘 드러나는 태그가 생성되었고
초기에는 XHTML로 시작했지만 현재는 HTML 5(초창기 XHTML을 계승)이다.
- 문서를 탐색
<ol>,<li>
링크를 걸게 되면 다른 페이지로 이동 가능하다.
- 네비게이션을 위한 내용
<nav>
리스트를 이 태그로 감싸주면 이 리스트가 네비게이션을 위한 내용임을 알려준다.
- 간판에 해당
<header>
간판에 해당하는 내용임을 확실히 알려준다.
- 본문
<article>
해당 내용이 본문임을 알려준다.
이 외에도 의미론적인 태그는 많다.
의미론적인 태그를 붙이는 데에 있어 정확한 정답은 없지만,
태그를 잘 작성하게 되면 의미를 잘 전달할 수 있다.
말을 더 맛깔나고 조리있게 한다고 보면 된다.
3) 사이트 완성
- 대문페이지 생성
index.html이라는 이름을 갖는다.
이 이름은 특수한 파일이며, '이 주소창이 대문페이지이다.'라는 약속을 가진다.
그러므로 localhost만 치건, localhost/index.html을 치건 같은 페이지가 뜨게 된다.
대문페이지에 있어야 할 정보들?
1. 무엇에 대한 것인지 (대제목)
2. 무엇을 알 수 있는지 (리스트)
- 네비게이션 좌표 설정
태그<a href="해당 웹주소"> 해당제목 </a>
- 본문내용 설정
<article>태그와 <h2>태그를 이용하여 생성한다.
이때,
한 페이지에서 다른 페이지로 연결되어 이동하기 때문에,
대문페이지에 적힌 정보들은 본문페이지에도 마찬가지로 필요하다.
그러므로, 대문페이지의 내용들을 복사하여 각각의 페이지창에 옮겨놓아야 한다.
- home으로 돌아가는 설정
대제목에 좌표를 설정해주면 된다.
위 내용은 생활코딩에 근거하여 작성되었습니다.