글꼴 관련 스타일

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

 

기본형 설명
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 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.

l

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

스타일과 스타일 시트

웹문서의 스타일(style)은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것을 말하며 한 문서에 반복적으로 쓰이는 스타일을 모아 놓은 것을 '스타일 시트'라고 부릅니다.

 

스타일을 사용하는 이유는 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 가리킵니다.

텍스트 단락에서 줄 간격을 조절하고 표의 테두리를 점선으로 바꾸는 것도 스타일로 정의가 가능합니다.

내용 변경없이 일괄적으로 스타일 변경이 가능해져서 유지보수가 쉬워집니다.

 

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

 

 

스타일과 스타일시트

웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많습니다. 이러한 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트'라고 합니다.

 

내부 스타일시트

웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.

모든 스타일 정보는 <head> 스타일 정보 </head> 식으로 정의해야 하고 <style> 스타일 정보 </style>식으로 작성합니다.

 

외부 스타일시트

디자인의 일관성을 위해 같은 스타일을 여러 웹 문서에 적용할 때 사용하는 방법입니다. 다운로드 시간을 줄여주며. css라는 확장자명을 사용합니다.

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

 

인라인 스타일(가급적 사용을 피해야 할 스타일)

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.

스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용해 style="속성:속성 값;"형태로 스타일을 바꿀 수 있습니다.

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

 

 

 

주요 선택자

스타일 속성을 적용하는 요소를 '선택자(selector)'라고 부릅니다. 태그 하나 혹은 여러 개를 묶어서 별도의 선택자로 지정할 수 있습니다.

 

 

전체 선택자

모든 요소에 스타일 적용하기

전체 선택자로는 *를 사용하며 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용합니다.

예를 들어 웹 문서를 브라우저에 표시할 때 브라우저 창에 바짝 붙지 않도록 문서 내용 바깥쪽에는 '마진'을 두고 문서 내용 안쪽에는 '패딩'이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않을 경우, 전체 선택자를 이용해 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있습니다.

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

 

 

태그 선택자

특정 태그를 사용한 요소에 스타일 적용하기

전체 선택자 다음으로 많은 요소에 스타일을 적용하는 태그 선택자(tag selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다.

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

 

 

 

클래스 선택자

특정 부분에 스타일 적용하기

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

 

 

 

캐스 케이싱 스타일 시트(CSS)

적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻합니다.

브라우저에서 기본적으로 정해 놓은 스타일을 따를 수 있고 웹 제작자가 정해 놓은 스타일을 따를 수 있는데, 우선순위에 따라 달라집니다.

1. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 
    그 우선순위에 따라 위에서 아래로 스타일이 적용됩니다
2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.

 

스타일의 우선순위는 세 가지 개념에 따라 지정됩니다.

1. 얼마나 중요한가(Importance)

스타일이 어디서 선언되었는가에 따라 달라집니다.

사용자 스타일 시트의 중요(! important) 스타일 > 제작자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 일반 스타일 > 기본적인 브라우저 스타일 시트

 

2. 적용 범위가 어디까지 인가?(Specificity)

스타일 적용 범위가 좁을수록 우선순위가 높아집니다.

인라인스타일 > id 스타일 > 클래스 스타일 > 태그 스타일

 

3.소스에서의 순서(Source Order)

중요도와 적용범위가 같다면, 나중에 온 스타일이 먼저온 스타일을 덮어씁니다.

 

 

스타일 상속

웹 문서에서 사용하는 여러 태그들은 서로 포함관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 합니다.

 

 

 

CSS3와 CSS 모듈

CSS3란? CSS3는 이전 CSS1, CSS2보다 정교하고 화려한 화면을 구성할 수 있게 되었습니다. CSS3부터는 배경이나 글꼴 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었는데 이것을 'CSS 모듈'이라고 합니다.

 모듈별로 진행 속도도 다르고 필요에 따라 새로운 모듈이 생기기 때문에 CSS3는 한번에 표준 규약이 결정되지 않습니다. 다시 말해 CSS3는 'CSS3 표준'이라고 하나로 묶어 말할 수 없고 계속 새로운 CSS모듈이 등장합니다.

https://www.w3.org/Style/CSS/ 사이트에 접속하면 관련 규약을 확인할 수 있습니다.

 

CSS3와 브라우저 접두사(prefix)

CSS3는 CSS 모듈들이 많고 표준 규약이 완성되지 않은 부분도 많지만 모던 브라우저에서 지원하기 위해 계속 개발되고 있습니다.

또한 표준 규약이 만들어졌더라도 이전 버전의 모던 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 합니다.

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

 

퀴즈 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

연습문제 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

 

    <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

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

기본형 설명
<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

글이나 이미지를 클릭하면 다른 문서(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 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

+ Recent posts