HTML

텍스트 관련 스타일

2021. 8. 12. 14:00

글꼴 관련 스타일

내용에 맞는 글꼴과 글자 크기, 굵기와 이탤릭체 여부 등 글자에서 바꿀 수 있는 글꼴 속성을 알아보고 선택할 수 있는 값이 어떤 것 이 있는가.

기본형	설명
font-family:<글꼴 이름>[,<글꼴 이름>, <글꼴 이름>] /* p {font-family:;} */	속성값은 주로 큰따옴표를 사용한비다. 예를 들어 텍스트 글꼴을 지정할 때 "맑은 고딕"처럼 두 단어 이상으로 된 글꼴 이름이라면 따옴표로 묶어 표시합니다.
body { font-family:"맑은 고딕", 돋움, 굴림	웹 문서 전체에 맑은 고딕이라는 글꼴을 적용할 때 만약 "맑은고딕"글꼴이 없다면 "돋움"글꼴로 적용하고 그 글꼴마저 없다면 "굴림"글꼴로 적용하라는 의미입니다.

웹 문서에 포함된 텍스트들은 사용자의 글꼴을 이용해 웹 브라우저 화면에 표시됩니다.

만일 글꼴이 설치되어 있지 않은 경우 브라우저 기본값이 나타나 각각 다른 글꼴로 표시됩니다.

@font-face 속성

웹 폰트 사용하기

웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다.

기본형	설명
@font-face { font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); }	영문 폰트를 eot파일과woff파일로 변환한 후 자신만의 글꼴 이름을 정의해서 사용할 수 있다. ttf는 다른 형식의 파일보다 용량이 크기 때문에 대부분의 모던 브라우저에서 지원한swoff글꼴 파일을 먼저 선언하고 그 후에 없으면 ttf를 선언하는게 좋다.

font-size 속성

글자 크기 조절하기

기본형	설명
font-size: <절대 크기> \| <상대 크기> \| <크기> \| <백분율>	픽셀이나 포인트를 비로해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다.

font-size의 속성에서 사용하는 속성 값

속성 값	설명
<절대 크기>	브라우저에서 지정한 글자 크기입니다. xx-small \| x-small \| small \| medium \| large \| x-large \| x-large \| xx-large를 사용할 수 있습니다.
<상대 크기>	부모 요소의 글자크기(font-size)를 기준으로 더 크게 표시하거나 더 작게 표시합니다. 사용할 수 있는 값은 larger \| smaller입니다.
<크기>	브라우저와 상관없이 글자 크기를 직접 지정합니다.
<백분율>	부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시합니다(%와 함께 표기해야 합니다.)

font-size에서 크기를 지정할 때 사용하는 단위

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절합니다. (많이 사용)
ex	x-height(엑스 하이트). 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절합니다.
px	픽셀. 모니터에 따라 상대적 크기가 됩니다. (많이사용)
pt	포인트. 일반 문서에 많이 사용하는 단위입니다.

기본형	설명
font-weight: normal	글자 굵기 기본 값
font-weight: bold \| lighter \| bolder	굵게 \| 가늘게 \| 더 굵게
font-weight: 100~900	400은 normal, 700은 bold로 세밀하게 조절 가능합니다.
font-variant: normal	일반적인 형태로 표시
font-variant: small-caps	작은 대문자로 표시

font 속성

글꼴을 한 번에 묶어 표현하기

font: <font-style><font-variant><font-weight><font-size/line-height><font-family> |
caption | icon | menu | menu | message-box | small-caption | status-bar

속성 값	설명
font-*	font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열합니다.
caption	캡션에 어울리는 글꼴 스타일로 표시합니다.
icon	아이콘에 어울리는 글꼴 스타일로 표시합니다.
menu	드롭다운 메뉴에 어울리는 글꼴 스타일로 표시합니다.
message-box	대화상자에 어울리는 글꼴 스타일로 표시합니다.
small-caption	작은 캡션에 어울리는 글꼴 스타일로 표시합니다.
status-bar	상태 표시줄에 어울리는 글꼴 스타일로 표시합니다.

p {font:16px/25px "맑은 고딕"}
p {font:bold italic 12pt}
p {font:120%/120% bold}

font:120%/120%일 때 글자 크기는 부모 요소를 따라가고, 줄 간격은 현재 요소의 글자크기를 기준으로 한다.

텍스트 스타일

텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일입니다.

기본형	설명
color: <색상이름 \| rgb \| #000000(16진수)>	테스트에서 사용되는 글자 색을 바꿀 때 사용
text-decoration : none	밑줄을 표시하지 않습니다.
text-decoration : underline	밑줄을 표시합니다.
text-decoration : overline	영역 위로 선을 그립니다.
text-decortaion : line-through	영역을 가로지르는 선(취소 선)을 그립니다.
text-transform : none	변환하지 않습니다.
text-transform : capitalize	시작하는 첫 번째 글자를 대문자로합니다.
text-transform : uppercase	모든 글자를 대문자로 변환합니다.
text-transform : lowercase	모든 글자를 소문자로 변환합니다.
text-transform : full-width	가능한 모든 문자를 전각 문자로 변환합니다.
text-shadow : none \|<가로 거리> <세로 거리> <번짐 정도> <색상>	텍스트에 그림자 효과도 줄 수 있습니다.

속성 값	설명
<가로 거리>	텍스트부터 그림자까지의 가로 거리를 입력합니다. 양수는 글자 오른쪽, 음수는 왼쪽(필수속성)
<세로 거리>	텍스트부터 그림자까지의 세로 거리를 입력합니다. 양수는 글자 아래쪽, 음수는 위쪽(필수속성)
<번짐 정도>	그림자가 번지는 정도를 나타냅니다. 양수는 그림자가 모든방향으로퍼지고 음수는 축소됩니다.
<색상>	그림자 색상을 지정합니다. 한 가지만 지정할 수 있고 공백으로 여러 색상을지정할 수도 있습니다.

white-space속성

공백 처리하기

속성 값	설명
white-space : normal	여러 개의 공백을 하나로 표시합니다.(기본값)
white-space : nowrap	여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다.
white-space : pre	여러개의 공백을 그대로 표시하고 영역너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한줄로 표시합니다.
white-space : pre-line	여러 개의 공백을 하나로 표시하고 영역너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.
white-space : pre-wrap	여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.

etter-spacing과 word-spacing 속성

텍스트 간격 조절하기

기본형	설명
letter-spacing : normal \| <크기>	낱 글자 사이 간격을 조절합니다.
word-spacing : normal \| <크기>	단어와 단어사이의 간격을 조절합니다.

문단 스타일

텍스트 정렬이나, 들여 쓰기, 줄 간격 등을 조절합니다. 웹 문서에서 텍스트를 많이 사용한다면 반드시 익혀 두어야 합니다.

direction 속성 - 글자 쓰기 방향 지정하기

기본값	설명
direction : ltr	왼쪽에서 오른쪽으로(left-to-right)텍스트를 표시합니다.(기본값)
direction : rtr	오른쪽에서 왼쪽으로(right-to-left)텍스트를 표시합니다.

text-align속성

텍스트 정렬하는 방법을 지정합니다.

기본형	설명
text-align : start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다.
text-align : end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다.
text-align : left	왼쪽에 맞추어 문단을 정렬합니다.
text-align : right	오른쪽에 맞추어 문단을 정렬합니다.
text-align : center	가운데에 맞추어 문단을 정렬합니다.
text-align : justify	양쪽에 맞추어 문단을 정렬합니다.
text-align : match-parent	부모 요소를 따라 문단을 정렬합니다. 다만, 부모 요소의 start나 end일 경우, 부모요소가 ltr인지 rtl인지에 따라 left나 right값으로 계산해 적용합니다.

text-justify

정렬 시 공백 조절하기

기본형	설명
text-justify : auto	웹 브라우저에서 자동으로 지정합니다.
text-justify : none	정렬하지 않습니다.
text-justify : inter-word	단어 사이의 공백을 조절해 정렬합니다.
text-justify : distribute	인접한 글자 사이의 공백을 똑같이 맞추어 정렬합니다

text-indent

텍스트 들여 쓰기

기본형	설명
text-indent : <크기>	단위와 함께 들여 쓸 크기를 지정합니다.
text-indent : <백분율>	부모 요소의 너비를 기준으로 상대적 크기를 지정합니다.

line-height

줄 간격 조절하기

기본형	설명
line-height : normal	기본값입니다.
line-height : <숫자>	글자 크기를 기준으로 배수를 지정한다2.0이면 글자크기 2배
line-height : <크기>	단위와 함께 지정
line-height : <백분율>	글자 크기를 기준으로 배수를 지정한다. 보통 두배가 적당.

text-overflow

넘치는 텍스트 표기하기

기본형	설명
text-overflow : clip	넘치는 텍스트를 자릅니다.
text-overflow : ellipsis	말 줄임표로 잘린 텍스트가 있다고 표시합니다.

목록 스타일

메뉴 항목이 목록과 링크를 결합한 형태라고 할 수 있습니다.

list-style-type속성

기본형	설명
list-style-type : none	불릿을 없앱니다.
list-style-type : <순서 없는 목록의 불릿>	순서 없는 목록의 경우 목록앞에 다양한(bullet)을 넣을 수 있습니다.
list-style-type : <순서 목록의 번호>	순서 목록에서는 번호 스타일을 지정할 수 있습니다.

순서 없는 목록에서 불릿 모양 바꾸기

속성 값	설명
disc	채운 원
circle	빈 원
square	채운 사각형
none	불릿 없애기

순서 목록에서 숫자 바꾸기

속성 값	설명	예시
decimal	1로 시작하는 십진수	1, 2, 3, ...
decimal-leading-zero	앞에 0이 붙는 십진수	01, 02, 03, ... 10, 11
lower-roman	소문자 로마 숫자	i, ii, iii ...
upper-roman	대문자 로마 숫자	I, II, III, IV ...
lower-alpha 또는 lower-latin	소문자 알파벳	a, b, c, d, e, ...
upper-alpha 또는 upper-latin	대문자 알파멧	A, B, C, D, E ...
armenian	아르메니아 숫자
georgian	조지 왕조시대의 숫자	an, ban, gan ...

list-style-image속성

불릿 대신 이미지 넣기

기본값	설명
list-style-image : none	이미지를 사용하지 않고 list-style-type속성에서 지정한 형태로 표시합니다.
list-style-image : <이미지>	url("images.jpg")처럼 url() 키워드 안에 이미지 파일 경로를 지정합니다.

list-style-position

목록에 들여 쓰는 효과 내기

기본값	설명
list-style-position : isnide	불릿이나 숫자를 안쪽으로 들여 씁니다.
list-style-position : outside	기본 값으로 불릿이나 숫자를 밖으로 내어 씁니다

저작자표시 비영리 (새창열림)

'HTML > 텍스트 관련 스타일' 카테고리의 다른 글

텍스트 관련 스타일 예제 (0)	2021.08.14

폼 관련 예제

2021. 8. 12. 00:51

퀴즈 1~2

1. 다음은 예약 페이지의 일부입니다. 04/quiz-1.html에는 '예약 정보'라는 제목만 표시되어 있습니다. 아래 폼 소스의 빈칸을 채우면서 04/quiz-1.html 문서에 폼을 추가하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>예약 접수</title>
	<style>
		ul {
			list-style:none;
		}
		li {
			line-height:50px;
		}
		label {
			width:60px;
			float:left;
		}
	</style>
</head>
<body>
	<h1>예약 정보</h1>

</body>
</html>

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>예약 접수</title>
	<style>
		ul {
			list-style:none;
		}
		li {
			line-height:50px;
		}
		label {
			width:60px;
			float:left;
		}
	</style>
</head>
<body>
	<h1>예약 정보</h1>
	<form>
		<ul>
			<li>
				<label for="r-name">이름</label>
				<input type="text" id="r-name">
			</li>
			<li>
				<label for="r-phone">휴대폰</label>
				<input type="text" id="r-phone">
			</li>
			<li>
				<label for="r-email">이메일</label>
				<input type="text" id="r-email">
			</li>
			<li>
			<input type="button" value="예약하기">
			</li>
		</ul>
	</form>
</body>
</html>

2. 04/quiz-2.html에 '프런트엔드 개발자 지원서'용 폼을 만들려고 한다. 다음 조건을 만족시키도록 <form> 태그와 </form> 태그 사이에 소스를 추가하세요.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>프런트엔드 개발자 지원서</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				
			</form>
		</div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>프런트엔드 개발자 지원서</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				<legend>개인정보</legend>
					<ul>
						<li>
							<label for="r-name">이름</label>
							<input type="text" id="r-name" placeholder="공백 없이 입력하세요.">
						</li>
						<li>
							<label for="r-phone">연락처</label>
							<input type="tel" id="r-phone">
						</li>
					</ul>
					<legend>지원 분야</legend>
					<ul>
						<li>
							<label><input type="radio" name="webp" value="webp">웹 퍼블리싱</label>
						</li>
						<li>
							<label><input type="radio" name="web-dev" value="web-dev">웹 애플리케이션 개발</label>
						</li>
						<li>
							<label><input type="radio" name="imp-dev" value="imp-dev">개발 환경 개선</label>
						</li>
					</ul>
					<legend>지원동기</legend><br>
						<label for="container" >
						<p><textarea name="" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요." ></textarea></p>
						<button>접수하기</button>
						<button>다시쓰기</button>
			</form>
		</div>
  </body>
</html>

저작자표시 비영리 (새창열림)

'HTML > 폼 관련 태그들' 카테고리의 다른 글

폼 만들기 (0)	2021.08.05

이미지와 하이퍼링크예제

2021. 8. 11. 23:27

연습문제 1~3

1. quiz-1.html문서에서 '이미지 삽입하기' 제목 아래 images 폴더에 있는 umbrella.jpg 이미지를 삽입하세요. 이때 이미지 크기가 크기 때문에 실제로 화면에 표시할 때는 320 x 210 크기로 줄여 사용하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>이미지 삽입하기</title>
</head>
<body>
	<h1>이미지 삽입하기</h1>
	<img src="images/umbrella.jpg" width="320" height="210" alt="umbrella">
</body>
</html>

2. quiz-2.html 문서의 '국내 포털 사이트 Daum으로 연결하기'라는 제목 아래에 'Daum'로고 이미지를 삽입하세요. 이미지 파일은 따로 제공하지 않으므로 Daum 사이트에서 로고 이미지 경로를 복사해 사용합니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>링크 사용하기</title>
</head>
<body>
	<h1>포털 사이트 Daum으로 연결하기</h1>
	<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="180" height="94" id="daum" class="img_thumb" alt="Daum">
</body>
</html>

3. quiz-3.html의 다음 로고 이미지를 클릭했을 때 다음 사이트(http://www.daum.net)로 연결되도록 링크를 추가하세요. 다만 링크된 사이트는 새 창이나 새 탭에서 열리도록 합니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>링크 사용하기</title>
</head>
<body>
	<h1>포털 사이트 Daum으로 연결하기</h1>
	<a href="https://www.daum.net/">
	<img src="http://icon.daumcdn.net/w/icon/1606/08/150737977.png" alt="Daum">
	</a>
</body>
</html>

저작자표시 비영리 (새창열림)

'HTML > 이미지와 하이퍼링크' 카테고리의 다른 글

이미지와 하이퍼링크 (0)	2021.08.05

텍스트관련태그 예제

2021. 8. 8. 13:54

    <blockquote>인용내용</blockquote>

예제2-02

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h3>로컬 스토리지(Local Storage)를 저장하는 함수 : </h3>
    <pre>
        function savetheLocal(){
            var second = document.getElementById("second");
            var thevalue = second.value;
            localStorage.setItem(1, thevalue);
            gettheLocal();
        }
    </pre>
</body>
</html>

예제 2-03

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h2>제주 이색 여행지 - 이중섭 거리</h2>
    <p><strstrong>주말</strstrong>마다 <b> '서귀포문화예술디자인시장'</b>이 열립니다.</p>
    <p><em>'아트마켓'</em>이라고도 부르는데 <i>문화예술체험</i>이나 <i>공연관람
    </i>을 할 수도 있고 <br>작가들이 직접 만든 창작예술품 등을 판매하기도 합니다</p>
</body>
</html>

예제 2-04

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h1>웹 접근성</h1>
    <p>웹의 창시자인 팀 버너스 리(Tim Berners-Lee)의 <q cite="http://www.w3.org/standards/webdesign/accessibility">
    웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다. 
    </q>라는 말로 웹 접근성을 설명한다. </p>
</body>
</html>

웹브라우저의 크기에 따라 폭이 자동적으로 조절된다.

예제 2-05

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2> <!--강조의 h2, 글자배경색 mark-->
    <p>아일랜드 출신 ...... 남아 있으며 <span style="color:blue;"">국내 근현대 건축사의 한 페이지를 보여주는
     가치를 지닌다.</span>고 전문가들은 평가합니다.</p>
</body>
</html>

기타 텍스트 관련 태그들

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <p><b><abbr title="Internet of Things">1. IoT</abbr></b>란
     각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다</p>
     <br>
     <p>2. 내가 경험한 가장 흥미진진한 일은 누군가를 만나는일이다 - 영화, <cite>'비포선셋' </cite> 중</p>
    <br>
    <pre><code> function savetheLocal(){ ...... }</code></pre>
    <br>
    <p>3. 웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.</p>
    <br>
    <p>4. 가격 : 13,000원<small>(부가세 별도)</small></p>
    <br>
    <p>5. 물의 화학식은 <b>H<sub>2</sub>0</b>다 </p>
    <br>
    <p>6. E = mc<sup>2</sup> </p>
    <br>
    <p><s>7. 34,000원</s><strong>19,000원</strong></p>
    <br>
    <p>8. 링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u 태그</u></p>
</body>
</html>

목록을 만드는 태그

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h1>관광 안내 전화</h1>
    <p>한국관광공사에서는  ......실시하고 있습니다.</p>
    <p>1330에는 ...... 이용 가능합니다.</p>
    <ul>
        <li>일반 전화 : (국번없이) 1330</li>
        <li>휴대 전화 : 064-1330</li>
    </ul>
</body>
</html>

예제2.ol.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h1>1박 2일 가족 여행 코스</h1>
    <li>1일차
        <ol type="a">
            <li>해녀박물관</li>
            <li>낚시체험</li>
        </ol>
    </li>
    <li>2일차
        <ol type="a" start="3">
            <li>용눈이오름</li>
            <li>만장굴</li>
            <li>카약체험</li>
        </ol>
    </li>
</body>
</html>

예제 02/dl.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h1>제주 올레</h1>
    <dl>
        <dt>올레 1코스</dt>
        <dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
        <dd>거리 : 14.6km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 - 온평 포구</dd>
        <dd>거리 : 14.5km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
    </ul>
</dl>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <table border="table">
        <tr>
            <th> 제목 셀</th>
            <td> 1행 2열 </td>
            <td> 1행 3열 </td>
        </tr>
        <tr>
            <th> 제목 셀 </th>
            <td> 2행 2열 </td>
            <td> 2행 3열 </td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <table border="table">
        <tr>
            <th>이름</th>
            <td></td>
            <th>연락처</th>
            <td></td>
        </tr>
        <tr>
            <th>주소</th>
            <td conspan="3"></td>
        </tr>
        <tr>
            <th>자기소개</th>
            <td colspan="3"></td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <table border="table">
        <caption>
            <strong>Modern Browser</strong>
            <p>국내에서 자주 사용하는 모던 브라우저</p>
            </caption>
            <tr>
                <th>브라우저</th>
                <th>제조업체</th>
                <th>다운로드</th>
            </tr>
            <tr> ...... </tr>
            <tr> ...... </tr>
            <tr> ...... </tr>
        </caption>
    </table>
</body>
</html>

예제02/table-6.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        table {
            margin:0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table, th, td {
            border:1px solid;
        }
        th, td {
            padding:10px;
            width: 150px;
        }
        thead, tfoot {background: #bbb;}
        caption{margin: 10px;}
    </style>
</head>
<body>
    <table>
        <caption>제주특별자치도 학교현황(2015.4.1기준)</caption>
        <thead>
            <tr>
                <th>구분</th>
                <th>학교수</th>
                <th>학급수</th>
                <th>학생수</th>
                <th>교원수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
              <tfoot>
            <tr>
                <th>합계</th>
                <td>304</td>
                <td>3,437</td>
                <td>86,954</td>
                <td>6,111</td>
            </tr>
              </tfoot>
        </tbody>
    </table>
    
</body>
</html>

예제02/colgroup.html

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        table {width: 200px; height: 40px; border:solid}
        table td {border: solid}
    </style>
</head>
<body>
    <table>
        <caption>colgroup 연습</caption>
        <colgroup>
            <col>
            <col span="2" style="background-color:blue;">
            <col style="background-color: yellow;">
        </colgroup>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

연습문제1~4

1. 텍스트들이 미리 입력되어 있는 quiz-1.html 문서를 열고 다음 조건에 맞게 태그를 추가하세요.

<!doctype html>
<html lang="ko">
	<style>
		title {font-size: 20px;}
	</style>
<head>
	<meta charset="utf-8">
	<title>서울특별시</title>
</head>
<body>
	<div style="float:left; width:150px; margin-right:25px;">
		<img src="images/symbol.gif" alt="서울특별시 휘장">
	</div>
	<div>
	<h1>서울특별시</h1>
	<b>서울의 지향 이미지 : 역사와 활력의 인간도시<br><br></b>
		<tr>
			<td><i>휘장은 한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 전체적으로는 신명나는 사람의 모습을 형상화한 것으로 인간 중심도시를 지향하는 서울을 상징합니다.</i><br></td>
			<br>
		</tr>
		<tr>
			<td>자연 - 인간 - 도시의 맥락 속에서 녹색 산은 환경사랑, 청색 한강은 역사와 활력, 가운데 해는 미래의 비전과 희망을 함축하고, 이 세가지 요소를 붓터치로 자연스럽게 연결하여 서울의 이미지와 사람의 활력을 친근하게 느낄 수 있도록 하였습니다.</td>
		</tr>
	</div>
</body>
</html>

2. 기본적인 HTML문서를 만들고 quiz-2.txt문서의 텍스트를 가져와 다음과 같이 표기하세요.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>이지스퍼블리싱 신입 사원 모집 공고</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
    <style>
        title {font-size: 30px;}
    </style>
<body>
    <h1>이지스퍼블리싱 신입 사원 모집 공고</h1>
    <table>
        <p>IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.</p>
        <ul>
            <li>모집 직군 : 편집 기획 부서</li>
            <li>직무 내용 : 도서 프로듀싱 업무 (신입 지원 가능)</li>
                <ul>
                    <li>- 도서 기획, 편집</li>
                    <li>- 도서 홍보, 독자 소통</li>
                </ul>
            <li>접수 마감일 : 2016.3.6.</li>
        </ul>
        <tfoot>
            <p>자세한 내용은 공지 게시판을 참고하세요.</p>
        </tfoot>
    </table>

</body>
</html>

3. quiz-3.html에 미리 입력된 텍스트를 두 가지 종류의 순서 있는 목록으로 표시하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>커피 드립 순서</title>
</head>
<body>
	<p>커피 드립 순서 - 아라비아 숫자</p>
	<table>
		<ol>
		<li>필터접기</li>
		<li>분쇄</li>
		<li>불림</li>
		<li>추출</li>
		</ol>
	</table>
	<p>커피 드립 순서 - 알파벳 소문자</p>
	<table>
	<ol type="a">
		<li>필터접기</li>
		<li>분쇄</li>
		<li>불림</li>
		<li>추출</li>
	</ol>
	</table>
</body>
</html>

4. quiz-4.html 문서에 그림과 같은 표를 작성하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>주요 SNS 서비스별 이용률</title>
	<style>
		table, th, td { 
			border:1px solid gray;  /* 표의 테두리 - 1px 회색 실선 */
			border-collapse:collapse;  /* 표 테두리와 셀 테두리 합치기 */
		}
		th, td {
			width:120px;  /* 셀 너비 */
			padding:5px;  /* 셀 패딩(테두리와 내용 사이의 여백) */
		}
	</style>
</head>
<body>
	<table>
		<caption>
			<strong>주요 SNS 서비스별 이용률(%)</strong>
		</caption>
		<thread>
			<tr>
				<td></td>
				<th>페이스북</th>
				<th>카카오스토리</th>
				<th>밴드</th>
				<th>인스터그램</th>
				<th>트위터</th>
			</tr>
		</thread>
		<tr>
			<th>2015년</th>
			<td>77.1</td>
			<td>58.3</td>
			<td>32.4</td>
			<td>16.7</td>
			<td>22.1</td>
		</tr>
		<tr>
			<th>2016년</th>
			<td>73.8</td>
			<td>51.0</td>
			<td>40.1</td>
			<td>28.1</td>
			<td>14.7</td>
		</tr>
	</table>
</body>
</html>

저작자표시 비영리 (새창열림)

'HTML > 텍스트 관련 태그들' 카테고리의 다른 글

텍스트 관련 태그들 (0)	2021.08.03

폼 만들기

2021. 8. 5. 18:28

폼은 사용자의 의견이나 정보를 알기 위해 폼을 사용하는 경우가 많습니다.

기본형	설명
<form [속성="속성 값"]> 여러 폼 요소 </form>	정보 저장, 검색, 수정 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 합니다. 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP, JSP같은 서버 프로그래밍을 이용합니다.
<label [속성="속성 값"]> 레이블 <input ...> </label> <label for="id이름">레이블</label> <input id="이름" [속성="속성값"]>	폼 요소에 레이블 붙임 입력 창 옆에 아이디나 비밀번호처럼 붙여놓은 레이블을 만들 때 사용한다.
<fieldset [속성="속성 값"]> ... </fieldset>	폼 요소 묶기 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리가 가능하다. 이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 <fieldset>,<legend>항목을 사용한다.

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.
	속성 값	get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있습니다. 웹에서 주로 이 방식을 사용한다.
		post - 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않습니다.
name	폼의 이름을 지정합니다. 한 문서 안에 여러 개의 <form>태그가 있을 경우, 폼들을 구분하기 위해 사용합니다.
action	<form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
autocomplete	이전에 입력했던 내용이 힌트로 표시되게 한다.<form action="register.php" autocomplete="off"> ...... </form> 같은 형태로 사용한다.

사용자 입력을 위한 <input> 태그

이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 사용자가 입력할 부분을 넣기 위해 사용한다.

기본형	설명
<input type="유형" [속성="속성 값"]>	사용자가 입력한 내용을 서버에서 받을 때 사용한다.
<input type="hidden" name="이름" value="서버로 넘길 값">	히든 필드는 화면상의 폼에는 보이지 않는 값을 입력받는다.
<input type="text" [속성="속성 값"]>	한 줄짜리 일반 텍스트를 입력하는 필드입니다.
<input type="password" [속성="속성 값"]>	사용자가 입력하는 내용을 *같은 문장으로 바꿔준다.
<input type="search" [속성="속성 값"]>	search검색상자를 만들 때 사용되는 타입입니다.
<input type="url" [속성="속성 값"]>	웹 주소도 텍스트 필드에서 분화되어 type으로 별도로 지정됩니다. 이것으로 url입력란을 만들 수 있습니다.
<input type="email" [속성="속성 값"]>	메일주소를 입력받을 수 있다.
<input type="tel" [속성="속성 값"]>	전화번호 입력란을 만들 수 있다.
<input type="text" id=[속성="속성 값"]>	자주 사용하는 값을 지정한다.

type에서 사용할 수 있는 유형 값

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 념겨지는 값을 가집니다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.
search	검색 상자를 넣습니다.
tel	전화번호 입력 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	메일 주소를 입력할 수 있는 필드를 넣습니다.
password	비밀번호를 입력할 수 있는 필드를 넣습니다.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
date	사용자가 지역을 기준으로 날짜(연, 월)를 넣습니다.
month	사용자 지역을 기준으로 날짜(연, 월)를 넣습니다.
week	사용자 지역을 기준으로 날짜(연, 주)
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할, 초)을 넣습니다.
number	숫자를 조 절할 수 있는 화살표를 넣습니다.
range	숫자를 조절할 수 있는 화살표를 넣습니다.
color	색상 표를 넣습니다.
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣습니다.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
file	파일을 첨부할 수 있는 버튼을 넣습니다.
submit	서버 전송 버튼을 넣습니다.
image	submit 버튼 댓니 사용할 이미지를 넣습니다.
reset	리셋 버튼을 넣습니다.
button	버튼을 넣습니다.

input의 텍스트 필드에서 사용할 수 있는 속성

속성	설명
name	텍스트 필드를 구별할 수 있도록 이름을 붙입니다.
size	텍스트 필드의 길이를 지정합니다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대 입력 가능한 글자 수가 10개인데 size를 5로 지정하면 텍스트 필드 크기가 5개인 크기에 맞추어져 나머지 5개 글자는 화면에 보이지 않습니다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다.
maxlength	텍스트 필드에 입력할 수 잇는 최대 문자 개수를 지정합니다.

날짜나 시간과 관련된 유형을 지정할 때 공통으로 사용하는 속성

속성	설명
min	날짜나 시간의 최솟값을 지정합니다.
max	날짜나 시간의 최댓값을 지정합니다.
step	스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지를 지정합니다.
value	화면에 표시할 초기값을 지정합니다.

<input> 태그의 다양한 속성

기본값	설명
<input type="text" id="uname" autofocus required>	오토 포커스 속성을 사용하면 페이지를 불러오자마자 폼이ㅡ 원하는 요소에 마우스 커서를표시할 수 있습니다.
<input type="text" id="uid" placeholder="하이픈없이 입력">	사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트내용을 표시하고있다가 그 필드를 클릭하면사라지도록 만들 수 있는 속성
<label class="reg" for="uid">학번</label> <input type="text" id="subj" value="오전 9:00~11:00" readonly>	입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수 있는 속성
<label class="reg" for="uname">이름</label> <intput type="text" id="uname" autofocus required>	필드에 텍스트가 없을 경우 오류 메세지를 표시하는 속성
<label class="reg" for="group">단체주문</label> <input type="number" id="group" value="10" min="10" max="100" step="10">	min 속성과 max속성은 각각 해당 필드의 최솟값과 최댓값을 지정합니다.
<label>아이디:<input type="text" id="user_id" size="10" minlength="4" maxlength="15"></label><small style="color:red;">	size 속성은 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정하고 maxlength 속성은 사용자가 최대 몇 글자까지 하는지 지정합니다.

이외에도 <input> 태그에서 사용할 수 있는 속성들은 다음과 같습니다.

속성	설명
formaction	실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있습니다.
formentype	서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정합니다. type="submit"이나 type="image"일 때 사용할 수 있습니다.
formmethod	서버로 폼을 전송하는 방식(get, post 등)을 지정합니다. 이미 <form>태그 안에서 지정한 방식이 있어도 그 방식은 무시됩니다.
formnovalidate	<form> 태그 안에 novalidate 라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있는데 <input> 태그 안에서도 formnovalidate 속성을 이용해 유효성 여부를 표시할 수 있습니다.
formtarget	폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정합니다.
height, width	type="image"일 때 이미지의 너비와 높이를 지정합니다.
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여 줍니다.
multiple	type="email"이나 type="file"일 때 두 개 이상의 값을 입력합니다. <input> 태그 안에 속성 이름만 표시하면 됩니다.

여러 데이터 나열해 보여 주기

기본형	설명
<select 속성="속성 값"> <option value="값" [속성="속성 값"]> 내용1 </option> <option value="값" [속성="속성 값"]> 내용2 </option> ... <optgroup label="다른 묶음"> <option value="속성"></option> </optgroup> </select>	<select>, <optgroup>, <option> 드롭다운 목록 만들기 <optgroup label> 라벨 그룹 나누기

<select> 태그의 속성

속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한비다. -크롬은 +1개 표시됨
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl키를 누를 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다.

<option> 태그의 속성

속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.

기타 다양한 폼 요소들

기본형	설명
<button [ type="submit \| reset \| button"]> 내용 </button>	<button> 버튼 넣기

속성 값	설명
submit	폼을 서버로 전송합니다. <button type="submit">전송하기</button>과 같이 사용합니다.
reset	폼에 입력한 모든 내용을 초기화시킵니다. <button type="reset">다시 쓰기</button>과 같이 사용합니다.
button	버튼 형태만 만들 뿐 자체 기능은 없습니다. <button type="button">주소 입력</button>과 같이 사용합니다.

기본형	설명
<output [속성="속성 값"]> 내용 </output>	<output> 입력하는 값이 계산 결과라는 것을 브라우저에서 알려 줍니다.
<progress value="값" [max="값"]></progress>	<progress> 작업 진행 상태를 나타낼 때 사용하는 태그입니다. 작업진행(value값)은 부동소수점으로 표현 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소숫점으로 표현(max), 0보다 커야함(다운로드%)
<meter value="값" [속성="속성 값"]></meter>	<meter> progress와 거의 같으나 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다. (하드디스크용량)

meter관련 태그

속성	설명
mint, max	범위의 최솟값과 최댓값을 나타냅니다. 값을 정하지 않으면 0과 1로간주
value	범위 내에서 차지하는 값을 나타냅니다.
low	대략 낮다고 할 정도의 값을 지정합니다.
high	대략 높다고 할 정도의 값을 지정합니다.
optimum	적당하다고 할 정도의 값을 지정합니다.

저작자표시 비영리 (새창열림)

'HTML > 폼 관련 태그들' 카테고리의 다른 글

폼 관련 예제 (0)	2021.08.12

이미지와 하이퍼링크

2021. 8. 5. 13:55

글이나 이미지를 클릭하면 다른 문서(page)나 사이트로 넘어가도록 링크를 거는 것을 하이퍼링크라고 한다.

이미지

웹에서 사용할 수 있는 이미지 파일 형식

파일 형식	설명
GIF(Graphic Interchange Form)	표시할 수 있는 색상 수가 최대 256가지뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. 투명한 배경을 만들 수 있고, frame기록이 가능하기 때문에 움직이는 이미지를 만들 수 있다는 장점이 있습니다.
JPG/JPEG(Joint Photographic Experts Group)	사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있습니다. 저장을 반복하다보면 화질이 떨어질 수 도 있습니다.(디지털 풍화 발생가능)
PNG(Portable Network Graphics)	투명 배경을 만들어서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용한다.

웹문서에 이미지나 설명을 넣는 태그

기본형	기능	설명
<img src="경로" [속성="값"]	이미지 삽입	웹 문서에 이미지를 삽입할때 사용하는 태그 웹 상의 링크를 복사해 이미지 경로 지정도 가능하며 alt로 이미지 속성을 설명해주는 대체 텍스트를 적을 수 있고 width, height로 이미지의 폭과 높이를 조절할 수 있다.
<figure> 요소 </figure>	설명붙일 대상 지정	설명해야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오같은 멀티미디어 파일을 비롯해 사진이나 표, 소스코드 등 웹 문서안에서 한 단위가 되는 요소를 묶을 때 사용한다.
<figcaption> 설명 글 </figcaption>	설명 글 붙이기	설명글을 붙일 수 있는 대상은 이미지, 오디오, 비디오, 텍스트 단락, 표가될 수 있으며 여러 개의 이미지나 미디어파일에 하나의 설명글을 붙일 수 있다.

링크 만들기

텍스트를 클릭해 해당 페이지로 넘어가거나 이미지에 링크를 걸 수 있으며 열려있는 브라우저내에서 새창을 띄울 수도 있다.

기본형	설명
<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a> <a href="링크할 주소" [속성="속성 값"]><img src="이미지 경로"></a>	텍스트나 이미지에 링크를 건다.
<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그> <a href="#앵커 이름"> 텍스트 또는 이미지 </a>	한 페이지 안에서 점프한다. 우선 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다름을 지정한 뒤 <a>와 herf속성을 사용해 이동한다.
<map name="맵이름"> <area> <area> ...... </map> <img src="이미지 파일" usemap="#맵 이름">	하나의 이미지에 여러 링크를 건다. map태그를 이용해서 이미지맵을 만들고 <img> 태그에서 usemap속성으로 이미지 맵을 지정합니다.

<a> 태그 안에 사용할 수 있는 주요 속성

속성	설명
href	링크한 문서나 사이트의 주소를 입력한다.
target	링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다.
download	링크한 대상을 다운로드한다.
rel	현재 문서와 링크한 문서의 관계를 알려준다.
hreflang	링크한 문서의 언어를 지정한다
type	링크한 문서의 파일 유형을 알려준다.

target의 속성 - 새탭에서 링크 열기

속성 값	설명
_blank	링크 내용이 새 창이나 새 탭에서 열립니다.
_self	target 속성의 기본 값으로 링크가 있는 화면에서 열립니다.
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다.
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시합니다.

사용할 수 있는 속성

속성	설명
alt	대체 텍스트를 지정합니다
coords	링크로 사용될 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
download	링크를 클릭했을 때 링크 문서를 다운로드합니다.
href	링크 문서(사이트) 경로를 지정합니다.
media	링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정합니다.
rel	현재 문서와 링크 문서 사이의 관계를 지정합니다.	속성 값	lternate, bookmark, help, license, next, notfollow, noreferer, prefetch, prev, search, tag
shape	링크로 사용할 영역의 형태를 지정합니다.	속성 값	default, rect, circle, poly
media	링크를 표시할 대상을 지정합니다.	속성 값	_blank, _parent, _self, _top, 프레임 이름
target	링크 문서의 미디어 유형을 지정합니다.

SVG 이미지

브라우저에서 svg파일을 지원하게 되면서 아이콘이나 로고 이미지에 SVG 이미지 파일 형식이 많이 사용되고 있습니다.

SVG 파일 형식은 같은 이미지를 작게 표시하거나 크게 표현해야 할 때 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라고 하는데, 그런 이미지를 SVG라고 합니다.

SVG이미지는 어도비(Adobe)일러스트레이터(Illustrator) 프로그램에서 벡터 이미지를 만든 후 svg파일로 저장해 만듭니다.

저작자표시 비영리 (새창열림)

'HTML > 이미지와 하이퍼링크' 카테고리의 다른 글

이미지와 하이퍼링크예제 (0)	2021.08.11

css zen garden은 CSS 기반 디자인을 통해 시각적으로 표현하기 위한 전 세계 웹 개발 자원입니다. 전 세계 그래픽 디자이너가 만든 스타일 시트는 수백가지의 HTML 파일의 시각 자료를 만드는데사용됩니다. HTML 마크업은 변하지 않으며 모든 시각 자료는 CSS를 외부파일로 참조해서 나타나는 것입니다. 2003년 5월 출시 당시에는 5가지 디자인만 있었습니다.

웹 개발자 Chris Casciano의 "Daily CSS Fun"라는 CSS 관련 디자인을 웹 표준으로 만들려는 활동인 웹 표준 프로젝트을 통해 알려졌습니다.[2] "웹 표준 프로젝트는 가장 잘 알려져 있고 가장 영감을 주는 프로젝트 중 하나"로 간주되는 [3] 이 사이트는 "웹에서 미적 표준을 높이고 웹 디자인을 다양하게"하는 데 성공했습니다. [4] 저명한 웹 표준 옹호자 Jeffrey Zeldman"수백 명의 디자이너가 Zen Garden 레이아웃을 만들어 명성을 얻었고 때로는 명성을 얻었고 전 세계 수만 명의 디자이너가 그것으로 인해 CSS를 사랑하는 법을 배웠습니다." [5]

CSS Zen Garden은 여러 언어로 번역되었으며 다른 언어로 유사한 사이트에 영감을 주었습니다.

2005년 2월, CSS 디자인의 Zen ( Peachpit Press )은 CSS Zen Garden 제작자 Dave Shea 와 웹 디자이너 Molly Holzschlag에 의해 출판되었습니다 . 이 책은 Zen Garden 사이트에 소개된 36개의 디자인을 기반으로 합니다.

사이트의 활발한 개발은 2008년 4월에 중단되었습니다. 그러나 2013년 5월 7일 사이트의 10주년을 위해 Shea는 HTML5 , CSS3 및 현재 디자인 원칙 에 초점을 맞춰 제출물을 다시 공개했습니다 . [6] 현재 Zen Garden에는 218개의 디자인이 나열되어 있습니다.

minify

CSS는 네트워크를 통해서 전송됩니다. CSS의 크기가 커지면 클라이언트와 고객에게 손해입니다. 따라서 코드를 줄일 필요성이 있는데 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구입니다. 단적으로 구글에서 minify해서 로딩시간 0.1초 줄였더니 사용량20%가 증가했다는 실험이 있었고 그 효용성을 알리게 되었습니다.

소스코드의 컴파일언어 또는 마크업 언어의 기능을 유지하면서 가독성만을 위한 문자들을 줄여서 네트워크전송을 보다 효율적으로 만듭니다. 프로그래머 문화에서 극도로 축소된 소스 코드를 목표로 하는 것은 레크리에이션 코드 골프 대회의 목적입니다.

축소의 목표는 암호화의 목표와는 다르지만 코드의 압축을 위해 암호화에 사용되는 기술이 사용되기도 합니다. 예를 들면 변수이름을 줄이거나 소스코드를 리팩토링하는 것들이 그에 포함됩니다.

W3C

W3C(영어: World Wide Web Consortium, 축약형은 영어: WWW 또는 W3)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994년 10월에 설립되었다. W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다. W3C의 설립취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 내는 것이다.

cmyk

CMYK 색 모형(Cyan Magenta Yellow Key(Black))은 감산 혼합의 색 모형이다. 마젠타, 시안, 노랑, 검정을 원색으로 한다.

예를 들면, 마젠타와 시안을 혼합하면 명도가 낮은 파랑이 된다. 이 방법으로는 하양을 제외한 모든 색을 표현할 수 있으며, 수채화, 컬러 사진 등에서 많이 사용된다. 필름을 소부(현상)해서 인쇄하는 오프셋 인쇄에 사용되기 때문에, 쿼크익스프레스, 일러스트레이터, 포토샵에서는 CMYK 모드를 지원한다. RGB나 HSB(HSV)보다 표현 가능한 색이 적다. 이를테면 보라색을 들 수 있다.

북 디자이너들은 원하는 색을 CMYK로 표현하기 위해 색들이 나열된 표(컬러차트)를 사용한다. 주로 인쇄에서 사용된다.

HTML5 Shiv

인터넷 익스플로러 9 이하에서 시맨틱 태그를 지원하도록 한다.

h264

블록 단위 움직임 보상 기반의 영상 압축 표준인 H.264 또는 MPEG-4 파트 10, Advanced Video Coding (MPEG-4 AVC)는 동영상 녹화, 압축, 배포를 위한 방식들 중 현재 가장 보편적으로 사용되고 있는 포맷이다.

https://html5test.com/

웹브라우저가 잘 돌아가나 테스트하는 사이트이다.

bps

보통 bps라고 쓰며 통신기기의 속도를 나타낼때 주로 쓰이며 소문자로 사용한다.

가변비트레이트

가변 비트레이트(variable bitrate, VBR)는 오디오나 비디오 인코딩 형식 중 하나이다. 고정 비트레이트(CBR)에 비해 단위 시간당 출력하는 데이터의 양이 계속 변한다. 또한, 비트레이트의 효율적 할당이 가능하다. 그래서 CBR에 비해 더욱 복잡한 연산을 한다.

고정 비트레이트 - 위키백과, 우리 모두의 백과사전

ko.wikipedia.org

Jquery

jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다.

Query 1.x와 2.x는 모두 최신 안정화 버전 및 그 이후 버전의 파이어폭스, 구글 크롬, 사파리, 그리고 오페라를 지원한다. 1.x 버전은 인터넷 익스플로러 6 및 그 이후 버전을 지원한다. 그러나 2.x 버전에서는 인터넷 익스플로러 6-8 버전이 지원되지 않으며 인터넷 익스플로러 9 또는 그 이후 버전을 지원한다.[6]

cubic-bezier

베지에 곡선을 쉽게 사용할 수 있게 해 주는 사이트.

transition의 타이밍펑션에 직접적으로 사용 가능

HTML Canvas Graphics

비트 맵 이미지, 비트맵을 업데이트 하는 낮은 수준의 절차적 모델이며, 2D게임 제작등에 이용됩니다.

Canvas3D (webgl)

WebGL ( 웹 그래픽 라이브러리의 줄임말 )은 플러그인을 사용하지 않고 호환되는 모든 웹 브라우저 내에서 대화형 2D 및 3D 그래픽을 렌더링 하기 위한 JavaScript API 입니다 . [2] WebGL은 다른 웹 표준 과 완전히 통합되어 웹 페이지 캔버스의 일부로 물리학 및 이미지 처리 및 효과의 GPU 가속 사용을 허용합니다. WebGL 요소는 다른 HTML 요소와 혼합될 수 있으며 페이지 또는 페이지 배경의 다른 부분과 합성 될 수 있습니다 . [삼]

WebGL 프로그램은 JavaScript로 작성된 제어 코드 와 C 또는 C++ 과 유사한 언어인 GLSL ES( OpenGL ES Shading Language )로 작성된 셰이더 코드 로 구성되며 컴퓨터의 GPU( 그래픽 처리 장치 )에서 실행됩니다. WebGL은 비영리 Khronos Group 에서 설계 및 유지 관리합니다 . [4]

WebGL - Wikipedia

From Wikipedia, the free encyclopedia Jump to navigation Jump to search JavaScript bindings for OpenGL in web browsers WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser

en.wikipedia.org

콘텐츠 신디케이션

콘텐츠 신디케이션은 콘텐츠 공급자와 수요자 사이를 연결해주는 사이버 콘텐츠 중개사업을 말한다. 신디케이터는 콘텐츠를 직접 생산하지는 않지만 우수한 콘텐츠를 수집, 가공해 인터넷 사이트 운영업체에 제공한다. 웹 2.0으로 향하는 처음의 가장 중요한 발전 중의 하나가 바로 웹사이트 콘텐츠에 대한 신디케이션이다. 신디케이션은 최종 사용자가 사이트의 자료를 다른 장소, 즉 다른 웹사이트, 브라우저 플러그인, 독립된 데스크톱 응용 등에서 이용할 수 있도록 표준화된 프로토콜을 이용한다. 신디케이션을 위한 프로토콜들은 모두 XML을 기반으로 하는데 RSS, Atom등이 있다. (사회적 네트워크의 목적으로 사용되는) FOAF나 XFN과 같은 특수한 프로토콜들은 사이트의 기능을 확장시켜 주거나, 중앙에서 관리하는 웹사이트 없이도 최종 사용자들의 상호 작용을 가능케 해 준다. 마이크로포맷 사이트에 가면 좀 더 특수한 데이터 포맷들을 볼 수 있다.

최근의 이 같은 개발 경향 때문에, 이런 프로토콜들이 공식 표준으로 지정된 것은 아니지만 사실상의 표준처럼 여겨지는 경우가 많다고 할 수 있다.

리치 인터넷 애플리케이션

리치 인터넷 애플리케이션(Rich Internet Application; RIA)은 웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 즉, 별도의 설치가 필요 없는 웹 브라우저 기반의 애플리케이션 배포 장점과 서버 측 웹 서비스와의 연동, 마크업 언어 기반의 선언적 애플리케이션 구성 등은 유지하면 서 데스크톱 애플리케이션과 대등한 사용자 경험을 주는 것을 목표로 하는 기술이다.

흔히 어도비 플래시 기반 플렉스나 마이크로소프트 실버라이트, 자바FX 등 별도의 런타임 시스템을 가진 기술을 지칭하는 용어로 사용되나 웹 브라우저에서 실행되는 애플리케이션의 사용자 인터페이스를 향상하는 기법인 Ajax, 사용자 인터페이스 관점에서 많은 발전을 가져올 HTML의 다음 버전인 HTML5 등에 기반한 애플리케이션을 지칭하기도 한다. 별도의 런타임 시스템을 가진 기술의 경우 애플리케이션은 브라우저 내에서 플러그인으로 실행되기도 하고 단독으로 실행되는 경우도 있다. 이 같이 "리치 인터넷 애플리케이션"이라는 개념은 정확한 정의가 있다기 보다는 다소 모호하고 넓은 의미로 사용되고 있다.

출처 : 위키백과

저작자표시 비영리 (새창열림)

'HTML > 용어' 카테고리의 다른 글

HTML용어 (0)	2021.08.02

PREV 1 2 3 4 NEXT

기본형	설명
.bluetext { /* .클래스 명 / color: blue; / 스타일 */ }	특정부분에만 스타일을 적용한다. 클래스 이름 앞에는 반드시 마침표(.)을 붙여야 한다.
<span class="bluetext"> 도움 </span>	<span> 텍스트 일부에만 클래스 스타일을 적용하고 싶을 때 사용
h2.accent { background-color:#222; color:#fff; padding:5px; }	선택자 적용 범위 제한 한꺼번에 둘 이상의 클래스 스타일을 적용하기 위해서는 공백으로 구분해서 두 개의 스타일을 나란히 적습니다.
#container { ... } <div id="container">	id 선택자 특정 부분에 스타일 적용하기 마침표대신#으로 적용하며 문서에 한번만 적용가능 중복사용이 불가능하기 때문에 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구 분하기 위해 사용한다.
h1, h2 { ... }	그룹 선택자 둘 이상 요소에 같은 스타일 적용하기 따옴표(,)로 구분

기본형	설명
-webkit-column-count:3;	웹키트 방식 브라우저용(사파리, 크롬 등)
-moz-column-count:3;	게코 방식 브라우저용(모질라, 파이어폭스 등)
-o-column-count:3;	오페라 브라우저
-ms-column-count:3;	마이크로소프트 인터넷 익스플로러(잘 안쓰임)

codeahn

HTML

텍스트 관련 스타일

'HTML > 텍스트 관련 스타일' 카테고리의 다른 글

CSS 기초

폼 관련 예제

'HTML > 폼 관련 태그들' 카테고리의 다른 글

이미지와 하이퍼링크예제

'HTML > 이미지와 하이퍼링크' 카테고리의 다른 글

텍스트관련태그 예제

'HTML > 텍스트 관련 태그들' 카테고리의 다른 글

폼 만들기

'HTML > 폼 관련 태그들' 카테고리의 다른 글

이미지와 하이퍼링크

'HTML > 이미지와 하이퍼링크' 카테고리의 다른 글

HTML용어2

콘텐츠 신디케이션

리치 인터넷 애플리케이션

'HTML > 용어' 카테고리의 다른 글

+ Recent posts

티스토리툴바

기본형	설명
p { text-align: center; }	p는 선택자라고 부르며 text-align은 스타일 속성 center은 속성 값이다.

기본형	설명
<link rel="stylesheet" href="외부 스타일 파일 경로">	외부 스타일 시트를 연결할 때는 <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트파일을 연결합니다.

기본형	속성
<p style="color:blue;"> 블루베리는 항산화제인 ......</p>	대상에 스타일을 직접 지정

기본형	설명
* {속성:속성 값; 속성:속성 값; ...}	스타일을 모든 요소에 적용할때 사용

기본형	설명
p { font-size: 12px; /* 글자 크기 / font-family: 돋움; / 글꼴 */ }	특정 태그가 쓰인 모든 요소에 스타일을 적용할 때 사용