CSS배운지 한 3일차?되는날이다. 아직도 어려운게 많지만 블로그에 글을 쓰다보니 공부도 되고 보람찬 것 같다!
1. 클래스 선택자
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>클래스 선택자</title>
<style type="text/css">
.sikmul {
color: #e57373;
font-weight: bold;
text-decoration: underline;
}
.flower {
color: #b39ddb;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>난초</h1>
<h3>난초의 특징</h3>
<p>난초는 <span class="sikmul">외떡잎식물</span> 중에서 가장 친화한 식물이며 아름답고 향기로운 꽃이 피는 관엽식물로 애호가가 많다.</p>
<h3>난초의 종류</h3>
<p><span class="sikmul">동양란</span>과 <span class="flower">서양란</span>으로 구별되며, <span class="sikmul">동양란</span>에는 보춘화, 한란, 석곡, 풍란등이 있다.
<span class="flower">서양란</span>에는 카틀레아, 심비듐, 덴드로듐, 팔레노프시스등이 있다.</p>
</body>
</html>결과
1-1) class 선택자 사용법
html에 class 태그를 걸었을 경우 css에 다음과 같이 작성하면 된다!
<span class="클래스이름"> 내용 </span>.클래스 이름 {
내용
}
1-3) 예제1(class 선택자)
결과
코드
<style>
h1.orange {
color: #e91e63;
font-size : 30px
}
h2.orange {
color: #8e24aa;
}
p.blue {
color: #64b5f6;
font-style: italic;
}
span.blue {
color: #42a5f5;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="orange">제1회 봄빛 수목원 여름꽃 축제</h1>
<h2 class="orange">수련•수국•무궁화•원추리</h2>
<p class="blue">아름다운 여름꽃과 시원한 바다를 경험할 수 있는 좋은 기회입니다.</p>
<ul>
<li>일시 : <span class="blue">6월 15일부터 8월 15일까지</span></li>
<li>장소 : 봄빛 수목원 일원</li>
</ul>
</body>
</html>
2. 아이디 선택자
2-1) id 선택자 사용법
html에 id 태그를 걸었을 경우 css에 다음과 같이 작성하면 된다!
<span id="클리스 이름"> 내용 </span>#클래스 이름 {
내용
}
2-2) 예제1(id 선택자)
결과
코드
<title>봄빛 수목원 직원 채용</title>
<style>
#document span {
color: #ff0000;
}
#method span {
color: #0000ff;
font-weight: bold;
}
</style>
</head>
<body>
<h1>봄빛 수목원 직원 채용 안내</h1>
<h3>-제출 서류</h3>
<ul id="document">
<li><span>이력서</span>(첨부 양식을 다운로드하여 작성)</li>
<li><span>자기소개서</span>(자유 양식으로 경력을 위주로 작성)</li>
<li><span>주민등록등본</span>(주소 이동 내역 포함)</li>
</ul>
<h3>-제출 방법</h3>
<ul id="method">
<li>위 서류를 봄빛 수목원 인사 담당자에게 이메일로 제출</li>
<li>이메일 주소 : <span>master@bonfit.net</span></li>
</body>
</html>이번에는 아이디 선택자를 사용하였다
마지막으로는 지금까지 배운 내용으로
선생님이 띄어주신 화면을 혼자서 똑같이 만드는 연습을 하였다
처음에는 내가 잘 할 수 있을까라는 생각이 들었지만
앞에서 배운 내용을 보고 천천히 차근차근 하게 되었다
그 결과 원하는 결과가 나왔다!!
3. 직원 채용 페이지 만들기
결과
코드
<title>직업 채용</title>
<style>
h1 {
font-weight: bold;
}
h3 {
font-weight: bold;
}
#red span {
color: #e57373;
font-weight: bold;
}
span.blue {
color: #7986cb;
text-decoration: underline;
}
span.red {
color: #e57373;
font-weight: bold;
}
</style>
</head>
<body>
<h1>직원 채용</h1>
<h3>-채용 인원 : 00명</h3>
<h4>-지원 자격</h4>
<ul id = "red">
<li><span>학력 제한 없음</span></li>
<li>남자에 한하여 병역을 필하거나 면제받은 분</li>
<li>해외여행 및 신원보증에 결격사유가 없는분</li>
<li>외국어 능통자 및 관련 자격증 소지자 우대</li>
</ul>
<p>※당사는 전형과정 중 성별, 연령에 차별을 두지 않습니다.</p>
<h3>-지원서류</h3>
<ol>
<li><span class="blue">이력서</span> (양식을 다운로드하여 사용)</li>
<li><span class="blue">자기소개서</span> (별도의 양식 없음)</li>
<li><span class="blue">주민등록등본</span></li>
<li><span class="blue">최종 졸업 증명서</span></li>
</ol>
<h3>-원서 접수 : 이메일 접수</h3>
<p>※<span class="red">2017년 12월 20일까지 접수</span>를 받으며 채용 시 조기 마감될 수 있습니다.</p>
</body>
</html>
html은 신비하고 흥미로운 것 같다! css코드를 작성하니 페이지가 이쁘게 바뀌는게 너무 신기했다.
비록 백엔드를 목표로 하고 있지만 프론트도 굉장히 흥미롭다는 것을 알게 된 것 같다!
'AfterSchool > html 방과후' 카테고리의 다른 글
| CSS: 박스와 경계선(0414) (0) | 2022.04.14 |
|---|---|
| CSS: 배경 색상&이미지 삽입(0412) (0) | 2022.04.12 |
| CSS : 웹페이지 꾸미기(0405) (0) | 2022.04.05 |
| CSS : style 배우기(0401) (0) | 2022.04.01 |
| html : 회원가입양식 만들기(0329) (0) | 2022.03.29 |
