개발/Today I Learned

멋사 D+1 HTML/CSS

SlowButSteady 2022. 11. 28. 19:27
728x90

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;

 

저작자표시 비영리 변경금지 (새창열림)