HTML 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
상자 요소
Block Elements
상자(레이아웃)을 만들기 위한
요소들을 말한다.
DIV, H1, H2, H3, P, UL, HEADER 등..
글자 요소
Inline Elements
글자를 만들기 위한 요소들을 말한다.
SPAN, A 등..
가로 너비 / 세로 너비
Width
가로너비가 최대한 늘어나거나 반대로 줄어드는 기본 특징
Height
세로 너비는 항상 최대한 줄어든다.
상자 크기
Size
상자 크기를 지정하거나 지정할수 없는 기본 특징
border: 3px solid
CSS 작성하기
태그 선택자
클래스 선택자
하위(후손) 선택자
가상클래스 :hover - HTML 요소에 마우스커서가 올라가있는 동안 선택한다.
가상클래스 : active - HTML 요소에 마우스를 클릭하고 있는 동안 선택한다.
박스모델 - HTML 요소의 형태를 만든다.
글꼴, 문자
배경
배치 - position
정렬 - flex
전환 - transitions
변환 - transforms
띄움 - floations
애니메이션 - animations
그리드 - Gird 레이아웃 지정
다단 - Columns
필터 - filters
- 상자 모양
- 글자 모양 : word-break 속성
- 배경 색상과 이미지 추가하기
- 상자 정렬
- 상자 모양 변형
- 애니메이션 추가
- 화면 크기에 맞게 CSS 바꾸기
JS 작성하기
HTML 요소를 찾아 변수에 저장
const els = document.querySelectorAll('CSS선택자')
const el = document.querySelector('CSS선택자')HTML 요소에 CSS 지정(CSS속성은 낙타 표기법으로 작성)
const el = document.querySelector('CSS선택자')
el.style.backgroundColor = 'red'
// el.style.CSS속성 = '값' HTML 요소의 내용으로 문자를 추가(문자는 HTML 코드로 해석)
const el = document.querySelector('CSS선택자')
el.innerHTML = '<span>Hello~</span>
// el.innerHTML = 'HTML 코드'
HTML 요소를 '클릭'하면 함수를 실행
const el = document.querySelector('CSS선택자')
el.addEventListener('click', function() {
console.log('클릭했어요!')
})
// el.addEventListener('click', 함수)
찾은 HTML 요소의 개수만큼 함수를 실행
const el = document.querySelectorAll('CSS선택자')
els.forEach(function (el, index) {
console.log(index, el)
})
// els.forEach(함수)
