HTML/CSS | HTML 이야기 | 메인페이지 틀 만들기 | 반응형 레이아웃
보통 HTML을 처음 시작하면 h1, <p> 와 같은 태그들을 배운다.
어쩔 수 없지만 '기초' 를 쌓는 것은 지루한 일이다.
HTML 을 배우고자 마음을 먹고 달려들어도 코드 다음에 나오는 코드를 머리속에 넣다 보면 지치기 쉽상이다.
웹페이지의 작동원리에 대한 호기심과 흥미도 금방 식어버린다.
현재는 네이버나 티스토리 등에서 블로그라는 안정된 플랫폼을 제공하기 때문에 굳이 홈페이지를 만들기 위해 HTML 을 배울 필요는 없어졌다. HTML 을 배우려는 사람은 아마 자신만의 플랫폼(크거나 작거나)를 갖기를 원하기 때문일 것이다.
90년대 후반 PC통신과 이메일이 최초로 사용되던 시기에 홈페이지 열풍이 불었다. 자신만의 웹페이지를 가지려는 시도가 계속되었다. 지금 생각하면 개인 홈페이지는 블로그와 SNS의 조상으로 이름 붙여도 좋을 것 같다. 한 때 싸이월드라는 미니홈피라는 것도 있었지만 지금은 역사의 뒤안길로 사라지고 페이스북과 인스타그램의 시대에 살고 있다. 유튜브... 가 있긴 하지만 유튜브는 텍스트가 아닌 비디오 중심이고 일반인 보다는 스타(유튜브 스타, 연예인) 중심의 생태계니까 유튜브는 논외로 하려고 한다.
굳이 HTML 을 사용할 필요가 없는데도 배워야 한다면 목적이 분명할 것으로 본다. 사실 SNS를 열심히 하더라도 HTML의 기본은 알고 있는게 좋다. SNS 마케팅에도 HTML과 CSS의 지식은 필요하다. 나의 글을 잘 포장해서 전달하는 능력이 생기기 때문이다. 고객은 웹과 앱의 HTML문서를 눈으로 보고 손으로 터치하는 즉각적 반응을 한다. 아무리 내용이 좋아도 포장을 하는 역할은 HTML과 CSS가 담당한다.
모질라(Mozilla)의 유튜브 영상 Web Demystified, Episode 2 에서는 HTML은 말하자면 쌩얼 CSS 는 메이크업의 관계라고 말한다. 웹 페이지를 다뤄본 경험이 있다면 이말에 동의할 것이다.
CSS 가 없던 초창기 HTML은 나름의 방법으로 디자인적 요소를 반영하려고 했는데 지금의 관점에서 보면 전혀,,, 유저 친화적이지 않다고 볼 수 있다. 그냥 글자를 적당히 배치한 수준이었으니까. 물론 항상 하는 말이지만 시대적인 상황과 맥락(CONTEXT)을 제외하는 것은 한계가 있다. 항상 현재의 기준으로 과거를 재단하면 현재의 우리조차 미래의 후손들에겐 웃음거리에 지나지 않을 것이다. 앞으로 5년 10년뒤 기술은 어떻게 변해있을지 모른다.
스티브 잡스는 2007년에 아이폰을 출시하고 4년뒤인 2011년에 생을 마감했다. 다른 훌륭한 일도 많이 했지만 4년간 그의 업적은 IT와 세계의 모든 것을 바꿔놓았다. 아이폰이 등장하기 전에 세상이 SNS의 천국이 되고 모두가 유튜브의 열렬한 팬이 될지 몰랐다. 바꿔 말하면 이렇게 재미난 세상인지 이제야 알았다. 아이폰과 SNS 없는 세상은 심지어 원시적으로 보이기 까지 하다. 지금 10대와 20대는 상상할 수 없는 시절이다.
HTML은 바뀌지 않았다. 물론 CSS의 메이크업 기술이 발전한 덕에 더욱 아름다운 2D화면을 보고 있다. 하지만 기본은 바뀌지 않았다.
그럼 이제 HTML과 CSS를 사용한 레이아웃을 만들어보자. 아무리 복잡한 웹문서라도 기본 구조(와꾸)에서 출발한다. 지금의 웹페이지가 하는 기능이 엄청나게 많아서 복잡한 것이지 2D 화면을 다루는 웹페이지의 와꾸가 복잡할 일은 없다.
(웹의 장인들이 HTML5로 만든 3D게임은 제외)
우선은 와꾸를 짜보자.
3w에서 정의한 웹의 표준안은 아래 그림과 같다. 시맨틱이라는 것은 인간이나 기계나 웹페이지를 기계적인 문서(소스 코드나 파일)로 취급하지 말고 의미로 이해하자는 측면에서 제안된 구조다.
하나씩 뜯어서 보면...
- header 머리 (타이틀)
- nav 네비게이션 (웹의 메뉴, 카테고리 같은 기능)
- section 구역을 나누는 내용
- article 독립적인 내용(연관이 없는)
- aside 사이드 바 같은 것이다. 부가적인 내용
- footer 제작자 정보
이라고 하는데 이것은 표준안이고 이렇게 100% 틀에 맞춰서 사용하는 웹사이트는 없다. 컴퓨터가 문서를 분석하기 위해서 의미를 부여하라고 만든 표준이지만 대부분은 div [블록]를 사용한다. 심지어 네이버도 header 태그를 사용하지 않는다. 반면 다음은 header 태그를 사용하고 있다.
현대 웹사이트의 구조를 알고 싶다면 네이버나 쿠팡 등 대기업의 메인화면에서 마우스 우클릭 -> 검사를 클릭하면 화면의 요소들에 대응되는 html 태그를 확인할 수 있다. 굉장히 복잡하다. 네이버 같은 경우는 한국 사람들이 제일 많이 사용하니까 말 그대로 지금 한국에서 일어나는 모든 주요한 이벤트에 대한 정보가 담겨 있다.
HTML Semantic Elements (w3schools.com)
HTML Semantic Elements
HTML Semantic Elements Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content
www.w3schools.com
네이버와 다음같은 사이트는 대한민국 최고의 포탈사이트고 벤치마킹의 모델로 삼아도 좋다. 하지만 첫술에 배부를 수는 없는 법 기본에서 시작한다. 시멘틱 웹도 처음부터 다 사용할 필요는 없다. 기본틀을 만들고 작업을 하다가 필요하면 새로운 영역에 추가하면 된다.
이 포스팅에서 작성할 메인 페이지의 레이아웃은 아래와 같은 반응형 메인페이지이다.
크게 보면 헤더와 섹션 두개 푸터로 이루어져 있다. 네비게이션은 헤더안에 있다. 하나의 요소를 블록이라고 생각하고 잡는다. 블록이라고 생각하면 쉽게 구획이 분리가된다.
-> header 안에 nav section 은 header 와 동급, footer 도 동급
뼈대가 만들어졌다! 이제 내용을 좀 추가해주자.
<body>
<header>
<nav>
</nav>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>
</body>
네비게이션에 리스트를 넣어서 연결시키고, 타이틀과 검색창이 들어갈 div(블록)을 넣는다.
섹션에 세개의 블록 그 다음 섹션에는 canvas를 넣는다. (HTML5에서 그림을 그리는 도화지다) footer는 딱히 놔두면 된다.
<header>
<nav>
<ul>
<li><a href>Home</a></li>
<li>Locations</li>
<li>Contact</li>
</ul>
</nav>
<div><h1>Title</h1></div>
<div id="search">search</div>
</header>
<section id="tripple">
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section id="canvas_section">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</section>
<footer>
footer
</footer>그러면 아래와 같은 모양이 나온다. CSS로 메이크업을 하기 전 단계이다. 확실히 완성본과 큰 차이가 난다.
다음은 CSS 코드다. 이 코드의 모든 내용을 설명하지는 않을 것이다. 조작하는 순서만 기록해둔다. 먼저 배경색 background color 를 조작해보면 현재 어느영역에 얼마의 공간이 할당되있는지 알 수 있다. 그 다음 마진과 패딩을 조작한다. 마진은 블록과 외부와의 거리 패딩은 블록 가장자리와 글자와의 거리이다.
첫번째 section 에 flex-drection 이 설정되어 있는데 이 section 안에 있는 div 들이 역방향으로 정렬한다.
div들의 margin을 auto로 하면 간격이 자동으로 조정되는 반응형이 된다. nav 나 seach 도 같이 움직이는 것은 절대좌표가 아니라 상대좌표로 배치되기 때문이다. 반응형 웹을 만들려면 상대좌표를 잘 사용해야 한다. 예를 들면 중앙의 좌표가 너비가 500일때는 250이어야 하고 1000일 때는 500이어야 한다. GUI 프로그래밍이라면 알고리즘을 만들어줘야 겠지만 CSS에서는 상대위치를 사용하는 속성들을 잘 선택하면 된다.
body{
background-color: #EEEEEE;
color: white;
margin: 0;
padding: 0;
font-size: 1.2em;
font-family: 'Hack';
}
header{
color: white;
background-color: black;
padding: 20px;
}
section {
background-color:rosybrown;
padding: 20px;
color: black;
display: flex;
flex-direction: row-reverse;
}
footer{
background-color: black;
padding: 20px;
}
section > div {
background-color: blueviolet;
margin: auto;
width: 150px;
height: 70px;
padding: 10px;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
float: right;
}
li{
display: inline;
margin: 0 20px 0 0 ;
}
#search{
border-style: dotted ;
border-width: 2px;
padding: 5px;
margin: 0;
display: flex;
flex-direction: row-reverse;
}
#canvas_section{
display: block;
}
#canvas {
margin: 10px;
padding: 10px;
background: cornsilk;
border: thin inset #aaaaaa;
}
기본 뼈대에 내용을 하나씩 추가 하다보면 메인페이지가 완성된다.
한 가지 좋은 방법은 마음에 드는 웹사이트의 레이아웃을 참고하는 것이다.
이제부터는 열심히 검색해서 자신만의 홈페이지를 만들면 된다.
