앞서 홈페이지를 제작하기 전에 선언 및 플러그인 연결(도킹)들을 진행한 다음, 장식 부분에 앞서 홈페이지에 들어갈 정보들의 요소와 속성들을 입력해 주는 과정을 이어갑니다.
먼저 요소 부분을 살펴볼까요, Element는 요소를 뜻합니다.
컴퓨터 및 서버가 홈페이지 구성을 이해하고 적용 할 수 있도록 각종 언어로 구성해 입력하는 모든 행동을 이야기합니다. 아래는 홈페이지 구성을 이루는 요소의 맛배기 요소들입니다.
자세한 내용은 후의 포스팅을 참고 해 주세요 :)
HTML 요소 HTML의 속성은 태그로 시작해 태그로 끝납니다.
가령 "Hello world"라는 단어를 온라인에 입력하기 위해선
<태그 요소> Hello wold </태그 요소>라는 수식으로 입력을 해주어야 요소를 읽어들일 수 있습니다.
태그 요소는 열고 닫기가 기본적으로 선언되어야 하며,
start tag : < > end tag: </ >
로 모든 html 태그는 태그로 시작해 태그 슬러시로 끝을 맺습니다.
모든 html 요소가 열고 닫는 것으로 끝을 맺게 될까요? 예외로 단독선언으로 의미를 갖게 되는 요소가 있는데
대표적인 요소로는
<br> / 이는 키보드의 엔터 요소와 스페이스 요소로서, 단독으로 쓰이기 때문에 별도로 알아두는 것이 편리합니다.
그럼 기본적인 태그를 알아볼까요?
기본적인 태그 요소는 우리가 오프라인에서 읽는 신문과 팜플렛을 생각해본다면 쉽게 이해할 수 있습니다. 먼저 발행할 종이가 필요하겠죠. 이 부분은 html에서 가장 중요한 body라고 부르는 몸통 부분입니다.
<html>
<body>
..
..
</body>
</html>라고 종이 부분인 body를 입력해서 준비를 마쳐줍니다.
그리고 종이 부분인 body요소가 완성됐으니 안에 태그를 사용해 글을 넣어야겠죠 크게는 타이틀과 소제목, 본문 내용, 주석, 캡션 등등으로 이루어져 하나의 단락을 이룬다고 보면 이해가 쉽습니다.라고 종이 부분인 를 입력해서 준비를 마쳐줍니다.
h1~h6
타이틀로 쓰이는 요소는 h1이라는 요소로 h6까지 분할해서 사용할 수 있으며, 제목의 크기를 나타냅니다.
타이틀 요소 : h1, h2, h3, h4, h5, h6
<h1>hello world</h1> ~ <h6>hello world</h6>h1 = Hello world
h6 = Hello world
와 같은 형태로 보일 수 있으며, "Hello world는 제목이야"라는 것을 인식시켜줍니다.
제목 태그는 h1~h6으로까지만 확장해 쓸 수 있습니다.
p
다음은 본문의 내용입니다. 본문은 태그를 사용해 입력해줍니다.
<p> 안녕하세요 </p>는 "안녕하세요" 로 웹상에서 보일 수 있으며, "안녕하세요는 분문이야"라는 것을 인식시킵니다.
흔히 글을 쓸 때 모든 부분을 태그 해주시면 됩니다.
※ 흔히 우리가 사용하고 통용하고 있는 html5에서의 웹 표준은 소문자만을 사용하도록 되어있습니다.
태그를 사용하실 때는 소문자만을 사용해 주세요~
html 과는 또 다른 문서 xhtml에서는 엄격하게 태그 문자를 보기 때문에 무조건 소문자만 사용해야 적용되는 점 또한 팁으로 알아두시면 좋을 것 같습니다.
요소는 매우 중요합니다.
홈페이지를 제작할 때에는한 두 페이지가 아닌 몇백 장으로 이루어진 페이지 요소가 복합적으로 이루어져 있기 때문에 태그를 닫지 않거나 빠트리게 된다면, 그 태그를 사용한 줄부터 나머지가 전부 오류를 나타낼 수 있기 때문에 나중에는 찾기도 매우 어렵습니다. 태그로 시작하면 태그로 닫아야 한다는 점은 꼭 잊지 말아 주세요.
본문 출처: https://www.w3schools.com
'Design > 퍼블리싱 지식창고' 카테고리의 다른 글
| 이미지 파일 사이 공백 붙이기 (0) | 2022.12.13 |
|---|---|
| 홈페이지 이미지 요소와 속성 (0) | 2022.12.13 |
| 홈페이지 css연결하기 (LINK script,css연결) (0) | 2022.12.13 |
| 홈페이지 독타입과 메타태그선언 (DOCTYPE,METATAG) (0) | 2022.12.13 |
| 반응형 홈페이지 미디어 쿼리 기본 설명 (@media) (0) | 2022.12.09 |
