<div> 요소 </div> - 요소 묶어줌
요소 스타일링 시, <div class="movie"> 를 해주고 <style> .movie {스타일링} </style> 하면 됨
background-color: #eee; - 배경색
border-radius: 20px; - 모서리 둥글게
margin-bottom: 50px; - 아래 여백
padding: 50px;- 내용들이 테두리에 붙어서 너무 갑갑한 느낌이 들면 여유를 주기위해서 씀
width: 500px; - 가로길이
margin-left: auto;
margin-right: auto; - 이 두개는 가운데 정렬
title 을 꾸며주려면, title이 movie 안에 있는 클래스니까,
.movie .title {스타일링} 해주면 됨
프로그래밍을 할 땐 반복적인 코드는 피하는 게 좋은데 css 코드가 겹치는 경우에는,
폴더 이름 css 파일은 styles.css
그리고 각 html 파일에 link 태그를 써야함
<link href="css/styles.css" rel="stylesheet">
rel은 이 페이지와 파일 간의 관계를 알려줌
스타일을 입히는 방법 총 3가지
- <style> 태그
- 외부 css 파일 + link 태그
- style 속성 - <h1 style="color: blue; font-size: 64px;">내용</h1> 이런 식, 세미콜론(;)이 마침표 역할을 해줘서 이어서 쓸 수 있음
간단하게 확인할 땐 1번과 3번 내부에서 주로 해결, 후에 2번으로 넘어가면 훨씬 깔끔
HTML 에서의 코멘트
<!-- 내용 -->
코멘트 웹사이트에 영향 안줌
CSS 에서의 코멘트
/*내용*/
* 코멘트 단축기
- 윈도우 ctrl + /
- 여러 줄 하고 싶으면 ctrl+shift+/
* 유용한 사이트
- w3schools.com
- stackoverflow
- jspiddle.net 테스트할 수 있는 곳
Color Picker - HTML color code 사이트
* 텍스트 색 바꾸기
- color: blue; 이런 식으로 색 이름 쓰기
- RGB - color: rgb(97, 249, 107);
- HEX - color: #61F96B;
font-weight: 100;
- 폰트 굵기 100~900 100이 가장 얇음,
100 200 300 이런식으로만 쓸 수 있음,
폰트와 브라우저에 따라 사용가능,
굵기가 정해져있어서 테스트 해보면서 써야함
text-align: center;
- 정렬, center right left 있음,
이거 안쓰면 기본적으로 왼쪽 정렬
text-decoration:
underline;
- underline은 밑줄, 이렇게
overline 글위에 줄,
line-through는 글을 지우는 듯한 선 이렇게
* 주로 a 태그에 자주 씀
<a href="http://google.com"> 구글로 가는 링크 </a>
이러면 파란 글씨에 밑줄 그어지는데,
a {
text-decoration: none;
}
하면 밑줄 사라짐!
링크를 정렬하기 위해,
a {
text-align: center;
}
하면 정렬 안됨
-> 이유는 링크는 차지하는 공간이 적어서!
그래서, div 태그로 묶으면 공간이 넓어지고 그 안에 링크가 자리잡음,
<div class="menu">
<a href="링크">Link </a>
</div>
그리고 style 태그에서
.menu {
text-align: center;
}
하면 정렬됨
텍스트 크기를 설정하는 방법 2가지
1. Absolute 절대적 - px pt
2. Relative 상대적 - em %
pt는 px 보다 1.33배 정도 큼 ,
%는 부모에 의해 결정되기 때문에 상대적 ,
1em은 100%와 같고 2em은 200%와 같음 ,
같은 200%라도 div2의 부모 div1은 100%라서 2배가 된거고 / div3의 부모 div2는 이미 2배가 된 상태라서 div3는 div2의 2배
파란 줄 사이 - 실제 내용이 들어가 있는 'content area'(콘텐츠 영역)
content area - font-family와 font-size에 따라 정해짐
line-height - 'content area'에 영향 X , 각 줄이 실질적으로 차지하는 공간을 정해줄 수 O
Ex) 99px로 설정하면, 'content area'보다 40px이 많기 때문에 위 아래로 20px의 공간이 추가로 생김
Ex) 반대로 40px로 설정하면, 'content area'보다 19px이 적기 때문에 위 아래로 -9.5px의 공간이 줄어듬
폰트 종류 5개
1. Serif - Times New Roman, 궁서체
끝이 살짝씩 꼬부러진 게 특징
2. Sans-Serif - Arial, 굴림체
안꼬부러짐, 깔끔한 디자인 하기 좋음
3. Monospace - Courier, Courier New
모든글자가 같은 넓이를 차지, 프로그래밍용 폰트로 많이 쓰임
4. Cursive - Comic Sans MS, Monotype Corsiva
필기체
5. Fantasy - impact, Haettenschweiler
특이한 나머지 글꼴들 포함, 지저분해보일수도 있어서 머리말이나 짧은 글귀에서 주로 사용
* 설치되어있는 폰트 사용
<style>
h1 {
font-family: "제 1의 폰트", "제 2의 폰트", 폰트 종류;
}
</style>
제 1의 폰트를 못찾으면, 제2의 폰트를 씀 -> 얘도 없으면 폰트 종류 중에서 아무거나 찾아서 씀
Ex)
<style>
h1 {
font-family: "Times New Roman", "Times", Serif;
}
</style>
""는 빼도 되는데 띄어쓰기가 있으면 써줘야함!
* 갖고있지않은 폰트 사용 ( fonts.google.com )
fonts.google.com 접속
여기에 붙여넣기 하면 폰트를 쓸 수 있음
* 한글 폰트 쓰는 법 ( fonts.google.com/earlyaccess )
fonts.google.com/earlyaccess 접속 - 베타버전 폰트 O
ctrl + f 로 탐색한 후 링크 , font-family 를 복사+붙여넣기 해주면 됨
* 다운로드받은 폰트 사용
프로젝트 폴더에 fonts 파일을 만들고 그 안에 넣음
@font-face {
src: url("폰트 파일 이름");
font-family: "폰트 부를 이름 맘대로";
}
p {
font-family: "폰트 부를 이름 맘대로";
}
하면 폰트가 스타일링한 대로 나옴
* div태그는 단독적인 새로운 줄에 놓아버림
이런 문제는 div -> span 으로 하면 됨
둘의 공통점은 요소들을 묶어주는 것
span은 원래 있던 글의 위치에 영향을 안줌,
특정 텍스트만 스타일링 해주고 싶으면 span 사용
1. 여행 사이트
index.html ↓ ( paris, dokyo, seoul html 같음, <b>태그만 바꿔서 )
<!DOCTYPE html>
<html>
<head>
<title>Travel Website</title>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img class="logo" src="images/logo.png">
<div class="menu">
<a href="index.html"><b>Home</b></a>
<a href="seoul.html">Seoul</a>
<a href="tokyo.html">Tokyo</a>
<a href="paris.html">Paris</a>
</div>
<img class="main" src="images/home.png">
</body>
</html>
styles.css↓
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 165px;
height: 58px;
margin-top: 80px;
}
.menu {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
}
.menu a {
font-size: 16px;
font-family: Helvetica, Sans-Serif;
color: #58595B;
text-decoration: none;
margin-right: 10px;
margin-left: 10px;
}
.main {
display: block;
margin-left: auto;
margin-right: auto;
width: 90%;
}
완성결과! ↓
