[TIL #1 WECODE] 놓치기 쉬운 HTML/CSS

210215 - WECODE #1

▶오늘부터 수요일까지 HTML & CSS 관련 개념을 다지고
Codekata로 해당범위 코딩 훈련이 예정!

▶금일 코딩훈련 중 내가 놓쳤던 부분이나 개념이 미흡했던
부분에 대해 남겨보았다.

<meta name="viewport" content="width=device-width">

"웹 페이지의 가로 크기 = device의 가로 크기"
데스크탑 버전의 웹페이지가 모바일에서 축소되어 보이는 현상을 막아준다.

span은 inline방식

<span style="text-align: right">content</span>

span에 오른쪽 정렬을 부여해도 오른쪽 정렬이 되지 않는다!
(span이 차지하는 영역 = content 만큼의 길이)

CSS

<link href="" type="text/css" rel="stylesheet">

type : link태그로 연결되는 파일이 어떤 것인지 알려준다.
여기서 css file을 연결하므로 type값은 항상 "text/css"

rel : rel은 HTML file과 CSS file과의 관계를 설명하는 속성
css파일을 링크할 때는 항상 "stylesheet"값을 대입해준다.

<style>
#title{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight : bold;
  text-indent: 50px;
}
</style>

1)"Times New Roman"

폰트 이름에 띄어쓰기가 있다면 ""를 사용

2)font-family말고도 font-style로 글씨 스타일을 바꿀 수 있다.

대신 font-style은 글꼴 하나만 가능!

3)font-weight : normal = 400 & bold = 700

4)indent: 들여쓰기

문장 사이에 스페이스 한개이상을 추가할때

<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;중복하기</p>

이것은 inline 방식이고
text-indent는 style태그에 넣는 방식으로 구분하면 좋을듯!

인용구문

<blockquote cite="http://"></blockquote>

브라우저에서 양쪽 여백을 넣는 스타일을 자동 적용해준다.