[기본 HTML태그 정리]
<!DOCTYPE html>
: HTML파일을 쓰기 위한 선언
<meta charset="utf-8">
: 한글 깨짐 현상을 방지하기 위해서, 직접 encoding을 "utf-8"방식을 사용하도록 명령
<title>My Frist Website</title>
: 페이지 제목
<h1>My First Page</h1>
<h2>I love <i>HTML</i>!</h2>
: 페이지의 머리말, 중요할 수록 <h1>, 덜 중요할 수록 <h6>!
: 텍스트를 날려쓰고 싶을때, italic의 약자인 <i>태그 사용
<p> Life is too long, we need to learn <b>HTML</b> </p>
: paragraph 문단
: 텍스트를 굵게 쓰고 싶을때, bold의 약자인 <b>태그
<a href = "www.google.com"> 구글 주소 입니다. </a>
: 하이퍼링크(Anchor)를 달때는 <a>태그, href = 속성을 가짐
: <a href = "가고 싶은 주소"> 내용 </a>
: <a href = "가고 싶은 주소" target="_blank"> 내용 </a>, target = "_blank"를 통해서 외부 페이지로 바로 넘어가지 않도록 해준다.
<img scr = "사진의 주소", width = "가로 길이", height ="세로 길이"> 내용 </img>
: <img>태그, scr = 속성을 가짐
: width, height 를 이요해서 사진의 가로 - 세로 길이를 조정할 수 있음.
<HTML 사이즈 설정>
= HTML에서 크기 설정할때, 픽셀 단위 사용
= 픽셀 : 이미지 확대했을때, 정사각형 ex) width = "100px" -> 가로가 정사각형 픽셀 100개로 되어있음
= <img scr = "사진의 주소", width = "100%"> -> %를 사용해서도 사이즈를 조절할 수 있음.
[Class클래스와 id 아이디]
HTML 요소에게 '이름'을 주는 방법
1. 클래스 class
HTML
<p class = "big-blue-text"> First </p>
<p> Second </p>
<p class = "big-blue-text"> Third </p>
CSS
.big-blue-text {
color: blue;
font-size: 100px;
}
p 요소의 클래스 이름으로 "big-blue-text"를 설정해줬으므로,
CSS에서 스타일을 입혀줄때 .마침표 찍고 ! 클래스 이름 적어주면 됩니다. => .클래스 이름
2. 아이디 id
HTML
<p id="favorie-text"> Second</p>
CSS
#favorite-text {
color: lime;
text-align: center;
}
p 요소의 아이디로 "favorite-text"가 있으므로,
CSS에서 스타일 입혀줄때 #샵 표시하고 ! 아이디 이름 적어주면 된다. => #아이디 이름
1. 같은 클래스 이름은 여러 요소가 가질 수 있지만, 아이디는 오직 하나의 요소만 공유할 수 있다!
2. 한 요소는 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가져야 한다.
(한 요소가 클래스도 여러개 갖고, 아이디 하나 갖는것은 가능)
[<div>태그]
= 요소들을 묶어주고 싶을때 <div>태그 사용
= 묶어주고 싶은 요소들끼리 <div = "클래스 이름">태그 쓰고, 묶어줄 내용들은 tab키로 들여쓰기 해주기
HTML
<div = "movie">
</div>
CSS
.movie{
background-color: #eee;
boarder-radius: 20px;
margin-botton: 50px;
padding: 50px;
width : 500px;
}
: background-color로 회색 배경 넣기
: border-radius로 모서리 둥글게 해주기
: margin-bottom으로 아래 간격 주기
: padding을 통해서, 모서리로부터 멀리 떨어지기
.movie .tilte{
text-aligned: center;
}
: movie클래스 안에 title클래스에 css디자인 주기
[CSS파일 따로 쓰기 / link로 연결]
= 프로그래밍할땐, 반복적인 코드는 피해주는 것이 좋음
(1) css 폴더 만들고, style.css라는 이름의 파일 만들어주기
(2) html에 써줬던, <style> 태그 내용들 style.css파일에 넣어주기
(3) html파일과 링크 연결해주기
<link href = "css/styles.css" rel="stylesheet">
css폴더 안에 있는, styles.css파일, 이 html파일과 연결해주는 파일간의 관계는 stylesheet!
*외부 css파일에 디자인을 하고, html파일에 연결을 해주는 방법이 가장 권장되는 방법
[코멘트]
= html에서의 코멘트: <! -- 코멘트 내용 -->
= css에서의 코멘트: /* 코멘트 내용 */
파이썬에서, #으로 주석을 넣는것처럼 코멘트를 넣어야 복잡한 부분들을 설명할 수 있다!
[기본 CSS 속성 정리]
: 사이트에 CSS스타일을 입혀주기 위해, <style>태그를 사용할 수 있다.
<!-- html 코드>
<style>
/ * CSS 코드 */
</style>
(1) 폰트 크기
: CSS에서 폰트 크기 표현할 수 있는 단위, px 픽셀
<style>
h2 {
font-size: 72px;
}
</style>
(2) 텍스트 정렬
: 글을 왼쪽-가운데-오른쪽 정렬 가능
<style>
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
</style>
(3) 텍스트 색
: color 속성 사용하기
<style>
h1 {
color: lime;
}
</style>
(4) 여백
: margin 속성 사용해서, 요소 사이에 여백 설정하기
: 여백의 크기는 픽셀 단위로 설정 px
: margin-bottom, margin-up, margin-left, margin-right
<style>
h1 {
margin-botton: 80px;
}
</style>