[코드잇] HTML/CSS 시작하기 완강
클래스(class)
- 일종의 이름
<태그 class="클래스명">.클래스명 {}<태그 class ="클래스명1 클래스명2">가능- 클래스명 중복 가능
아이디(id)
<태그 id="클래스명">#클래스명 {}- 하나의 태그에 여러 아이디 불가능
- 아이디명 중복 불가능
⇒ 여러 요소를 스타일링 하고 싶으면 class, 한 요소만 스타일링 id
태그
- 요소들 영역 나누기
- 내용을 새로운 단독 줄로 사용
CSS파일 따로 쓰기, link 연결
.css로 css만 따로 작성 가능<head>태그 내<link href="css파일 경로" rel="stylesheet">
스타일을 적용하는 방법
<style>태그- 본문 태그 내에서
<태그명 style="속성1: 속성값; 속석2: 속성값;"> - 외부 CSS 파일 +
<link>태그
코멘트
- HTML 파일 :
<!-- 주석 --> - CSS 파일 :
/* 내용 */ - 단축키 : Ctrl + /, 여러줄 Ctrl + Shift + /
도움되는 웹사이트
- stackoverfolow
- jsfiddle.net
텍스트 색
color: 색 이름;color: rgb(r값, g값, b값);color: hex값;
기타 속성
font-weight: 폰트 굵기, 100부터 900까지 100단위로, normal(400), bold(700)text-align: 텍스트 정렬, left, right, centertext-decoration: underline, overline, line-through, none 등
가운데 정렬
- 안되는 경우, 해당 영역의 범위 확인하기, a태그의 경우, 딱 글자만큼의 공간을 가짐.
폰트 크기
- 절대적 - px, pt
- 상대적 - em, % (부모 요소 기준)
줄 간격
line-height
기본 폰트 설정
- Serif
- Times New Roman
- 궁서체
- Sans-Serif
- Arial
- 굴림체
- Monospace (모든 글자폭 같음)
- Courier
- Courier New
- Cursive (필기체)
- Fantasy (그 외)
font-family : "폰트명", "제2의 폰트", 폰트종류;- 폰트명 사용, 없으면 제2의 폰트, 이것도 없으면 폰트종류 중 하나 사용
구글 폰트 사용
- fonts.google.com
- 링크 태그 복사해
<head>태그에 넣고, 적용할 부분에font-family로 불러오기
폰트 파일 사용
@font-face {
src: url("경로/폰트명");
font-family:"폰트 이름 주기"
}span 태그
- 요소들을 묶어줌
- 기존의 위치에 영향을 주지 않음
여행 페이지 만들기
- CSS 파일을 따로 만들어 link로 연결해주었다.
- 이미지의 경우 페이지 크기를 기준으로 하는 %로 적용하니 화면 크기를 줄였을 때도 보기가 좋았다.
Data Engineer🐣