코딩이야기/HTML 16

HTML 강좌 6강 - HTML 태그 익히기#5 - TABLE 태그

HTML 강좌 6강 - HTML 태그 익히기#5 지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자. *테이블 태그테이블 태그는 HTML 많이 사용하는 태그이다.표 같은 형식의 데이터를 표현할 때 사용하거나, 게시판, 갤러리 등 사용도가 무척 많다.사용법은 다음과 같다. 1행1열 1행2열 2행1열 2행2열 위와같이 코딩을 하고 테스트를 해보자. 라인이 없으니 보기가 좀 불편한듯..보기 편하게 먼저 border 속성을 추가해보자~ 이렇게 border 속성에 값을 주면.. 테이블에 라인이 생긴다. 그리고 테이블 태그 속성에는 행이나 열을 합치는 속성이 있다.colspan 속성과 rowspan 속성이다.예를 들면 다음과 같이 1행과 2행의 열의 숫자가 일치 하지 않을 경우~ 1행1열 2행1열 2행2열 ..

HTML 강좌 5강 - HTML 태그 익히기#4

HTML 강좌 5강 - HTML 태그 익히기#4 지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자. *이미지 태그문서에 이미지를 삽입하는 태그이다.사용방법은 다음과 같다. 그리고 이미지 태그의 속성을 이용하여 이미지의 크기를 변경할 수 있다. 예제를 위해 어떠한 이미지도 좋으니 HTML 문서와 같은 폴더에 임의로 이미지를 넣어보자.이미지의 경로는 상대경로, 절대경로 두 가지 경로가 있다.상대경로 : 웹문서의 위치기반절대경로 : 웹디렉터리의 최상위 루트폴더 기반 현재는 서버기반 강좌가 아니기 때문에 상대경로만 간단히 설명하겠다.예를들어 테스트 하고자 하는 웹문서가 E:\HTML 공부방\05\01.html 이라고 가정하자.01.html 문서에 이미지를 넣고자 코딩을 할 경우 웹문서와 같은 경로인 E..

HTML 강좌 4강 - HTML 태그 익히기#3

HTML 강좌 4강 - HTML 태그 익히기#3 지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자.앞으로 더 많은 태그들이 있는데 하나하나 외우고 넘어가면 지칠 수 있으니, 적당히 연습해보고 넘어가도록 하자. *H 태그표제태그 라고 한다. 쉽게 이야기 하면 제목이라고 할 수 있다.표제태그는 총 6단계가 있다. 오늘의제목오늘의제목오늘의제목오늘의제목오늘의제목오늘의제목 이 6개의 단계는 글자의 크기를 변경한다.예제를 통해 테스트를 해보자~ 이렇게 코딩을 하고, 문서를 실행해보면~~ 이러한 결과를 볼 수 있다.약간 이상하지 않은가? 숫자가 무언가 어색..1 ~ 6 까지의 단계 중 1부터 점점 작아지는 형태이다.하지만 H태그 자체를 자주 사용하진 않으니 염두하지 말고 넘어가자~ *A링크 태그이 태그는 정..

HTML 강좌 3강 - HTML 태그 익히기#2

HTML 강좌 3강 - HTML 태그 익히기#2 이번 강좌도 지난 강좌에 이어 HTML의 태그를 예제를 통해 연습해 보도록 하겠다.참고로 HTML 태그에 관련된 내용을 모두 암기 할 필요는 없다.이런 저런 태그들이 있다는 정도만 인지하고, 테스트를 해보고 넘어가는 정도로 생각하자.왜냐하면 HTML에서 모든 태그를 사용하지는 않고, 일부 태그만 자주 사용하기 때문이다.일부 자주사용하는 태그는 굳이 외우지 않아도 사용하면서 자연스럽게 외울 수 있다. *HTML 텍스트에 관련된 태그텍스트 기울임 글꼴(Italics) 텍스트 굵은 글꼴(Bold) 텍스트 타자기 글꼴(Teletype) 텍스트 밑줄친 글꼴(Underline) 텍스트 취소선(Strikethrough) 텍스트 취소선(Strikethrough) 텍스트 ..

HTML 강좌 2강 - HTML 태그 익히기#1

지난 강좌에서는 HTML 기본구조와 개념에 대해 알아보았다.이번 강좌에서는 HTML에서 많이 사용하는 태그를 예제를 통해 만들어 보겠다. 그전에 HTML에서 사용하는 '주석'에 대해 알아보자.'주석(Comment)'은 문서를 작성하면서 작성자의 의견이나 덧붙이고 싶은 설명 등을 쓰고자 할 때 사용하는 것이다.그냥 문서에 쓰면 되지 않는건가?맞다. 안된다.그냥 쓰면 문서에 모두 반영되기 때문이다.직접 테스트를 해볼까? 위와 같이 작성을 하고 실행을 하면.. 위와 같은 웹페이지가 열린다.붉은색 부분을 작성자가 남기고싶은 의견이라고 가정해 본다면, 주석처리를 하지 않았기 때문에 본문에 그대로 반영이 되는걸 볼 수 있다. 그렇다면 HTML에서 주석처리는 어떻게 하는걸까?주석의 시작은 바로 이런 구조이다. 바로 ..

HTML 강좌 1강 - HTML 기본구조

이제부터 본격적으로 HTML 기초강좌를 시작해 보겠다.이번 포스팅에서 다룰 내용은 HTML의 기초 중에서 기본이 되는 것들이다. HTML은 웹페이지의 기본이 되는 페이지 이다.처음부터 서버와 클라이언트의 개념까지 설명을 하면 이해하기 어려울 수도 있으니, 일단 저정도만 알고 넘어가자.HTML은 홈페이지를 구성하는 여러 페이지라고 생각하자. 그렇다면 HTML은 어떤 방식으로 구성이 되는가.. 1. HTML의 구성요소(1)요소(Elements)요소는 HTML에서 사용하는 태그로 이루어진 모든 명령어를 말한다. 요소 (2)태그(Tag)태그는 위에서 설명했듯이 요소를 표현하는 방식이라 생각하면 된다.태그의 종류는 많이 있으니, 공부를 하면서 숙지하는 것이 좋다. 요소 이것은 P 태그이것은 Span 태그(3)속성..