<Day-31> html 실습 / CSS이론
1) 텍스트 작성하기
<h> 태그
Heading level
<!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>HTML</title>
</head>
<body>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</body>
</html>
<단축키>
ctrl + shift + p
Alt + O
Live server
ㆍ 텍스트 강조
ㆍ strong 태그
텍스트의 의미를 강조하고 싶을 때 사용
시각적으로 텍스트를 굵게 표시하는 것뿐 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역할
중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조
ㆍ em
텍스트의 의미를 강조하고 싶을 때 사용
텍스트가 기울어져 보이면서 강조 효과를 낼 수 있음
중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조
<!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>strong and em</title>
</head>
<body>
<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>
<p>여기서부터는 <strong>위험하니까 <em> 절대로</em></strong> 지나가지 마세요.</p>
</body>
</html>
2) 그룹짓기
관련있는 요소끼리 그룹으로 묶어 놓기
공간 분할 태그
ㆍ div 태그
ㆍ span 태그
특정 부분에만 협소하기
<!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>div and span</title>
</head>
<body>
<div class="movie">
<h1>영화 소개</h1>
<p>영화를 소개하는 페이지입니다.</p>
<p>이번 영화의 <span>하이라이트</span> 장면을 바로 여기입니다.</p>
</div>
<div class="tv">
<h1>TV 프로그램 소개</h1>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>
</body>
</html>class 속성은 css를 적용하기 위한 식별자로 사용하는 속성
3) 목록 만들기
ㆍ ul(unordered list) 태그
순서가 없는 비순서형 목록을 생성함.
목록 내용은 li(list item) 태그로 구성
목록 내용마다 글머리 기호(bullet point)가 붙음
ㆍ ol(ordered list) 태그
순서형 목록을 생성할 때 사용
li 태그로 목록 내용을 구성
목록 내용에 번호가 붙음
ㆍ dl(description list) 태그
정의형 목록을 만들 때 사용(용어와 용어 설명을 나열한 형태의 목록)
dt(description term) 태그로 용어를, dd(description details) 태그로 용어 설명을 작성
<!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>list tag</title>
</head>
<body>
<h1>판매 중인 과일</h1>
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>
<h2>오늘 할일</h2>
<ol>
<li>아침 먹기</li>
<li>점심 먹기</li>
<li>저녁 먹기</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HTML은 HYPER Text Markup Language의 약자로
웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
<dt>CSS</dt>
<dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를
꾸미기 위한 목적으로 개발된 언어입니다.</dd>
</dl>
</body>
</html>
4) 링크와 이미지 넣기
ㆍ a 태그
HTML에서 내부나 외부 링크를 생성
a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용하고, 그 외에 target, title 속성을 선택해서 사용 가능
- href 속성
a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용합니다.
- target 속성
a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정합니다.
속성값으로 _blank, _parent, _self, _top을 사용할 수 있음
부모 창에 가서 연결
top 처음 시작했던 탭에 가서 바꿔
- title 속성
링크를 설명할 수 있는 텍스트를 작성 (설명 잘 써놔야 상위노출 잘 됨)
<!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>a tag</title>
</head>
<body>
<a href="https://www.gilbut.co.kr" target="_blank" title="도서출판 길벗">길벗 홈페이지<br></a>
<a href="https://www.gilbut.co.kr" target="_self" title="도서출판 길벗">길벗 홈페이지</a>
<!-- blank 새 창에서 연결-->
<!-- self 해당 창에서 링크 연결됨-->
</body>
</html>ㆍ img 태그
HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용
src 속성과 alt 속성으로 구성됩니다.
- src(source)
삽입하려는 이미지의 경로를 입력하는 속성
HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
| 기호 | 설명 |
| ./ | 현재 폴더 |
| ../ | 상위 폴더 |
- alt 속성
삽입한 이미지 객체를 설명할 수 있는 텍스트를 작성
* 이미지 링크
img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동 가능
<!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>a tag</title>
</head>
<body>
<img src="../image/snow1.jpg" alt="눈 오는 날">
<a href="https://www.google.com" target="_blank"><br>
<img src="./google_logo.png" alt="구글 로고">
</a>
</body>
</html>
5) 폼 구성하기
ㆍ form 태그
폼 양식을 의미하는 태그
HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성
form 태그는 action과 method 속성을 함께 사용합니다.
● action 속성
action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적습니다.
● method 속성
method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적습니다. 속성값으로 get 또는 post를 사용할 수 있습니다.
ㆍinput 태그
로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용
input 태그에는 type, name, value 속성이 있는데,
● type 속성
type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정
type 속성은 필수로 사용해야 하고,
● name 속성
입력 요소의 이름을 작성합니다. 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됩니다. 서버에서는 지정된 이름으로 입력 요소를 식별할 수 있습니다.
name과 value 속성은 선택해서 사용할 수 있습니다.
ㆍfiled set
form 태그 안에 사용된 다양한 상호작용 요소를 fieldset 태그를 사용해 그룹 지을 수 있음
그룹별로 박스 모양의 테두리 생성
그룹 지은 요소들은 legend 태그로 이름을 붙일 수 있음
<!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>fieldset tag</title>
</head>
<body>
<form action = "#">
<fieldset>
<legend>기본 정보</legend>
<p>
<label for = "userid">아이디</label>
<input type = "text" id="userid">
</p>
<p>
<label for="psswd">비밀번호</label>
<input type="password" id="passwd">
</p>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<p>
<label for = "age">나이</label>
<input type = "number" id="age">
</p>
<p>
<label for="recommender">추천인</label>
<input type="text" id="recommender">
</p>
</fieldset>
</form>
</body>
</html>
ㆍ select, option, optgroup 태그
select 태그를 사용하면 콤보박스(combobox)를 생성할 수 있습니다. 콤보박스에 항목 하나를 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용합니다.
chap.04
1. CSS 문법 살펴보기
1) 문법 형식
선택자와 선언부로 구분
선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역입니다.
선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호({}) 안에 넣습니다
2) 주석
/* 주석 내용 */2. CSS 적용하기
1) 내부 스타일 시트 사용
HTML 파일 내부에 CSS 코드를 작성하는 방법
head 안에 sytle태그 사용
웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석합니다
body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있는 장점
그러나 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로는 좋지 못함
<head>
<title>내부 스타일 시트(Internal Style Sheet)</title>
<style>
h1{
color:blue;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
</body>
2) 외부 스타일 시트 사용
CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법
CSS 파일을 HTML 문서에서 연결할 때는 link 태그를 사용
<link rel="stylesheet" href="css 파일 경로">
<head>
<title>외부 스타일 시트(External Style Sheet)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>외부 스타일 시트</h1>
</body>*실무에서는 대부분 외부 스타일 시트 방법을 사용합니다.
외부 스타일 시트 방법은 코드를 유지 보수하기가 편하고 성능적으로도 가장 좋기 때문
3) 인라인 스타일 사용
HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법
태그에 직접 CSS 코드를 작성하는 방식이라서 CSS의 기본 문법 형식에서 선택자 부분이 필요 없습니다
<body>
<h1 style="color:red; font-size:24px">인라인 스타일</h1>
</body>
chap.05
1. 기본 선택자 사용하기
선택자는 CSS를 적용할 태그(요소)를 지정하는 문법적인 영역
1) 전체 선택자
HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법
* 기호를 사용
<style>
*{
color:red;
}
</style>
(중략)
<h1>전체 선택자</h1>
<p>전체 선택자는 모든 요소를 한 번에 선택할 수 있습니다.</p>
2) 태그 선택자
HTML 태그명으로 선택자를 지정하는 방법
선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택함
<style>
p{
color:blue;
}
</style>
(중략)
<h1>태그 선택자</h1>
<p>태그 선택자는 태그명과 일치하는 태그를 모두 선택합니다.</p>
<p>따라서 모든 p태그의 색상은 파란색이 됩니다.</p>
3) 아이디 선택자
id 속성값을 이용해 선택자를 지정하는 방법
이때 속성값 앞에는 # 기호를 붙여 구분합
<style>
#title{
color:green;
}
</style>
(중략)
<h1 id="title">아이디 선택자</h1>
<p>아이디 선택자는 id 속성값을 이용해 선택자를 지정하는 방법입니다.</p>* id 속성값은 하나의 HTML 문서 안에서 고유한 값이어야 함.
예를 들어, A.html에 id 속성값이 title인 태그가 있다면 A.html에서는 더 이상 태그의 id 속성값을 title로 지정할 수 없습니다. 단, B.html과 같은 다른 페이지에서는 가능
4) 클래스 선택자
class 속성값을 이용해 선택자를 지정하는 방법입니다.
속성값 앞에 . 기호를 붙임
class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있음.
<style>
.red{
color:red;
}
.blue{
color:blue;
}
</style>
(중략)
<h1 class="red">클래스 선택자</h1>
<p class="blue">class 속성값으로 선택자를 지정합니다.</p>
<p class="blue">class 속성은 id 속성과는 다르게 속성값을 중복해서 사용할 수 있습니다.</p>
5) 기본 속성 선택자
HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법
속성과 속성값까지 정확하게 일치하는 요소에 스타일을 적용하고 싶다면 속성과 값을 함께 명시
<style>
a[href]{
color:red;
display:block; /*a 태그에 href 속성이 있는 요소에 적용*/
}
</style>
(중략)
<a href="#">기본 a 태그</a>
<a href="#" target= "_blank">새 창으로 열리는 a 태그</a>
<style>
a[target="_blank"]{
color:red; /*a 태그의 target 속성값이 _blank인 요소에 적용*/
}
</style>
(중략)
<a href="#">기본 a 태그</a>
<a href="#" target= "_blank">새 창으로 열리는 a 태그</a>
6) 문자열 속성 선택자
MDN 사이트(https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors)
| 형식 | 설명 |
| [속성~=문자열] | 속성값에 문자열이 포함되어 있으면 선택합니다(단어 기준). |
| [속성|=문자열] | 속성값이 문자열과 같거나 문자열-(하이픈)으로 시작하면 선택합니다. |
| [속성^=문자열] | 속성값이 문자열로 시작하면 선택합니다. |
| [속성$=문자열] | 속성값이 문자열로 끝나면 선택합니다. |
| [속성*=문자열] | 속성값에 문자열이 포함되면 선택합니다(전체 값 기준). |