태그는 HTML 소스 안에 표현한 문자 형태 그대로를 표현할 때 쓰입니다. 문자 그대로를 표현한다고 해서 Pre태그 안에 다른 태그를 사용하지 못하는 것은 아닙니다. 프리 태그의 가장 큰 특징은 프리 태그 안에서는 띄어쓰기나 줄 바꿈을 할 경우에 별도의 태그가 필요하지 않다는 점입니다. 예를 들어 위의 문장을 프리태그에 넣고 줄 바꿈이나 스페이스를 여러 번 넣었다고 가정해 보면 아래와 같습니다. 프리태그의 가장 큰 특징은 프리태그안에서는 띄어쓰기나 줄 바꿈을 할 경우에 별도의 태그가 필요하지 않다는 점 입니다. 만약 위의 문장과 같은 줄바꿈과 스페이스가 있는 문장을 프리 태그 없이 넣는 다면 어떻게 보일까요? 아래처럼 줄바꿈이나 스페이스가 모두 무시되어 표시되게 됩니다. 프리 태그의 가장 큰 특징은 프리..
한동안 HTML, CSS, 웹 프로그래밍 등에 관한 기초강좌 연재를 중단했습니다. 다시 약간의 기초 내용을 보충 연재하려고 합니다. 내용의 수준을 저와 같은 기초 레벨로 잡았기 때문에 내용을 이미 알고 계시는 분들이 보면 다소 유치하게 보일 수도 있습니다. 이번 페이지에서는 용어들에 대해 정리해 보고자 합니다. 많이 듣긴했는데 그게 무엇을 의미하냐고 물어본다면 대답하지 못하는 단어들을 중심으로 정리해 보았습니다. - 도메인 : 사용자들이 기억하기 힘든 숫자 형태의 아이피주소를 tistory.com 등과 같이 문자 형태로 연결시켜 주는 역할을 합니다. - 네임서버(DNS) : Domain Name System의 약자로 도메인을 아이피 주소로 변환시켜주는 역할을 담당합니다. 예를 들자면 크롬에 www.goo..
1. frame태그의 개념 - 웹브라우저의 화면을 2개 이상의 영역으로 구분한 다음, 각각의 영역에 html문서를 삽입한 뒤 하나의 프레임셋(frameset)으로 만든 문서를 프레임페이지 라고 합니다. 보통은 모바일 페이지보단 PC화면용 제작 페이지에서 많이 보이는 구조입니다. 일반적인 경우 아래의 그림과 같이 수직으로 좌우측 분할을 하든가 아니면 상하로 분할하는 형식을 취하는 게 보통입니다. 2개 좌우 또는 상하로 분할된 경우 두개의 각각의 페이지는 외관상 한개의 페이지처럼 통합되어 한화면에 보여지게 되는데 두개의 프레임페이지와 한개의 통합페이지 총 3개의 HTML 문서가 필요하게 됩니다. - 프레임관련 태그로는 이 있습니다. 단 html5에서는 세가지의 태그를 지원하지 않아 퇴화될 태그명령어로 볼 수..
목록태그에 대해 알아보겠습니다. 목록을 나타내는 태그에는 dl, dt, dd와 같이 각 목록앞에 숫자나 부호가 아무것도 붙지 않는 정의 리스트용 태그와 ul, li와 같이 목록 앞에 3가지 모양의 부호(type=disc / cicle / square) 중에서 한가지를 나타나는 무번호 리스트용 태그, 그리고 ol와 같이 5가지 종류의 목록(type=1/A/a/I/i)중 하나를 순서대로 나타나게 하는 순서 리스트용 태그가 있습니다. 1. 정의 리스트 태그 - : 목록의 시작과 끝을 지정하는데 사용됩니다. - : 정의하고자 하는 항목(제목)을 나타내는데 사용됩니다. - : 내용을 적을 곳에 사용합니다. 예제)) 총기시대 공략 it-fix 블로그를 이용해주세요 출력)) 총기시대 공략 it-fix 블로그를 이용해..
문자를 굵은 글씨로 표현합니다 문자를 굵은 글씨로 표현합니다 문자를 굵은 글씨로 표현하는것은 b태그와 같으나 컴퓨터가 강조하는 문구로 인식 합니다 문자를 굵은 글씨로 표현하는것은 b태그와 같으나 컴퓨터가 강조하는 문구로 인식 합니다 문자를 이탤릭체로 표현합니다 문자를 이탤릭체로 표현합니다 이탤릭체로 표현하는것은 i태그와 같으나 강조의 의미가 있는것으로 컴퓨터가 em태그를 인식합니다 이탤릭체로 표현하는것은 i태그와 같으나 강조의 의미가 있는것으로 컴퓨터가 em태그를 인식합니다 문자를 밑줄있는 문자로 표현합니다 문자를 밑줄있는 문자로 표현합니다 밑줄있는 문자는 u태그와 같으나 컴퓨터는 ins태그를 새롭게 추가된 내용으로 인식합니다 밑줄있는 문자는 u태그와 같으나 컴퓨터는 ins태그를 새롭게 추가된 내용으로 ..
수평정렬 왼쪽(left), 중간(center), 오른쪽(right)으로 정렬하는 것을 말하며 center태그는 단독으로도 가능하나 align은 단독적으로 사용되어질 수 없습니다. align은 alignment의 준말로서 조정, 정렬, 일직선계열 등을 뜻하는 말입니다. 예)) 위치정렬태그 배우기, 수평정렬 출력물)) 위치정렬태그 배우기, 수평정렬 html5에서는 align을 지원하지 않으므로 가능한한 text-align속성을 이용한 css의 사용이 권장되고 있습니다. 그럼 css에서의 align 속성을 정리해보면 다음과 같습니다. 가운데, 위 또는 아래에 정렬 할 객체가 CSS 속성 vertical-align을 사용 합니다. 객체가 왼쪽 또는 오른쪽으로 정렬하려면 CSS 속성 인 float를 사용하십시오 ..
div 태그는 그 자체로서 특별한 효과를 갖는 태그는 아니며 구역을 지정하는 의미로 쓰입니다. 레이아웃별로 특정구획과 구획을 구분할때 내용 처럼 한 구획을 지정할때 쓰이며, 주로 css와 연동하여 사용됩니다. 예)) 1섹터 2섹터 3섹터 4섹터 5섹터 6섹터 7섹터 출력물)) 1섹터 2섹터 3섹터 4섹터 5섹터 6섹터 7섹터 위의 예제의 경우에서처럼 과거에 테이블을 작성해서 하던것을 현재는 주로 div태그에 의존해서 작업이 이루어지고 있습니다. 실제 작업에서는 개별적으로 div태그를 지정하기보단 css에서 각자의 스타일을 정의한뒤 div 태그로 해당 아이디 스타일을 가져다 쓰는 방식을 취합니다. 예제의 4섹터와 5섹터는 좌우 중앙정렬과 수직 중앙정렬을 보여주는데 수직 중앙정렬의 경우에는 display:t..
문서내에서 글자의 크기, 색상 및 글꼴종류를 지정할 수 있는 태그로서 사이즈는 1부터 7까지 있는데 1이 가장 작은 사이즈입니다. 기본 폰트값은 3으로 지정되어 있으며, px이나 pt단위로의 변경이 가능합니다. pixel (px) : 고정된 크기 단위. (주로 컴퓨터 화면에서 사용됨) 1px은 컴퓨터 화면에서 점 1개와 같음. 크기 조정이 안 됨 point(pt) : 고정된 크기 단위. (주로 인쇄 매체에서 사용됨) 크기 조정이 안 됨 em : 웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도 크기 조정이 가능함. 1em은 12pt, 16px, 100%와 같음. percent(%) : em과 비슷하게 pc와 모바일, 태블릿 등 서로 다른 장치에서 상대적으로 크기 조절이 가능함 xx-sm..
인용문 (blockquote) 문서내에 있는 특정 문자열이나 문단을 왼쪽에 여백을 두어 인용문으로 처리하기 위한 태그를 말합니다. 태그를 쓸때마다 40픽셀씩 들여쓰기가 됩니다. 기본형식은 it-fix 홈페이지 입니다. 그러나 단순히 들여쓰기 하나만을 위해서 쓰인다기보다 여러가지 꾸미기기능으로 사용되어 집니다. 예를 들어보면 blockquote를 head태그사이에서 style로 지정해놓고 body부분에서 필요한 부분마다 blockquote태그를 사용하는 방법입니다. 예제)) it-fix 홈페이지 Pc사용 및 일상생활중 모든 트러블에 대한 최적의 해결방법을 제시 -border-radius:10px; 은 둥근모서리 10픽셀 입니다. 출력물)) 주석문 ( ) 해당 인터넷문서를 작성하는 사람이 자신이 참조할 내용..
가로선, 구분선, 수평선 태그 br태그나 p태그와 같이 단독적으로 사용되며, 밑줄이나 단락의 구분을 나타내는 표시로 사용됩니다. hr 태그의 속성을 지정하는 태그들로 size (굵기), width(가로 길이), align(정렬값), color(색상), noshade(입체감 없애기) 등이 있으며 함께 사용되어 세부적인 설정값을 지정하게 됩니다. 예제)) 결과 출력물 이미지를 보면 width=50% 라는 태그의 의미가 화면 전체 가로폭의 50%만 차지하라는 뜻이므로 브라우저의 창을 줄이면 비례해서 작아지고 늘리면 비례해서 커지는 모습을 볼 수 있습니다. 위는 브라우저창의 크기를 줄였을때, 아래는 늘렸을때의 모습입니다. 태그와 태그의 구별 태그 한쌍의 pre태그 사이에 있는 html 소스태그들은 과만 태그로서..