본문 바로가기
Example

[E-HTML&CSS] 선택자 예시

by 송기동 2023. 8. 4.
728x90

클래스 선택자

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/05_default_class.css" />
  </head>
  <body>
    <!-- ul : 순서없는 목록 -->
        <ul>
      <li class="select">사과</li>
      <li>바나나</li>
      <li class="select">오렌지</li>
      <li>감</li>
    </ul>
  </body>
</html>

css 코드

/* 클래스 선택자 */
/* id 선택자 vs class 선택자 차이
 id선택자 : 중복 불가(이름)
 class선택자 : 중복 허용(이름), 실무 디자이너 사용
 */
/* 사용법 :
 .클래스명{
    속성 : 값;
 }
 */
.select {
  color: red;
}

폰트 스타일을 알아보고 문제풀어보기

문제

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>
    <!-- 목록 점 없애는 방법 -->
    <!-- list-style-type : none; -->
    <h3>웹 기획 과정</h3>
    <ul>
        <li>-사용자 층 분석과 사이트 목적</li>
        <li>-콘텐츠 설계</li>
        <li>-스토리보드 제작</li>
    </ul>
</body>
</html>

css 코드

h3 {
/* 글자색 */

  color: blue;
  /* font-family : (폰트 스타일) 궁서체, 맑은고딕 등 */
  font-family: '궁서체';
}
li {
  /* 목록 앞에 점 없애기 */
  /* list-style-type: none; : 없음 */
  list-style-type: none;
}

문제

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>
    <!-- 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;
}

문제

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/08_exam_css_3.css">
</head>
<body>
    <!-- /* list -style-image:url("이미지경로") */ -->
    <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>

css 코드

h2 {
  color: black;
  font-size: 25px;
}

li {
  /* ./ 현재경로 */
  /* ../ 상위경로(부모경로) */
  list-style-image: url("../img/1.gif");
}

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

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

문제

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>
        <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;
}

문제

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;
}

문제

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 코드

/* 글자 세로 간격 속성 */
/* line-height : 원하는 세로 간격 + %; */
p {
  /* 글자 크기 */
  font-size: 14px;
  /* 글자 새로 간격 */
  line-height: 200%;
}
/* id 선택자는 #(샵)으로 시작 */
#fly {
  color: red;
}
/* 클래스 선택자는 .(점)으로 시작 */
.blue {
  color: blue;
}

문제

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 코드

body {
  font-family: "돋음";
}
h3 {
  color: blue;
  font-family: "맑은 고딕";
}
p {
  /* 자간 == 글자 세로 사이 간격 */
  line-height: 150%;
  /* 글자 크기 */
  font-size: 14px;
}

li {
  list-style-type: square;
  font-size: 16px;
}
span {
  font-weight: bold;
}
Document

Lorem ipsum

Lorem ipsum dolor sit amet

안녕하세요 송기동입니다.

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/13_font_family.css" />
  </head>
  <body>
    <!-- Lorem ipsum... : 아무 의미없는 글자 (디자인에 신경써라) -->
    <h1 class="font_arial">Lorem ipsum</h1>
    <p class="font_roman">Lorem ipsum dolor sit amet</p>
    <p class="font_italic">안녕하세요 송기동입니다.</p>
  </body>
</html>

css 코드

.font_arial{
    /* 폰트 스타일 */
    /* font-family : 스타일1, 스타일2, 스타일3 */
    /* 스타일1이 있으면 스타일1 이 적용
    없으면 스타일2 적용, 없으면 스타일3 이 적용 */
    font-family: Arial, Helvetica, sans-serif;
}

.font_roman{
    font-family: 'Times New Roman', Times, serif;
}

.font_italic{
    /* 이텔릭체 */
    font-style: italic;
    /* 더 굵은글씨 */
    font-weight: bolder;
    /* 글자 중앙 정렬 : 글자만 가능 */
    text-align:center;
    /* 왼쪽 정렬 : text-align:left;*/
    /* 오른쪽 정렬 : text-align:ringt;*/
}

속성 선택자

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/14_attribute_basic.css">
</head>
<body>
    <!-- 속성 선택자 예제 -->
    <form>
        <input type="text" />
        <input type="password" />
    </form>
</body>
</html>

css 코드

/* 속성 선택자 : 특수 선택자 */
/* 사용법 :
    태그[속성="값"]{
        속성 : 값;
    }
*/
input[type="text"]{
background-color: red;;
}
input[type="password"]{
background-color: blue;
}

후손 선택자

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/15_desc_basic.css">
</head>
<body>
    <div id="header">
        <h1>Lorem ipsum</h1>
        <div id="nav">
            <h1>Nav1</h1>
            송기동입니다.
        </div>
    </div>
</body>
</html>

css 코드

/* 후손 선택자 : 특수 선택자 */
/* 부모태그 밑에 있는 자식태그들 모두 선택 */
/* 사용법 :
    #(부모)선택자 (자식)선택자{
        속성 : 값;
    }
*/
#header h1{
    color : red;
}

자식 선택자

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/16_desc_children.css">
</head>
<body>
    <div id="header">
        <h1>Lorem ipsum</h1>
        <div id="nav">
            <h1>Nav1</h1>
            송기동입니다.
        </div>
    </div>
</body>
</html>

css 코드

/* 자식 선택자 */
/* 부모선택자 바로 아래 자식만 선택해서 디자인 적용 */
/* 사용법::
    #(부모)선택자 > (자식)선택자{
        속성 : 값;
    } 
*/
#header > h1{
    color : red;
}

반응 선택자

기본 모양
마우스 커서를 올렸을 때
마우스를 클릭했을 때

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/17_etc_action.css">
</head>
<body>
    <!-- 반응 선택자 예제 -->
    <h1>반응 선택자</h1>
</body>
</html>

css 코드

/* 반응 선택자 */
/* 선택자 : hover - 마우스가 위로 올라가면 디자인 적용 */
h1:hover{
    color : red;
}

/* 선택자 : active - 마우스를 클릭하면 디자인 적용 */
h1:active{
    color : blue;
}

상태 선택자

기본 모양
위 박스를 클릭하면 색이 바뀐다.

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/18_etc_state.css">
</head>
<body>
    <!-- 상태 선택자 예제 -->
    <h2>사용가능</h2>
    <input type="text"/>
    <h2>사용 불가능</h2>
    <!-- disabled="disabled" : 입력 못하게 막기 속성 -->
    <input type="text" disabled="disabled"/>
</body>
</html>

css 코드

/* 상태 선택자 */
/* input:enabled = 현재 입력가능한 상태일때 디자인 적용 */
input:enabled{
    background-color: white;
}

/* input:disabled = 현재 입력 불가능한 상태일때 디자인 적용 */
input:disabled{
    background-color: gray;
}

/* input:foucs = 커서가 있을때(포커스) 디자인 적용 */
input:focus{
    background-color: orange;
}

 

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] 연습문제 + 배경이미지 예시  (0) 2023.08.08
[E-HTML&CSS] 선택자 예시, 연습문제  (17) 2023.08.07
[E-HTML&CSS] 연습문제 + div, span, 시멘틱태그 예시, css 기본선택자  (16) 2023.08.03
[E-HTML] input, select, textarea, lable 예시 + 연습문제  (14) 2023.08.02
[E-HTML] text, list, table, audio, video, image 예시  (15) 2023.08.01

관련글

티스토리툴바