점수 : 69점
--------------------------------------------------------------------------------------------------------------
1. [교재 2장]에서 다룬 HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소를 모두 찾아서 다음 조건이 만족되도록 정리하시오.(25점)
|
① 각 요소는 1번부터 번호를 매겨 정리한다. ② 각 요소에 대해서 정리할 내용으로 요소의 기능, 주요 속성, 그리고 간단한 활용 예시는 반드시 포함해야 한다. ☞ 속성이 없는 경우에는 속성 설명은 생략된다. ☞ 활용 예시에는 해당 요소와 주요 속성들의 사용 방법을 간단한 설명하는 정도의 예시를 포함한다. (예를 들어 <a> 태그의 href 속성의 경우: <a href=“http://www.knou.ac.kr”>방송대</a>) ☞ 요소의 속성 설명에는 기본적으로 전역 속성은 포함하지 않는다. |
2. [교재 5장]에서 다룬 CSS 속성 중에서 다음 부류에 속하는 속성(함수)들을 모두 찾아서 다음 조건이 만족되도록 정리하시오.(45점)
|
속성(함수)의 부류 |
배경, 그라데이션, 변형, 전환, 애니메이션(키 프레임 포함), 다단, 카운터 |
|
① 각 속성(함수)에 대해서 정리할 내용으로 속성(함수)의 기능, 속성값(인자), 사용 방법은 반드시 포함해야 한다. ② 정리할 각 속성(함수)은 부류별로 구분하고, 각 부류별로 1번부터 번호를 매겨서 정리한다. |
--------------------------------------------------------------------------------------------------------------
[과제 1]
(1) 레이아웃을 위한 시멘틱 요소
|
No |
요소 |
설명 및 활용예시 |
|
1 |
header |
머리말을 나타내는 요소로 사이트의 이름, 로고 등 |
|
<header>방송대 HTML5 과제</header> |
||
|
2 |
footer |
꼬리말을 나타내는 요소로, 제작자 정보나 저작권 정보 |
|
<footer>copyright by 황상규</footer > |
||
|
3 |
nav |
내비게이션 영역으로, 상단의 메뉴를 표시 |
|
<nav>결재함 메뉴</nav> |
||
|
4 |
section |
제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소 |
|
<h1>정치사회</h1> |
||
|
5 |
article |
개별 콘텐츠를 나타내는 요소로 section에 포함되는 각 내용 |
|
<article>…OLED를 물감처럼 실에 코딩…</article> |
||
|
6 |
aside |
좌우측의 사이드 영역을 나타내는 요소 |
|
<aside>Quick 메뉴</aside > |
||
|
7 |
hgroup |
제목과 부제목을 묶어서 나타내는 요소 |
|
<hgroup><h1>정치사회</h1><h3>국내정치</h3></hgroup> |
(2) 시멘틱 인라인 요소
|
No |
요소 |
설명 및 활용예시 |
|
8 |
mark |
시각적, 의미적으로 특정 문구나 단어를 강조할 때 사용 |
|
<p>저의 이름은 <mark>황상규</mark>입니다.</p> |
||
|
9 |
time |
시간이나 날짜 표현에 의미를 부여할 때 사용 |
|
오늘은<time datetime="2020-10-31">10월 31일</time>입니다. |
||
|
10 |
meter |
일정 범위 안의 측정값이나 분표 비율 등을 나타낼 때 사용 |
|
max(최대값), min(최소값), optimum(최적값) |
||
|
CPU<meter min="0" max="1000" value="75">75%</meter> |
||
|
11 |
progress |
작업의 진행 상태 표시. 자바스크립트와의 연동이 필수 |
|
Max(필요한 총 작업량) |
||
|
진행률 : <progress max=100 value="37">37%</progress> |
||
|
12 |
ruby |
하나 이상의 구문 콘텐츠에 루비 주석을 표시할 때 사용 |
|
<ruby> D.T<rp>(<rt>Donald Trump<rp>)</ruby> |
||
|
13 |
rt |
루비 텍스트를 표시 |
|
<ruby>漢<rt>かん</rt></ruby> |
||
|
14 |
rp |
루비 주석을 지원하지 않는 웹브라우저를 위해 사용 |
|
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp></ruby> |
||
|
15 |
wbr |
텍스트에서 줄바꿈을 허용할 위치를 지정할 때 사용 |
|
조선인민<wbr>민주<wbr>공화국 |
(3) 시멘틱 블록 요소
|
No |
요소 |
설명 및 활용예시 |
|
16 |
main |
Body 영역의 주요 콘텐츠 블록을 지정할 때 사용 |
|
hidden(main 요소의 콘텐츠를 보이지 않게 하는 속성) |
||
|
<main hidden> <h1> 본문 내용 두번째 </h1> … </main> |
||
|
17 |
figure |
그림, 다이어그램, 사진, 소스 코드, 동영상 등을 블록화 |
|
<figure> <img src="obama.jpg”></figure> |
||
|
18 |
figcaption |
figcation 요소에 대한 캡션을 표시 |
|
<figcaption> 오바마 대통령</figcaption> |
||
|
19 |
details |
세부정보를 보여 주거나 숨기는 형태의 상호작용 |
|
<details><li>달러:1,115.90</li><li>유로:1,20.08</li></details> |
||
|
20 |
summary |
details요소에 대한 캡션을 지정 |
|
<details><summary>환율</summary></details> |
(4) 기타
|
No |
요소 |
설명 및 활용예시 |
|
21 |
audio |
플러그인의 도움 없이 음악을 재생 |
|
preload(버퍼링 양을 힌트),loo(반복여부), controls(컨트롤 표시) |
||
|
<audio src="노래.mp3" controls="controls" loop="loop"></audio> |
||
|
22 |
bdi |
양방향 텍스트 형식화를 위해 주변과 분리 될 텍스트 범위 |
|
<li><bdi>황상규</bdi> 10</li><li><bdi>최보람</bdi>100</li> |
||
|
23 |
canvas |
스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용 |
|
height(높이), width(너비) |
||
|
<canvas id="divCanvas" style="border: 4px solid white"></canvas> |
||
|
24 |
datalist |
다른 컨트롤에 대해 미리 정의 된 옵션을 나타내는 옵션 요소 집합 |
|
<datalist id=”animals”><option value="cat"><option value="dog"> |
||
|
25 |
dialog |
대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의 |
|
open(<dialog> 요소가 활성화) |
||
|
<dialog open><h2>저금통</h2></dialog> |
||
|
26 |
embed |
외부 응용프로그램이나 플러그인을 삽입 |
|
type(포함 된 리소스 유형) |
||
|
<embed type=”video/quicktime” src=”나훈아.mp4” /> |
||
|
27 |
menuitem |
사용자가 팝업 메뉴를 통해 호출 할 수 있는 명령 |
|
checked(명령이 선택되었는지 여부), radiogroup(선택시 라디오 버튼으로 전환 할 명령 그룹의 이름) |
||
|
<menuitem type="checkbox" checked>체크박스</menuitem> |
||
|
28 |
output |
스크립트에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과 |
|
for(계산 결과와 계산에 사용되는 요소 사이의 관계) |
||
|
<output name="result" for="cnt buildHeight"></output> |
||
|
29 |
picture |
다중 이미지 리소스(multiple image resources)를 위한 컨테이너 정의 |
|
<picture><source srcset="images/large.jpg" media="(min-width: 1200px></picture> |
||
|
30 |
source |
다중 미디어 자원(multiple media resources)을 정의 |
|
srcset(각각 다른 환경에서 사용될 이미지의 URL) media(매체의 미디어 쿼리) |
||
|
<source srcset="images/large.jpg" media="(min-width: 1200px)"> |
||
|
31 |
track |
미디어 요소를 위한 텍스트 트랙(text track)을 정의 |
|
Kind(텍스트 트랙의 종류), srclang (텍스트 트랙 데이터의 언어) |
||
|
<track src="sub_kr.vtt" kind="subtitles" srclang="ko" label="한국어"> |
||
|
32 |
video |
movie clip이나 video stream과 같은 비디오를 정의 |
|
controls (비디오의 실행을 제어할 수 있는 제어기가 표시) poster(비디오를 다운로드하는 동안이나 사용자가 재생 버튼을 누를 때까지 표시할 이미지) |
||
|
<video height="180" width="288" controls> <source src="/media/video.mp4" type="video/mp4"> </video> |
[과제 2]
(1) 배경(5.8)
|
No |
속성 |
내용 |
|
1 |
background-color |
요소의 배경색
|
|
2 |
background-image |
요소의 배경으로 이미지 - 값 : none, url(…)
|
|
3 |
background-repeat |
배경 이미지의 반복 여부 - 값 : repeat, repeat-x, repeat-y, no-repeat, space, round
|
|
4 |
background-attachment |
배경 이미지를 콘텐츠 영역과 함께 스크롤 여부 - 값 : scroll, fixed
|
|
5 |
background-position |
배경 이미지의 시작 위치 - 값 : x위치(0%), y위치(0%)
|
|
6 |
background-origin |
배경 이미지가 시작되는 기준 위치 - 값 : padding-box, border-box, content-box
|
|
7 |
background-clip |
배경 색상이나 이미지가 적용되는 영역 - 값 : border-box, padding-box, content-box
|
|
8 |
background-size |
배경 이미지의 크기를 지정 - 값 : auto, 폭 높이, 폭% 높이%, cover, contain
|
|
9 |
background |
background-* 속성들의 일괄 지정 - 형식 : -color –image –position / -size –repeat – origin – clip –attachmet
|
(2) 그라데이션(5.11)
l 선형 그라데이션의 진행 방향별 지정 방법
|
No |
진행방향 |
사용 방법(예시) |
|
1 |
위에서 아래로 |
linear-gradient(red, yellow); linear-gradient(to bottom, red, yellow); linear-gradient(180deg, red, yellow); |
|
2 |
왼쪽에서 오른쪽으로 |
linear-gradient(to right, green, yellow); linear-gradient(90deg, green, yellow); |
|
3 |
좌측상단에서 우측하단으로 |
linear-gradient(to bottom right, green, yellow); linear-gradient(135deg, green, yellow); |
|
4 |
우측상단에서 좌측하단으로 |
linear-gradient(to bottom left, red, yellow); linear-gradient(225deg, red, yellow); |
l 선형 그라데이션의 색상 변화를 지정하는 방법
|
No |
색상갯수 |
변화 형태 |
사용 방법(예시) |
|
1 |
두가지 색상 |
균일한 변화 |
linear-gradient(to right, blue, green); |
|
불균일한 변화 |
linear-gradient(to right, blue 10%, green 70%); |
||
|
2 |
세가지 이상의 색상 |
균일한 변화 |
linear-gradient(to right, blue, orange, green, red); |
|
불균일한 변화 |
linear-gradient(to right, blue 30%, orange 50%, green 70% , red 90%); |
l 방사형 그라데이션의 shape 인자에 따른 지정 방법
|
No |
Shape |
변화 형태 |
사용 방법(예시) |
|
1 |
ellipse |
균일한 변화 |
radial-gradient(red, blue, green); |
|
불균일한 변화 |
radial-gradient(red 10%, blue 30%, green 60%); |
||
|
2 |
circle |
균일한 변화 |
radial-gradient(circle, red, blue, green); |
|
불균일한 변화 |
radial-gradient(circle, red 10%, blue 30%, green 60%); |
l 방사형 그라데이션의 size 인자의 종류와 사용방법
|
No |
size 인자 |
사용 방법(예시) |
|
1 |
closest-side |
중심 위치에서 가장 가까운 박스의 측면과 정확히 일치하도록 그라데이션 모양의 크기를 결정 radial-gradient(closest-side at 40% 45%, red, green, blue); |
|
2 |
farthest-side |
중심 위치에서 가장 먼 박스의 측면과 정확히 일치하도록 그라데이션 모양의 크기를 결정 radial-gradient(farthest-side at 40% 45%, red, green, blue); |
|
3 |
closest-corner |
중심 위치에서 가장 가까운 박스의 모서리와 정확히 일치하도록 그라데이션 모양의 크기를 결정 radial-gradient(closest-corner at 40% 45%, red, green, blue); |
|
4 |
farthest-corner |
중심 위치에서 가장 먼 박스의 모서리와 정확히 일치하도록 그라데이션 모양의 크기를 결정 radial-gradient(farthest-corner at 40% 45%, red, green, blue); |
(3) 변형(5.12)
l 변형관련 속성
|
No |
속성 |
설명 |
|
1 |
transform |
요소에 대해 2D/3D 변형을 적용하기 위한 속성 - 값 : none, [변환함수]+
|
|
2 |
transform-orgin |
요소의 변형 기준점을 지정 - 값 : X축 Y축 Z축
|
|
3 |
transform-style |
변형이 적용된 좌표를 하위 요소로 전달방식 - 값 : flat, preserve-3d
|
|
4 |
perspective |
해당 요소와 관측점과의 거리를 조절해서 원근감 지정 - 값 : none, 길이
|
|
5 |
perspective-origin |
원근감의 방향을 지정(perspective 속성과 함께 사용) - 값 : X축 Y축
|
|
6 |
backface-visibility |
요소 뒷면의 표시 여부를 지정 - 값 : visible, hidden
|
l Transform 속성
|
No |
함수 |
설명 |
|
1 |
translate3d(x,y,z) |
요소 박스를 X축, Y축, Z축으로 지정한 값만큼 이동 |
|
2 |
translate(x,y) |
요소 박스를 X축, Y축으로 지정한 값만큼 이동 |
|
3 |
translateX(x) |
요소 박스를 X축으로 지정한 값만큼 이동 |
|
4 |
translateY(y) |
요소 박스를 Y축으로 지정한 값만큼 이동 |
|
5 |
translateZ(z) |
요소 박스를 Z축으로 지정한 값만큼 이동 |
|
6 |
scale3d(x,y,z) |
X축, Y축, Z축으로 지정한 값만큼 확대/축소 |
|
7 |
scale(x,y) |
X축, Y축으로 지정한 값만큼 확대/축소 |
|
8 |
scaleX(x) |
X축으로 지정한 값만큼 확대/축소 |
|
9 |
scaleY(y) |
요소 박스를 Y축으로 지정한 값만큼 확대/축소 |
|
10 |
scaleZ(z) |
요소 박스를 Z축으로 지정한 값만큼 확대/축소 |
|
11 |
rotate3d(x,y,z) |
지정한 각도만큼 X축, Y축, Z축을 기준으로 회전 |
|
12 |
rotate(x,y) |
지정한 각도만큼 X축, Y축을 기준으로 회전 |
|
13 |
rotateX(x) |
지정한 각도만큼 X축을 기준으로 회전 |
|
14 |
rotateY(y) |
지정한 각도만큼 Y축을 기준으로 회전 |
|
15 |
rotateZ(z) |
지정한 각도만큼 Z축을 기준으로 회전 |
|
16 |
skew(x,y) |
지정한 각도만큼 X축, Y축을 기준으로 기울임 |
|
17 |
skewX(x) |
지정한 각도만큼 X축을 기준으로 기울임 |
|
18 |
skewY(y) |
지정한 각도만큼 Y축을 기준으로 기울임 |
|
19 |
matrix(n, n, n, n, n, n) |
6개의 값을 가진 변환 행렬을 사용한 2차원 변형 |
|
20 |
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n,) |
16개의 값을 가진 4X4 변환 행렬을 사용한 3차원 변형 |
(4) 전환(5.13)
|
No |
속성 |
설명 |
|
1 |
transition-property |
전환 효과를 부여할 속성의 이름을 지정 |
|
2 |
transition-duration |
전환이 진행되는 시간을 지정(기본값 0초) |
|
3 |
transition-timing-function |
전환이 진행되는 속도의 형태를 지정 - 값 : ease, linear, ease-in, ease-out, ease-in-out |
|
4 |
transition-delay |
전환이 시작되기 전에 지연되는 시간을 지정 |
|
5 |
transition |
전환 관련 속성(transition-*)의 일괄 지정 - 형식 : transition : -property –duration –timing-function - delay |
(5) 애니메이션(5.14)- 키프레임 포함
|
No |
속성 |
설명 |
|
1 |
animation-name |
키프레임의 이름 - 값 : none, 키프레임 |
|
2 |
animation-duration |
애니메이션의 한 사이클이 진행되는 시간(기본값 0) |
|
3 |
animation-timing-function |
애니메이션의 진행 속도의 형태 - 값 : ease,linear,ease-in,ease-out,ease-in-out |
|
4 |
animation-iteration-count |
애니메이션의 반복 횟수 - 값 : 횟수(기본값 1), infinite |
|
5 |
animation-direction |
애니메이션의 진행 방향 - 값 : normal,reverse,alternate,alternate-reverse |
|
6 |
animation-play-state |
애니메이션의 진행 또는 일시정지 상태 - 값 : running,paused |
|
7 |
animation-delay |
애니메이션의 시작 전의 대기시간(기본값 0) |
|
8 |
animation-fill-mode |
실행 이전 또는 이후에 애니메이션 효과의 표시 여부 - 값 : none, forward, backwards, both |
|
9 |
animation |
애니메이션 관련 속성의 일괄 지정 - 형식 : animation : -name –duration -timing-function –delay –iteration-count –direction –fill-mode –play-state |
|
10 |
keyframe |
애니메이션을 구성하는 움직임의 키로 각 프레임을 연결
|
|
div { width : 100px; height:100px; background-color : red; position : relative; animation-name : hwangsanggyuAnimation; animation-duration : 5s animation-timing-function : linear; animation-iteration-count : infinite; animation-direction : alternate; animation-play-state : running; animation-delay : 2s; animation-fill-mode : fowwards; } |
||
(6) 다단(5.15)
|
No |
속성 |
설명 |
|
1 |
column-count |
단의 개수 : 값(auto, 개수)
|
|
2 |
column-width |
단의 폭 : 값(auto, 길이)
|
|
3 |
columns |
단의 폭과 개수를 일괄 지정 - 형식 : column : column-width column-count
|
|
4 |
column-gap |
단 사이의 간격 : 값(normal(기본값 1em), 길이
|
|
5 |
column-rule |
단 사이의 구분선 관련 속성(column-rule-*)을 일괄 지정 - 형식 : column-rule : -width –style –color
|
|
6 |
column-span |
해당 요소가 얼마나 많은 단을 차지할지를 지정 - 값 : none, all
|
|
7 |
column-fill |
각 단을 동일한 양의 콘텐츠로 균형 있게 채울지을지정 - 값 : balance, auto
|
(7) 카운터(5.16)
|
No |
속성 |
설명 |
|
1 |
content |
가상요소 ::before와 ::after를 이용하여 특정 요소의 앞 또는 뒤에 콘텐츠를 추가 - 값 : normal, none,counter,attr(속성),문자열,open-quote,close-quote,no-open-quote,no-close-quote,url(url)
|
|
2 |
content-reset |
하나 이상의 CSS 카운터를 생성하거나 리셋 - 값 : none,아이디숫자 - 리셋되는 값을 나타내는 숫자가 생략되면 기본값 0을 가짐
|
|
3 |
content-increment |
CSS 변수의 값을 증가 또는 감소시키기 위한 속성 - 값 : none,아이디숫자 - 숫자의 기본값이 1이므로 1씩 증가하지만 음수 사용 가능
|
|
4 |
counter() |
counter(변수,[decimal | upper-roman | …]) 함수는 변수의 값을 콘텐츠로 추가하는 것으로, 두 번째 인자는 순서 있는 리스트의 항목 마커로 사용되는 list-style-type 속성의 값을 지정하는 선택적 인자임
|
|
5 |
counters() |
카운터는 자식 요소에서 새로운 인스턴스가 자동으로 생성되기 때문에 요약된 형태의 리스트를 만들 때 유용하게 사용될 수 있으며, 이때 counters() 함수를 사용하면 다른 수준의 중첩된 카운터 사이에 문자열을 추가 가능
|
