책보고 무작정 따라하는 웹 사이트 설계 - 1편

책보고 무작정 따라하는 웹 사이트 설계 - 1편 -

소프트웨어와 웹 사이트에 대한 지식이 거의 없는 상태에서 블로그를 더욱 멋지게 만들기 위한 노력 중 하나로,

웹 사이트를 개발하는 언어 및 관련 지식들을 습득하고자 합니다.

메모한다는 느낌으로 진행되니 참고해 주시기 바랍니다.

( _ _ )

1. 개요

웹 사이트는 아래의 세 가지 언어를 사용하여 만들 수 있다고 합니다.

▶ HTML (구조 잡기)

▶ CSS (옷 입히기)

▶ JAVAscript (동작하기)

(1) HTML : 웹 사이트에 접속하여 보이는 텍스트와 이미지(블로그의 포스팅 내용) 등에 대한 정보 등을 입력.

(2) CSS : 입력된 텍스트와 이미지 그리고 배경 등을 원하는 위치에 배치하고 색을 입히는 등 꾸며주는 것.

(3) JAVAscript : 이미지 등에 특정 효과를 부여하여 클릭하면 팝업창이 뜨거나, 페이지를 넘어가거나 하는 등의 생동감을 부여합니다.

HTML5 & CSS

2. 웹 사이트 레이아웃의 종류

웹 사이트에 접속할 수 있는 디바이스가 데스크탑(컴퓨터)만 있던 시절에는 이러한 문제가 없었겠지만,

요즘은 다양한 사이즈의 휴대폰과 태플릿 등이 나타나면서 각 디바이스에 맞게 웹 사이트의 레이아웃이

변화하도록 설계를 해야 한다고 합니다.

이에 따라 크게 4가지 레이아웃으로 구분된다고 합니다.

▶ 정적 레이아웃

▶ 동적 레이아웃

▶ 적응형 레이아웃

▶ 반응형 레이아웃

(1) 정적 레이아웃 : 크기가 변하지 않는 고정된 레이아웃.

정적 레이아웃 예시

페이지의 크기가 고정되어 있고, 창이 작아지면 위, 아래 or 좌, 우로 이동 할 수 있게 스크롤이 나타남을 볼 수 있습니다.(위 빨간 박스)

(2) 동적 레이아웃 : 브라우저의 사이즈 변화와 상관 없이 꽉찬 화면을 유지하는 레이아웃. (스크롤이 나타나지 않는다고 합니다.)

- 글씨의 경우, 페이지에 작성된 글씨가 스크롤이 생기면서 유지해주지 않다보니, 브라우저를 줄여서 페이지가 작아지면 공간이 부족한 글씨 들은 다음줄로 넘어갑니다.

(3) 적응형 레이아웃 : 브라우저의 사이즈 변화에 따라 페이지의 레이아웃도 변화하는 방식.

- 정적 레이아웃처럼 공간의 크기는 고정되지만, 미리 정해 놓은 여러 가지 사이즈를 통해 각 기기의 브라우저 사이즈에 맞게 레이아웃을 구성 할 수 있다고 합니다.

(4) 반응형 레이아웃 : 동적 레이아웃의 방식과 적응형 레이아웃의 방식을 결합한 레이아웃. (요즘 티스토리 스킨들 반응형이지요~)

이렇게 다양한 레이아웃에 대한 개념이 없을 때는 데스크탑용 페이지와 모바일로 페이지를 별도로 만들어, 모바일 주소 앞에는 "m"을 붙였었다고 합니다.

그런데 적응형, 반응형 레이아웃의 등장으로 두 가지 이상의 레이아웃을 따로 만들지 않아도 되면서 개발 시간과 비용이 많이 줄었다고 하네요.

3. 브라우저

저는 요즘 크롬(Chrome)을 사용하고 있는데, 브라우저는 다양한게 존재하고 있습니다.

익스플로러11(Explorer), 익스플로러 엣지(Explorer Edge), 사파리(Safari), 파이어폭스(Firefox) 등등이 있습니다.

이 브라우저 마다 지원하는 방식이 달라 의도한 것과 다르게 나타날 수 있다고 합니다.

그래서 개발시 각 개발 언어들의 각종 태그나 명령어들을 브라우저들이 지원하는지 찾아보는 사이트가 있다고 합니다.

그것은 바로!

Can I use(http://caniuse.com/)

4. 개발툴

저는 사전에 다운받아서 설치한 "Atom"이란 툴을 이용해 보겠습니다.

클릭하면 아톰 홈페이지로 이동합니다.

5. 개발언어

1) HTML

HTML은 Hyper Markup Language의 약자입니다. 웹 페이지를 만들때 사용하는 중요한 언어입니다.

(1) HTML의 역할

크게 2가지의 역할을 한다고 합니다.

① 웹 사이트의 정보(텍스트, 이미지 등)

② 웹 페이지의 구조(CSS로 꾸미기 전의 뼈대)

(2) HTML 버전

언어이다보니, 여러해를 거쳐 문제점이나 개선점이 있을때 마다 갱신되어 현재는 HTML5 버전이라고 합니다.

(3) 개발환경

위에서 언급한 Atom을 이용하여 개발환경을 구축하겠습니다.

먼저 Atom을 켜줍니다.

아톰 실행

이전에 구글드라이브라는 폴더에 HTML코드를 잠깐 연습했더니 위와 같이 프로젝트에 잡혀있네요.

나머지 창들을 다 꺼주고, "File"을 눌러 "New File"을 누르겠습니다.

New File 클릭

위와 같이 untitled창이 생겼습니다. 이제 여기에서 코딩을 하면 되겠습니다.

코딩에 앞서 HTML의 기본 구조를 먼저 살펴보면,

HTML 코드는 "태그"라고 부르는 것 같습니다. (자세히는 모르겠습니다;;)

태그를 작성시, 항상 시작과 끝을 표시를 해주고 그 안에 구현할 기능과 해당 기능의 명령값, 그리고 내용 등을 작성해 줍니다.

여기서 기능은 "속성"이라고 부르고, 명령값은 "속성값"이라고 부르는 것 같습니다. 그리고 내용은 "콘텐츠"라고 부릅니다.

예를들면

<태그열기 속성="속성값"> 콘텐츠 </태그닫기>

이렇게 표현된다고 합니다.

이전에 블로그 스킨을 혼자 만지작 하던 것이 위의 구조였던 것 입니다!!

이제 웹페이지를 구성하는 HTML 문서의 기본 구조를 보면,

<!DOCTYPE html>

<html>

<head>

<meta charset="UTP-8">

<meta name="title" content="웹 페이지 이름">

<meta name="description" content="이 페이지에 대한 간략한 설명">

<meta name="keywords" content="핵심 키워드 등록">

<title> 요미토리 </title>

</head>

<body>

<태그열기 속성="속성값"> 콘텐츠 </태그닫기>

</body>

</html>

위와 같이 웹페이지가 구성되어 있는걸 우린 스킨편집에서 볼 수 있습니다.

한 태그안에 여러개의 속성을 넣을 수 있는 것 같습니다.

위의 코드를 간단하게 설명하면

<!DOCTYPE html> 는 이 문서가 "HTML5" 로 작성된 문서라고 선언하는 태그라고 합니다. (이건 고정적으로 쓰겠네요.)

<html> 는 문서의 시작과 끝을 알리는 태그라고 합니다.

<head> 문서의 기본정보를 검색엔진이 쉽게 찾을 수 있도록 알리는 태그입니다.

<meta 는 검색엔진에게 해당 문서가 어떤 문서인지 알려주는 태그입니다. (meta 태그는 태그닫기가 없다고 합니다.)

charset 속성은 Character set의 약자로 언어의 집합이라고 합니다.

name 속성은 검색 엔진에게 실질적인 정보를 주는 속성입니다.

content 속성은 name속성의 속성값에 대한 설명이나 내용입니다.

"UTP-8" 속성값은 전 세계의 언어를 표현할 수 있게 해주는 코드입니다. (이 값을 생략하면 한글이 이상해 질 수 있답니다.)

"title" 속성값은 페이지의 제목을 뜻합니다.

"description" 속성값은 페이지에 대한 짧은 설명을 뜻합니다.

"keywords" 속성값은 페이지의 주요 키워드를 뜻합니다.

<title> 요미토리 </title> 는

위와 같이 표시되는 부분의 직접적인 내용을 써주는 태그입니다.

<body> 는 우리가 포스팅하는 페이지의 본문에 해당하는 태그입니다. (여기에 광고도 넣지요~)

(4) 자주 사용하는 태그

이제 블로그 스킨을 꾸밀때, 자주 사용하는 태그들을 보시겠습니다.

① <a> 태그 : anchor의 약자로 메뉴 버튼 같은 클릭시 넘어가는 페이지를 만들때 사용한다고 합니다.

a 태그 스킨편집에서 따온 태그

여기서 "href" 속성은 hypertext reference의 약자로 연결할 페이지의 주소를 설정할 때 사용합니다.

속성값은 이동할 페이지의 주소를 넣어주시면 되겠습니다.

이때 자주 사용하는 속성으로 "target 속성"은 웹사이트가 어떤 위치에서 열릴지 결정하는 요소이며,

속성값으로 _blank(새탭) , _self(현재창)를 주로 사용한다고 합니다..

(여기에 title 속성을 넣으면 속성값이 해당 링크에 커서를 올렸을 때 나타난다고 합니다..)

② <img> 태그 : image의 약자로 블로그 포스팅시 사용하는 사진들을 첨부할 때 사용함.

주로 사용하는 속성은 src, width, height, alt 가 있는데,

src는 해당 이미지명칭(파일명)이고 width는 이미지의 가로 길이, height는 이미지의 세로 길이 그리고

alt는 alternative text의 약자로 브라우저가 이미지를 표시 못 할때 대체되는 택스트입니다.

③ <h1> ~ <h6> 태그 : h는 헤드라인을 뜻하여 문서내의 문장에 대한 제목이나 부제목 등을 표시할 때 사용.

숫자는 크기를 나타내고 1이 제일 크고, 6이 제일 작습니다.

④ 태그 : paragraph의 약자로 문장이나 단락으로 구성할 때 사용.

블로그 내용의 글씨들은 모든 사용한다고 보면 되겠습니다.

⑤ 태그 : 태그 안에 있는 특정 단어나 문장을 꾸밀 때 사용.

바로 위에 있는 붉은색 하이라이트 처럼, 가독성을 높이기 위한 효과들이라고 생각하시면 되겠습니다.

⑥ 태그 : 태그와 유사하나 하이라이트 효과만 되는 것으로 보이며,

현재 작성중인 글의 HTML 코드를 불러보면

⑥ 태그 :

=

이러합니다. 동일한 효과를 줄 수 있는 것으로 보이며, 물론 코드가 더 깁니다.

티스토리 블로그에서는  태그를 안쓰고 있습니다.

⑦ <ol> , <ul> , <li> 태그 : 이 태그들은 리스트 형태의 글을 구성하며, 순서에 대한 세팅합니다.

<ol> : ordered list, 즉 순서가 있는 목록으로 숫자나 알파벳 등으로 구성.

<ul> : unordered list, 순서가 없는 목록으로 구성.

<li> : list item, 리스트에 대한 항목을 구성.

<ol>

<li> 테스트1 </li> => 1. 테스트1

<li> 테스트2 </li> => 2. 테스트2

<li> 테스트3 </li> => 3. 테스트3

</ol>

<ul>

<li> 테스트1 </li> => ● 테스트1

<li> 테스트2 </li> => ● 테스트2

<li> 테스트3 </li> => ● 테스트3

</ul>

위와 같은 형태로 구성이 될 것 입니다. (사이드바의 카테고리에 보면 활용됨을 볼 수 있지요.)

⑧ <input> 태그 : 말 그대로 정보를 입력 받을 때 사용한다고 합니다.

속성으로 type 속성과 속성값의 정보에 대한 value 속성이 있습니다.

속성값은 검색으로 ~_~; 엄청 다양하다고 합니다. ☞ 검색

이 태그는 블로그 스킨 수정할 때 못 적이 없는 태그인데, 나중에 게시판이나 쇼핑몰을 만들어 회원가입을 하게되면 필수겠습니다.

⑨ 태그 : line break를 의미하며 다음 줄로 줄 바꿈할 때 사용합니다.

특이사항으로 태그는 <태그닫기>를 안해줘도 된다고 합니다. 아니, 없다고 합니다. ㅎㅎ;

⑩  태그 : 주석. (코드에 대한 설명 등을 메모할 때 사용)

제가 많이 사용하고 있는 태그인데, 광고를 넣을 때 까먹지 않도록 표시할 때 많이 사용합니다.

HTML 코드 실습

오늘은 여기까지하고 2편에서 만나요~

☞ 책보고 무작정 따라하는 웹 사이트 설계 - 2편 -

저작자표시 비영리 변경금지

'강화도라이프 > 블로그 & 웹 사이트' 카테고리의 다른 글

책보고 무작정 따라하는 웹 사이트 설계 - 3편 - (0)	2019.09.02
책보고 무작정 따라하는 웹 사이트 설계 - 2편 - (0)	2019.08.26
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 - (2)	2019.08.19
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 2편 - (0)	2019.08.18
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 1편 - (0)	2019.08.11

책보고 무작정 따라하는 웹 사이트 설계 - 1편 -