① 블록 레벨 요소
- 블록 레벨 요소는 자신을 감싸는 상위의 요소가 허용한 가로 폭 전체 영역을 차지한다.
- 블록 레벨 요소는 너비나 높이를 지정할 수 있고, 줄 바꿈 속성을 가지고 있다.
<div> <p> <h1~6> - 한 줄 잡히는 것
② 인라인 레벨 요소
- 인라인 레벨 요소는 흘러가는 요소이다.
- 인라인 레벨 요소는 너비나 높이를 지정할 수 없으며, 줄이 바뀌지 않는 형식(inline)으로 표현된다.
- 줄이 바뀌지 않지만, 내용이 많아서 그 상위 블록요소의 영역을 가득 채우게 되면 줄이 바뀐다.
<span> - 내가 쓴 글자만큼 잡히는 것
exam14-inline_block.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style="background: orange;">block-level elements</h1> <!-- 글자 크기 굵게, 줄바꿈 -->
<div style="background: orange;">block-level elements</div>
<p style="background: orange;">block-level elements</p>
<em style="background: orange;">inline-level elements</em>
<span style="background: orange;">inline-level elements</span>
<span style="background: yellow;">inline-level elements,
inline-level elements,inline-level elements,inline-level elements,
inline-level elements,inline-level elements,inline-level elements,
inline-level elements</span>
</body>
</html>
잡동사니 태그들
<mark> 태그
- 구문을 하이라이팅한다.
* <abbr>
- 약어 또는 두문자어를 나타내는데, 'title' 속성으로 약어의 원형을 나타낸다.
* <dfn>
- 단어의 정의를 나타낸다.
- 'title' 속성으로 정의를 표현하는데, <abbr> 태그와 같이 사용할 수도 있다.
* <cite>
- 본문에서 책, 노래, 게임, 그림, 영화, 연극, 전시회 등의 작품 제목을 표현한다.
* <small>
- 일반적으로 면책 조항, 주의 사항, 법적 제한, 저작권 등을 나타낸다.
* <ruby>
- 기본 텍스트 주변에 짧은 텍스트를 배치하고 싶을 때 사용한다.
- 주로 일본어나 한자에 발음이나 주석을 얹는 방법으로 많이 쓰인다.
- <ruby>태그로 감싼 후, <rt>태그로 루비 주석을 표현한다.
exam15.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>옵티컬아트는 굳이 번역한다면 <strong>광학적 미술</strong>이라고 할 수 있는데,
<mark>광학적</mark>이란 망막에 접수된 자극이 시신경에 의해 지각되어진다는 것을 의미한다.</p>
<hr>
</body>
</html>
<p><abbr title="HyperText Markup Language">HTML</abbr>은 제목, 단락, 목록 등과 같은
본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.</p>
<hr>
<p>창이 작고 벽이 넓은 로마네스크 교회의 실내는 거의 모두
<dfn title="소석회에 모래를 섞은 모르타르를 벽면에 바르고 수분이 있는 동안 채색하여 완성하는 회화">
프레스코화</dfn>로 장식되었다.</p>
<p><dfn><abbr title="HyperText Markup Language">html</abbr></dfn>은
웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다.
<hr>
<p>고갱은 1988년 브르타뉴의 풍타벙에서 <cite>천사와 싸우는 야콥</cite>을 그리고 나서 반 고흐에게 편지를 썼는데...</p>
<hr>
<p>이 기사는 <small>© ☎ 홍길동 기자</small>가 작성하였습니다.</p>
<hr>
<h1><ruby>舊<rt>구</rt>石<rt>석</rt>器<rt>기</rt></ruby>시대</h1>
잡동사니 태그들2
* <blockquote>
- 다른 사람의 말이나 글, 혹은 다른 소스를 인용하는 경우에 사용한다.
- 블록 요소이다.
- 들여쓰기 형태로 출력된다.
- cite 속성 : 해당 컨텐츠의 출처를 나타낸다.
- title 속성 : 내용을 요약해 입력
* <q>
- 다른 사람의 말이나 글, 혹은 다른 소스를 인용하는 경우에 사용한다.
- 인라인 요소이다.
- 인라인 형태의 짧은 인용문을 작성할 때 사용하기 때문에 title 속성은 필요하지 않다.
- “ ”로 묶는다.
exam16.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>다음은 '웹 접근성 연구소'에서 정리한 웹 접근성 정의 내용입니다.</h1>
<blockquote cite="http://www.wah.or.kr/Accessibility/define.asp"
title="'웹 접근성 연구소'에서 정리한 웹 접근성 정의 내용입니다.">
<p>
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는
웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.
이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도
불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</p>
<p>
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는
웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.
이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도
불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</p>
</blockquote>
<hr/>
<p>
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란<br/>
<q cite="http://www.wah.or.kr/Accessibility/define.asp">
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.
이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도
불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</q>
</p>
</body>
</html>
* <pre>
- img, big, small, sub, sup, ins, del, label, input, select, textarea, button, noscript 태그 등의
텍스트를 장식하기 위한 요소로 사용하면 안된다.
- 폼과 스크립트 관련 요소도 포함할 수 없다.
- 일반적으로 코드의 예제를 보여주기 위한 방안으로 활용된다.
- 내용을 있는 그대로 보여줄 때 사용한다.
* <code>
- 코드임을 알리는 용도이다.
exam17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
<code>
<script src="js/jquery.js"></script>
<script>
$(".selector".click(function(){
$(".box").hide();
});
</script>
</code>
</pre>
</body>
</html>
< 는 Less Than (<, 보다 작은) , > 는 Greater Than (>, 보다 큰) 의 약자라고 한다.
- DL(Definition List)의 약자.
정의 목록 : 어떤 용어를 정의하여 풀어 나열한다.
- DT(Definition Term)
정의 : <dd>는 <dt>가 적용된 곳에서 한 탭 들여쓰기 적용된다.
- DD(Definition Description)과 함께 쓴다.
정의에 대한 해설, <br>태그 속성이 포함된다.
[형식]
<dl>
<dt></dt>
<dd></dd>
</dl>
exam18.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>도시 소개</h3>
<hr>
<dl>
<dt>California</dt>
<dd>맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주</dd>
<dt>Florida</dt>
<dd>미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주</dd>
<dt>Texas</dt>
<dd>드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주</dd>
</dl>
</body>
</html>
DIV
<설명>
- 전체를 wrap으로 묶은 것은 디자인에 도움이 되려고 하는 것이지, 필수는 아니다.
- 각각의 태그에 id, class 속성으로 이름을 만들었는데, id의 값은 중복되면 안되며, 링크의 목적지가 된다.
- class의 값은 중복되어도 되고, 주로 반복적으로 디자인이 적용되는 부분에 쓰인다.
- 실제 사용은 링크와 스타일 시트, 자바스크립트에서 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="wrap" style="border: 2px solid red">
<div id="header" style="border: 1px solid black">
<h1>LOGO</h1>
<h2>MAIN MENU</h2>
</div>
<div id="container" style="border: 1px solid green; margin: 5px;">
<div class="visual" style="float: left; width: 23%; height: 200px; border: 1px solid cyan">
<h3>Test</h3>
</div>
<div class="nav" style="float: left; width: 50%; height: 200px; border: 1px solid gray">
<h3>ABOUT</h3>
</div>
<div class="contents" style="float: left; width: 23%; height: 200px; border: 1px solid cyan">
<h3>Company info</h3>
</div>
</div>
<div id="footer" style="clear:both; border: 1px solid blue;">
<h4>Copyright</h4>
</div>
</div><!-- wrap -->
</body>
</html>
시멘틱 태그
exam01.html
css초기화 안 하면 여유 공간들을 알아서 잡고있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.header {
width: 100%;
height: 15%;
background: yellow;
}
.nav{
width: 15%;
height: 70%;
float: left;
background: orange;
}
.section{
width: 70%;
height: 70%;
float: left;
background: olivedrab;
}
.aside{
width: 15%;
height: 70%;
float: left;
background: orange;
}
.footer{
width: 100%;
height: 15%;
clear: both; /*diaplay: flex; 이것도 된다.*/
background: plum;
}
</style>
</head>
<body>
<header class="header">header</header>
<nav class="nav">nav</nav>
<section class="section">section</section>
<aside class="aside">aside</aside>
<footer class="footer">footer</footer>
</body>
</html>
exam02.html
figure
- 사진, 도표, 샵화,...등을 담는 컨테이너 역활을 하는 태그
figcaption
- 설명하는 문구
- figure 요소에 1번만 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<h1>전체 문서에 대한 헤더(header)</h1>
</header>
<hr/>
<nav>
<a href="https://www.naver.com">네이버</a>
<a href="https://store.kakaofriends.com/home">카카오 프렌즈</a>
<a href="https://www.google.com">구글</a>
</nav>
<hr/>
<section>
<header>
<h2>섹션 부분에 대한 헤더(header)</h2>
<p>헤더 부분에 들어간 단락</p>
</header>
<p>It's a mountain rabbit. Where are you going? Where are you going by hopping?</p>
</section>
<hr/>
<h1>figure 요소와 figcaption 요소</h1>
<figure>
<img src="../image/1.jpg" alt="단체사진" width="350" height="270">
<figcaption>[ 그림 1. 카카오 프렌즈 단체사진 ]</figcaption>
</figure>
<hr/>
<footer>
<p>전체 문서에 대한 푸터(footer)</p>
<p>Copyright all tights reserved.</p>
<p>☎ 연락처 : 02-1234-5678</p>
</footer>
</body>
</html>
exam03.html
for 속성
을 사용하여 해당 결과에 영향을 줄 수 있는 HTML 문서 내의 요소를 명시할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form oninput="total.value = parseInt(x.value) + parseInt(y.value)" action="">
<input type="number" id="x" name="num01" value="20">
+
( 1
<input type="range" id="y" name="num02" value="50" min="1" max="100">
100 )
=
<output name="total" for="x y"></output><br><br>
<input type="submit" value="전송">
</form>
</body>
</html>
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>date 타입을 이용한 날짜 선택</h1>
<form action="">
태어난 날짜와 시간을 선택하시오<br><br>
<input type="date" name="birthday"><br>
<input type="time" name="birhtime">
<input type="submit" value="전송">
</form>
</body>
</html>
pattern 속성
은 input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.
대괄호 앞에 ^가 붙으면 시작을 뜻하고 대괄호 안에 ^가 붙으면 제외를 뜻한다.
^[a-z]로 되어 있으니 시작을 영문 a-z로 하는 것을 뜻한다
[]+[] : + 연산자로 연결을 한다.
[ +] : 1회 또는 그이상 횟수로 매치
[ ]* : 0회 또는 그이상 횟수로 매치
{5,19}는 5~19자리를 뜻한다.
위의 예제에서 사용된 정규 표현식의 의미는 다음과 같다.
1. [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
2. [@] : '@' 문자만이 나와야 함.
3. [.] : '.' 문자만이 나와야 함.
4. [.]* : '.' 문자가 나와도 되고 나오지 않아도 됨.
5. [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>patter 속성을 이용한 입력 형식 제한</h1>
<form action="#">
여러분의 이메일 주소를 입력해 주세요 :<br><br>
<input type="email" name="email"
pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
<input type="submit" value="전송">
</form>
</body>
</html>
exam06.html
required 속성
- 반드시 입력되어야 할 필수 input 요소를 명시한다.
placeholder 속성
- input 요소에 입력되어야 할 값에 대한 힌트를 제공한다.
- 이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다.
- placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>required 속성을 이용한 필수 입력 설정</h1>
<form action="">
이름 : <input type="text" name="name" placeholder="이름 입력" required> (이름은 반드시 입력해야 해요!)<br>
이름 : <input type="number" name="age" min="1" max="120" placeholder="나이 입력" required><br><br>
<input type="submit" value="전송">
</form>
</body>
</html>
[ Video ]
HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다.
하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공한다.
control 속성
- 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
- height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다.
<video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 표시된다.
autoplay 속성
- 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생할지 않을지를 설정한다.
loop 속성
- 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생한다.
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>video 요소를 이용한 동영상 삽입</h1>
<video style="width: 576; height: 360" controls autoplay muted loop>
<!-- muted를 써야 autoplay 속성이 된다. -> 크롬의 저작권 때문에 -->
<source src="../video/BigBuck.mp4" type="video/mp4">
video 요소를 지원하지 않아요..ㅠㅠ
</video>
</body>
</html>
[ Audio ]
HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다.
하지만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다.
control 속성
- 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
<audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시된다.
autoplay 속성
- 웹 페이지가 로드(load) 될 때 음악을 자동으로 재생할지 않을지를 설정한다.
loop 속성
- 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>audio 요소를 이용한 소리 삽입</h1>
<audio controls>
<source src="../audio/Maps.mp3" type="audio/mp3">
audio 요소를 지원하지 않아요..ㅠㅠ
</audio>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 29 - CSS - 박스 / 테두리 / Position / float / inline / inline-block (2024.08.12) (0) | 2024.08.12 |
|---|---|
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
| DAY 28 - HTML 연습 (2024.08.09) (0) | 2024.08.09 |
| DAY 26 - HTML (2024.08.07) - checkbox / radio / select / datalist / file / form / result / table / a태그 (0) | 2024.08.07 |
| DAY 25 - HTML (2024.08.06) - Tomcat 설치 / font / img / ul / form (1) | 2024.08.06 |
