05_Simple Coding - CSS - Chapter04 - Sol

강태경·2023년 12월 4일

CSS_Quiz_Sol

목록 보기
2/8

📃 1) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/04_exam_1.css">
</head>
<body>
    <!-- 힌트 : 태그 선택자 이용 -->
    <h1>제목 글자</h1>
    <p>안녕하세요</p>
    <p>또만났군요</p>
</body>
</html>

- 04_exam_1.css

/* 문제 풀이 : 태그 */
h1 {
    /* 글자색 */
    color: red;
}

p {
    color:blue;
}

📃 2) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/06_exam_css_1.css">
  </head>
  <body>
    <!-- 색깔 : 블루 -->
    <h3>웹 기획 과정</h3>
    <ul>
      <!-- 힌트 : 목록 점 없애기 -->
      <!-- list-style-type: none; -->
      <li>- 사용자 층 분석과 사이트 목적</li>
      <li>- 콘텐츠 설계</li>
      <li>- 스토리보드 제작</li>
    </ul>
  </body>
</html>

- css

h3 {
    /* 글자색 */
    color: blue;
    /* font-family : (폰트 스타일) : 맑은 고딕 등 */
    font-family:'맑은 고딕';
}

li {
    /* 목록 앞에 점 없애기 */
    list-style-type: none;
}

📃 3) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/07_exam_css_2.css">
  </head>
  <body>
    <!-- 자동정렬 단축키 : ctrl + alt + l -->
    <!-- text-decoration: underline; -->
    <h3>거제도</h3>
    <p>
      경상남도 거제시에 있는 섬으로 우리나라에서
      <span>제주도 다음으로</span>입니다. <span>62개의 섬으로 구성</span> 되어
      있는데 <span>면적은 380.1</span>이고 275km입니다.
    </p>
  </body>
</html>

- css

h3 {
    color: black;
}

p {
    /* 글자색 */
    color: green;
    /* 폰트 스타일 */
    font-family:'Times New Roman', Times, serif;
    /* 글자 크기 */
    font-size: 18px;

}

span {
    /* 글자색 */
    color:blue;
    /* 굵은 글씨  */
    font-weight: bold;
    /* 밑줄 */
    text-decoration: underline;
}

📃 4) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 08_exam_css_3.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/08_exam_css_3.css">
  </head>
  <body>
    <!--  list-style-image: url("이미지경로"); -->
    <!--  list-style-image: url("../img/arrow.gif"); -->
    <h2>루바토 펜션 안내</h2>
    <ul>
      <li><span>주소</span> : 경기도 양평군 지평면 일신리</li>
      <li><span>전화번호</span> : 1588 - 0000</li>
      <li><span>객실 수</span> : 100개</li>
      <li><span>부대시설</span> : 한식당, 눈썰매장, 탁구장, 수영장</li>
    </ul>
    <p>
      ※ 다양한 객실이 준비되어 있어요. 예약을 원하시는 분은 전화주세요.
      애완동물도 동반 가능합니다. 감사합니다.^^
    </p>
  </body>
</html>

- css

h2 {
    /* 글자색 */
    color: black;
    /* 글자 크기 */
    font-size: 25px;
}

li {
    /* ./ : 현재경로 */
    /* ../ : 상위경로(부모경로) */
    /* 이미지 가져오기 함수 : url(이미지경로) */
    list-style-image: url("../img/arrow.gif");
}

span {
    /* 굵은 글씨 */
    font-weight: bold;
}

p {
    /* 글자색 */
    color:green;
    /* 밑줄 */
    text-decoration: underline;

}

📃 5) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/09_exam_css_4.css">
</head>
<body>
    <ul>
        <!-- 줄복사 : ctrl + d -->
        <li><span class="bold">일시</span> : 2019년 6월15일~8월15일</li>
        <li><span class="bold">장소</span> : 
            <span class="location">양평 리니 하우스</span></li>
    </ul>
</body>
</html>

- css

.bold {
    /* 굵은 글씨 */
    font-weight: bold;
}

.location {
    /* 글자색 */
    color: green;
    /* 밑줄 */
    text-decoration: underline;
}

📃 6) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 10_exam_css_5.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>클래스 선택자</title>
<link rel="stylesheet" href="./css/10_exam_css_5.css">
</head>
<body>
<h3>열대어란?</h3>
<p>원산지는 주로 <span class="font1">동남아시아</span>, 
    중앙아메리카, 남아메리카, 
    <span class="font1">아프리카</span>이며 대부분 소형의 
    아름다운 물고기입니다.</p>
<h3>열대어의 종류</h3>
<p>열대어는 <span class="font2">민물에 사는 열대어</span>
    와 
    <span class="font2">바닷물에 사는 열대어</span>
    로 나눌 수 있습니다.
</p>
</body>
</html>

- css

.font1 {
  /* 글자색 */
  color: red;
  /* 밑줄 */
  text-decoration: underline;
  /* 굵은 글씨 */
  font-weight: bold;
}

.font2 {
    /* 글자색 */
  color: blue;
  /* 굵은 글씨 */
  font-weight: bold;
}

📃 7) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 11_exam_css_6.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/11_exam_css_6.css">
  </head>
  <body>
    <h3>잠자리란?</h3>
    <p>
      <span id="fly">잠자리</span>는 잠자리목에 속하는 곤충으로 전 세계적으로 분포하는 포식성 곤충이며
      여러 가지 해충을 잡아먹는 유익한 곤충입니다.
    </p>

    <p>
      앞머리에 커다란 <span class="blue">한 쌍의 겹눈</span>을
       가지고 있습니다. 또한 날카로운 턱을 가지고
      있으며 이빨이 튼튼합니다. 파리, 모기, 나비 등의 살아있는
       곤충을 잡아먹고
      삽니다.
    </p>
  </body>
</html>

- css

/* 글자 세로 간격 속성 */
p {
    /* 글자 크기 */
    font-size: 14px;
    /* 글자 세로 간격 */
    line-height: 180%;
}

/* id 선택자 : #(샵) 붙일것 */
#fly {
    /* 글자색 */
    color: red;
    /* 굵은 글씨 */
    font-weight: bold;
}

/* class 선택자 : .(점) 붙일것 */
.blue {
    color:blue;
}

📃 8) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 12_exam_css_7.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_exam_css_7.css">
  </head>
  <body>
    <h3>- 배낭여행이란?</h3>
    힌트 : li - list-style-type: square 적용, 글자크기 16px p - 자간 150%,
    글자크기 14px body - 돋음 폰트 h3 - 맑은고딕 폰트
    <p>
      여권, 항공권 등 여행 시 필요한 것만을 준비하고 현지에서 숙박, 식사 등을
      해결하는 자유여행을 말합니다.
    </p>

    <h3>- 배낭여행의 종류</h3>
    <p>
      배낭여행에는 모든 일정을 자신이 정하는 자유 배낭, 여러 명이 같이 출발 전
      숙소와 교통편 등을 미리 예약하고 여행하는 단체 배낭, 자유 배낭과 단체
      배낭의 중간 형태인 패키지 배낭여행 등이 있습니다.
    </p>

    <h3>- 배낭여행 준비</h3>
    <ul>
        <!-- 열 선택 모드 : shift + alt + insert키 -->
      <li><span>여권 준비</span> : 여권이 없으면 신청하고 여권 유효기간을 반드시 체크.</li>
      <li><span>비행기 예약</span> : 항공사의 예매 사이트나 예약 대행 사이트 이용.</li>
      <li><span>여행 스케줄</span> : 스케줄은 가능한 세부적으로 잘 짜야 함.</li>
      <li><span>짐싸기</span> : 꼭 필요한 물품만으로 최대한 간단하게 짐 준비.</li>
    </ul>
  </body>
</html>

- css

/* 힌트 : li - list-style-type: square 적용, 글자크기 16px p - 자간 150%,
    글자크기 14px body - 돋음 폰트 h3 - 맑은고딕 폰트 */
body {
    /* 글자 스타일 */
    font-family: '돋음';
}

h3 {
    /* 글자 스타일 */
    font-family: '맑은고딕';
    color: blue;
}

p {
    /* 자간 == 글자 세로 사이 간격 */
    line-height: 150%;
    /* 글자 크기 */
    font-size: 14px;
}

li {
    /* 목록 앞에 사각형 */
    list-style-type: square;
    /* 글자 크기 */
    font-size: 16px;
}

span {
    /* 굵은 글씨 */
    font-weight: bold;
}

📃 9) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/20_exam_css_8.css">
</head>
<body>
    <!-- 힌트 : heading -> width(%, px), height -->
    <!--  font-size, text-align,  -->
    <h1 class="heading">HTML</h1>
</body>
</html>

- css

h1 {
    font-size: 60px;
}

.heading {
    /* 화면 단위 : px(픽셀, 고정크기), 
            %(부모의 크기를 물려받아 사용, 반응형 디자인) */
    /* 가로 */
    width: 100%;
    /* 세로 */
    height: 100px;
    /* 배경색(바탕색) */
    background-color: #222;
    /* 색상 : 키워드(red, orange), #16진수, 
                rgb(숫자,숫자,숫자) : 숫자(0~255) */
    /* 글자색 */
    color: rgb(255,255,255);
    /* 글자정렬 */
    text-align: center;
}
profile
강태경
IT FullStack 강사
이전 포스트

05_Simple Coding - CSS - Chapter04 - Quiz

다음 포스트

06_Simple Coding - CSS - Chapter05 - Quiz

0개의 댓글