시멘틱 태그(sementic tag)

  • <div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그.
  • HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.

시멘틱 태그(sementic tag)의 종류

  • <header> : 머리글, 제목
  • <nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.
  • <aside>：좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.
  • <section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.
  • <article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용
  • <footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
  • <address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그
  • ＜main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.
  • <figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용
  • <hgroup> 제목과 관련된 부제목을 묶는 태그
  • <details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.
  • <figcaption> <figure> 요소의 설명 캔션(caption) 정의
  • <mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
  • <time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
  • <summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힌다.

 

시멘틱 태그(sementic tag)의 장점

⑴ SEO 최적화에 유리(Search Engine Optimization) : 검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

⑵ 웹 접근성에 효율적 : 스크린 리더기(시각장애인을 위한 웹서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

⑶ 유지보수의 용이성 : 많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

저작자표시 비영리 변경금지

'코린이 개념잡기 > HTML' 카테고리의 다른 글

수업으로 만든 사이트 배포해보기  (1) 2024.11.28
HTML 속성 class, id  (0) 2023.03.12
라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12

https://weeklycodenews.netlify.app/

 

Weekly Code News

이번 호에서는 유닉스 명령어와 추천 시스템, 그리고 HTML 꿀팁을 전해드립니다.

weeklycodenews.netlify.app

HTML과 CSS로 간단한 사이트를 만들어보고 배포하는 방법에 대해서 배웠다.

기초지식이 살짝은 있는터라 코드를 작성하는게 어렵진 않았는데 배포 부분과 구글 애널리틱스를 활용하는 부분이 살짝 어려웠다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

시멘틱 태그(sementic tag)의 장점  (0) 2024.12.06
HTML 속성 class, id  (0) 2023.03.12
라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12

HTML 속성 class, id

▶HTML 태그는 태그 내에 속성(Attribute)을 가질 수 있다.

▶속성은 HTML 태그가 가지는 특성을 지정

▶속성은 태그에 대한 추가 정보를 제공, 어떻게 표시, 기능이나 동작과 관련된 정보를 전달 하는 등 다양한 용도로 사용된다.

▶속성의 이름과 값은 “=”기호로 구분된다.

▶수학에서의 등호와 다름. “등호의 오른쪽에 있는 값을 왼쪽에다 대입한다.” 라는 뜻이다.

▶id는 고유해서 하나만 가질 수 있고 class는 원하는 대로 부여할 수 있다.

▶각 태그에는 반드시 필요한 속성과 옵션인 속성도 있는데 속성은 태그마다 다르다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

시멘틱 태그(sementic tag)의 장점  (0) 2024.12.06
수업으로 만든 사이트 배포해보기  (1) 2024.11.28
라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12

▶for과 id는 이름이 같아야 한다. NAME에 for과 id랑 똑같이 들어가도 되지만 연결된것은 아님. 백엔드 개발자들이 열어보지 않아도 확인 할 수 있게 해주는 것. 

▶라벨은 항목들을 하나로 묶어주는 역할도 한다. ex) 취미 항목에서 스포츠, 독서, 음악감상의 name을 hobby로 통일시킴

▶취미에 라벨태그가 붙지 않는 건 여러가지 중에 선택 할 수 있기 때문이다.

▶name : 백엔드 개발자에게 알려주는 이름(라벨)

▶id : label의 for과 같은 이름을 부여해주어야함.

▶value : 컴퓨터에게 진짜 값을 알려주는것.

→스포츠가 스포츠인걸 인식시켜줌.

▶radio : 여러 개 중에 하나 선택 할 수 있음.

▶class 와 id는 완전 다른 태그.

▶import : 불러오기

→url : 웹 상 경로

'코린이 개념잡기 > HTML' 카테고리의 다른 글

수업으로 만든 사이트 배포해보기  (1) 2024.11.28
HTML 속성 class, id  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12

<form> : 서식

▶웹 페이지에서 사용자가 키보드로 데이터를 입력하거나 마우스로 선택할 수 있는 서식을 폼(form)양식이라고 한다.

▶<input> : 입력요소 / type : 입력방식

폼 HTML 태그와 속성
텍스트 입력 창 <input type="text">
비밀번호 입력창 <input type="password">
라디오 버튼 <input type="radio">
체크박스 <input type="checkbox">
파일 <input type="file">
버튼 <input type="submit"> / <input type="button"> / <input type="reset"> / <button>
선택박스 <select> <option>
다중 입력 창 <textarea>

 

▶form : get

→<form action="회원가입 완료 후 보여줄 페이지로 보내줌" method="get"></form>

→ex)회원가입 완료창, 로그인창, 메인창 등

▶form : post

→get, post는 백엔드 개발자가 정해줌. 프론트엔드 개발자에겐 권한이 없다.

▶<fieldset> : 폼 태그를 감싸는 또 하나의 태그

→회원가입을 페이지 한 줄로 할 땐 별로 의미 없지만 간혹 두, 세 개를 가로 페이지로 나눠져서 회원가입을 할 때가 있음. 그 땐 폼을 두개 쓰는게 아니라 필드셋을 2개를 써주는 것이다.

 

▶<legend> : 필드셋의 제목 태그

→ex)회원가입 양식 폼 : 보통 미각적으로 예쁘지 않아서 사용자의 시각에 보이게 적진 않는다. But 접근성, 스크린 리더기가 읽어줄 때 무슨 내용에 관한것인지 알아야 하기 때문에 적긴 한다. 안보이게만 할 뿐.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

HTML 속성 class, id  (0) 2023.03.12
라벨링  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12

<table> : 웹 페이지에 테이블을 삽입 할 때

▶<table border=“숫자"> ⇒ 요즘엔 회원가입 할 때만 거의 사용

▶테이블 태그에서 제목은 h1을 사용하지 않음, <caption>을 사용

▶<tr> : 테이블의 행(=가로, 줄, row)을 만드는데 사용

▶<th> : 각 열(=세로, 칸, column)의 제목을 만드는데 사용

▶<td> : 각각의 셀을 표현하는데 사용, 테이블의 설명

▶thead - 정보가 되는 테이블

▶tbody- 내용이 되는 테이블

기본 테이블

<table> 태그 응용, 셀 합치기

▶테이블은 좌측 상단부터 우측으로 차례대로 숫자를 부여한다.

▶가로 테이블 합치기 :　합쳐서 지울 셀을 먼저 지우고, 앞에 있는 테이블은 놔둔다.

ex)7, 8 번의 테이블이라면 8번은 지우고 7을 놔둔다

→7번 의 태그 코드에 colspan 을 적고 합칠 줄의 갯수만큼 입력한다. 

<td colspan="2">7</td>

▶세로 테이블 합치기 : 합쳐서 지울 셀을 먼저 지우고 앞에 있는 테이블은 놔둔다.

ex)5, 10번의 테이블 합치기 : 5번을 놔두고 10번을 지운다

→5번의 태그 코드에 rowspan을 적고 합칠 행의 갯수만큼 입력한다.

<td rowspan="2">5</td>

→가로, 세로 다 합치기 : 14,15,19,20을 하나의 테이블로 합치려고 하면 15, 19, 20은 지우고 14에다가 태그 붙여준다.

<td colspan="2" rowspan="2">14</td>

※가로 = row 지만 세로 테이블을 합칠 때 rowspan을 사용, 세로 = column 이지만 가로 테이블을 합칠 때 colspan을 사용한다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12

<video> : 동영상 넣기

▶<video src=""></video>

▶<video src="visual.mp4" autoplay loop muted></video>

▶비디오 태그는 이미지 태그처럼 알트로 무조건 써야 하는 강제 속성은 없다.

▶autoplay : 자동재생(크롬 브라우저에선 정책적으로 자동재생 허용X), loop : 무한반복, muted : 소리 끔

▶게임 사이트는 뮤트는 하지 않는다. (사용자들이 즐기기 위해 들어오기 때문에) : 사이트 특성마다 조금씩 다를 수 있음.

 

<a> : 링크 기능

▶<a href=""></a>

▶herf : 이동할 페이지의 URL 주소설정 (이동시킬 웹 주소가 될 수도 있고, 다른 파일이 될 수도 있다.)

▶ex) <a href="https://www.naver.com/">네이버로 보내쥬세요!!</a>

▶ex) <a href="INDEX.html">안녕하세요</a> : 다른 html 문서로도 이동 가능

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12

<img> : 이미지 태그, 그림 넣기

▶<img src="" alt="">

▶닫는 태그가 없다. 열린 태그 하나만 있다.

▶<img> 외에 속성이 따라오는데 <src=이미지 경로를 쓰는 속성> <alt=이미지를 설명하는 속성>

▶동일 폴더 내에서 찾을 수 있는 경우 파일의 이름+확장자명을 적으면 불러올 수 있다.

▶alt : 이미지 설명이 필요한 이유 = 접근성! 스크린 리더기로 읽을 때 설명이 필요함. 

이미지 포맷 확장자 특징
JP(E)G .jpg / .jpeg 사진 이미지에 많이 사용되는 손실 압축, 고화질을 유지하면서 고압축 가능. 다른 압축 방식에 비해 파일 크기를 작게 할 수 있다.
PNG /png 무손실 압축, JPG에 비해 압축 효과율은 떨어지나 휴대폰 등에서 이미지 확대 시 고화질 유지. 최근 가장 많이 사용.
GIF .gif 무손실 압축, 사용가능한 컬러 수가 다른 포맷에 비해 제한적. 컴퓨터 그래픽 이미지에 많이 사용, 파일 크기가 작음.
SVG .svg 압축 포맷이 아닌 벡터 그래픽 포맷. 이미지 확대 시 화질의 손상이 전혀 없음. 웹 상에서 도형이나 그래프를 그리는데 多사용
상대경로 절대경로
URL 주소를 기술할 때 HTML 문서가 존재하는 위치. 즉, 현재 폴더를 기준으로 경로를 설정하는 방식을 말함.
ex) <img src="./img/test/fish3.jpg">		 http://로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL주소를 의미. 해당 파일이 존재하는 인터넷 상의 유일무이한 위치.
ex)

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<table> : 테이블(표, 항목)  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12

HTML 태그

Tag Usage Definition Summary
<html> <html> ... </html>  
<head> <head> ... </head> 머리말
<body> <body> ... </body> 본문
<title> <title> ... </title> 웹페이지(문서)제목
<meta> <meta ... /> metadata에 대한 정보(information)
<div> <div> ... </div> 문서영역 또는 섹션의 분할 정의
<a> <a href=" ... " target=" ... "> ... </a> (Anchor) 링크연결, inline요소
<script> <script type=" "> ... </script> 클라이언트 사이드 스크립트를 정의할 때 사용
<link> <link rel="stylesheet" href="..."> 스타일시트(등 의) 링크 적용
<img> <img src="..." > 이미지삽입
<p> <p> ... </p> 줄바꿈, 단락
<span> <span> ... </span> inline요소들을 그룹화
<li> <li> ... </li> (List) 리스트화
<ul> <ul> ... </ul> (Unordered List) 리스트를 그룹으로 묶음, 순서X
Tag Usage Definition Summary
<ol> <ol> ... </ol> (Ordered List) 리스트 그룹 자식들 앞에 숫자 넘버링, 순서O
<br> <br> </> 줄 바꿈, break
<style> <style ...> ... </style> CSS 스타일 정의
<h1>~<h6> <h1> ... </h1> 제목(heading), 글씨 크기(+굵기)
<input> <input type="...">  
<from>    
<strong> <strong> ... </strong> 글씨를 두껍게 강조
<table> <table> ... </table> 표 사용
<tr> <tr> ... </tr>  
<td> <td> ... </td>  
주석 <!-- ... --> 주석을 사용할 때 (Ctrl+/)
<hr> <hr> 단락 구분, 문서의 구분선
<caption> <caption> ... </caption> summary역할
<colgroup> <colgroup> ... </colgroup> 열 그룹
<u> <u> ... </u> 글씨에 밑줄(underline)

 

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12

 

DIV 태그 VS SPAN 태그

▶<div> 태그는 블록 요소로 구역을 나누기도 하며 아주 다양한 형태로 활용이 가능하다.

▶<span> 태그는 인라인 요소의 <div>로 div와 같은데 속성만 다르다고 생각하면 된다. 인라인 요소만 감쌀 수 있다.

▶<div>는 <span>도 감쌀 수 있다.

▶모든 태그를 <div>로만 감싸면 안된다. → 시멘틱 태그의 출현

 

시멘틱 태그(sementic tag)

▶<div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그이다.

▶HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.

시멘틱 태그(sementic tag)의 종류

▶<header> : 머리글, 제목

▶<nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.

▶<aside>：좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.

▶<section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.

▶<article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용

▶<footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

▶<address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그

▶＜main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.

▶<figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용

▶<hgroup> 제목과 관련된 부제목을 묶는 태그

▶<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.

▶<figcaption> <figure> 요소의 설명 캔션(caption) 정의

▶<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조

▶<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

▶<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

 

★시멘틱 태그(sementic tag)의 장점★

⑴ SEO 최적화에 유리(Search Engine Optimization)

▶검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

⑵ 웹 접근성에 효율적

▶스크린 리더기(시각장애인을 위한 웹서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

⑶ 유지보수의 용이성

▶많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이함.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12
HTML과 웹의 개념  (0) 2023.03.09

+ Recent posts

티스토리툴바