[10.17] 일단 만드는 HTML/CSS (장서현)

HTML

문서의 골격

CSS

HTML

문서의 골격

•

사용 빈도가 높은 HTML Tag만 알면 된다!

HTML Study | Advanced Web Ranking

This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.

https://www.advancedwebranking.com/seo/html-study/

CSS

선택자
Universal	*
Type	tag
Class	.
ID	#
State	:
Attribute	[ ]

중앙에 배치하기

text-align: center; // 가운데 정렬
background-color: black; // 배경 색 적용
color: white; // 글씨 색 적용
font-size: 30px; // 글씨 크기 적용
CSS
복사

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

https://material.io/resources/color/#!/?view.left=0&view.right=0

border: 5px solid black; // 경계선 설정(두께 방식 색)
width: 610px; // 박스 너비 설정
height: 100px // 박스 높이 설정

// 박스 가운데 정렬
margin-left: auto;
margin-right: auto; 
CSS
복사

border option

박스 쪼개기

그림자 표현하기

box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1); // x축 y축 blur spread 색(rgb & 투명도)
CSS
복사

구글 웹 폰트 사용하기

Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap');

* {
    font-family: 'Montserrat';
}
CSS
복사

Font Awesome

The world's most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

https://fontawesome.com/

‘나만의 이력서’ 정리하기

HTML

CSS