티스토리 블로그에는 HTML요소가 포함되어 있는데, 보통은 head태그만 살펴보아 자세히 보지 않는데, 이번에는 HTML이 어떠한 구조로 되어 있는지 알아보았다.
HTML 문법은 태그, 속성 및 문서 구조를 포함한 기본 구조로 되어있으며, 이것이 웹사이트의 기본구조를 만든다,
HTML문서 만들기: 메모장으로 만들어도 되나, 보통은 편집기인 Sublime Text, VSCode를 사용한다.
VSCode를 사용하여 작업할 폴더를 만들고 index.html 파일을 만든후 !+Tab를 누르면 위와 같이 HTML기본구조가 자동으로 입력된다.
위의 코드를 간단하게 설명하면 다음과 같다.
문서 유형 선언: 문서 맨 위는 현재 문서 유형이 <!DOCTYPE html>이라는 의미이다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">는 인터넷 익스플로러(IE)에서 최신 표준 모드로 보여주는 코드라는 의미이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">은 모바일 기기에서 보여줄 비율을 나타내는 코드이다.
이러한 코드들은 일반적으로 자주 사용하는 코드니까 그대로 활용하면 된다.
그 아래로 <head> 섹션을 추가한다. 이 섹션에는 페이지 제목, 키워드 및 외부 스타일시트 및 자바스크립트에 대한 연결과 같은 문서에 대한 메타데이터가 포함되어 있다.
티스토리에서는 보통 이 head태그에 애드센스 코드 및 네이버 검색코드 등을 기재하면 된다.
다음으로 title에는 웹사이트의 제목을 기재하는데, <title> 웹사이트 제목기재 </title>이러한 형식으로 기재하면 된다.
<body> 섹션은 HTML 태그 안의 본문 섹션을 말하는데, 이 섹션에는 본문제목, 문단, 이미지, 링크 등과 같은 웹 페이지의 내용이 포함되어 있다. 본문 제일 큰제목은 <h1>문단제목</h1>의 형식으로 기재되어 있다.
요소, 태그 및 특성 사용: 본문 섹션에서 HTML 요소, 태그 및 속성을 사용하여 내용을 구성하고 스타일을 지정한다. 예를 들어 "<h1>" 요소를 사용하여 제목을 만들고, "<p>" 요소를 사용하여 문단을 만들고, "<img>" 요소를 사용하여 이미지를 표시하고, "<a>" 요소를 사용하여 링크를 만든다.
요소에 스타일과 기능을 추가하려면 "class" 및 "id"와 같은 속성을 사용한다.
margin: 0 auto 이 코드의 내용은 바깥 여백을 표현한 것인데, 세로 바깥 여백 값은 0이고, auto는가로 바깥 여백은 자동으로 웹페이지에 맞게 설정하겠다는 의미이다. 이렇게 하면 가로 바깥 여백은 웹페이지상의 남은 공간에 맞게 배치된다.
글자 색이나 배경색은 구글 검색에서 ‘Color Picker’를 참조하여 색상 코드를 확인해 기재하면 된다.
글자 굵기는 100 ~ 900까지, 100 단위로 올라간다. font-weight 값 400은 중간정도임을 알 수 있다.
padding는 안쪽 여백을 말하는데 만약에 세로, 가로 5px로 하고자 한다면 padding: 5px라고 하나만 쓰면 되며,
세로 10px, 가로 15px로 하고 싶으면 padding: 10px 15px으로 표현한다.
margin은 위에서 본 대로 바깥 여백을 의미하는데, 세로, 가로 10px은 margin: 10px으로
세로 10px, 가로 15px로 하고 싶으면 margin: 10px 15px
세로 15px, 가로는 자동으로 하고 싶으면 margin: 15px auto로 하면 된다. 기재하는 방법은 시계방향으로 생각하면 된다,
여기서 auto는 바깥 여백(margin)의 가로에서만 동작함을 주의하면 된다.
문서 저장 및 미리 보기: HTML 코드를 작성했으면 문서를 저장하고 웹 브라우저에서 열어 보기로 확인한다.
VSCode에서 Live Server을 설치하면 HTML코드에서 바로 마우스 오른쪽을 클릭하여 Open with Live Server를 클릭하면 웹브라우저에 나타나는 내용을 볼 수 있어 편리하다.
이외에 보다 자세한 HTML코드의 사용법과 의미를 살펴보려면 www.w3schools.com 사이트를 참고하면 된다.
'업무스터디 > tool' 카테고리의 다른 글
| 프런트 엔드 (Front-end) (0) | 2023.03.05 |
|---|---|
| HTML a 태그 (0) | 2023.03.03 |
| EIU 발표 - 살기 좋은 도시 (0) | 2023.02.04 |
| 영문해석 (브레인스토밍 관련글) (1) | 2023.02.02 |
| 영어독해 연습 (마틴루터 킹 연설문 중) (0) | 2023.01.31 |
댓글