시맨틱 태그 <body> 세부화
<header> 머리말
<nav> 메뉴
<figure> 다양한 멀티미디어
<main> 중요 콘텐츠
<aside> 본문과 연관성이 적인 부분
<section> 웹 문서의 특정 영역 그룹화
<article> 기사나 개별 콘텐츠
<footer> 웹 문서의 꼬리말
아이콘
- https://fontawesome.com/
- 로그인 후, your kits > settings
- icons: free
- your kits 클릭하여 아래 코드 확인
- <script src="계정 key 값" crossorigin="anonymous"></script>
스타일
- margin: 요소 밖 여백
- margin-bottom: 40px;
- margin: 10px 50px;
- margin: 10px auto;
- padding: 요소 안 여백
- 스타일 리셋
* {
margin: 0px;
padding: 0px;
color: inherit;
}
ul, ol{
list-style: none;
}
a{
text-decoration: none;
}
- 스타일 가져오기
- 먼저 css 폴더를 만든다.
- style.css 파일을 만든다.
- 사용할 css 파일을 만든다. (ex: reset.css)
- style.css 파일에 위 파일을 임포트한다.
- @import 'reset.css';
- index.html <head>에 아래 코드를 넣는다.
- <link rel="stylesheet" href="css/style.css">
폰트관련 서식
- 축약형
- font: bold italic 12px/2 'arial', '돋움';
- font: 12px/2 'arial', '돋움';
- font-weight: normal / bold;
- font-style: normal / italic;
- font-size: 14px / 1rem / 1vw / 1vh;
- rem을 사용한다. 1rem = 16px 이다.
- reset.css에서 1rem의 사이즈를 조절할 수 있다.
- html {
font-size: px; /* rem 사이즈 */
} - line-height: 1.5;
- letter-spacing: 10; /* 자간조절, -값을 입력하면 글자가 겹쳐 보인다.*/
- font-family: 'arial', '돋움';
- color: pink;
- text-align: justify;
- 정렬은 블록 및 인라인블록 요소에만 지정한다.
- vertical-align: middle;
- 정렬은 인라인 및 인라인블록 요소에만 지정한다.
- line-height 값이 없으면, 정렬되지 않는다. vertical-align을 하지 않고 line-height만 해도 middle이 적용될 수 있다.
VS Code 에서 더미 텍스트 입력
lorem20 입력 후, <tab>
구글폰트 적용
- <link> 적용 방식
- html 페이지를 읽을 때 적용 (속도가 약간 빠르다.)
- @import 적용 방식
- css 파일을 읽을 때 적용 (css가 좀 늦게 가져온다.)
- 랜더링 동작 방식
- html태그를 해석해서 DOM생성 (Documnet Object Model)
- css를 해석해서 CSS Dom 생성
- 위의 객체가 생성되기 전까지는 화면랜더링 블록됨
- 구글 웹폰트를 <link> 방식으로 연결하는 게 좋은 이유
- DOM생성시 서버에서 폰트를 사전에 미리 다운로드
- 많은 웹폰트 연결로 인해 화면 렌더링 지연을 최소화 가능
- layout shifting 방지 가능 (컨텐츠의 재구성으로 높이값이 어긋나 덜컹거리는 현상)
- link방식은 한번 다운로드 받은 폰트의 캐싱처리로 인해 layout shifting 최소화
Tags:
웹개발_교육