'분류 전체보기'에 해당되는 글 27건
- 2013.02.20 블로그를 옮겨갈까 고민중.. 2
- 2013.02.18 블로그 재개..
- 2010.10.02 HTML - HEAD 태그 4
- 2010.09.30 양심을 찾는 내가 바본가... 5
- 2010.08.10 한여름 해안도로 3
- 2010.08.08 갑갑한 일상...
- 2010.03.26 제주의 봄날 6
- 2010.01.15 근황. 2
- 2010.01.06 구글 넥서스원 발표 4
- 2009.12.15 HTML 기본 구조 2
티스토리라는 플랫폼도 훌륭한 플랫폼이긴 한데..
서버를 놀게 놔두는거같은 기분도 있고
내 컨텐츠 내가 관리해볼까 하는 생각도 들고.. ㅎ
워드프레스로 갈아탈까 하고 지금 깔짝깔짝 사용해보는중..
궁금하시면 http://codenuri.net/blog/ 로 놀려오세요~
블로그를 다시 시작해볼까 한다..
페이스북 위주의 활동을 해봤는데 그냥 저냥 근황 이야기하기는 좋지만
뭔가 이런 글을 깨작거리며 남기고 그걸 곱씹는 맛은 없더라..
스킨 조작하다가 SyntaxHighlighter를 날려먹고..
스킨도 수정하고 싶은데 귀찮고..
기왕 하는김에 내 서버에다가 워드프레스 설치해놓고 싹 옮겨탈까도 고민중인데..
어찌할까는 뭐.. 일단 써보고 ㅎ
'사는이야기' 카테고리의 다른 글
| 블로그를 옮겨갈까 고민중.. (2) | 2013.02.20 |
|---|---|
| 양심을 찾는 내가 바본가... (5) | 2010.09.30 |
| 한여름 해안도로 (3) | 2010.08.10 |
| 갑갑한 일상... (0) | 2010.08.08 |
| 제주의 봄날 (6) | 2010.03.26 |
정말 한 백년만에 적는 이야기인거같네요.. :)
최근에 궁시렁 대는글을 빼고는.. ㅎㅎ
슬슬 다시 HTML에 대해서 이야기를 해 볼까 하는데요..
지난번에 어떤 이야기를 했는지 가물가물 하다면 여기 를 클릭하면 됩니다.
지난번엔 HTML문서의 전체적인 구조를 한번 살펴봤군요..
다시 되짚어 본다면 HTML의 문서는 크게 세부분으로 나눠 볼 수 있습니다.
첫번째.. DTD선언부.
HTML문서의 타입과 버전을 선언하는 부분입니다.
이거 선언 제대로 안해주면 크로스 브라우징에서 애먹어요~
두번째는 HEAD 부분
오늘 자세히 설명을 할 부분으로 HTML문서의 전체적인 속성을 정의하는 부분이라고 볼 수 있습니다.
그리고 마지막으로 BODY부분
우리가 실제로 브라우저에서 보고 읽고 클릭하는 부분을 넣어두는 부분이라고 보면 됩니다.
자.. 그럼 이제 HEAD에 대해서 알아보도록 하겠습니다.
이 HEAD내부에 넣어둔 태그는 대부분 우리가 보는 웹브라우저상에서 확인을 할 수 없습니다.
딱 하나.. TITLE 태그만이 웹브라우저의 제목표시줄상에서 보여지게 되는데요..
HEAD는 말 그대로 HTML문서의 머리 역할을 하게 됩니다.
이 HEAD 태그 내부에 들어가는 태그들 역시 대략 세개가 있는데요..
첫번째.. META태그 입니다.
지난 글에 살짝 언급을 했었는데요..
이 META태그는 폭 넓게 봤을때 HTML문서의 속성을 정리 해 두는 태그라고 생각하면 됩니다.
지난 글에는 아래와 같은 코드를 소개를 해 드렸었습니다.
위의 코드를 보면
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
와 같은 부분을 찾아 볼 수 있습니다.
이 부분이 바로 META태그인데요.. 이 태그의 목적은 HTML문서의 Content Type
즉, 문서의 컨텐츠 타입에 대해서 안내를 해 주는것입니다.
content는 일반 텍스트로 이루어진 html문서 (text/html)이고 문자 인코딩(charset)은 utf-8 이라는
일종의 유니코드 형식으로 이루어져 있다고 해석하면 됩니다.
이 외에도 META태그의 대표적인 쓰임새가 있는데요..
그것은 바로 검색엔진최적화(SEO)에 쓰이는 검색 키워드 설정입니다.
위의 코드를 보면 Description 부분과 Keywords 두 부분이 보이실겁니다.
Description부분은 말 그대로 이 문서의 설명을 뜻한다고 보면 됩니다.
그리고 Keywords 부분은 이 문서가 검색엔진에 등록 될 시 검색엔진에 제공해줄 키워드를
넣어두는 곳이라고 생각하시면 됩니다.
즉, 내 HTML문서와 관련된 키워드로는 이러이러이러한것들이 있다 라는것을 알려준다고 보면 되겠네요.
이 외에도 META 태그에는 Author, Copyright 등의 정보를 넣어서 검색엔진에 정보를 줄 수 있습니다. 하지만 이 META태그가 검색에 얼마나 유용하게 쓰이는지는 각 검색엔진의 특성에 따라 조금씩 다를수는 있다고 하네요
두번째로는 TITLE입니다. 위의 첫번째 코드에서 <title>HTML문서의 구조</title> 와 같은 부분이 바로 TITLE인데요 이 HTML문서의 제목을 넣어두는 태그라고 보시면 됩니다. 군더더기 없이 그냥 위와같이 넣어두면 브라우저의 제목표시줄이나 탭에 그 안에 있는 내용을 보여주게 되구요 검색엔진에 따라서는 TITLE태그의 내용도 검색에 반영하게 됩니다.
세번째로는 STYLE, LINK 태그가 있습니다. 이부분은 HTML문서의 Style Sheet를 위한 태그로, 웹문서의 스타일을 넣어주는 부분입니다. STYLE태그를 사용하면 아래처럼 태그 안에 일일이 CSS를 넣어주는 형태 (Internal CSS)로 사용을 해야하구요 LINK태그를 사용하면 아래 코드처럼 CSS만을 모아놓은 파일을 link (External CSS)시키는 형태로 사용을 하면 됩니다. CSS에 대해서는 다음에 한번 깊게 다룰 예정이니 여기선 이정도 알아 두면 될꺼 같네요..
그 외에도 <SCRIPT>태그가 올수 있는데요.. 문서에 사용되는 스크립트 언어를 사용하는 태그입니다. 이 태그에서 사용되는 스크립트는 주로 자바스크립트를 사용하는데요.. 아래 코드처럼 외부에 따로 모아둔 파일만을 링크 시킬 수 있구요.. 혹은 아래처럼 직접 스크립트를 작성 해서 사용도 가능합니다. HEAD부분에는 아래에 사용될 함수 등을 미리 선언해주는 정도로 사용을 하게 됩니다. 그 외에 실제로 스크립트를 실행하게 해주는 부분은 문서의 중간이나 최하단(권장)에 위치하게 되는데요 이는 문서가 채 로딩되기도 전에 혹시 모를 스크립트 오류때문에 문서가 안보여질 것을 미리 예방하기 위해 이렇게 사용하곤 합니다.
즉, HTML문서가 브라우저 상에서 렌더링이 거의 끝나서 보여질때쯤 해서 자바스크립트 실행을 시작하는거죠.. 그러면 스크립트에 오류가 있어도 해당 스크립트 실행만 안될뿐, 웹문서를 보는데는 큰 지장 없이 볼 수 있게 됩니다.
위의 이야기들처럼 HEAD는 직접적으로 보이지는 않는 부분이지만 웹문서를 보여주기 위한 아주 중요한 속성들을 담고 있는 부분이라고 보면 됩니다 :)
여기까지 기본적인 이야기였구요 다음번부터는 BODY태그 소개와 함께 대표적인 HTML태그들을 한번 살펴보도록 하겠습니다
'개발이야기' 카테고리의 다른 글
| HTML 기본 구조 (2) | 2009.12.15 |
|---|---|
| HTML (4) | 2009.12.14 |
| CSS : Box Model (0) | 2009.12.11 |
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
| CSS : Float (0) | 2009.12.09 |
오늘 어머니랑 볼일을 마치고 집으로 들어오던중..
새벽 열두시가 넘은 늦은 시간인지라.. '지하 주차장에 자리가 없겠지' 하면서도 속으론 행여나.. 라는 생각에
지하 주차장으로 차를 몰고 들어왔습니다..
한두어달쯤 전부터 입주자들중 한분이 새 차를 뽑았는지..
L사의 신형 S 차가 종종 눈에 띄더군요...
이넘의 차가 눈에 띄는 이유가 내가 좋아하는 차라서.. 새차라서... 라기보단
무개념 주차의 달인이라 눈에 참 많이 띄였습니다..
아니나 다를까.. 오늘도 무개념 주차를 보여줬는데요...
저기 구석에 한 자리가 비었음에도 불구하고 떡하니 무개념 주차를 해 두었더군요...
안쪽에 차가 들어 있어도 용서받지 못하는 주차인데.. 참 난감합니다
애매하게 걸친 차 혹은 운전이 미숙한 초보운전자가 낑낑 겨우 주차를 해 놨는데..
다른 차가 이렇게 가로막혀 있으면 참 난감할듯 합니다...
저처럼 지하에 주차하러 들어왔다가 이 광경이 보이면.. 두말할것도 없겠죠 -_-
차 안에서 "에이.. 주차 못할꺼면 주차 할 수 있는델 찾아서 다른데로 가든가.. 아니면 빈자리에 주차를 하든가.."
라고 궁시렁 거리며 내리고 트렁크에서 물건을 가지고 집으로 올라가던 차에...
저 차 안에서 아주머니 두분이 내리고 계시는게 보였습니다.
한마디 해주었죠...
"아주머니 저기 공간이 저렇게 있는데 차 이렇게 대면 안되죠"
라고 하니 아주머니 대답이 가관입니다...
"어차피 내가 댈 공간 앞에 댄건데 뭐 괜찮아요..."
답변들은 제가 얼굴이 딱 굳어지면서.. 한마디 더했습니다
"아니 그건 그렇다 치지만 옆에 애매하게 걸치는 차들 생각은 안하세요?"
아주머니... 아니나다를까
"네 그런거 다 알아서 하고있으니 걱정마세요"
.. 뭐 이건 니가 손해보는거 아니니 그냥 조용히 지나가라 뭐 이런투였습니다..
저 역시 면허증에 잉크가 채 마르기도전인 말 그대로 면허딴지 이제 4개월 좀 지났는데다
차 몰고 다닌지 이제 4개월이 채 안되는데.. 저건 정말 아니라고 봅니다
궁시렁 거리는 말로 들으라는듯 말했습니다.
"아 나.. 주차에 자신이 없으면 차를 몰고다니지 말든가 누군 저렇게 세울줄 몰라서 안세우는줄 아나"
정말 주차를 못해서 저런건지.. 아니면 핸들 돌리기 귀찮아서..(사실 차 빼려면 그게 더 귀찮겠습니다만...)
저러는건진 모르겠으나.. 정말 대책이 없는 이웃인듯 합니다 -_-
아주머니! 주차에 자신이 없으면 차를 몰고다니지 마세요
아니면 잘 세울 수 있는데를 찾아서 주차를 하시던가요..
아주머니 논리대로라면 공공질서는 뭣하러 지키나요?
여름의 제주는 덥고 습하지만
이렇게 갑갑하고 심란할때 조금만 나가도 탁 트인 바다가 있어 좋고
사색이 필요할땐 멋진 풍경과 함께 사색할 장소를 제공해줘 좋은듯 하다
흘러가는 구름과 흘러가는 자동차들..
난 또 어디로 흘러가는가를 고민하게끔 했던 시간
사는게 각박하고 갑갑한 요즘입니다..
그나마 휴가랍시고 숨좀 돌리고 사진 찍고 다니고 여유가 생기네요..
저기 떠나는 비행기.. 저 배처럼 어디론가 떠나가 있고싶은 요즘이네요
요사이.. 추운 봄날이 계속 되었습니다..
특히나 추운것보다 흐린 날씨가 사람을 우울하게 만들었는데요..
오늘 정말 간만에 화창한 봄날씨를 보여주고 있습니다.
아침에 운전면허를 딴다고 학원을 다니는데요..
연습이 끝나고 찍은 한라산입니다.
어제 하루종일 흐리더니만... 한라산에는 눈이 많이 내렸나보네요 ^^;
아래는 연습 끝나고 회사 출근하는길에 찍은 길가의 유채꽃입니다.
위치는 제주국제공항 화물종합청사 인근이랍니다
정말 간만에 셔터를 눌렀더니...
사진이 영 꽝이네요 ^^;
그래도 주말 다가와서 이렇게 화창하니
드디어 봄이 왔구나 하는 느낌이 듭니다.. :)
그럼 오늘 하루도 힘내서 열심히~!
내일은 올레 16코스 개장하는데를 가기로 했는데...
이렇게 화창했으면 좋겠네요 ㅎㅎ
최근 글이 무지 뜸했죠??
정신없는 나날을 보내고 있습니다..
여러분들과 보다 정확한 HTML지식과 더 깔끔한 CSS지식을 나누기 위해, 열공중입니다..
아마 이 열공기간이 지나면 본격적으로 html/css를 가지고
생계를 꾸려나갈(?)듯 합니다 ^^
뒤에.. 조금 여유가 생기면 열공했던 내용을 다시 한번 정리해서 공유 해 보도록 하겠습니다 (--)(__) 꾸벅
구글이 스마트폰인 넥서스원(Nexus One)을 5일에 전격 발표를 했습니다.
당연히 자사의 공개 플랫폼인 안드로이드를 탑재하였으며, 기기 제작은 대만의 HTC라는 업체에서
제작을 하여 발표를 했습니다.
엔가젯(http://kr.engadget.com/)의 정보를 빌려와서 소개를 하자면..
안드로이드 2.1에 3.7인치 WVGA(800*480) 정전식 AMOLED 터치스크린
1Ghz의 퀄컴 스냅드래곤 CPU, 512MB램에 512MB 내장 메모리..
microSD로 외장메모리 32G까지 지원을 합니다. 그 외에 Wi-Fi, 블루투스, GPS, G센서 등이 있네요..
딱 한가지 아쉬운점이 멀티터치를 지원하지 않는다는 점입니다.
그치만, 이번 구글 넥서스원의 출시는.. 국내 정식 출시가 된다는 전제하에
국내 이동통신 시장의 환경을 바꿔줄수 있지 않나 하는 생각을 들게 합니다.
아이폰 파장...
아이폰 국내 점유율이 10%를 돌파했다는 기사를 본 적이 있습니다.
이제껏.. 국내 핸드폰 제조업체들의 스펙 다운 및 특정 통신사에 묶인 특정 서비스등을 필두로
사용자에게 좋지 않은 환경이 되었다는건 공공연한 사실이었습니다.
대표적인 예로 Wi-Fi 제거, WIPI강제 등이 있었죠..
아이폰이 출시되면서 이러한게 조금씩 깨지기 시작했습니다.
시작이 힘들뿐.. 한번 깨지기 시작하면 걷잡을수 없이 깨지게 되어있는게 이러한 시장 판도죠 ^^;
그렇다면 넥서스원이 가지는 의미는?
구글은 넥서스원을 이동통신사를 통해서 판매하는것과 같이
USIM만 넣으면 사용할수 있는 언락(Unlock)폰을 판매하겠다고 발표를 했습니다.
즉, 무선 망만 이통사에서 사용되는 망과 같으면 이통사와는 관계 없이 USIM카드만 넣으면
사용할수 있는 공기계를 단독적으로 판매를 하겠다는 말이죠.
이렇게 된다면 조금 비약적이지만..
이동통신사는 지금의 유선인터넷 사업자들처럼 그저 망 사업자의 위치로 될 가능성이 있습니다.
즉, 우리가 컴퓨터는 컴퓨터 제작회사에서 사고 인터넷은 망 사업자에게 가입을 해서 인터넷을 쓰듯..
이동통신 역시 핸드폰은 핸드폰 제작회사 (여기선 HTC나 삼성 LG 노키아 모토롤라 등이 되겠죠)에서 사고
망 사업자(여기선 SKT, LGT, KT가 됩니다)에 가입해서 USIM카드를 받아 이동통신을 사용하는것이죠.
물론 약정도 존재할것입니다.. 자신회사의 망을 일정기간 사용하는 조건으로
기기를 저렴한 값에 받아서 쓰는것도 불가능 해 보이지 않네요..(물론 지금도 그렇게 하고있죠)
성공적으로 된다면 국내 이통사들의 경쟁도 치열해질듯 합니다.
LG야 3G망이 아니라 어쩔수 없지만.. 3G를 사용하는 KT나 SKT간은 요금 경쟁및
가입자 유치, 망품질 에 지금보다 더 열을 올려야 되겠죠..
(어차피 같은 성능의 같은 폰이면 저렴한쪽으로 몰리기 마련이니까요)
이전 통화품질 등의 광고는 핸드폰의 몫이었습니다.
'걸면 걸리는...'
'한국지형에 강한...'
액션 영화를 연상케하는 듯한 화면에 안성기씨가 나와서 '본부 여기는 정상이다' 라고 외치며
핸드폰을 광고하는 CF마저 있었죠.. 산 정상에서도 잘 터진다는 이야기입니다.
이러한 판매 구조가 정착이 되면
이제는 이동통신사의 광고는 산 정상에서 스마트폰을 가지고 인터넷을 하는 광고가 나오지 않을까 싶네요 ^^;
'IT이야기' 카테고리의 다른 글
| Windows 7설치, 사용기. (2) | 2009.11.09 |
|---|---|
| 2010년 티스토리 달력 사진 공모전 (2) | 2009.11.06 |
어제에 이어 오늘도 HTML이야기를 계속 해 볼까 합니다 ^^
기본적으로 html문서파일은 우리가 흔히 메모장으로 만드는 일반 텍스트 파일입니다.
즉, html을 작성할때는 일반 메모장으로도 충분히 연습을 할 수 있단 말이 되겠죠??
HTML문서의 기본 구조는 아래와 같습니다.
위의 내용을 메모장에 넣어서 .html 파일로 저장해서 실행을 시켜보면,
브라우저의 창에 "HTML문서가 나오는 부분입니다." 라는 글자를 확인 할 수 있습니다.
단, 저장할때 위 화면처럼 파일형식에 "모든파일", 인코딩에 "UTF-8"
로 저장해야 합니다.
실제로, HTML 태그들을 하나하나 뜯어서 보면,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이부분은 이 html문서가 어떤 문서타입으로 작성이 되었는지 알려주는 부분입니다.
Document Type Declation 이라고 하는데요, HTML의 많은 버전중 어떤 버전으로 작성을 했는지,
브라우저에게 알려주는 역할이라고 보시면 되겠습니다.
많은 버전의 DOCTYPE이 있고, 같은 버전이라도 strict, transitional, frameset 이 있는데요
해당 버전의 DOCTYPE은 여기 에서 확인 해 보시기 바랍니다 ^^
strict의 경우, 엄격한 문서타입을 의미하는데요,
표준을 엄격히 지켜 초창기 사용되던 태그나 특정 브라우저에서만 지원하는 태그의 사용이 제한됩니다.
transitional의 경우엔 strict보다 유연하게 관습적으로 사용되던 태그의 사용이 지원되고요,
framset의 경우 html문서의 frame을 지원하는 문서 타입입니다.
다음에 나오는 <html>은 제일 하단에 위치한 </html>과 짝을 이루는 복합태그입니다.
이제부터 HTML문서가 시작된다는 것을 알려주는 역할을 한다고 보시면 되구요,
하단의 </html>은 여기까지가 HTML문서다 라고 표시를 했다고 보면 됩니다.
이전에도 이야기를 했지만 태그에는 이렇게 시작과 끝이 있는 태그가 있는데요,
이 태그가 가지는 의미는 해당 내용이 여기<html>부터 여기</html>까지 포함된다고 생각하면 되겠습니다.
<head>~</head>
웹문서의 속성 설정을 하는 부분을 뜻합니다.
흔히 생각해서 웹페이지에 표시는 되지 않으나, 전체적인 문서의 속성을 지정해주는 부분이라 보면 됩니다.
예제에서 보시는 meta태그나, title등의 태그 및 그 외에 css나 javascript를 지정해주는 부분입니다.
<body>~</body>
웹문서의 본문이 나오는 부분입니다.
여기서 각종 태그들을 이용해서 웹문서를 나타낸다고 생각하면 됩니다 ^^
그 외에 여기서 사용된 태그를 안내를 해 드리면,
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
웹문서의 문자셋을 지정 해주는 메타태그 입니다 ^^
지금은 이정도로만 알고, 메타 태그에 대해선 나중에 더 자세히 알아보도록 하겠습니다 ^^
<title>~<title>
웹문서의 제목을 지정해주는 태그입니다.
제목이라고 해서 본문에 나오는 부분은 아니고.. 하단 그림처럼 제목표시줄에 나오는 부분입니다 ^^
여기까지 간단한 예제를 통해서 문서의 구조를 살펴 봤는데요,
HTML 문서 작성시 메모장이 불편하긴 하지만 처음 시작할땐 이만큼 좋은것도 없습니다 ^^;
추가적으로 별개의 에디터를 사용하시려면 추천 해 드리는 무료 에디터는,
vim(이건 처음에 사용하기 좀 어렵깁 합니다..^^;)
아크로에디터, 데이지 에디트 등이 있습니다 ^^
이러한 에디터를 사용하면 위의 html 화면처럼 각 부분별로 문법 하이라이팅이 지원되는 등의
편리함을 가지고 문서를 작성 할 수 있습니다 ^^
[관련글 보기]
2009/12/14 - [개발이야기] - HTML
2009/12/11 - [개발이야기] - CSS : Box Model
2009/12/10 - [개발이야기] - CSS : Float 흐름끊기
2009/12/09 - [개발이야기] - CSS : Float
2009/12/08 - [개발이야기] - CSS Position 이야기
'개발이야기' 카테고리의 다른 글
| HTML - HEAD 태그 (4) | 2010.10.02 |
|---|---|
| HTML (4) | 2009.12.14 |
| CSS : Box Model (0) | 2009.12.11 |
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
| CSS : Float (0) | 2009.12.09 |
