HTML 시작
텍스트 태그 공유
| <h1>~<h6> | 제목표시( 숫자가 작을수록 크기가 커짐) |
| <p> | 단락 |
| <br> | 줄바꿈 |
| <hr> | 수평줄 |
| <blockquote> | 인용문(블랙 레벨 태그라서 들여쓰기) |
| <q> | 인용 내용( 인라인 레벨 태그라서 줄바꿈 없음) |
| <pre> | 입력 그대로 출력( 접근성 고려 필요) |
| <strong> | 굵게 표시 (중요한 내용 강조) |
| <b> | 굵게표시(키워드처럼 단순 강조) |
| <em> | 이탤릭체 ( 특정 부분 강조) 1em= 16px |
HTML을 공부하면서 느낀 부분 중 하나는, 텍스트 태그를 전부 다 알필요는 없겠더라 입니다.
하지만, 한번씩은 거쳐봐야 할 과정이고, 차례대로 정리를 해 보고 공유하려 합니다.
(질문을 해 보면 책을 끼고 살아야한다는 말이 왜인지 절로 이해가 되더라구요)
HTML이 프로그램, 컴퓨터 언어로써는 가장 기초적이며 가장 쉬운언어라고 하지만, 독학을 해 보는 입장에서 보자면 여전히 어렵기 때문에 순서대로 하나씩 해 보는걸 추천드립니다!
저희가 일상적으로 보는 웹페이지나, 어플리케이션 표현등은 CSS까지 완전체가 되었을때의 형식이고
HTML로 구성하는 것은 뼈대가 되는 근본 내용을 작성하는 부분인지라 은근히 도입부가 허접하고, 재미없게 느껴질 수 있을 것 같네요ㅣ
이제 위의 정리 표의 기능들을 일부 사용해 보면,
먼저 표시의 새문서를 만들게 되고
(확장자는 .html)
첫 라인에 "!" 를 누르고 엔터키를 누르시면 자동적으로 문서유형 선언문이 작성됩니다.
후에, <style>이나 링크를 작성할때 수정하는 부분인지라, 처음에는 ! 를 넣고 진행하기만 하면 됩니다.
간단한 내용들을 적어보았습니다.
몇가지 신기한 점은,
html lang="en" <-이 표시는
내가 사용할 언어가 영어다 라는 의미입니다. ko는 한글, jp는 일본어 이런식으로 설정을 할 수 있습니다.
그런데, 직접 사용해 보니 사용언어가 영어로 되어 있어도 한글로 표시가 되고, 일본어 등 복합적으로 사용해도 문제가 없더라구요. 혹시 정확한 차이를 아시는 분이 있으시면 알려주시면 감사하겠습니다.
표시와 같이
title부분이 링크의 제목이 되는 부분이고,
아래의 <body> 가 문서의 몸통을 만드는 부분이 됩니다.
앞서 설명드린 h1~h6 를 이용해 일반적인 문서 제목등에 많이 사용하게 되고,
p 부분을 통해 내용을 작성하며 그 사이사이에 여러가지 텍스트 옵션들을 추가하게 됩니다.
해당작업들을 한 뒤 ctrl+alt+o 를 통해 크롬으로 열게 되면 상기 사진과 같은 내용을 확인할 수 있습니다.
주기적으로 확인하는게 좋겠죠?~
이런 방법으로 텍스트에 대한 기본적인 설정을 할 수 있고,
실질적으로 많은 분들이 궁금해 하실
HTML 문서에 이미지 파일 / 그림 추가하기 입니다.
먼저 작성하고자 하는 웹 페이지 작업파일 동일한 폴더에, 이미지 파일이 먼저 준비되어 있어야 합니다.
저는 01폴더-images 란 폴더에 이미지가 준비되어 있는 상태이며, 01폴더 안에 text.html이 작성되고 있는 중 입니다.
거기에 <img src="images/watch.jpg"> 를 입력하게 되면 파일을 불러오게 됩니다.
형태를 보게 되면
<이미지 소스=images폴더/(하위)watch.jpg(파일> 이 들어가는 형태로, 비주얼 스튜디오 코드를 사용해 보시면 아시겠지만 글을 조금만 쓰셔도 자동완성이 되니 어렵지 않게 적용하실 수 있습니다.
내용을 모두 작성하게 되면 이렇게, 하단에 사진이 붙는 형상을 확인할 수 있습니다!
사진의 위치, 글의 위치 꾸미기 등에 대해서는 css순서에서 잘 정리해 보도록 하겠습니다.
이러한 정보들이 티스토리 블로그를 꾸미시거나, 홈페이지 일부 수정에 많은 도움이 되길 바랍니다!
'HTML스터디' 카테고리의 다른 글
| HTML 5 :) HTML 폼 테그 활용하기! 체크박스 & 폼 요소 만들기 (1) | 2020.08.26 |
|---|---|
| HTML 5 :) HTML 에서 링크 만들기! 텍스트 링크 + 이미지 링크 만들기! HTML 그림에서 링크 삽입! (0) | 2020.08.24 |
| HTML 5 :) HTML 에서 목록만들기! <ul> <ol><li> (0) | 2020.08.23 |
| HTML 5:) 비주얼스튜디오 코드 기본세팅 웹 편집기 / HTML 독학 / 코딩독학 (0) | 2020.08.21 |
| HTML 5 CSS 3 :) HTML 5/ CSS 3란? 웹브라우저와 기초편 (0) | 2020.08.21 |
댓글