하늘과 나의 IT 이야기

This works great to wrap text and maintain white-space within the pre-tag: pre { white-space: pre-wrap; }

4장. HTML5 기본태그(글과 관련된 태그) 이번 시간에는 기존에 사용되었던 글과 관련된 태그를 복습해 보도록 하겠습니다. 이미 이 부분을 알고 계신 분들도 많이 있으시리라 생각됩니다. 처음 접하시는 분들은 강의에 집중해 주시기 바랍니다.^^ 글과 관련된 태그 1. ~ 태그제목을 나타내는 태그입니다. 에서 까지 있으며 태그가 가장 크고 태그가 가장 작습니다. HTML4에서는 태그와 비교하면서 많이 설명이 되어졌지만 HTML5.0 에서는 태그 자체를 사용하지 않으므로 비교설명은 하지 않고 태그만 설명드리도록 하겠습니다. 예제 소스를 보도록 하겠습니다. 첫번째 첫번째 첫번째 첫번째 첫번째 첫번째 2. ~ 태그영어의 paragraph를 의미합니다. 즉, 문장 여러개가 모인 문단을 만들어주는 태그입니다. 3...

HTML5강의를 시작하게 된 하늘과 나입니다. 오늘부터 하나씩 HTML5 강의를 시작할 텐데요. HTML5에 대해서 배워보고 싶은 분들과 HTML5가 뭐지 하는 분들에게 조금이나마 도움이 되어 드리고자 시작하게 되었습니다. 그러면 하나씩 하나씩 살펴보도록 하겠습니다. 1. 웹(web)의 역사 먼저 웹(web)이라는 녀석이 어떻게 세상에 등장하게 되었는지 살펴보도록 하겠습니다. 웹은 월드 와이드 웹(World Wide Web)을 줄여서 부르는 말인데요. 인터넷에 연결된 컴퓨터들을 통해서 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 웹이라는 단어는 생소하기도 한데요. 우리는 흔히 이 웹을 보고 인터넷이라고 말하기도 합니다. 하지만 웹은 인터넷 밑에 있는 하나의 서비스라고 보면 될 것 ..

자, HTML5 강의 세번째 시간입니다. HTML4에서는 문서의 구조를 만들 때 div 태그를 id, class와 함께 사용했습니다. 완성된 문서를 보면 태그가 여러번 사용한 것을 볼 수 있었지요. 그래서 구조가 복잡할 수록 태그가 여러번 겹쳐 있었기 때문에 알아보기가 힘들었을 뿐더러 수정하기도 어려웠습니다. HTML5에 와서 문서의 구조를 만드는 새로운 개념과 요소들이 추가되었습니다. 그래서 기존에 태그로 소스코드를 작성했던 것보다 구조적인 문서를 만드는 것이 가능해졌습니다. 구조를 만들기 위한 새로운 태그들을 시맨틱 태그라고 하는데요. 오늘은 HTML5에서 새롭게 등장한 시맨틱(semantic)태그에 대해서 알아보도록 하겠습니다. 시맨틱(semantic) 태그란 무엇인가요? 영어에서 semantic이..

[HTML5 강의] 3장. HTML5의 기본. 태그 HTML이 무엇인지 다시 한번 복습하고 넘어가도록 할게요. HTML의 정의 HTML은 Hyper Text Markup Language의 줄임말입니다. mark-up 언어는 무엇이냐구요? 그것은 바로 안에 정의된 용어로 태그(tag)를 표현하므로 mark-up 언어라고 부른답니다. HTML의 태그는 이런 특징을 가지고 있습니다. HTML의 태그는 기본적으로 대소문자를 구분하지 않아요. header와 HEADER는 같은 의미라는 말이지요. 태그를 이용해서 문장이나 그림 등의 구성요소와 배치 구조 등을 설정할 수 있구요. 파일의 이름 끝에는 .html 또는 .html이 붙어요.(이 .htm과 .html로 이 파일이 HTML문서라는 것을 구분한답니다..

[HTML5 강의] HTML5를 실행해보자. 웹 브라우저 설치하기 HTML5 강의 두번째 시간입니다. 이번 HTML5 강의에서는 HTML5를 실제로 실행해보기 위해서 HTML5를 지원하는 웹브라우저를 설치해 보도록 하겠습니다. 구글 크롬 설치 구글 크롬은 가장 최근에 만들어진 브라우저로 빠른 속도가 큰 장점이라고 할 수 있겠습니다. 구글 크롬 설치하러 가기 - http://www.google.co.kr/intl/ko/chrome/ 위 링크를 클릭하여 구글 크롬 설치페이지로 이동합니다. 아래 보이는 화면과 같이 나오면 Chrome 다운로드 버튼을 눌러 설치 파일을 다운로드 한 후 설치하면 됩니다. 오페라 설치 아래의 링크를 클릭하여 오페라 브라우저를 설치합니다. 오페라 브라우저 설치하러 가기 - http:..

[HTML] 수정가능한 SELECT 태그 소스(Editable 'Select' element) 115x175 mm 120x160 mm 120x287 mm 실행결과 위의 소스코드를 실행하면 아래와 같이 나옵니다.익스플로러 10 에서 테스트한 화면입니다. 출처 : http://stackoverflow.com/questions/2141357/editable-select-element

요즘 부트스트랩이 하나의 화두로 떠오르고 있습니다. 웹개발을 부트스트랩을 이용해서 하고 있다는 이야기도 여기저기 들려오구요. 많은 티스토리 블로거들도 운영하고 있는 블로그의 스킨을 부트스트랩(bootstrap)으로 바꾸려고 알아보고 있거나 또는 스킨으로 바꿀 계획 중이신 것 같습니다. 이쯤되면 도대체 부트스트랩이라는 녀석이 무슨 녀석이길래 이렇게 많은 사람들의 입에서 오르내리고 있는지 궁금해지는데요. 이번 포스팅에서 부트스트랩에 대해 알아보도록 하겠습니다. 부트스트랩(bootstrap)이 등장한 이유? 부트스트랩(bootstrap)이 등장한 이유? 웹페이지 개발을 위해 하나의 프로젝트가 시작되는 경우 한두사람에 의해 진행되기 보다는 여러 사람이 한 곳에 모여 개발을 진행하거나 또는 온라인 상의 커뮤니티 ..

[HTML] FRAMESET, FRAME, iFRAME 태그의 속성 태그의 속성 border="픽셀" 경계선의 두께 설정 bordercolor="색이름/RGB값" 경계선의 색상 설정 cols/rows="픽셀/%" 프레임셋 내의 프레임들을 열/행으로 나눌 때 frameborder="1/0" 프레임 경계선의 표시 유무 설정(1=yes/0=no) framespacing="픽셀" 프레임셋 내에서 프레임간의 간격 태그의 속성 src="url" 연결될 페이지 border="픽셀" 경계선의 두께 설정 bordercolor="색이름/RGB값" 경계선의 색상 설정 frameborder="1/0" 프레임 경계선의 표시 유무 설정(1=yes/0=no) marginheight="픽셀" 프레임내의 문서와 상하 여백을 설정 ma..

모바일 페이지 개발시 기본 소스 아래의 내용은 모바일 페이지 소스 중 기본 소스입니다. 해당 소스 입력(웹페이지와 동일) 나머지는 해당 소스 입력 부분에 입력하시면 됩니다. 그러면 PC에서 보이는 웹 환경과 무엇이 다른지 알아보도록 하겠습니다. 기존의 웹 소스와 모바일 웹 소스에서 다른 점? 1. 모바일 웹에서는 head 태그 안에서 추가되는 부분이 있습니다. 위 소스를 추가할 경우 무엇이 다를까요? 위 소스를 추가하면 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주는 것은 잊지 말아야 합니다. 2. 바탕화면 아이콘 추가 이 소스는 아이폰이나 아이패드, 아이팟터치등에 애플 계열에 사용되는 부분으로 소스는 다음과 같습니다. 사파리로 ..

태그에 대해서 알아보도록 하겠습니다 태그는 서식 요소를 생성합니다. 태그에 대해서 정리

태그에 대해서 알아봅시다. 태그는 사용자가 작성하여 서버로 제출할 수 있는 서식 영역을 생성하는 요소입니다. 태그에는 어떤 속성을 지정할 수 있나요? 태그에는 아래와 같은 속성을 지정할 수 있습니다.

이번 강좌에서는 HTML Element Level 이라는 것에 대해서 한번 설명해 드리고자 합니다. 태그들은 크게 Block Level Element와 Inline Level Element로 구분됩니다. 무엇이 다른가요? 두 요소가 무엇이 다른지 설명드리자면 종 류 설 명 태 그 Block Level Element 여는 태그로 시작하거나 닫는 태그로 끝날 때 줄바꿈이 되는 것 , , 등 Inline Level Element 여는 태그로 시작하거나 닫는 태그로 끝날 때 줄바꿈이 안되는 것 , , 등 하지만 이 것은 CSS를 사용해서 변경할 수 있습니다. Block Level Element에는 다른 Block Level Element나 Inline Level Element를 포함할 수 있지만, Inline ..

이 DOCTYPE은 반드시 쓰지 않아도 큰 문제는 없습니다. 하지만 이 DOCTYPE을 선언해줌으로써 브라우저가 좀 더 빠르고 정확하게 문서를 분석하여 표현해주며, 제작도구에서도 이 선언에 따라 문서에 제약을 걸어 정확한 표현을 해줄 수 있도록 해줍니다. DOCTYPE XHTML의 DOCTYPE은 strict, transitional, frameset의 세 종류로 이루어져 있으며, HTML 문서 최상단에 어떠한 요소보다 우선적으로 선언되어야 합니다. 그래야 웹브라우저에서 DOCTYPE을 구분할 수 있습니다. XHTML 1.0 Strict dtd strict dtd는 XHTML을 엄격하게 적용하는 규칙입니다. 경우에 따라서는 HTML 4.01 기반에서 사용하던 태그를 사용하지 못하는 경우도 있습니다. XH..

HTML 쉽게 이해하기 강좌가 계속 진행중입니다. 많은 관심 부탁드립니다. 이번시간에는 로 끝이 나는데, 일반적으로 웹 문서의 내용이 아니라 웹 문서의 제목이나 머리말에 해당하는 정보를 입력합니다. [알아두기] 로 끝남 웹문서의 제목이나 머리말에 해당하는 정보를 입력합니다. head 태그 안에 들어가는 요소 head 태그 안에는 태그, 태그, 태그 등이 들어갈 수 있습니다. 이 태그들을 하나씩 알아보도록 하겠습니다 - 페이지의 제목 표시 태그는 페이지의 제목을 표시합니다 태그는 웹페이지의 제목을 표시하는 태그입니다. 태그는 HTML문서의 실제 소스를 보면 위와 같습니다. 메모장에 위와 같이 입력해서 저장한 후 실행해 보면 위의 그림과 같이 나옴을 볼 수 있습니다. '백문이 불여일타' 라는 말이 있다고 합..