본문 바로가기
컴퓨터과학[2-1]/knou_[2-1]HtmlXml

HTML/XML 2014 1학기 중간시험 예상문제 풀이

by boolean 2015. 4. 8.
728x90
글자 자체의 모양을 지정

HTML/XML 2014 1학기 중간시험 예상문제 풀이

본 블로그의 자체 스타일로인한 부득이한 선택자 변경 안내

  1. 일반선택자는 My 의 m을 붙여서 id선택자로 한다
  2. HTML 태그명이 그대로 사용된 id 및 class 선택자는 앞에 m을 붙여서 사용한다.
  3. ex) p -> #mp, #td -> #mtd , .table ->.mtable




<head>
<title>글자 자체의 모양을 지정</title>
<style type="text/css">
h1 { ______(A)________ }
(B)_____________________
(C)_____________________
</style>

                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

                
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/revenue.css"/>
<link rel="canonical" href="https://booolean.tistory.com/229"/>

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://booolean.tistory.com/229","name":null},"url":"https://booolean.tistory.com/229","headline":"HTML/XML 2014 1학기 중간시험 예상문제 풀이","description":"글자 자체의 모양을 지정 HTML/XML 2014 1학기 중간시험 예상문제 풀이 본 블로그의 자체 스타일로인한 부득이한 선택자 변경 안내 일반선택자는 My 의 m을 붙여서 id선택자로 한다 HTML 태그명이 그대로 사용된 id 및 class 선택자는 앞에 m을 붙여서 사용한다. ex) p -&gt; #mp, #td -&gt; #mtd , .table -&gt;.mtable Cascading Style Sheets : Font font 관련 속성을 사용하면 글자체, 글자 크기, 굵기 등과 같은 글 자 자체의 모양을 지정할 수 있다. 속성의 종류: (D) font-family, -size, -style, -weight, -variant [조건] 1. &quot; ~&quot; 부분이 작은 크기의 대문자, 배경색은 파란색, 글자는 흰색으로 표..","author":{"@type":"Person","name":"boolean","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2015-04-08T21:05:06+09:00","dateModified":"2015-04-30T00:17:47+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/comment.js" defer=""></script>

                
                </head>

<h1> Cascading Style Sheets : Font </h1>
<p>font 관련 속성을 사용하면 <em> 글자체, 글자 크기, 굵기</em> 등과 같은 글
자 자체의 모양을 지정할 수 있다.</p><p> 속성의 종류: (D) <strong>font-family, -size, -style, -weight,
-variant</strong></p>




[조건]
1. "<h1> ~</h1>" 부분이 작은 크기의 대문자, 배경색은 파란색, 글자는 흰색으로 표시되도록
(A) 부분을 완성하시오.
2. <em> 태그로 둘러싸인 “글자체, 글자 크기, 굵기” 부분이 글자크기 15pt, 글자 굵기는
진하게, 글자체는 궁서체가 표시되도록 문맥 선택자로를 사용해서 (B) 부분을 완성하시오.
3. (D) 부분이 결과 화면과 같이 되도록 클래스 속성을 사용하여 (C)와 (D)를 완성하시오. 단
글자스타일을 기울어지고 글자크기는 상위 글자 크기에서 1단계 큰 글자로 지정한다.

Cascading Style Sheet :Font

font 관련 속성을 사용하면 글자체, 글자 크기, 굵기 등과 같은 글자 자체의 모양을 지정할 수 있다.

속성의 종류 :font-family, -size, -style, -weight, -variant



<title>글자 자체의 모양을 지정</title>
<style type="text/css">
#mh1
{
font-variant:small-caps; /* normal, small-caps */
background-color:blue;
color:#ffffff;
}
#mem
{
font:bold 15pt 궁서체,arial;
}
.mstrong
{
font-style:italic;
font-size:14ptr;/* 14ptr -> larger */
}
</style>

<h1 id="mh1">Cascading Style Sheet :Font</h1>
<p>font 관련 속성을 사용하면 <em id="mem">글자체, 글자 크기, 굵기</em> 등과 같은 글자 자체의 모양을 지정할 수 있다.</p><p>속성의 종류 :<strong class="mstrong">font-family, -size, -style, -weight, -variant</strong></p>
<br />


저작자표시 비영리 변경금지

'컴퓨터과학[2-1] > knou_[2-1]HtmlXml' 카테고리의 다른 글

HTML/XML 12강 XML 개요 및 문법[선언(Definition), 요소(Element)]  (0) 2015.04.20
HTML/XML 5강 [table, form, frame,iframe]실습하기  (0) 2015.04.08
HTML/XML 2014 1학기 중간시험 문제 풀이  (0) 2015.04.08
HTML 2강.자기소개서, 3강 사진첩 실습 응용  (0) 2015.04.08
HTML 기본태그 [Text 관련태그 : 논리적 태그]  (0) 2015.04.07

관련글

댓글

티스토리툴바