Semantic
HTML 요소는 semantic하게 작성되어야 한다. 웹 페이지를 이루는 요소에 의미에 맞는 태그를 사용하는 것이 바람직!
- SEO(Search Engine Optimization, 검색 최적화)
검색 엔진은 HTML 코드를 분석해 사이트에 노출, 크롤러가 페이지의 구성요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다. - 유지보수성
페이지를 유지보수할 때 편리하다. semantic 태그를 활용해 컨텐츠를 적절히 구분하자.
<header>: 헤더 - 로고, 메뉴 아이템 등
<footer>: 푸터 - 페이지의 하단 영역
<main>: 메인 - 콘텐츠 영역임을 표시 -> 한번 사용이 바람직
<h1>~<h6>
<nav>: 네비게이션 - 다른 곳으로 이동 가능한 링크
<aside>: 콘텐츠와 직접 연관이 없는 부분 (예: 광고)
<article>: 하나의 의미있는 요소 - 예: 기사 리스트 중 기사 하나
<section>: 그룹화를 목적, article 포함 CSS Display
요소를 블록, 인라인 요소 중 어느 쪽으로 처리할지, 그리고 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
inline element:
인라인 요소가 아닌 것을 인라인처럼 쓸 수 있게
- 본인의 원래 크기만큼만 차지 -
span,a- 인라인 요소는 사이즈 지정 불가능. - width, height 적용 X
⇒ div도 인라인처럼 쓸 수 있음- div는 원래 블록 요소이기 때문에 display: block은 의미 없음.
block element: 블록이 아닌 요소에게 블록의 성질을 줌
⇒ 크기값을 가지기 때문에 사이즈를 지정할 수 있다!
전체를 차지한다. 한줄에 한개만 배치된다.
inline-block element ⇒ 인라인이지만 크기를 조정하고 싶을 때 사용!
기본적으로는 인라인처럼 실행되지만, 블록처럼 크기를 조정할 수 있다.
flex ⇒ flex container안의 아이템들을 인라인처럼 width만큼만 차지하도록 배치.
장점: 레이아웃을 쉽게 구성 ⇒ 정렬을 할 수 있다.
flex => 컨테니어가 수직으로 쌓임
inline-flex => 컨테이너가 수평으로 쌓임..d-flex { display: flex; justify-content: center; }
- none: 화면에 안보이게 한다.
장점: 크기를 차지 하지 않는다.
Justify-content ⇒ 가로 정렬
justify-content: flex-start ⇒ 컨테이너 왼쪽 정렬, default
justify-content: flex-end ⇒ 컨테이너 오른쪽 정렬
justify-content: center ⇒ 가운데 정렬
justify-content: space-between ⇒ 같은 간격을 사이에 두면서 정렬
justify-content: space-around: 양끝에 간격을 두면서 정렬
align-items ⇒ 세로 정렬
세로의 크기가 없으면 정렬되지 않는다.
align-items: flex-start ⇒ 맨 위
align-items: flex-end ⇒ 맨 끝
align-items: center ⇒ 가운데 정렬
align-items: baseline ⇒ 컨테이너의 시작 위치 정렬
align-items: stretch ⇒ 컨테이너 크기에 맞게 늘린다.
CSS Animation
애니메이션을 나타내는 css 스타일 + 중간 상태를 나타내는 키 프레임
- %로 25% 단위로 진행상황 나눌 수 있다. 세부적으로 나눌 수 있음
<style>
div {
animation-name: anim; ⇒ 애니메이션 이름 설정, 키프레임에서 사용
animation-duration: 2s; ⇒ 애니메이션 한번 재생에 걸리는 시간
animation-delay: 1s; ⇒ 애니메이션 시작을 지연할 시간
default값은 0 - 속성을 적용하자마자 애니메이션 시작
animation-iteration-count: 3; ⇒ 애니메이션 재생하는 횟수
}
</style>
@keyframes anim {
/* from {
left: 0px;
}
to {
left: 100px;
} */
0% {
left: 0px;
}
50% {
left: 200px;
}
100% {
left: 100px;
}
} animation-timing-function : 애니케이션 키프레임 사이의 재생 속도 조절, 단계별 재생 속도
ease(기본값)
ease-in(천천히 애니메이션 시작)
ease-out
ease-in-out
linear(일정한 속도로 진행)
실습. 애니메이션 상하좌우 움직이기
<html>
<head>
<style>
.d {
position: relative;
border-radius: 50px;
background: pink;
width: 100px;
height: 100px;
animation-name: right;
animation-delay: 1s;
animation-duration: 3s;
animation-iteration-count: 6;
animation-timing-function: ease;
}
@keyframes right {
0% {
left: 0px;
top: 0px;
}
25% {
top: 0px;
left: 300px;
}
50% {
top: 300px;
left: 300px;
}
75% {
left: 0px;
top: 300px;
}
100% {
top: 0px;
left: 0px;
}
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
실습. 문자 애니메이션
<html>
<head>
<style>
p {
position: relative;
animation-name: ani;
font-size: 10px;
animation-duration: 3s;
animation-iteration-count: 1;
}
@keyframes ani {
0% {
width: 0;
left: 1920px;
}
100% {
width: 100%;
left: 0px;
}
}
</style>
</head>
<body>
<p>
"As I relax on the sofa and gaze around a room a thought hits me: this is
exactly the place I've been looking for all my life. A little hideaway in
some sinkhole somewhere. I'd always thought of it as a secret, imaginary
place, and can barely believe that it actually exists. I close my eyes and
take a breath, and wonder of it all settles over me like a gentle cloud."
</p>
</body>
</html>