웹페이지를 만들기 위한 언어로 웹페이지의 구조를 잡을 수 있다
tag(태그)
대부분의 태그는 끝 태그(closing tag)를 가지고 있지만, 끝 태그를 가지고 있지 않은 태그도 존재
Attribute(속성)
태그의 동작을 제어. 시작 태그(opening tag) 내에 위치하며 한 태그에 여러 속성 지정 가능
아래에서 class
, href
, src
, alt
가 속성
<div class = "title">contents</div>
<a href=”링크1”>contents</a>
<img src=”링크2” alt=”링크3”>
HTML 태그들에 디자인을 입혀주는 것
CSS를 HTML에 적용하는 방법
<h1 style="color: red;">text</h1>
<style>
h2 {
color: black;
}
</style>
<link href=”index.css” rel=”stylesheet” type=”text/css”>```
P {
디자인
}
.class {
디자인
}
#id {
디자인
}
font & test 스타일
font-family
폰트 스타일 지정
font-size
폰트 크기(단위: px, em, pt 등)
font-weight
글씨 두께 조절
font-style
글씨 스타일 변경(이탤릭체 등)
color
글씨 색상 변경(색상표현방법: hex, rgb, hsl 등)
text-align
텍스트 정렬(left, center, right)
ref. 모든 요소의 기본 정렬은 왼쪽정렬임
text-indent
들여쓰기
margin, padding, border & box-sizing
margin: border(테두리)의 바깥 영역
padding: border의 안쪽 영역
border: 테두리
box-sizing: 박스의 크기를 화면에 표시하는 방식을 변경하는 속성으로 크기 예측이 용이함
상속(inheritance) & 그룹(grouping)
상속(inheritance): 부모태그의 스타일은 자식태그에도 적용된다.
단, 자식태그가 다른 속성을 가지고 있다면 그 스타일이 적용됨
그룹(grouping): 여러 선택자(selector)에 한꺼번에 스타일 지정 가능
img 태그로 이미지 삽입
이미지를 웹사이트에 추가할 때 가장 많이 쓰이는 방법
background-image 속성으로 이미지 삽입