close
프로필 배경
프로필 로고

도로그

Css · 2023. 8. 9. fullscreen 넓게보기

[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span

목차

Screenshot_213.png

exam_train

Screenshot_211.png

html

<!-- 18_exam_train.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/18_exam_train.css">
  </head>
  <body>
    <h2>열차표 예매</h2>
    <table>
      <tr id="table_title">
        <th>열차번호</th>
        <th>출발</th>
        <th>도착</th>
        <th>출발시간</th>
        <th>특실</th>
        <th>일반실</th>
        <th>소요시간</th>
      </tr>
      <tr>
        <td id="col1" class="train">199</td>
        <td id="col2">수원</td>
        <td id="col3">대전</td>
        <td id="col4">10:00</td>
        <td id="col5"><img src="https://i.postimg.cc/mDcRkxKc/empty.png" /></td>
        <td id="col6"><img src="https://i.postimg.cc/QdX35KRZ/full.png" /></td>
        <td id="col7">01:44</td>
      </tr>
      <tr>
        <td class="train">230</td>
        <td>수원</td>
        <td>대전</td>
        <td>11:30</td>
        <td><img src="https://i.postimg.cc/mDcRkxKc/empty.png" /></td>
        <td><img src="https://i.postimg.cc/QdX35KRZ/full.png" /></td>
        <td>01:38</td>
      </tr>
    </table>
  </body>
</html>

css

table {
    /* 테이블 선사이 간격 붙이기 속성 */
    border-collapse: collapse;
    /* 가로 크기 */
    /* 화면단위 : px(고정크기), %(반응형단위)
                , vw(가로, viewport width), vh(세로, viewport height) */
    /* viewport : 모니터의 화면(pc 모니터에 맞추어 보임, 테이블에 맞추어 보임) */
    /* 예) 코딩 시 100vw(가로) -> pc , 테블릿 등에서 적절하게 화면을 맞추어 줌 */
    width: 610px;
}
/* 같은 선택자일 경우(기본) : 디자인 적용 우선순위 -> 밑으로 갈수록 우선됨 */
table, td, th {
    /* 여러개 선언할때 우선순위가 있다? */
    /* 외곽선 */
    /* border: 선두께 선스타일 선색상 */
    border: 1px solid #cccccc;
}

/* 행 */
tr {
    /* 글자 정렬 : 중앙 */
    text-align: center;
}

/* 열 */
td, th {
    /* 안쪽 여백 */
    padding: 5px;
}

/* 테이블 제목 : 배경색, 세로크기 */
#table_title {
    /* 세로 크기 */
    height: 30px;
    /* 배경색 */
    background-color: #eeeeee;
}

/* 1열 : 분홍색(배경색), 밑줄, 굵은 글씨 */
.train {
    /* 배경색 */
    background-color: #fbdbf2;
    /* 글자색 */
    color: #f1477b;
    /* 밑줄 */
    text-decoration: underline;
    /* 굵은 글씨 */
    font-weight: bold;
}

/* 참고 : 생략 해도 됨 */
#col1, #col4 {
    /* 가로 크기 */
    width: 90px;
}
#col2, #col3 {
    /* 가로 크기 */
    width: 60px;
}
#col5, #col6 {
    /* 가로 크기 */
    width: 80px;
}

img_assign

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/19_img_assign.css">
</head>
<body>
    <div>
        <img src="./img/train.jpg" alt="기차">
    </div>
</body>
</html>

css

/* 이미지를 감싸는 부모 태그 */
/* 반응형 웹 이론 : 이미지 쪽 처리 */
div {
    /* 가로크기 */
    width: 640px;
    /* 외곽선 */
    border: 2px solid red;
}

/* 1) % : 부모 요소를 기준으로 값을 물려받아 계산됨 */
/* 2) max-width : 부모 요소를 벗어나지 않게 조정 */
img {
    /* 부모 요소를 벗어나지 않게 조정하는 속성 */
    max-width: 100%;
    /* 세로 : auto(자식요소에 맞추어 자동 조정됨(컨텐츠에 맞춤) */
    height: auto;
}

결과

Screenshot_215.png

cascading

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_cascading.css">
</head>
<body>
    <div id="id-div">
        <h1 class="class-heading" id="id-heading">레드향</h1>
    </div>
    <p>레드향은 한라봉과 귤을 교배한 것으로</p>
    <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>

css

/* css 디자인 우선순위 : 실무, 팀프로젝트 */
/* 기본) 같은 선택자 우선순위 : 가장 나중에 디자인 된것이 우선됨 */
/* 1) 부모 태그 - 자식태그 :  자식의 디자인이 우선됨 */
/* 2) id선택자 > 클래스선택자 > 태그선택자 > 전체선택자 */
/* TODO: 우선순위를 고려하기 힘든 경우 , 디자인 파일 너무 많을 경우,
   TODO: 무조건 현재 나의 디자인을 적용하는 방법 : !important 적용(최고 우선순위)
 */
/* TODO: 사용법
    선택자 {
        속성:값 !important;
    }
 */
 #id-div {
    color:aqua;
}

/* h1 태그 */
#id-heading {
    color: coral;
}
/* h1 태그 */
.class-heading {
    /* color: green !important; */
    color: green;
}
/* h1 태그 */
h1 {
    color: brown;
}

* {
    color: black;
}

결과

Screenshot_213.png

inline

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_cascading.css">
</head>
<body>
    <!-- TODO: 이렇게 디자인 하는 것은 추천하지 않음 : 가독성 저하 -->
    <h1 style="color: blue;">레드향</h1>
    <p>레드향은 한라봉과 귤을 교배한 것으로</p>
    <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>

결과

Screenshot_214.png

Googlefont

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구글 웹폰트 사용하기</title>
    <!-- 웹폰트 적용 : 저작권(무료: 구글 웹폰트, 네이버 나눔글꼴 추천) -->
    <link rel="stylesheet" href="./css/22_google_font.css">
</head>
<body>
    <h1>Html+cSS+javaScript</h1>
</body>
</html>

css

/* 웹 폰트 : 어떤 기기로 접속해도 같은 글꼴을 보여주고 싶다면
    웹 폰트 사용을 고려
    */
    /* 사용법 : css 파일 import 방법
    @import url(css파일경로) */
    /* 구글 웹 폰트 import */
h1 {
    /* 글자 크기 */
    font-size: 60px;
    /* 웹 폰트 사용 코드 */
    /* 스타일1, 스타일2 ... */
    /* cursive : 웹 브라우저 기본 글꼴 중에 하나 */
    font-family: 'Nanum Pen Script', cursive;
}

결과

Screenshot_216.png

폰트 가져오는법

https://fonts.google.com/

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

들어가서 원하는 폰트 검색

Screenshot_217.png

Select Regular 버튼 선택

Screenshot_218.png

import와

CSS rules to specify families 복사

 

css파일에

import 붙이고 style 제거

CSS rules to specify families 은 태그 안에 적기

 

다음 글꼴 사용할때 이미 추가되어 있는 글꼴 지우기

exam google font

Screenshot_219.png

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/23_exam_google.font.css">
</head>
<body>
    <!-- TODO: h1 - Moirai One 구글 웹폰트 적용 -->
    <!-- TODO: p -  Diphylleia 구글 웹폰트 적용 -->
    <h1>홍길동의 블로그</h1>
    <p>안녕하세요 홍길동입니다.
        홍길동의 블로그 홈페이지에 오신 것을 환영합니다
    </p>
</body>
</html>

css

/* 문제 풀이 : Moirai One, Diphylleia */

/* Moirai One 적용 */
h1 {
  /* 글자 중앙 정렬  */
  text-align: center;
  /* 구글 웹폰트 */
  font-family: "Moirai One", cursive;
}
/* Diphylleia */
p {
  /* 글자 중앙 정렬  */
  text-align: center;
  /* 구글 웹폰트 */
  font-family: "Diphylleia", serif;
}

special selector

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인전합 형제 선택자</title>
    <style>
        /* css 작성 : 권하진 않음 */
        /* 사용법 : 형제태그2 1개만 선택됨
            형제태그+형제태그2 {
                    속성:값;
            }
        */
        h3+p {
            color: red;
        }
    </style>
</head>
<body>
    <h3>인접한 형제 선택자</h3>
    <p>p로 감싸여져 있는 현재 문단은 h3과 인접한 형제간입니다.</p>
    <p>body로 감싸여져 있는 현재 문단은 h3과 인접한 형제간dl 아닙니다.</p>
</body>
</html>

결과

Screenshot_220.png

attr special selector

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 - 특수 선택자(포함되는것 : 비슷한것 선택)</title>
    <style>
        /* 값이 단어인것들을 선택 */
        img[alt~="blank"] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <img src="http://placehold.it/600x200" alt="white blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_221.png

attr special selector2

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 - 특수 선택자(문자열을 속성값으로 시작할 경우 선택)</title>
    <style>
        /* 속성의 값이 white 이거나, white- 로 시작되는 태그(요소) 선택 */
        img[alt|="white"] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_222.png

attr special selector2

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 - 특수 선택자(부분 문자열로 시작하는 것 선택)</title>
    <style>
        /* 부분 문자열로 시작되는 태그(요소) 선택 */
        /* 코딩 : ^(문자열의 시작) */
        img[alt^="wh"] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_222.png

attr special selector3

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 - 특수 선택자(부분 문자열로 끝나는 것 선택)</title>
    <style>
        /* 부분 문자열로 끝나는 태그(요소) 선택 */
        /* 코딩 : $(문자열의 끝을 의미) */
        img[alt$="1"] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_223.png

attr special selector4

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 - 특수 선택자(부분 문자열로 포함되는 것 선택)</title>
    <style>
        /* 부분 문자열로포함되는 태그(요소) 선택 */
        img[alt*="an"] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_224.png

virtual selector

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 선택자(같은 태그의 첫번째 태그를 선택)</title>
    <style>
        /* 가상 선택자(같은 태그의 첫번째 태그를 선택) */
        img:first-of-type {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_225.png

virtual selector2

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 선택자(같은 태그의 첫번째 태그를 선택)</title>
    <style>
        /* 가상 선택자(선택한 것의 반대인 것들을 선택) */
        /* not(가상선택자) */
        img:not(:first-of-type) {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_226.png

virtual selector3

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 선택자(같은 태그의 마지막 태그를 선택)</title>
    <style>
        /* 가상 선택자(같은 태그의 마지막 태그를 선택) */
        img:last-of-type {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
    <img src="http://placehold.it/600x200" alt="white-blank">
    <img src="http://placehold.it/300x200" alt="blank b1">
    <img src="http://placehold.it/300x200" alt="blank b2">
</body>
</html>

결과

Screenshot_227.png

virtual selector4

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 선택자(같은 태그의 마지막 태그를 선택)</title>
    <style>
        /* 태그의 앞에 content 값 추가하기 */
        p::before {
            content: "😀";
        }
       
        /* 태그의 뒤에 content 값 추가하기 */
        p::after {
            content: "😎";
        }
    </style>
</head>
<body>
    <p>홍길동입니다.</p>
</body>
</html>

결과

Screenshot_228.png

display div

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/01_display_div.css">
</head>
<body>
    <div class="box">홍길동</div>
    <div class="box2">홍길동</div>
    <div class="box3">홍길동</div>
</body>
</html>

css

/* id선택자 : #, class선택자 : .변수명,
    * : 전체선택자, 태그선택자 */
/* div 특징 : 블럭(block) 속성, 자동 줄바꿈 발생, p태그, h1~h6 태그 */
/* span 특징 : 인라인(inline) 속성, 줄바꿈 없음 , input 태그, img 등 */
/* width, height 속성 무시, 안에 컨텐츠(글)에 따라 크기가 정해짐 */
/* TODO: display 속성 : block <-> inline 변경 가능 */
.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    display: inline;
}
.box2 {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline;
}
.box3 {
    width: 50px;
    height: 50px;
    background-color: yellow;
    display: inline;
}

결과

Screenshot_229.png

display span

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/02_display_span.css">
</head>
<body>
    <span class ="box">홍길동</span>
    <span class ="box2">홍길동</span>
    <span class ="box3">홍길동</span>
</body>
</html>

css

/* span : inline 속성, width/height 속성 무시, 글만큼 크기가 정해짐00 */
.box {
    background-color: blue;
    /* block 속성 지정 */
    display: block;
    /* 가로 크기 */
    width: 50px;
    /* 세로 크기 */
    height: 50px;
}
.box2 {
    background-color: red;
    display: block;
    /* 가로 크기 */
    width: 50px;
    /* 세로 크기 */
    height: 50px;
}
.box3 {
    background-color: yellow;
    display: block;
    /* 가로 크기 */
    width: 50px;
    /* 세로 크기 */
    height: 50px;
}

결과

Screenshot_230.png

저작자표시 (새창열림)

'HTML > Css' 카테고리의 다른 글

[CSS] 홈페이지 만들기  (0) 2023.08.14
[CSS] position  (0) 2023.08.11
[CSS] box collapse schedule  (0) 2023.08.08
[CSS] box, border, padding, margin, width  (0) 2023.08.07
[CSS] 폰트, 밑줄, 글자 속성, 정렬  (0) 2023.08.04
HTML/Css 관련 글
더 보기

티스토리툴바