하늘과 나의 IT 이야기

HTML 문서의 기본 구조 이번 시간에는 HTML 문서의 기본 구조에 대해서 알아보도록 하겠습니다. 잠시 개미 이야기를 해볼까 합니다. 개미의 구조는 일반적으로 머리, 가슴, 배로 나눈다고 합니다. 이와 같이 HTML의 기본구조도 나눌 수 있는데요. HTML의 기본구조는 크게 와 로 나눕니다. 아래 그림을 통해 쉽게 이해하실 수 있을 것입니다. 위의 그림과 같이 HTML의 기본구조는 크게 와 로 나뉘는데 이를 HTML 소스로 표현하면 아래와 같습니다. 앞서 설명한 기본구조는 와 로 나뉘지만 HTML문서임을 표시하기 위해 전체를 과 로 묶어준다는 사실을 아셨으면 합니다. 이번 시간은 HTML 문서의 기본 구조에 대해서 알아보았습니다. 제 글이 도움이 되셨다면 아래에 손가락 모양을 꾹 눌러주세요 1초도 안걸..

주석이 뭔가요? 주석은 실제 웹브라우저 화면에는 보이지 않고 소스에서만 보이는데 주로 웹페이지의 제작자의 부가적인 설명이나 메모를 기록할 때 사용합니다. [알아두기] 주석이란? 주석은 실제 웹브라우저 화면에는 보이지 않고 소스에서만 보이는데 주로 웹페이지의 제작자의 부가적인 설명이나 메모를 기록할 때 사용 HTML에서의 주석문 작성법 HTML의 주석문은 아래와 같은 형태로 작성합니다. [알아두기] HTML의 주석문 사이에 내용을 넣어 작성 예) 실제 활용 예 아래와 같은 소스를 작성하고 저장해서 실제로 어떻게 나오는지 확인해 보겠습니다. 메모장을 이용해서 실습 메모장을 열어 아래와 같이 작성하고 주석.html이라고 저장합니다. 실제로 실행해보면 보이지 않는 것을 확인할 수 있습니다. 제 글이 도움이 되셨..

혹시 HTML이라는 들어보셨나요? 못들어보셨다구요? 이제 배우신다구요? HTML이 뭔지 쉽게 설명해 드릴테니 저만 따라오세요. 그럼 출발! HTML이란 무엇일까요? HTML은 HyperText Markup Language의 약자입니다. 아래 그림을 보시면 빨강색으로 표시된 앞자를 따서 간단하게 HTML이라고 씁니다. HTML이 뭐냐하면 약자의 끝에 Language라고 써 있듯이 언어입니다. 한국어, 영어, 일본어 등과 같이 언어라는 것입니다. 무슨 언어냐 하면 PC에 있는 웹브라우저(쉽게 말해 인터넷을 할 수 있게 하는 녀석)을 말하죠. 이 녀석에게 'OOO해' 라고 말하는 것입니다. 영어권의 사람들에게 영어로 말을 해야 알아들을 수 있듯이 컴퓨터에게는 HTML이라는 언어로 표현해야 알아듣고 그에 맞게 ..

HTML/CSS 마우스 커서 모양(스타일) 바꾸기 웹페이지를 HTML과 CSS를 이용해서 만들다 보면 각 상황에 맞게 마우스 커서의 모양을 바꿔야 하는 경우가 있는데요. 이런 경우에 HTML과 CSS를 이용해서 어떻게 바꾸는지 정리해 보도록 하겠습니다. 마우스 커서 모양(스타일) 바꾸는 방법! 그럼 이제부터 한번 알아보도록 하겠습니다. 예를 들어 아래와 같이 HTML 태그를 이용해서 버튼을 만들었을 때 버튼에 마우스를 올려보면 마우스 모양은 기본(화살표) 형태로 나오게 되는데요 이런 경우 손모양으로 바꿔주면 좀더 친절한 표현이 되겠죠? 마우스 포인터의 모양을 바꾸기 위해서는 태그 안에 CSS를 사용해서 style="마우스 커서 모양" 을 넣어주면 됩니다. [핵심정리!] 마우스 포인터의 모양을 바꾸기 위해..

HTML5 두번째 시간이 돌아왔습니다. 이번 시간에는 HTML5인지 아닌지 어떻게 구분할 수 있는지와 기존 HTML 버전과 무엇이 다른지 알아보도록 하겠습니다. 첫번째 HTML5인지 아닌지 알아보는 방법에 대해서 알아보도록 하겠습니다. HTML 페이지를 만들 때 일반적으로 DOCTYPE이라는 것을 문서의 처음 부분에 지정하도록 되어 있는데 아래의 내용과 같이 쓰곤 했었죠. HTML5 이전에 사용했던 버전의 DOCTYPE!

우리가 흔히 인터넷을 할 때 '이 웹페이지는 뭘로 만드는 거야?' 이런 고민을 가지신 분들이 몇 분 계실지도 모르겠습니다. 또는 우리가 매일매일 공기를 들이마시고 내쉴 때 공기가 무엇으로 이루어져 있는지 신경쓰지 않는 것처럼 신경쓰지 않고 인터넷을 이용하시는 분들도 있는지 모르겠습니다. 보통 후자의 경우가 대부분일 것이라는 생각이 드네요. 오늘은 이 웹페이지를 만들 때 알아야 하는 HTML에 대해서 알아보도록 하겠습니다. HTML은 HyperText Markup Language의 줄임말 HTML은 보시면 어느 영어단어와 같이 줄임말입니다. 그러면 무엇의 줄임말일까요? 바로 HTML은 HyperText Markup Language의 줄임말입니다. 대문자만 써서 HTML이라 부릅니다. HTML은 HyperT..

POST 방식과 GET 방식의 차이 오늘은 웹페이지를 작성할 때 쓰이는 언어인 HTML, PHP, ASP, JSP, ASP.NET 를 공부할 때 나오는 GET, POST 방식에 대해서 알아보도록 하겠습니다. 웹프로그래밍을 하다보면 아래 그림과 같이 웹페이지에서 웹페이지로 정보를 전달해야 하는 경우가 있는데요. 그럴 경우에 GET, POST 방식이 사용됩니다. GET, POST 이 두 방식은 페이지에서 페이지로 정보를 전송할 때 쓰이는 방법입니다. GET 방식 - 모든 파라미터는 URL을 통해 전달됩니다. - 사용자의 눈에 직접적으로 표시되기 때문에, 로그인 비밀번호등의 정보를 GET 방식으로 전달 하면 문제가 발생 할 가능성이 있습니다. - URL의 길이가 정해져 있기 때문에 많은 양의 정보를 전달할 수..

2단 레이아웃 만들기 이전에는 다단 레이아웃은 테이블로 작업하는 것이 보통이었습니다. 하지만 테이블로 작업해 놓은 레이아웃은 잘못 수정하면 레이아웃이 깨지는 현상이 발생했죠. 물론 수정작업조차 쉽지 않았습니다. 소스가 길고 복잡했기 때문이죠. 그래서 우리는 CSS를 이용해서 HTML코드와 CSS코드를 분리하는 즉, 내용과 디자인을 분리해서 다단 레이아웃을 만들어 보도록 하겠습니다. 2단 레이아웃 만들어 보기 여기서는 테이블로 2단 레이아웃을 만들지 않고 태그를 이용해 2단 레이아웃을 만들어 보도록 하겠습니다. 2단 레이아웃의 HTML 코드는 아래와 같이 간단합니다. 헤더 영역 내용 사이드바는 빨강색으로 표시했습니다. 사이드바 사이드바는 파랑색으로 표시했습니다. 푸터 위의 소스는 헤더, 컨텐트, 사이드바,..

HTML 시작하기 이제부터 HTML에 대해 하나하나 알아보도록 하겠습니다. 가벼운 마음으로 시작하시면 되겠습니다. HTML이라는 녀석도 알고 보면 별 것 아닙니다. 괜히 HTML이라는 이름에 부담을 가지거나 그럴 필요가 없으니 차근차근 따라해 보시기 바랍니다. HTML은 무엇으로 이루어져 있을까요? HTML은 태그들의 집합이라고 볼 수도 있는데요. 이 태그는 아래와 같은 형태로 사용됩니다. [알아두기] 태그의 형태 내용 HTML의 태그는 기본적으로 여는 태그와 닫는 태그로 구성되어 있습니다. 여는 태그는 태그의 시작을 표시하고 닫는 태그는 태그의 끝을 표시합니다. 여는 태그와 닫는 태그 사이에는 내용이 들어가는데 내용 안에 또 다른 태그를 포함시킬 수도 있습니다. 즉 태그 안에 태그가 들어갈 수 있다는 ..

function window_close(){ if(confirm("즐겨찾기에 추가 하시겠습니까?")){ window.external.AddFavorite('http://www.tistory.com', '티스토리') }else{ return false; } }

HTML 가운데 정렬을 가장 쉽고 한번에 하는 방법 - 두번째 보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다. 그래서 저는 가운데 정렬을 애용하는 편이죠. 그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서 모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다. 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 방법은 크게 두 가지 방법이 있습니다. 아래와 같은 방법이죠. 1. auto 마진을 이용한 방법 2. 포지셔닝과 마진에 음수값을 지정하는 방법 지난 시간에 첫번째 방법을 설명해 드렸고 이제는 두 번째 방법을 알아보도록 하겠습니다. 포지셔닝과 마진에 음수값을 지..

HTML 가운데 정렬 가장 쉽고 한번에 하는 방법? 보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다. 그래서 저는 가운데 정렬을 애용하는 편이죠. 그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서 모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다. 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 방법은 크게 두 가지 방법이 있습니다. 아래와 같은 방법이죠. 1. auto 마진을 이용한 방법 2. 포지셔닝과 마진에 음수값을 지정하는 방법 그냥 저렇게 봐서는 무슨 방법인지 모르시는 분들이 많으실 것 같아 지금부터 하나씩 설명해 드리도록 하겠습니다. 1. auto 마..

HTML의 시작 HTML을 시작하기에 앞서 가장 궁금한 것은 바로 HTML이 무엇을 하는 녀석인가죠. 그래서 준비했습니다. HTML은 Hyper Text Markup Language 의 약자에요. 그리고 파일명에서의 확장자는 htm과 html로 끝나죠. HTML은 웹 브라우저에서 페이지를 어떻게 보여줄지 작성할 수 있어요. 그럼 HTML에 대해 정리해 보죠. - Hyper Text Markup Language의 약자 - 확장자로 htm 또는 html을 가지는 파일 - 웹 브라우저에서 페이지를 어떻게 보여줄지 작성 가능 - 간단한 문서 편집기로 편집 가능 설명만 들으면 심심하니까 그러면 다음과 같이 소스를 만들어서 테스트를 해보죠. test.html이라는 파일을 만들고 다음과 같은 내용을 입력해요. Th..

HTML 이야기 HTML 그 두 번째 이야기 HTML 태그에 대해서 알아보죠. - HTML 태그는 로 둘러싸여 있어요. 예를 들면 이렇게요. 또 각각의 태그들은 시작하는 태그가 있으면 끝내는 태그가 있어요. 이렇게 쌍으로 존재해서 그 안에 내용을 입력하게끔 되어 있어요. 또 대소문자를 가리지 않아요. 와 는 같은 의미에요. HTML 태그라는 녀석에 대해 정리해 보죠. - HTML 태그는 로 둘러싸여 있다. - HTML 태그는 쌍으로 존재한다. - 대소문자를 구분하지 않는다. 다음 소스를 보도록 하죠. TEST 이 소스에서 태그 시작 부분은 이고 태그의 내용은 TEST이며 태그의 끝 부분은 임을 보여주고 있습니다. 왜 우리는 소문자로 이루어진 태그를 사용해야 할까? 앞에서 태그에 대해서 이야기할..

HTML 이야기 HTML 글씨에 효과주기 글씨에 효과주기 태그 설명 굵게 크게 강조 이탤릭 작게 굵게 Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use instead Deprecated. Use instead Deprecated. Use styles instead 특수문자들 특수문자 출력코드 특수문자 출력코드 특수문자 출력코드 > & & † † " " ⓒ © ‰ ‰ ® ® 공백 Ÿ Ÿ ™ ™ ! ! ¡ ¡ § § " ' ¢ ¢ æ æ * * ¤ ¤ ¿ ¿ = = ¥ ¥ × ×