exam_train
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="col7">01:44</td>
</tr>
<tr>
<td class="train">230</td>
<td>수원</td>
<td>대전</td>
<td>11:30</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;
}
결과
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;
}
결과
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>
결과
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;
}
결과
폰트 가져오는법
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
들어가서 원하는 폰트 검색
Select Regular 버튼 선택
import와
CSS rules to specify families 복사
css파일에
import 붙이고 style 제거
CSS rules to specify families 은 태그 안에 적기
다음 글꼴 사용할때 이미 추가되어 있는 글꼴 지우기
exam google font
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>
결과
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>
<!-- 빈 이미지를(더미 이미지) 인터넷에서 가져오는 링크 소개 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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에서 표준 명명법: 단어와 단어사이는 -(마이너스, 대쉬) 붙임 -->
</body>
</html>
결과
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>
결과
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;
}
결과
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;
}
결과
'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 |