1. img map 태그 img map(이미지 맵) 기능은 하나의 이미지에 여러가지 모양의 영역을 구성하고 이 모양에 링크를 설정하는 기능을 말한다. 즉, 하나의 이미지에 여러개의 링크를 설정할 수 있다는 말이다. 개인적으로 홈페이지를 만드는 동안에는 사용해 본적도 없고 굳이 사용할 필요도 없는 기능 같다. 홈페이지를 만들 때 링크가 나눠지면 버튼을 나눠서 만들면 된다. 이미지의 좌표를 가지고 링크를 설정한다는 것은 효율적이지도 못하다. 반응형 웹이 대세인 요즘에 이미지의 크기는 변하고 그 변하는 이미지의 좌표도 변하기 때문에 더더욱이 사용할 일은 적어지지 않을까 생각된다. 하지만 이 기능이 사용 될 곳이 분명히 존재 할 것이며 그것을 대비해서 포스팅한다. 거의 쓸일이 없기 때문에 자세한 좌표 구하는 식..

1. Table table 태그는 표라고 생각하면 쉽다. 한글이나 엑셀의 표처럼 그 표를 직접 그린다고 생각하면 이해가 빠를거라 생각된다. 홈페이지에서는 영역을 나눌 때 사용하거나 게시판 목록에서도 table 태그를 많이 사용하고, 내용을 일정한 간격과 모양을 가춰 표현할 때도 사용한다. 원하는 모양의 표를 출력하려면 속성에 대한 이해가 많이 필요하다. 속성이 조금이라도 틀어진다면 그 표는 보기 어려울 정도로 틀어져 있거나 젠가처럼 이빠진 모양으로 출력될 것이다. 홈페이지 제작에 있어서 빠질 수 없는 태그이므로 기본적인 속성과 사용법은 필히 숙지해야 한다. 기본적인 속성들은 다음과 같다. width : table태그에 설정하면 전체 테이블의 너비가 되고, td태그에 설정하면 각 cell의 너비가 된다. ..

1. iframe inline frame의 약자이며 다른 문서를 불러와서 페이지 내부에서 보여지게 할 수 있습니다. HTML5 이전에도 이후에도 iframe을 사용하지 않는것을 권고합니다. 하지만 필요할 때가 있을 지도 모르겠지요. 형식은 다음과 같습니다. 속성들은 다음과 같습니다. name : 프레임의 이름을 설정합니다. width : 프레임의 너비를 설정합니다. height :프레임의 높이를 설정합니다. frameborder : 0으로 설정하면 프레임의 테두리선을 보이지 않게 하며, 1을 설정하면 프레임의 테두리선을 나타나게 합니다. scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes, no, auto) 프레임이란 것은 설명보다는 눈으로 보고 직접 클릭해 보는 것이 빠릅니다. ex) i..

1. 링크 연결 링크 연결이란 그림이나 글자와 다른 문서를 서로 연결하는 작업을 말한다. 클릭시 다른 사이트로 이동(네이버로 이동하거나 구글로 이동)하는 것도 링크 연결이 될 수 있으며 메일을 보낼 수도 있고 책갈피 처럼 클릭 시 원하는 위치로 스크롤링 되어지는 것도 링크 연결이라 할 수 있다. 링크 연결은 a 태그를 사용한다. a 태그는 href 속성을 사용하여 설정된 주소로 링크연결 또는 위치 이동을 가능하게 해준다. 1.1 같은 문서 내의 링크 웹페이지에 현재 보고있는 html 강좌들이 하나의 페이지에 모두 나온다고 가정해보자. 인덱스 (목차) 가 없으면 보고 싶은 위치로 이동하려면 스크롤을 내려가며 직접 확인해야한다. 하지만 같은 문서 내에 링크를 걸어두면 원하는 위치로 바로바로 이동할 수 있다...

1. img 태그 웹 페이지에 이미지를 불러와 출력하는 태그입니다. 속성은 다음과 같습니다. src : 이미지의 경로를 설정합니다. width : 이미지의 너비를 설정합니다. height : 이미지의 높이를 설정합니다. width 와 height 중 하나만 설정하면 나머지는 자동으로 비율에 맞춰 크기가 결정됩니다. alt : 이미지가 나오지 않을 경우 이미지 대신 나타낼 문자열을 설정합니다. title : 이미지 위에 마우스 커서를 올려 놓으면 나타나는 문자열을 설정합니다. align : top, middle, bottom 을 지정하면 이미지 기준으로 옆의 글자들의 위치가 변경됩니다. left, right 를 지정하면 이미지 자체가 왼쪽 또는 오른쪽으로 정렬됩니다. border : 이미지의 테두리선의 두..

1. 목록을 나타내는 태그들 ul 태그 : Unoerdered List 의 약자로 순서가 없는 목록이다. 글머리 기호를 붙혀서 목록을 만드는 형식이다. ol 태그 : Ordered List 의 약자로 순서가 있는 목록이다. 번호 형식으로 순서를 매겨 목록을 만드는 형식이다. dl 태그 : Difinition List 의 약자로 정의 목록을 만드는 형식이다. 어떤 용어의 정의를 나열하는 형식이다. li 태그 : List Item 의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그이다. 목록의 내용이 되는 실질적인 태그이다. 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다. 1.1 ul 태그 글머리 기호를 붙혀서 목록을 만드는 형식이다. - ul 태그의 type 속성 ..

1. hr 태그 hr 태그는 화면에 가로로 선(구분선, 수평선) 을 긋는 태그입니다. 단락의 구분을 할 때 가장 많이 사용하게 됩니다. 그 외에도 문자의 밑줄을 넣을 때도 사용 가능하며 때때로 세로로 선을 넣을 수 도 있습니다. 줄바꿈 효과도 있어 br 태그나 p 태그와 같이 사용할 필요가 없으며 br 태그나 p 태그와 마찬가지로 단독으로 사용합니다. hr 태그의 속성은 다음과 같습니다. size : 태그의 굵기를 설정한다. width : 태그의 가로 길이를 설정한다. align : 태그의 정렬값을 설정한다. left, center, right color : 태그의 색상을 설정한다. noshade : 입체감을 없애고 평평한? 상태로 보여준다. 다음과 같이 코딩합니다. ex) hr태그.html 출력 결과물..

1. 문자 형태 태그 문자를 입력 할 때 진하게 또는 기울임 또는 밑줄 등 여러 형태로 나타낼 수 있는 태그들이 있습니다. b : 글자를 진하게 bold 효과를 주는 태그이다. strong : 진하게 bold 효과를 주는 태그이다. i : 기울임꼴 글자를 나타내는 태그이다. em : 기울임꼴 글자를 나타내는 태그이다. u : 밑줄문자 태그이다. s : 취소선 문자 태그이다. strike : 취소선 문자 태그이다. tt : 타자체 태그이다. sup : 위첨자 태그이다. sub : 아래첨자 태그이다. Html 문서에서는 특수문자를 입력할 때 엔티티 코드를 사용합니다. 태그에도 & 와 같은 특수문자가 들어가기 때문에 이를 혼동하지 않게 하기 위함입니다. 또한 아무리 많은 공백(사이띄움 ? 스페이스바 ?..

1. Header 태그 Header 태그는 주로 본문 (body 태그) 내에서 제목을 나타내기 위해 사용합니다. head 태그와 혼동해서는 안됩니다. 태그 사용방법과 속성은 다음과 같습니다. Header 태그 사용 방법 - 내용 - 숫자는 1~ 6 사이의 값을 사용한다. - 숫자가 작을수록 글자의 크기는 커진다. - 내용에 들어가는 글자는 진하게 표시된다. - 이 태그에는 줄바꿈기능이 있다. Header 태그 속성 -align : left, center, right 값을 이용 정렬한다. ex) hrader태그.html 출력 결과물은 다음과 같습니다. 2. font 태그 font 태그는 글자색, 크기, 글자체 등을 지정하는 태그입니다. font 태그 속성은 다음과 같습니다. color : 글자의 색을 지정..

모든 강좌는 실무 기준으로 작성되며 이론 및 내부 구조 등이 궁금하신 분들은 직접 검색하시고 공부하시기 바랍니다. Html 을 사용할 수 있도록 필요한 최소한을 설명합니다. 먼저 Html 이란 Hyper Text Markup Language 의 약자이며 홈페이지를 만드는데 있어서 기본적인 프로그램 언어라고 생각하시면 됩니다. 1. Html 의 구조 Html 은 로 끝나는 태그라는 것을 가지고 작성합니다. 하나의 시작 태그는 과 같은 구조이며 이 태그가 끝나는 시점을 알리는 부분은 로 끝나는 태그로 작성합니다. 그럼 하나의 태그 모양은 과같은 모양이 되고 이 태그 사이에 다른 태그 및 텍스트를 작성하여 홈페이지를 만든다고 생각하시면 되겠습니다. 위 그림과 같이 기본 Html 태그 구조는 html, head..