인터넷 홈페이지의 이해 - 1차시(html)
1. 홈페이지를 구성하는 기본 요소는 아래와 같다.
html + js + css
기본구조(틀) 동적 시각적
-홈페이지를 알려면 먼저 기본 구조인 html을 익히고, 시각적 구성요소인 css를 알고 난 후, 동적 요소인 js(자바 스크립트)를 이해해야 준전문가의 반열에 들어설 수 있다.
-인터넷은 '아래아 한글'도 '워드프로세스'도 아니다. 인터넷은 html이라는 언어 자체를 인식한다.(물론 더 깊이 들어가면 01의 이진법도 있겠지만. 더 이상 깊이 가면 다친다 ㅡㅡ;) 어쨌든 우리가 이렇게 워드 프로그램처럼 글을 남길 수 있는 이유는 개발자가 html을 사용해서 관련 프로그램을 만들어 주었기 때문이다. html이란 hypertext* markup language 의 줄임말이다.
*hypertext: 사용자에게 내용의 비순차적 검색이 가능하도록 제공되는 텍스트. 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있음
2. 세상의 모든 홈페이지의 기본 뼈대인 html은 아래와 같은 기본 틀(빨간색)로 이루어져 있다.
<html> 시작 태그(tag)
<head> 머리 부분 <title> 제목 </title> </head>
<body> 몸. 본문 </body> 명령어의 세로 배치 가로 배치는 관계없음. (홈페이지의 본문 내용은 바디 안에 들어간다.)
</html> 종료 태그
/ <- 얘가 있어야 종료라고 받아들인다.
-위 내용을 해석하면
-<html> </html> : 이 안에 있는 글자들은 홍길동처럼 동에 번쩍, 서에 번쩍하게 해 줄 거란 뜻이다.
-<head> </head>: 이건 헤드 영역, 말 그대로 머리 역할이다. 머리<head>의 내용은 몸<body>을 지배할 수 있다. (예. 글자 크기, 색 조절 등의 넓은 범주의 명령을 한다.)
-<title> </title> : 제목이다. 모든 글에는 제목이 있어야겠지(이런걸 블로그 글에 넣어주면 구글봇이나 네이버는 좋아라 한다.)
-<body> </body> : 드디어 몸체다. 머리의 명령도 수행하지만 손과 발이 있으므로 직접적으로 홈페이지를 장식한다. 물론 css의 도움도 받지만 없어도 스스로 할 수 있다. (다만 복잡해질 뿐 ㅎ)
3. 줄을 띄우는 명령어(html은 엔터를 친다고 해서 인식하지 않으므로 아래와 같은 명령어가 필요하다.)
-Solo 명령어인
<br> : break line. 한 줄 띄우기, 횟수를 전부 인식함. br값은 위아래 줄이 같은 것으로 인식한다. 즉, 다른 명령어의 영향을 받을 수 있다.
-Couple 명령어인
<p> : paragraph(문단, 단락), 2br 값, 여러번 써도 한 번만 인식함. p는 위아래 줄이 다른 것으로 인식. 고유의 영역이므로 마무리해야 함.</p> <-이렇게 마무리
즉, 줄을 여러 번 띄울 때는<br>을 반복해서 사용한다. (좌우 띄어쓰기는 사용)
-java style sheet(br, p값보다 섬세한 간격 조정이 가능)
4. 홈페이지에 색깔을 표현하는 방법
색표현은 영어명( black, blue) or 숫자(#000099)를 사용한다.
-rgb 코드값(16진수 코드값)은 6자리 표기(#000000). 9의 경우 09로 표기.
-#000000 이런 식으로 같은 수가 반복되는 경우 #000으로 해도 인식한다.
RGB : Red, Green, Blue 빛의 3 원색으로 TV, 인터넷 등의 화면용이다.
가산 방식으로 0~255 ff
CMYK : Cyan 푸른색 계열, Magenta 붉은색, Yellow, Black. 염료. 물감의 양에 따라 만듦, 인쇄물 제작용.
감산 방식으로 비율로 처리 100%
-홈페이지에 적용하는 건 당연히 rgb 방식이다. 이 방식은 16진수 코드값 0123456789 / abcdef. 의 조합으로 이루어진다. 위에서 가산 방식이라고 했으니 0~255 까지의 색을 가산해서 조합할 수 있다. 0~9까지는 숫자를 쓰고(#009900), 10 이상은 (#ccddff) 이런식으로 쓴다. (a는 10, f는 15이니 ff는 15*15로 255가 되겠다.)
색을 적용할 때 html에서는 <bgcolor=red>로 css에서는 <backgroundcolor:blue>로 입력
-흰색은 <bgcolor=white> 하든지 <bgcolor=#000000>, <bgcolor=#000> 해도 된다. 숫자를 올리면 색이 점점 진해진다.
숫자로 표현할 경우 <bgcolor=#123456> <- 숫자 6개 입력, 순서는 rgb로 red12 green34 blue56 값을 준 것이다. 가산 방식이니 숫자가 높을수록 진해진다. max: 255
-그럼 255는 어떻게 표현한다?
ff 이다. 똑똑하군.
-그럼 가장 진한 색 표현은?
#ffffff 바로 블랙이다. 대단하군. (당신은 수준이 매우 높으므로 더이상 답답한 내용은 보지마시고 서점에 가서 수준에 맞는 책을 찾으시길)
-css는 배경을 여러 가지(그라디언트*)로 표현이 가능하다.
-일러 등 그림 배경도 가능.
*그라디언트: 색이 점점 연해지는 등의 변화가 있음
전체가 아닌 몇 글자만 색을 바꾸고 싶을 때는 <font color=black > </font> 이런 식으로 감싸면 된다.
서체는 face=궁서체 새로운 서체 적용 시에는 서버에 업로드해야 적용되므로 웬만하면 대중적인걸 쓰는 게 편하다.
글자 크기는 size= 1~7(7은 36 정도의 크기) 사이의 크기만 가능.
css는 다양한 글자가 가능하나 현재 잘 쓰이지 않음.(대신 검색봇이 좋아하는 글을 사용한다. 차후 등장 예정)
5. 마무리
제대로 공부했다면 html 의 구조, 줄 나누기, 색깔 넣기, 서체 넣기, 글자 크기 넣기 명령어를 알아야 한다.
자! 답을 해보자.
-답은 이런 식으로 술술 나와야 한다.
-html 의 구조, (html head title body...
-줄 나누기, (br, p, /p, ...
-색깔 넣기, (bgcolor=white, backgroundcolor:white, #000000... (font color=black. /font
-서체 넣기, (face=Arial...
-글자 크기 넣기 (size=5...
그럼 2차시로 ㄱㄱㄱ~
'♡ 베스트 터치 > 요즘 상품들' 카테고리의 다른 글
| 인터넷 홈페이지의 이해 - 3차시(배경색 바꾸기, 말풍선 넣기) 개인 소장용 (20) | 2019.10.04 |
|---|---|
| 인터넷 홈페이지의 이해 - 2차시(html. css. 사진 넣기). 개인 소장용 (3) | 2019.09.30 |
| 블랙박스 SD카드 포맷하기(9단계) (11) | 2019.09.06 |
| recent posts. 화면 하단에 미리보기 글이 잘 안 보이는 문제 해결(2단계) (16) | 2019.08.15 |
| 내 글 포스트 공유하기(3단계) sns 링크 소스 코드 및 아이콘입니다. (6) | 2019.08.14 |
