HTML
<!--DOCTYPE이 누락된다면 비표준문서, 있어야 표준 호환 모드로 뜸!-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>vscode에서 !치면 자동완성되어 편하게 쓰던 이 코드 틀(?)의 의미를 알게되었다.
형식은 문서타입 태그안에 html태그가 있고 그 안에는 각 각 head와 body태그가 있고 html 태그로 닫아준다.
html태그에는 언어를 써준다. (스크린 리더에서 콘텐츠를 읽을 때 lang속성을 통해 정보를 받는다)
body에는 화면에 보여지는 코드를 작성, 이외의 콘텐츠 보조 코드는 head에 넣어준다.
<p>
사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)이다.
<p>사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)입니다.</p>
제목의 단계
사용자가 가장 먼저 읽는 콘텐츠는 제목(Headings Level 1-6)이다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
Margin, Padding
margin과 padding도 헷갈렸는데 다시 확실히 배웠다.
Border
border: 1px solid black;boder는 두께 스타일 색;
스타일은 solid말고도 다양하다.
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
box-shadow
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
div, section, article 태그 적절히 이용하기!
div만 이용하지말고 section이랑 article을 함께 이용하면 가독성있는 코드 작성에 도움을 줄 수 있다.
float
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
text-align: left와 text-align: right으로 각 각 속성을 주었을 때 다른 줄에 보이던 것을 float 속성을 이용하여 한 줄에 나타낼 수 있다. 둥둥 떠다니는 것이 float속성의 특징이기 때문에 다른 요소와 겹쳐보일 수 있다. 그래서 div로 묶어서 overflow:hidden을 줘야 한다.
line-height
font-size를 10px로 주고 line-height를 16px로 주면 6px의 행간이 생긴다. 보통 160%가 가장 잘 읽히는 행간이라고 함!
div 가운데 정렬
margin-right: auto;
margin-left: auto;
'개발 > Today I Learned' 카테고리의 다른 글
| 멋사 D+3 HTML/CSS + Git (0) | 2022.11.30 |
|---|---|
| 멋사 D+2 환경 설정 + Git + CLI (0) | 2022.11.29 |
| [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app (0) | 2022.11.03 |
| [ React Error ] Failed to load config "react-app" to extend from. (0) | 2022.10.21 |
| [TIL] React Hooks :: useState의 기본형과 함수형 (0) | 2022.09.06 |