HTML tags

<!DOCTYPE>

• HTML태그가 아니라 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다.

< meta >

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

• 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미이다.
• 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보이다.
• 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.

Text Style

텍스트 정렬

#index.html 
<span class="right">span의 오른쪽 정렬</span>
#style.css 
.right {
  text-align: right;
}

• 결과
  

• span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았다.

• span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다.

• inline-element와 반대는 개념은 block-element이다. 참고 사이트

< indent >

#index.html 
<blockquote class="js-description"> 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. </blockquote>
#style.css
.js-description {
  text-indent: 50px;
}

• 결과
  
• 50px만큼 들여쓰기(공백)가 된다.
• blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그이다.
• 브라우저에서 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용했다.

<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>

• 결과
  
• "자바스크립트(영어: JavaScript)는" 다음에 스페이스를 10개 추가하여도 하나의 스페이스밖에 적용되지 않는다.
• 이럴 때는 스페이스를 의미하는 코드를 넣어주어야 한다.
•   가 스페이스를 의미하는 코드이다.

box-sizing

box-sizing

• content-box : 콘텐트 영역을 기준으로 크기를 정한다.
• border-box : 테두리를 기준으로 크기를 정합니다.
• 참고 사이트