웹언어 썸네일형 리스트형 HTML - 제목을 나타내는 h요소 HTML - 제목을 나타내는 h요소 HTML - 제목을 나타내는 h 요소 제목을 나타내는 , , , , , 태그에 대해서 알아보겠습니다 h1은 헤드라인(Headline) 1을 줄여서 만든것이며 h1부터 시작해서 h6까지 쓸수 있으며 숫자가 높아질 수록 하위제목이 됩니다. h1(Heading 1)일반적으로 h1 태그는 콘텐츠의 타이틀로 활용합니다 h1은 웹사이트 제작시 이미 HTML 안에 포함하여 구성하기 때문에 특별히 사용하는 경우는 없습니다. h2(Heading 2)h2 태그는 콘텐츠의 대제목입니다. 주로 가장 큰 문단의 제목으로 사용하며 동일한 수준의 대제목을 사용하기 위해서는 h2 태그를 사용하고, h2 하위 수준의 제목을 사용하기 위해서는 h3 태그를 사용해야 됩니다. h3(Heading 3)h3.. 더보기 HTML - <a> 다른문서로 이동하는 태그 HTML - 다른문서로 이동하는 태그 태그 다른문서로 이동하는 태그 태그는 anchor '정박지' 또는 '닻'의 약자이며 태그는 혼자만 사용하지 않고 속성을 함께 사용하여야 합니다. herf 속성hypertext reference 약자로 연결할 주소를 지정하는 속성입니다. 구글 주의 : href에서 따옴표(" ")를 빠트리면 링크가 정상적으로 나오지 않습니다. target 속성 target : 링크된 페이지가 나타날 창을 정하며, 기본적으로 지정해 주지 않으면 현재페이지를 다른곳으로 넘어갑니다. target의 종류 및 기능 1) target="_top" : 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open 된 브라우저 화면을 열도록 합니다. 2) target="_blank" : 링크.. 더보기 HTML 기본구조 - 시멘틱 태그 HTML 기본구조 - 시멘틱 태그 HTML5 화면구조 시맨틱 태그 HTML을 하기위해서는 기본적으로 시맨틱 태그의 화면 구조를 이해하고 넘어가야 되며 세부 요소로는 herder / section / footer가 있습니다. 시멘틱 태그가 사용된 HTML5의 문서 구조 인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않습니다. 사이트의 제목과 로고, 검색 창 등이 잇는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(content) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한두 가지 영역이 추가 되곤 합니다. 위 그림에 보이는 것처럼 레이아웃을 만.. 더보기 HTML - <div>, <span> 태그 HTML - , 태그 영역을 나누는 태그 태그 태그는 division의 약자로 레이아웃을 나눌 때 주로 쓰입니다. 태그의 특성상 가로 크기가 영역에 꽉차게 설정되는데, CSS의 float 속성을 이용하면 내용에 꽉 붙게 설정할 수도 있습니다. 가로(width), 세로(height) 크기를 지정할수 있고 테이블 대체하며 레이아웃 배치 용도로 주로 쓰입니다 DIV 영역만 지정 단순히 영역만 지정 DIV 지정된 영역에 바탕색 지정 1) background: 색상 지정된 영역에 바탕색을 설정 DIV 가로 세로 크기 설정 1) width : 세로 크기2) height : 가로크기 가로 세로 크기 설정 DIV 영역 안쪽 여백 설정 1) padding : 여백의 순서는 윗쪽 오른쪽, 아래쪽, 왼쪽입니다 각각의 여백을.. 더보기 HTML - <br>태그, <p>태그 HTML - 태그, 태그, 태그 줄바꿈을 하는 태그 태그 태그는 line break 약자로 줄바꿈을 할때 사용합니다. 태그는 닫아주는 태그가 없는 빈 태그 입니다 하지만 xhtml에서는 태그로, 열고 다는 태그를 대신합니다. 예제) 더보기 HTML - 목록을 만드는 태그 HTML - 목록을 만드는 태그 목록을 만드는 태그목록을 만드는 태그 태그 사용합니다. 태그 : Unoerdered List의 약자로 순서가 없는 목록, 글머리 기호를 붙혀서 목록을 만드는 형식입니다. 태그 : Ordered List의 약자로 순서가 있는 목록, 번호 형식으로 순서를 매겨 목록을 만드는 형식입니다. 태그 : Dfinition List의 약자로 정의의 목록을 만드는 형식, 어떤 용어의 정의를 나열하는 형식입니다. 태그 : List Item의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그 , 목록의 내용이 되는 실질적인 태그이며 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다. 태그 속성 : 글머리 기호를 붙혀서 목록을 만드는 형식ul 태그의 type.. 더보기 HTML - 문법과 주의사항 HTML 문법과 주의사항 HTML 태그 HTML 태그는 웹 문서에 표시하려고 하는 내용을 전달하는 언어이다 때문에 정확하게 사용해야 하며, HTML 문서 만들기 전에 기억해야 할 몇 가지 사항을 알아보겠습니다. 태그는 소문자로 씁시다 HTML 태그는 대소문자를 구별하지 않고, HTML4 이전에는 태그를 대문자로 표시하기도 하였지만 XHML에서는 모두 소문자로 쓸 것을 권고하였고 HTML5에서도 소문자로 표시하고 있습니다. 좋은 예 나쁜 예 여는 태그와 닫는 태그를 정확히 입력 대부분의 태그는 와 처럼 여는 태그와 다는 태그가 하나의 쌍으로 이루어져 있습니다.브라우저가 여는 태그 를 만나면 이제부터 텍스트 단락이 시작되는구나. 라고 인식해서 태그 다음에 오는 내용을 텍스트 단락으로 처리합니다. 그리고 닫는.. 더보기 HTML - 기본 구조의 HTML 문서 만들기 기본 구조의 HTML 문서 만들기 에디트플러스를 이용해 가장 기본적인 구조의 HTML 문서를 만들어 보겠습니다. HTML 문서 만들기 첫 번째 줄에 이라고 입력후 중간에 빈 줄을 두고 웹 문서의 시작과 끝을 나타내는 태그와 태그를 입력합니다. * 은 이문서는 HTML5로 작성하는 문서라는 뜻입니다. 태그 안에 들여쓰기 한다음에 what is html 태그 아래 들여쓰기를 합니다. 태그는 이미지를 표시하기 위한 태그이고 태그는 화면에 문단을 표시하기 위한 것입니다.지금 입력한 'html.png'라는 이미지와 'what is html'라는 글자를 표시하는 것입니다. 화면 출력 지금까지 입력한 소스코드의 출력물 입니다.title부분 'First create html document' 이미지, 이미지에 대한 글.. 더보기 HTML이란? HTML이란? HTML이란?HTML이란? Hyper Text Makup Language의 약자로써 얼드와이드 웹 문서를 작성하는 Markup Language 입니다 HTML은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있습니다 인터넷문서는 Hyper Text의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만들어주며, 이러한 다양한 표현의 가능성과 쉬운 사용으로 월드와이드웹을 짧은 시간에 대중시키는데 원동령이 되었습니다 HTML 문서작성 HTML 문서의 작성은 일반 텍스트 에디터나 전용 에디터를 사용하면 쉽게 작성할수 있고, 일반 텍스트 문서와 같이 작성하면 된다 저장시 *.HTM 이나, *.HTML으로 저장하면 브라우저가 인.. 더보기 이전 1 다음
