문제]
다음 소스코드를 참고하여 실행 결과 화면과 같은 회사 소개 페이지를 만들어보자. 이 작업을 통해 태그 선택자, 아이디 선택자, 클래스 선택자의 사용법을 익힐 수 있다.
소스코드
<body>
<h1>회사소개</h1>
<p id="headline">
정보 기술 및 디자인 분야에서는 다양한 <span class="orange">
디지털 콘텐츠가 융합</span>되는 형태로 귾임없이 <span class="orange">
새로운 패러다임</span>을 요구하고 있습니다.
</p>
<p id="company">
(주)콘텐츠개발은 모바일 콘텐츠, 웹 콘텐츠, 게임 콘텐츠, 이북 콘텐츠 등
다양한 분야에서 사용되는 디지털 콘텐츠를 제작하는 기업입니다.
</p>
<p>
콘텐츠 분야에서는 다양한 디지털 콘텐츠가 융합된 형태가 시장을 지배하면서
발전하고 있으며, 이러한 추세는 끊임없이 새로운 유형의 패러다임을 요구하고 있습니다.
</p>
<p>
차세대 콘텐츠 시장은 유비쿼터스 환경 및 유/무선 통합 환경을 맞이하고 있으며,
이에 대비해 (주)콘텐츠개발은 우수한 기술 인력과 노하우를 바탕으로 한 유/무선
융합 콘텐츠 개발 기술로써 시장을 선도해 나가겠습니다.
</p>
</body>
1. 글 제목인 '회사 소개'의 글자 색상은 #423022, 글꼴은 맑은 고딕으로 지정하고
가운데 정렬이 되게 하시오.
2. 모든 단락의 글자 색상은 #444444, 크기는 16px, 글꼴은 돋움, 줄 간격은 130%로 지정하시오.
3. '정보 기술 --- 요구하고 있습니다.'의 글자 색상은 #8f7e6c, 크기는 20px, 볼드체로 지정하고,
'디지널 콘텐츠가 융합'과 '새로운 패러다임'의 글자 색상은 #ff6400으로 지정하시오.
4. '(주)콘텐츠개발은 --- 제작하는 기업입니다.'의 글자 색상은 #307466, 크기는 18px로 지정하고
밑줄이 나타나게 하시오.
참고 풀이]
<!DOCTYPE html>
<html lang="kor">
<head>
<title>회사소개</title>
<meta charset="utf-8">
<style>
h1{
color:#423022;
font-family:"맑은 고딕";
text-align:center;
}
p{
font-family:"돋음";
line-height:130%;
color:#444444;
font-size:16px;
}
#headline{
font-size:20px;
color:#8f7e6c;
font_weight:bold;
}
.orange{
color:#ff6400;
}
#company{
color:#307466;
font-size:18px;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>회사소개</h1>
<p id="headline">
정보 기술 및 디자인 분야에서는 다양한 <span class="orange">
디지털 콘텐츠가 융합</span>되는 형태로 귾임없이 <span class="orange">
새로운 패러다임</span>을 요구하고 있습니다.
</p>
<p id="company">
(주)콘텐츠개발은 모바일 콘텐츠, 웹 콘텐츠, 게임 콘텐츠, 이북 콘텐츠 등
다양한 분야에서 사용되는 디지털 콘텐츠를 제작하는 기업입니다.
</p>
<p>
콘텐츠 분야에서는 다양한 디지털 콘텐츠가 융합된 형태가 시장을 지배하면서
발전하고 있으며, 이러한 추세는 끊임없이 새로운 유형의 패러다임을 요구하고 있습니다.
</p>
<p>
차세대 콘텐츠 시장은 유비쿼터스 환경 및 유/무선 통합 환경을 맞이하고 있으며,
이에 대비해 (주)콘텐츠개발은 우수한 기술 인력과 노하우를 바탕으로 한 유/무선
융합 콘텐츠 개발 기술로써 시장을 선도해 나가겠습니다.
</p>
</body>
</html>
대한민국의 아름다운 영토, 독도
댓글