[HTML&CSS] chapter

Visual Studio Code

[HTML&CSS] chapter_01

DEVELOPERS_Ivan ㅣ 2023. 8. 7. 14:55

01_selector_basic

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

/* 주석 단축키 : ctrl + / */

/* 코딩 용어 : /(슬래쉬), \(역슬래쉬), ;(세미콜론) */

/* 기본선택자 : html 태그선택자 */

/* 사용법 :

태그선택자 {

속성:값;

}*/

h1 {

/* 글자색 */

color: burlywood;

/* 바탕색 */

background-color: blue;

}

02_default_wildcard

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>안녕하세요 홍길동입니다.</p>

</body>

</html>

/* (wildcard) * : 전체 선택자 */

/* 사용법 :

* {

속성:값;

}

* {

color: red;

}

h1 {

color: aqua;

background-color: blue;

}

03_default_id

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

</body>

</html>

/* id 선택자 : 기본선택자 */

/* id 속성(공통) : 태그에 이름을 부여하는 속성(변수명), 유일(관례), js 사용 */

/* name 속성(공통) : 태그에 이름을 부여하는 속성(변수명), jsp, react(서버쪽 통신) */

/* 코딩용어 : #(샵) */

/* 사용법)

#id 선택자 {

속성:값;

}

/* px(픽셀) : 화면 화소(단위), 고정크기 예_ cm, l 등 */

#header {

/* 가로크기 */

width: 800px;

/* 배경색(바탕색) */

background: red;

}

#wrap {

width: 800px;

}

#content {

width: 300px;

background: green;

}

04_exam_1

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>안녕하세요</p>

<p>또만났군요</p>

</body>

</html>

h1 {

/* 글자색 */

color: red;

}

p {

/* 글자색 */

color: blue;

}

05_default_class

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

/* 클래스 선택자 */

/* id선택자 vs class 선택자 차이

id선택자 : 중복 불가(이름)

class선택자 : 중복 허용(이름) 실무 디자이너 사용

/* 사용법 :

.클래스명 {

속성:값;

}

.select {

/* 글자색 */

color: red;

}

06_exam_css_1
목록 앞에 점 없애기 목록 앞 스타일 바꾸기

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>- 스토리보드 제작</li>

</ul>

</body>

</html>

h3 {

/* 글자색 */

color: blue;

/* font-family : (폰트 스타일) : 맑은 고딕 등 */

font-family: "맑은 고딕";

}

li {

/* 목록 앞에 점 없애기 */

/* list-style-type: none(없음) */

/* list-style-type: disc(원) */

/* list-style-type: square(사각형) */

list-style-type: none;

}

07_exam_css_2

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>

경상남도 거제시에 있는 섬으로 우리나라에서

<span>제주도 다음으로</span>입니다. <span>62개의 섬으로 구성</span> 되어

있는데 <span>면적은 380.1</span>이고 275km입니다.

</p>

</body>

</html>

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;

}

08_exam_css_3
이미지 가져오기 함수 : url(이미지경로), 굵은 글씨

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

<p>

※ 다양한 객실이 준비되어 있어요. 예약을 원하시는 분은 전화주세요.

애완동물도 동반 가능합니다. 감사합니다.^^

</p>

</body>

</html>

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;

}

09_exam_css_4

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>

<span class="bold">장소</span> :

</li>

</ul>

</body>

</html>

.bold {

/* 굵은 글씨 */

font-weight: bold;

}

.location {

/* 글자색 */

color: green;

/* 밑줄 */

text-decoration: underline;

}

10_exam_css_5

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

원산지는 주로 <span class="font1">동남아시아</span>, 중앙아메리카,

남아메리카, <span class="font1">아프리카</span>이며 대부분 소형의 아름다운

물고기입니다.

</p>

<p>

열대어는 <span class="font2">민물에 사는 열대어</span>

와

로 나눌 수 있습니다.

</p>

</body>

</html>

.font1 {

/* 글자색 */

color: red;

/* 밑줄 */

text-decoration: underline;

/* 굵은 글씨 */

font-weight: bold;

}

.font2 {

/* 글자색 */

color: blue;

/* 굵은 글씨 */

font-weight: bold;

}

11_exam_css_6

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>

<span id="fly">잠자리</span>는 잠자리목에 속하는 곤충으로 전 세계적으로

분포하는 포식성 곤충이며 여러 가지 해충을 잡아먹는 유익한 곤충입니다.

</p>

<p>

앞머리에 커다란 <span class="blue">한 쌍의 겹눈</span>을 가지고 있습니다.

또한 날카로운 턱을 가지고 있으며 이빨이 튼튼합니다. 파리, 모기, 나비 등의

살아있는 곤충을 잡아먹고 삽니다.

</p>

</body>

</html>

/* 글자 세로 간격 속성 */

p {

/* 글자 크기 */

font-size: 14px;

/* 글자 세로 간격 */

line-height: 180%;

}

/* id 선택자 #(샵) 붙일 것 */

#fly {

/* 글자색 */

color: red;

/* 굵은 글씨 */

font-weight: bold;

}

/* class 선택자 : .(점) 붙일 것 */

.blue {

color: blue;

}

12_exam_css_7
글자 설정 간격 굵기 스타일 크기 목록 앞 항목 사각형

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>- 배낭여행이란?</h3>

힌트 : li - list-style-type: square 적용, 글자크기 16px p - 자간 150%,

글자크기 14px body - 돋음 폰트 h3 - 맑은고딕 폰트

<p>

여권, 항공권 등 여행 시 필요한 것만을 준비하고 현지에서 숙박, 식사 등을

해결하는 자유여행을 말합니다.

</p>

<h3>- 배낭여행의 종류</h3>

<p>

배낭여행에는 모든 일정을 자신이 정하는 자유 배낭, 여러 명이 같이 출발 전

숙소와 교통편 등을 미리 예약하고 여행하는 단체 배낭, 자유 배낭과 단체

배낭의 중간 형태인 패키지 배낭여행 등이 있습니다.

</p>

<ul>

<li>

<span>여권 준비</span> : 여권이 없으면 신청하고 여권 유효기간을 반드시

체크.

</li>

<li>

<span>비행기 예약</span> : 항공사의 예매 사이트나 예약 대행 사이트 이용.

</li>

<li><span>여행 스케줄</span> : 스케줄은 가능한 세부적으로 잘 짜야 함.</li>

<li>

<span>짐싸기</span> : 꼭 필요한 물품만으로 최대한 간단하게 짐 준비.

</li>

</ul>

</body>

</html>

/* 힌트 : 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;

}

13_font_family

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1 class="font_arial">Lorem ipsum</h1>

<p class="font_roman">lorem ipsum dolor sit amet</p>

<p class="font_italic">안녕하세요 이대훈입니다.</p>

</body>

</html>

.font_arial {

/* 폰트 스타일 : pc 에 폰트가 있어야 화면에 적용됨 */

/* 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: right; */

}

14_attribute_basic
속성 선택 마우스 커서 깜빡임

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

</form>

</body>

</html>

/* 속성 선택자 */

/* 사용법 :

태그[속성="값"] {

속성:값;

}

input[type="text"] {

background-color: red;

}

input[type="password"] {

background-color: blue;

}

15_desc_basic

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Lorem ipsum</h1>

홍길동입니다.

</div>

</body>

</html>

/* 후손 선택자 : 특수 선택자 */

/* 부모 태그 밑에 있는 자식태그들 모두 선택 */

/* 사용법 :

(부모)선택자 (자식)선택자 {

속성:값;

}

#header h1 {

color: red;

}

16_desc_basic

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Lorem ipsum</h1>

홍길동입니다.

</div>

</body>

</html>

/* 자식 선택자 */

/* 부모선택자 바로 아래 자식만 선택해서 디자인 적용 */

/* 사용법:

(부모)선택자 > (자식)선택자 {

속성:값;

} */

#header > h1 {

color: red;

}

17_etc_action

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

/* 반응 선택자 */

/* 선택자:hover - 마우스가 위로 올라가면 디자인 적용 */

h1:hover {

color: red;

}

/* 선택자:active - 마우스를 클릭하면 디자인 적용 */

h1:active {

color: blue;

}

18_etc_state

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

/* 상태 선택자 */

/* input: 현재 입력가능한 상태일때 디자인 적용 */

input:enabled {

background-color: white;

}

/* input: 현재 입력 불가능한 상태일때 디자인 적용 */

input:disabled {

background-color: rgb(202, 26, 26);

}

/* input: 커서가 있을때(포커스) 디자인 적용 */

input:focus {

background-color: orange;

}

19_etc_structure
반복 진수별 색깔 지정 : red, (#16진수 6자리, 색상표 표기)
10진수 : 1 ~ 9까지 , 16진수: 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수: 0,1
16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

/* 구조 선택자 */

li {

/* 목록 앞에 점 없애기 */

list-style-type: none;

}

/* 2n : 짝수, 2n+1 : 홀수

사용법:

선택자:nth-child(수식) {

속성:값;

}

li:nth-child(2n) {

/* 10진수 : 1 ~ 9까지 , 16진수: 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수: 0,1 */

/* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */

/* 색깔 지정 : red, (#16진수 6자리, 색상표 표기) */

background-color: #ff0003;

}

li:nth-child(2n + 1) {

background-color: #800000;

}

20_exam_css_8
화면 단위 고정 크기 설정

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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;

}

21_font_size

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

/* 글자 단위 : px, em(rem), % */

/* 1st p태그 선택 */

p:nth-child(1) {

/* 상대 크기 단위(글자) */

/* 1.0em == 16px(웹 브라우저 기본 글자 단위:부모 태그에서 상속받음) */

/* font-size: 100% == 1.0em == 16px */

/* font-size: 1.0em; */

/* 고정 크기 */

font-size: 16px;

}

/* 2nd p태그 선택 */

p:nth-child(2) {

font-size: 1.5em;

}

/* 3rd p태그 선택 */

p:nth-child(3) {

font-size: 2em;

}

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[HTML&CSS] chapter_03 (0)	2023.08.09
[HTML&CSS] chapter_02 (0)	2023.08.07
[HTML] chapter_03 (0)	2023.08.04
[HTML] chapter_02 (0)	2023.08.03
[HTML] chapter_01 (0)	2023.08.02

기술 블로그

[HTML&CSS] chapter_01

'Visual Studio Code' 카테고리의 다른 글

티스토리툴바