1. html 의 기본 구조
<html>
<head></head>
<body>
</body>
</html>
<html></html> : 해당 파일이 html 형식이라는 것을 나타내는 부분으로 전체 코드를 감싸는 형태가 됩니다.
<head></head> : 자바스크립트 파일을 불러 때, meta 태그를 사용할 때, 타이틀을 입력하고자 할 때 사용하는 부분으로 기본적으로 보여지지 않는 부분에 대한 선언 같은 것들을 주로 하게 됩니다.
<body></body> : 보여지는 부분, 본문 내용을 포함하는 태그입니다.
2. 문자열 관련 태그
a. div, p태그
p 태그의 경우 한 단락 정도로 생각을 하시면 편합니다. p 태그의 위아래로 빈 줄이 삽입이 되며, div 태그 내에 p 태그를 넣어 한 줄씩 글을 입력 하는 경우가 많습니다.
div 태그는 영역을 구분한다는 느낌이 강합니다. 여백 부분을 따로 지정하지 않는 한 영역 밖에 빈줄을 자동으로 삽입하거나 하지 않습니다. div 로 해당 영역을 정의 한 후 p 태그로 해당 영역에 글을 입력하거나 하는 데 주로 사용됩니다.
b. pre 태그
pre 태그로 감싸여진 부분은 입력한 그대로 보여지게 됩니다.
c. span 태그
스타일을 지정할 때 유용하게 사용할 수 있습니다.
예제
위 내용을 html 확장자로 저장해서 브라우저에서 열어 보시면
위와 같이 나타납니다.
예제에서 볼 수 있는 것들 중, style 은 글자의 속성을 나타내는 항목입니다. 주로 쓰이는 게 color, font-size, font-weight, text-align, width, height 등입니다.
순서대로 색상, 글자크기, 두께, 정렬, 폭, 높이 입니다. 속성에 대한 것들은 따로 정리를 해서 올리도록 하겠습니다.
그리고 id를 태그에 지정해 놓으면 스타일 지정해서 사용 할 때 이용하기가 좋습니다.
'Programming > HTML & CSS' 카테고리의 다른 글
| [HTML] 테이블 행(row) 마우스 커서 오버시 색 변경 (0) | 2020.06.25 |
|---|---|
| [HTML] 테이블 각 행(row)별로 색 다르게 지정 하는 법 (0) | 2020.06.25 |
| [html | css]스타일 속성 정리 - font-size 편 (0) | 2019.01.01 |
| [html | CSS]Style 주요 속성 (0) | 2018.12.26 |