인터넷 홈페이지의 이해 - 2차시(html. css. 사진 넣기)
<font color=#ffffff face=바탕 size=7> 텍스트만 </font><p><-- css에서는 작업할 필요 없음. 과거엔 쓰임.
위 명령어는 전 1차시에 나왔던 것으로. 폰트 칼라(글자색)는 ffffff주고, 페이스(폰트체)는 바탕체를 주고, 사이즈(글자크기)는 7을 준다는 의미이다. (차후 등장하겠지만 size는 pt, px, em 등이 있다.)
글자색 ffffff 는 무슨 색인지 기억하는가?
오.. 대단하시군.
맞다 블랙이다.
인터넷에 올리는 사진의 확장자명은 일반적으로 아래의 세 종류로 보면 된다.
*.gif / *.png / *.jpg 를 인터넷에 사용 가능.
jpg는 실사에 가깝고 선명도는 높지만 무거워서 사이트 속도가 느려질 수 있다.
gif는 이모티콘(emoticon)에 적합하고 움직임도 줄 수 있으나 선명도는 낮다.
png는 배경을 투명하게 저장할 수 있으나 선명도는 jpg 보다 낮다.
pdf는 화질은 거의 그대로 유지하지만 용량이 가벼워서 많이 사용한다.
사진의 화질을 그대로 살리고 싶을 때는 포토샵에서 조각 내기를 이용하거나 저장 방식을 변경해서 업로드하는 게 좋다.
만약 관련 프로그램이 없다면 포털에 검색해서 찾아야 한다. (검색은 블로그 좌측에 네이버, 다음, 구글이 있으니 활용하면 된다.)
jpg - ico, jpg - pdf, jpg - png 뭐 이런 식으로 검색하면 다양한 프로그램이 나온다.
사진 크기의 단위는?
bit(binary digit: 2진수) '01'로 이루어진 컴퓨터의 가장 작은 단위이다.
1byte는 최소의 정보 크기로 '00110101' 8개의 비트로 이루어져 있다.
ex) '1', 'a' 등의 한 글자는 1바이트. '가'와 같은 한글은 2바이트가 필요하다. 그렇다면 대한민국은 몇 바이트?
바로 8바이트이다. (아는 분은 하산하시길)
-1024byte=1kb. 즉, 1키로바이트는 1024바이트이다.
정리하면
*1024는 2의 10승(2x2x2x2x2x2x2x2x2x2=1024)
-8bit = 1byte (1바이트)
-1024byte = 1kb (1키로바이트)
-1024kb =1mb (1메가바이트)
-1024mb =1gb (1기가바이트)
-1024gb =1tb (1테라바이트)
화소란. 그림 화畵 본디 소.素(그림의 본디? 본질이나 본래값 정도?)
영어로는 픽셀(Pixell)이라고 부른다. 그림(picture)과 원소(element)의 결합이니 한자나 영어의 번역이 거의 흡사하다.
화소 즉, 픽셀이 높으면 그림의 원소가 많다는 뜻이다. 1600만 화소란 1600만개의 그림 원소가 있다는 뜻이다.
| 1픽셀 | 2픽셀 | 3픽셀 |
| 4픽셀 | 5픽셀 | 6픽셀 |
위의 표는 6개의 픽셀(화소)로 이루어져 있다고 보면 된다.
요즘 새로나온 휴대폰의 경우 3200만 픽셀까지 나왔으니 이는 3200만개의 자그만한 네모(원소)들이 모여서 사진을 만들었다는 뜻이겠다. 픽셀이 높으면 확대를 해도 선명하다. 픽셀이 낮으면 화면을 키웠을 때 점점 흐려진다.
DSLR 카메라는 7,500만 화소짜리도 있는데, 그렇다면 인간의 눈을 픽셀로 바꾼다면?
(사람이 식별할 수 없는 최소 폭을 0.59분(60분=1번)으로 계산해 사람의 시각 넓이 전체로 확장하면 5억 7,600만 화소가 나온다. 다시 말해 5억 7,600만 화소 디스플레이가 있다면 이는 사람이 보고 있는 실제와 같은 해상도가 된다는 얘기다.
다만 사람이 실제로 명확하게 보는 건 중핵 2도 범위다. 이 범위에만 한정해서 말하자면 700만 화소 가량이다.)
자세한 내용은 아래를 참조
사람의 눈 해상도는 몇 만 화소일까? - 테크홀릭
사람이 실제로 인식할 수 있는 화소 수는 어디까지일까. 아이폰5s는 해상도가 800만 화소다. DSLR 카메라는 7,500만 화소짜리도 있다. ...
www.techholic.co.kr
그림을 넣는 명령어
img src =머시기.jpg
이런 식으로 넣으면 된다. 머시기.jpg 사진을 그냥 넣으라는 뜻이다. img src는 image source를 줄인 말이다. 게임 좋아하는 친구들이나 코딩을 공부하는 친구들은 영어를 등한시하면 안 되는 이유가 바로 이런 것이다.
만약 사진의 크기를 변경하고 싶다면.
가로크기는 와이드 즉 width=100px 세로높이는 height=100px
를 넣거나 유동형에도 적합한
width=50% height=20%
이런식으로 비율값을 줄 수도 있다. 비율은 명령어가 들어가 있는 창의 크기를 스스로 인식하고 조절한다. 대단하다.
홈페이지에 올릴 때 이미지는 같은 폴더에 저장하거나 경로를 정확하게 해주고, 확장자명도 반드시넣어줘야한다.
일부 사이트, 자바 등은 파일명의 대,소문자를 구분하므로 주의해야한다.
서버에 대해 알아보자
컴퓨터 좌측 하단에서 '시작'을 누른 뒤에 'cmd' 엔터를 치면 dos 로 들어간다.
도스 상태에서 'ping www.naver.com' 입력하면 'ip 주소'가 나오는데. 이 'ip 주소'는 영구적이지 않다.
네이버는 서버 컴퓨터를 계속 변경하기 때문에 IP가 유동적이며, 이는 '점검중'이 뜨지 않는 이유이기도 하다.
만약 내 컴퓨터를 서버로 만든다면 고정 ip가 생길 것이고, 점검중이라면 이용을 못할 것이다. 그게 싫다면 컴퓨터를 한 대 더 구비하든지 아니면 유료사이트를 사용하는게 현명한 방법이다. 점점 늘어날 자료를 보관할 용량도 문제이긴 하다. (그렇다면 카페는 안전한가? 뭐 그렇지도 않다. 그래서 따로 다운을 받거나 '에버노트'를 쓰는 거겠지)
이와같이 서버에 대해 알아본 이유는 홈페이지를 어디에 저장해서 사람들에게 보여줄 것이냐에 대한 문제인데. 요즘은 포털사이트에서 카페나 블로그를 무료로 제공해 주므로 큰 문제가 없지만, 만약 스스로 홈페이지를 만든다면 서버가 필요하기 때문에 올려두었다. (수익형의 홈페이지들은 대부분 포털이 아닌 호스팅 사이트를 이용한다.)
무료나 유료로 서버를 제공해 주는 호스팅 사이트는 많지만 전부 안전하지는 않다. 무료 호스팅 비중이 높은 사이트는 적자가 이어져 서버를 폐쇄하기도 한다. 티ㅇㅇㅇ 같은 블로그도 그럴 가능성이 있으므로 평소에 자료를 잘 보관해두는게 좋겠다.
블로거로서 중요한 일은 가치있는 글을 올리는 것이다.
검색으로 들어온 유저가 저품질의 글을 보고 실망하면 더이상 특정 포털에서 검색을 하지 않는다. 저품질의 글을 양산해 내거나 단순하게 기삿거리를 옮기는 행위는 단기 수익에는 도움이 될진 모르지만 장기적인 관점에서는 같이 망하는 길이다. 다함께 상생하는 길을 모색해야한다. 물론 양질의 큐레이션 블로그의 경우는 예외다. 큐레이터는 고마운 분들이고 나의 귀한 시간을 줄여주기 때문에 자주 애용한다.
각설하고, 대표적인 호스팅 사이트는 아래와 같다. 카페24, 닷홈, 가비아 이런 순이다. 해외 사이트는 무료혜택도 크다.
3차시는 말풍선 넣기(장애인용)와 링크에 대해 알아보겠다.
지난 차시 내용은 아래에
인터넷 홈페이지의 이해 - 1차시(HTML). 개인 소장용
인터넷 홈페이지의 이해 - 1차시(html) 1. 홈페이지를 구성하는 기본 요소는 아래와 같다. html + js + css 기본구조(틀) 동적 시각적 -홈페이지를 알려면 먼저 기본 구조인 html을 익히고, 시각적 구성요소인 css..
btouch.tistory.com
'♡ 베스트 터치 > 요즘 상품들' 카테고리의 다른 글
| 삼성 클라우드로 대용량 파일 전송 및 공유(7단계)한 후, 모바일과 컴퓨터로 다운 받는 방법 (18) | 2019.10.07 |
|---|---|
| 인터넷 홈페이지의 이해 - 3차시(배경색 바꾸기, 말풍선 넣기) 개인 소장용 (20) | 2019.10.04 |
| 인터넷 홈페이지의 이해 - 1차시(HTML). 개인 소장용 (22) | 2019.09.25 |
| 블랙박스 SD카드 포맷하기(9단계) (11) | 2019.09.06 |
| recent posts. 화면 하단에 미리보기 글이 잘 안 보이는 문제 해결(2단계) (16) | 2019.08.15 |
