글꼴 관련 스타일

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

 

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

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

HTML 기본 문서 구조

HTML에서 태그는 <와 >를 이용해서 구분한다.

 

HTML은 대문자와 소문자를 구분하지 않지만, HTML5 표준 명세에서는 태그와 태그안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다.

 

또한 HTML은 여는태그와 닫는태그가 있으며, 여는(시작)태그가 <h1>이면 </h1>으로 끝나야한다.

닫는게 필수적인 태그들은 대부분 자동완성을 지원하기 때문에 여러 코드를 짜면서 배우면 좋다.

 

비주얼 스튜디오 코드의 상단 메뉴에서 파일-새파일을 선택하면 빈문서 창이 열리는데 이걸 이용해서 저장하고 저장 단축키는 ctrl+s이다.

<!doctype html><!-- DTD : Document type declaration -->
<html lang="ko">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>내가 처음 만드는 HTML 문서</title>
    <!-- <meta name='viewport' content='width=device-width, initial-scale=1'> -->
</head>
<body>
    <h1>시간이란...</h1>
    <p>내일 죽을 것처럼 오늘을 살고<br>영원히 살 것처럼
        &lt; 내일을 꿈꾸어라</p>

        <!-- &lt;는 왼쪽꺽쇠 &gt;는 오른쪽꺽쇠 -->
    <img src="images/first.jpg" alt="민들레 홀씨">
</body>
</html>

코드를 짜고 alt+b를 누르면 아래와 같은 화면이 뜬다 이미지는 따로 넣은 것이다.

코드를 보면 맨 위에<!doctype>이 있는데 이것은 문서 유형을 지정하는 선언문이다.

<html lang="ko">는 웹 문서 시작을 알리는 태그이다.

코드 de en fr ja ko zh
언어 독일어 영어 프랑스어 일본어 한국어 중국어

ko위치에 이런 코드를 넣으면 해당 언어표기가 되는 것이다. 물론, 저 표시된 국가의 언어만 사용할 수 있는것은 아니나, 검색범위를 저 언어로 좁혀서 검색할때 좀 더 잘나온다.

문서의 대강의 틀을 결정하는 <head>태그안의 가장 중요한 태그중의 하나는 <title>이다.

<title> 문서제목 </title>로 쓰인다.

 

<meta> 태그 - 문자 세트를 비롯한 문서 정보

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

HTML교재는 HTML5+CSS3 웹표준의 정석 개정2판으로 하였다.

 

웹 브라우저의 종류는 크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라등이 있다.

또한 자신이 사용하고 있는 웹 브라우저가 HTML5를 얼마나 지원하는지 알고 싶다면 웹브라우저에서 http://HTML5test.com/에 에 접속해 보면 555점 만점에 몇접이 뜨는지 알 수 있다.

 

 

 

웹편집기의 종류

편집기 종류 특징
텍스트 편집기 메모장
웹 편집기 노트패드++, 에디트 플러스, 텍스트 메이트, 코다, 드림위버, 비주얼 스튜디오 코드
통합개발환경(IDE) 비주얼 스튜디오, 웹스톰, 서브라임텍스트
웹 기반 코드 편집기 Codepen, JSFddle, LiveWeave, Plunker

이 중에서 비주얼 스튜디오 코드를 이용해서 공부할 것이다.

비주얼 스튜디오 코드의 장점은 대부분의 주요 플랫폼에서 모두 사용할 수 있으며, 태그와 CSS속성의 설명이 잘 되있고 확장이쉽다. 

https://visualstudio.microsoft.com/ko/downloads/

 

Windows 및 Mac용 Visual Studio 2019 다운로드

Visual Studio Community, Professional 및 Enterprise를 다운로드하세요. 지금 Visual Studio IDE, 코드 또는 Mac을 무료로 사용해 하세요.

visualstudio.microsoft.com

여기서 다운받으면 된다.

그리고 비주얼 스튜디오 코드 왼쪽 메뉴의 아이콘 중 확장 아이콘

를 찾아서 누르거나 ctrl+shift+x를 누른 후 

마켓플레이스에서 open int browser을 찾아서 다운받아주면 된다.

 

이것을 받으면 Alt+B로 브라우저에서 어떻게 보일지 미리 확인할 수 있다.

또한 기본적으로 브라우저는 F12를 통해 콘솔화면을 불러올 수 있다.

이걸 배우면게 되면 접속하는 기기에 따라 자동으로 레이아웃이 바뀌는 사이트를 만들 수 있다.

이것을 반응형 웹 디자인이라고 한다.

 

여기까지 했으면 기본적인 준비는 끝났다.

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

+ Recent posts

티스토리툴바