abbr 태그는 abbreviation(약자, 약어)의 약자로 마우스 오버 액션에 반응하여 해당 태그 부분에 마우스 커서가 이동하면 윈도우즈 도움말 형식처럼 입력해둔 문장이 나타나게 됩니다. 만약 아래와 같은 코드를 입력하였다고 가정해 보겠습니다. abbr 태그는 마우스에 반응하여 나타나는 글자를 만들 경우에 주로 사용하며 약자의 해설 등에 쓰입니다. 아래의 내용은 위의 코드를 그대로 소스 코드로 옮겨 넣은 내용입니다. abbr 부분에 마우스 커서를 대면 약자의 내용을 보여주게 됩니다. abbr 태그는 마우스에 반응하여 나타나는 글자를 만들 경우에 주로 사용하며 약자의 해설 등에 쓰입니다. abbr 태그에서는 주의해야 할 점이 있는데 abbr title="내용"에서 내용에 들어가는 텍스트는 공백이나 탭,..
한동안 HTML, CSS, 웹 프로그래밍 등에 관한 기초강좌 연재를 중단했습니다. 다시 약간의 기초 내용을 보충 연재하려고 합니다. 내용의 수준을 저와 같은 기초 레벨로 잡았기 때문에 내용을 이미 알고 계시는 분들이 보면 다소 유치하게 보일 수도 있습니다. 이번 페이지에서는 용어들에 대해 정리해 보고자 합니다. 많이 듣긴했는데 그게 무엇을 의미하냐고 물어본다면 대답하지 못하는 단어들을 중심으로 정리해 보았습니다. - 도메인 : 사용자들이 기억하기 힘든 숫자 형태의 아이피주소를 tistory.com 등과 같이 문자 형태로 연결시켜 주는 역할을 합니다. - 네임서버(DNS) : Domain Name System의 약자로 도메인을 아이피 주소로 변환시켜주는 역할을 담당합니다. 예를 들자면 크롬에 www.goo..
1. white-space 줄 바꿈, 자동 줄 바꿈, 스페이스, 공백 부분 등에 관한 처리 속성입니다. ⓐ white-space: normal; normal은 white-space의 기본값이며 여러 칸의 공백 또는 줄바꿈 모두 공백 1칸으로 인식합니다. 지정된 넓이의 끝에서 자동으로 줄바꿈을 합니다. 소쩍새는올빼미목 올빼미과의 한 종으로, 한국에서는 여름철새이다. 몸 길이는 20cm 정도로, 대체로 갈색을 띠며, 귀가 드러나 있다. 산이나 숲에 서식하며, 야행성이다. ⓑ white-space: pre; 띄어쓰기를 여러칸 하면 한만큼 그대로 여러칸 공백이 나타나고, 줄 바꿈도 엔터키가 있는 부분만 줄 바꿈이 되며 자동줄 바꿈은 하지 않습니다. 따라서 정해진 규격을 오버하더라도 엔터가 없는 한 줄바꿈하지 않..
보통 티스토리 블로그의 사이드바 상단에 존재하는 블로그 설명 문구의 정렬방법에 관해 포스팅하고자 합니다. 언제부터인가 제 블로그 정보의 설명문이 중앙정렬되어 문장이 끝날 때 이상하게 떨어지는 것이 눈에 거슬렸습니다. 고쳐야지 고쳐야지 하다가 오늘에서야 손대게 되는 군요. 뭐 대단히 중요한 게 아니라 그대로 방치한 지 몇 개월이 지났으니 어지간히도 게으른가 봅니다. 각설하고 저 중앙 정렬된 문장을 좌측 정렬된 문장으로 바꾸려고 합니다. 티스토리 자체의 설정 페이지에서는 왼쪽 메뉴 중 가장 하단의 블로그 항목에서 볼 수 있는데 수정하는 메뉴가 존재하지 않습니다. 그냥 단순히 문장의 내용만 수정이 가능한 구조입니다. 블로그 설명을 수정하기 위해서 html 편집의 css 항목으로 들어갑니다. Ctrl + F를 ..
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..