코딩 성장기
[HTML]HTML 기초 및 개념 본문
웹 페이지에서 각 언어별 역할
HTML : 웹 페이지의 구조를 만들고 웹 페이지에 들어갈 내용을 넣는다.
CSS : 웹 페이지에 스타일을 적용하여 디자인을 한다.
JavaScript : 웹 페이지의 동적 역할을 제어한다.
집 짓기로 보는 각 언어의 역할
HTML - 집의 어느부분에 현관문을 설치할지, 창문을 설치할지, 부엌은 어느 공간에 위치시킬지 등을 정해서 설계도를 그린다.
CSS - 집의 외벽은 어느색깔로 칠할지, 창문의 크기는 어느정도로 할지 등의 디자인을 정한다.
JavaScript - 언제 전등이 켜질지, 어떻게 해야 수도꼭지에서 물이 나오는지 등 동적인 부분을 처리한다.
HTML 이란?
HTML = Hyper Text Markup Language
마크업 언어들 중의 한 종류(XML, TEX, SAMI 등도 존재함)로 웹 페이지의 틀을 만드는 뼈대 구성 작업을 한다.
마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 나타내는 언어.
태그방법의 체계를 마크업 언어라고 부른다. 프로그래밍 언어(Prgogramming Language)와는 구별된다.
HTML 사용 방법
-HTML은 tag들의 집합이다.
-작성시, 문서 맨 위에 <!DOCTYPE html>이라는 태그를 달아주고 그 아래에는 <html>태그를 달아주어
내부에 코드를 작성한 뒤, 맨 마지막에 </html>태그로 닫아 문서를 마무리 한다.
(html 문서를 시작할 때, 맨 위에 !를 치면 자동으로 문서 작성에 필요한 태그들이 작성됨)
-그 외에 코드들은 시작tag(<tag>)로 시작해서 종료tag(</tag>)로 끝낸다.(tag는 짝을 이루어서 작성한다)
-시작 태그안에 속성을 넣을 수 있다.( 속성 : '속성이름(attribute name) = 속성 값(attribute value' 꼴로 작성)
-시작태그와 끝내는 태그 사이에 웹 페이지에서 나타낼 내용들(콘텐츠)을 작성하며,
간혹 끝내는 태그가 없는경우가 있는데, 이 경우는 2가지에 해당이 된다.(self-closing tag)
- 해당 코드가 HTML 문서임을 명시하는 <!DOCTYPE html> 태그
- 태그 사이에 들어갈 내용이 없는경우. <tag ~~~ /> 방식으로 작성된 코드
tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
자주 사용되는 HTML 태그
| 태그 | 역할(기능) |
| <div> | 공간을 할당 |
| <span> | 공간을 할당 |
| <img> | 이미지 삽입 |
| <a> | 링크 삽입 |
| <ul><li> | 순서가 없는 리스트 |
| <ol><li> | 순서가 있는 리스트 |
| <input> | 입력 받는 공간 생성(체크박스, 문자열 등) |
| <textarea> | 여러줄의 글을 입력받을 수 있는 공간생성 |
| <button> | 클릭 할 수 있는 버튼 생성 |
시멘틱 태그(sementic tag)란?
sementic은 프로그래밍에서 코드 조각의 의미를 뜻한다.
쉽게 말하자면, 시멘틱 태그는 해당 코드가 프로그램에 무슨 영향을 미치는지, 혹은 어떤 목적,역할을 하는지 나타낸다.
시멘틱 태그에는 여러가지가 있으며, 어떤 태그는 css 효과를 준 것처럼 콘텐츠의 내용이 나타날 때도 있다.
❗ 여기서 잠깐! css로 효과를 주면 되는데 왜 굳이 시멘틱 태그를 쓰는건가요?
-SEO가 컨텐츠를 검색할때 중요한 키워드임을 나타낼 수 있다.(페이지 검색순위에 영향을 미침. 컴퓨커가 읽기 쉬움)
-스크린 리더가 시각장애가 있는 사용자들이 페이지를 탐색하는데 도움을 줄 수있게 한다.
-클래스 이름이 없는 태그, 끝없는 <div>태그 등을 탐색하는것보다 쉽다.
-개발자들에게 드러낼 데이터의 타입을 추천할 수 있다.
-적절한 커스텀 엘리먼트/컴포넌트 네이밍을 나타낸다.
'웹퍼블리싱(HTML&CSS)' 카테고리의 다른 글
| [HTML/CSS]박스모델_컨텐츠영역 꾸미기 (0) | 2022.01.25 |
|---|---|
| [CSS]텍스트 스타일링 (0) | 2022.01.23 |
| [CSS]CSS기초 및 개념 (0) | 2022.01.23 |
