2024. 1. 8. 16:52ㆍHTML + CSS+JS/Practice
식물 채취 도구와 카메라 삼각대는 불허합니다. 음식 및 과일은 개인용으로 소포장된 것만 허용 하며 돗자리는 유치원, 어린이집 단체에 한해 일인용 돗자리를 허용합니다. 인화성 물질, 애완동물, 놀이 및 운동기구, 음향기구 및 악기의 사용을 금합니다.
※ 식물 보호를 위해 음식물은 국물이 없는 도시락, 껍질을 깐 과일, 음료수만 허용합니다.
<!DOCTYPE html>
<html>
<head>
<title>식물원 관람 안내</title>
<link rel="stylesheet" href="./view_info.css">
</head>
<body>
<section>
<article>
<h2>관람 안내</h2>
<!-- 입장 및 관람 시간 안내 -->
<div class="circle-container">
<div class="circle"></div>
<h4 class="circle-text">입장 및 관람 시간 안내</h4>
</div>
<ul>
<li>개장 시간 안내</li>
<dd style="margin-left: 0;">- 관람 시간 : 09:00~일몰 시</dd>
<dd style="margin-left: 0;">- 매표 시간 : 오전 9시~오후 6시(동절기 오후 4시 40분) - 계절에 따라 변동 가능</dd>
<dd style="margin-left: 0;">- 휴원 : 연중 무휴</dd>
<li>관람 소요 시간 : 평균 1시간 30분</li>
</ul>
<!-- 반입 금지 -->
<div class="circle-container">
<div class="circle"></div>
<h4 class="circle-text">반입 금지</h4>
</div>
<ol>
<li>식물원의 전 지역은 금연, 금주입니다.</li>
<li>식물원에서 취사 행위를 할 수 없습니다.</li>
</ol>
<!-- 규제 사항 -->
<div class="circle-container">
<div class="circle"></div>
<h4 class="circle-text">규제 사항</h4>
</div>
<p>
식물 채취 도구와 카메라 삼각대는 불허합니다.
<b style="margin-right: -6px;">음식 및 과일은 개인용으로 소포장된 것만 허용</b>
하며 돗자리는 유치원, 어린이집 단체에 한해 일인용 돗자리를 허용합니다.
<b>인화성 물질, 애완동물, 놀이 및 운동기구, 음향기구 및 악기의 사용을 금합니다.</b>
</p>
<p>※ 식물 보호를 위해 음식물은 국물이 없는 도시락, 껍질을 깐 과일, 음료수만 허용합니다.</p>
</article>
</section>
</body>
</html>.circle-container {
display: flex;
align-items: center;
}
.circle {
width: 12px;
height: 12px;
margin-top: 2px;
border: 1px solid black;
border-radius: 50%;
}
.circle-text {
margin: 0px 0px 0px 8px;
}
정보 기술 및 디자인 분야에서는 다양한 디지털 콘텐츠가 융합 되는 형태로 끊임없이 새로운 패러다임 을 요구하고 있습니다.
(주)콘텐츠개발은 모바일 콘텐츠, 웹 콘텐츠, 게임 콘텐츠, 이북 콘텐츠 등 다양한 분야에서 사용되는 디지털 콘텐츠를 제작하는 기업입니다.
콘텐츠 분야에서는 다양한 디지털 콘텐츠가 융합된 형태가 시장을 지배하면서 발전하고 있으며, 이러한 추세는 끊임없이 새로운 유형의 패러다임을 요구하고 있습니다.
차세대 콘텐츠 시장은 유비쿼터스 환경 및 유/무선 통합 환경을 맞이하고 있으며, 이에 대비해 (주)콘텐츠개발은 우수한 기술 인력과 노하우를 바탕으로 유/무선 융합 콘텐츠 개발 기술로써 시장을 선도해 나가겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>회사 소개</title>
<link rel="stylesheet" href="./intro.css">
</head>
<body>
<h1 class="title">회사 소개</h1>
<p id="headline">
정보 기술 및 디자인 분야에서는 다양한
<span class="orange" style="margin-right: -6px;">디지털 콘텐츠가 융합</span>
되는 형태로 끊임없이
<span class="orange" style="margin-right: -6px;">새로운 패러다임</span>
을 요구하고 있습니다.
</p>
<p id="company">
(주)콘텐츠개발은 모바일 콘텐츠, 웹 콘텐츠, 게임 콘텐츠, 이북 콘텐츠 등
다양한 분야에서 사용되는 디지털 콘텐츠를 제작하는 기업입니다.
</p>
<p>
콘텐츠 분야에서는 다양한 디지털 콘텐츠가 융합된 형태가 시장을 지배하면서 발전하고 있으며,
이러한 추세는 끊임없이 새로운 유형의 패러다임을 요구하고 있습니다.
</p>
<p>
차세대 콘텐츠 시장은 유비쿼터스 환경 및 유/무선 통합 환경을 맞이하고 있으며, 이에 대비해
(주)콘텐츠개발은 우수한 기술 인력과 노하우를 바탕으로 유/무선 융합 콘텐츠 개발 기술로써
시장을 선도해 나가겠습니다.
</p>
</body>
</html>p {
color: #444444;
font-size: 16px;
font-family: '돋움', 'Dotum';
line-height: 130%;
}
.title {
color: #423022;
font-family: '맑은 고딕', 'Malgun Gothic';
text-align: center;
}
#headline {
color: #8f7e6c;
font-size: 20px;
font-weight: bold;
}
.orange {
color: #ff6400;
}
#company {
color: #307466;
font-size: 18px;
text-decoration: underline;
}
※ 당사는 전형 과정 중 성별, 연령에 차별을 두지 않습니다.
※ 2017년 12월 20일까지 접수 를 받으며 채용 시 조기 마감될 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>직원 채용</title>
<link rel="stylesheet" href="./recruit.css">
</head>
<body>
<h1 class="title">직원 채용</h1>
<h3 class="item-text">- 채용 인원 : 00명</h3>
<h3 class="item-text">- 지원 자격</h3>
<ul>
<li>
<span class="red" style="font-weight: bold;">학력 제한 없음</span>
</li>
<li>남자에 한하여 병역을 필하거나 면제받은 분</li>
<li>해외여행 및 신원보증에 결격사유가 없는 분</li>
<li>외국어 능통자 및 관련 자격증 소지자 우대</li>
</ul>
<p>※ 당사는 전형 과정 중 성별, 연령에 차별을 두지 않습니다.</p>
<h3 class="item-text">- 지원 서류</h3>
<ol>
<li>
<span class="blue" style="margin-right: -10px; text-decoration: underline;">이력서</span>
(양식을 다운로드하여 사용)
</li>
<li>
<span class="blue" style="margin-right: -10px; text-decoration: underline;">자기소개서</span>
(별도의 양식 없음)
</li>
<li>
<span class="blue" style="text-decoration: underline;">주민등록등본</span>
</li>
<li>
<span class="blue" style="text-decoration: underline;">최종 졸업 증명서</span>
</li>
</ol>
<h3 class="item-text">- 원서 접수 : 이메일 접수</h3>
<p>
※
<span class="red" style="margin-right: -6px; font-weight: bold;">2017년 12월 20일까지 접수</span>
를 받으며 채용 시 조기 마감될 수 있습니다.
</p>
</body>
</html>body {
color: #444444;
font-family: '바탕체', 'BatangChe';
}
.red {
color: red;
}
.blue {
color: blue;
}
.title {
color: #000000;
font-size: 30px;
}
.item-text {
color: #222222;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>봄빛 식물원</title>
<link rel="stylesheet" href="./botanic_garden.css">
</head>
<body>
<section>
<header>
<h1 class="title">Botanic Garden</h1>
</header>
<article>
<h3 class="description-1">꿈속의 정원 같은 봄빛 식물원</h3>
<h4 class="description-2">봄빛 식물원은 평온과 건강을 선사합니다.</h4>
<h5 class="description-3">
봄빛 식물원은 인간이 자연과 더불어 사는 삶의 가치를 깨닫게 하며,
평소에 꿈꿔왔던 것을 정원에 실현 하려는 노력을 기울이고 있습니다.
각박한 삶 속에서 자연의 소중함을 일깨워주고 마음의 평온과
건강한 쉼을 제공할 것입니다.
</h5>
</article>
</section>
</body>
</html>.title {
color: purple;
font-size: 60px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 6px 4px 6px gray;
text-align: center;
}
.description-1 {
color: green;
font-size: 30px;
text-decoration: underline;
}
.description-2 {
font-size: 20px;
font-style: italic;
}
.description-3 {
color: #444444;
font-size: 14px;
font-style: italic;
font-family: '돋움', 'Dotum';
line-height: 150%;
}
| [HTML/CSS/JS] 회원가입화면 만들기 (0) | 2024.01.08 |
|---|---|
| [HTML/CSS/JS] 로그인(login)화면 만들기 (2) | 2024.01.08 |
| [HTML/CSS/JS] 달력 (calendar) 만들기 (0) | 2024.01.08 |
| [HTML/CSS/JS] table 생성 (0) | 2024.01.08 |