HTML
visual studio code를 이용해서 web을 만들어 보자.
웹 개발 에디터로서 이전에는 아톰?을 많이 사용했다 하지만 시간이 지난만큼 현재는 위 에디터가 압도적이라고 한다.후에는 어떤 툴이 생길지 모르지만..
우선! HTML이 뭐냐?
: 웹사이트를 구성하는 가장 기본적인 요소 중 하나, Hyper Text Markup Language 의 약자고 마크업 언어의 한 종류. 마크업이 뭐냐? 내가아는 마크는 nct 마크인데;;
마크업이라는 것은 문서나 데이터를 처리하기 위해 문서에 추가되는 정보. 이를 표현하기 위한 언어가 마크업. 즉 HTML은 이러한 마크업 언어중 하나라는 것.
TAG
아 우선, 생활코딩님의 유튜브를 보고 하나씩 따라하고 있다. 1이라도 알아야 2도 알수 있기에,,, 아무것도 모르는 내게 있어 이런 좋은 무료컨텐츠는 그저 빛과 소금이다..
- 혼자공부하는얄팍한코딩지식의 저자 이자 유튜버인 고현민님의 강의도 있으니 참고하자 (혼자 공부하기 짱!)
출처 1: 생활코딩 -web
출처 2: 얄팍한 코디사전 - HTML&CSS
TAG : <>, /<> 이렇게 표시되는게 TAG 라고한다. creating web pages 설명해주기 위해 TAG를 사용한다. HTML의 기본문법이며 어쩌면 컴퓨터 언어중에 제일 쉬운 문법일수도 있다.
통계를 기반으로 무엇을 공부하실까를 판단하셨으면 좋겠다는 생활코딩님의 말씀이 생각나 기록해본다. 가야 될 길이 멀다고 생각하지말고 그 만큼 배울게 많음에 감사하자.
주요 TAG
기본 TAG
표기법 : <START TAG> CONTENT </END TAG>
기본태그
<h1> ~ <h6> : 제목
SEO(search engine optimization)을 위해 hn태그는 중간에 숫자를 건너 뛰지말고 h1부터 단계적으로 사용해야한다.
<p> : 문단
paragraph 본문의 문단을 작성할 때
<br> : 문단에서 줄바꿈 (닫는 태그 필요 x)
<hr> : 가로줄 (닫는 태그 필요 x)
: 공백 (스페이스를 강제 사용할 때)
<br> : 새로운 줄 띄우기 (한 줄 띄우기) n번 쓰면 단락처럼 느껴지기도 함. 특징은 줄바꿈이라고 하는 시각적인 의미만 있기에 닫히는 테그는 사용하지 않음.
<p> : br태그와 다르게 어디서부터 어디까지가 한 단락인지를 표현할 수 있기 때문에 열리는 태그와 닫히는 테그 둘 다 사용.
<ins> : 새로 추가된 텍스트임을 나타낼 때 사용, 콘텐츠에 밑줄
<del> : 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때, 콘텐츠에 취소선
종류와 중요도 태그
HTML 태그는 정보의 종류를 구분하는데만 사용
<b> : 글자를 굵게
<strong> : 중요한 내용임을 명시
<i> : 글자를 기울임
<em> : 강조할 내용임을 명시, 기울져 보이면서 강조 효과
<sup> : 위 첨자 /지수, 서수
<sub> : 아래 첨자 / 각주, 변수, 화학식
<u> : 철자 오류 표시 > 이전에는 밑줄 용도로 사용
<s> : 더 이상 유효하지 않은 정보 표시
인용된 컨텐츠 태그
<blockquote> : 비교적 긴 인용문에 사용 / cite속성으로 출처 표시
<cite> : 저작물이 출처 표기 / 제목을 반드시 포함
<q> : 비교적 짧은 인용문에 사용 / cite속성으로 출처 표시
<mark> : 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳 표시
<abbr> : 준말 / 머릿글자 표시 , title 속성으로 원래 형태 표시
목록을 표현하는 태그
<ul> : 순서가 없는 목록 (unordered list) -목록 내 글머리 기호 붙음
<ol> : 순서가 있는 목록 / type, start 속성 사용 가능 (ordered list) - 목록 내 순서가 붙음
eg. <ol type="A" start="3">
<li> : ul, ol 태그의 1촌 자식으로 이 태그만 사용 가능
용어와 정의 나열하기
<dl> (description list) 정의형 목록
<dt> :용어 (description term)
<dd> : 정의 (description details)
목록을 만든는 태그는 ul, ol, dl 이 있는 것이다. 태그 예시
이렇게 간단한게 웹페이지를 제작해보았다. 그럼 이 웹페이지를 실행되기 위한 아래 개념이 필요하다.
웹브라우저는 요청하고 웹서버는 응답한다. 웹서버를 작동시키는 방법은 크게 두가지,
- 직접 자신의 컴퓨터에 웹 서버를 설치
- 일종의 web hosting 대행 회사에게 맡기기
출처 : 생활코딩 유튜브
참고 사이트
댓글 구현할수 있는 사이트 > 코드 복붙해서 가능
채팅 구현할수 있는 사이트
google analytics 통해서 웹사이트 방문자 분석 가능
08.05 +
html + css + js 복습을 위해 아래 책을 통해 추가적인 개념을 적어보자.
HTML은 태그와 속성으로 문법을 구성한다. 그리고 문법은 크게 콘텐츠가 있는 문법과 없는 문법으로 나눈다.
시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 한다.
<title>(시작태그) My First Web Page! (콘텐츠) </title> (종료태그)콘텐츠가 없는 문법은 앞뒤로 감싸야 할 콘텐츠가 없으므로 시작 태그만 사용한다. empty tag라고 불림.
때문에 시작 태그가 곧 요소여서 아래같은 태그들은 시작태그만으로 구성된다.
<br>Q) HTML 문법을 이루는 가장 작은 단위는?
A) Tag
HTML의 기본 구조
DTD
웹브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려 주는 것, 항상 처음에 넣어야한다. HTML5 문서 형식으로 해석하고 해당 버전 이후로 이전 버전의 문서 형식을 정의할 필요가 없어 위 처럼 DTD를 작성한다.
html 태그
htlm 태그는 HTML 문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태긍 안에 작성한다.
head 태그
HTML 문서의 메타데이터(metadata)를 정의하는 영역. 메타데이터란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접 노출되지 않고, 보통 meta, title, link, style, script 등의 태그를 사용해 HTML문서의 여러 정보를 정의한다.
body 태그
웹 브라우저에 노출되는 내용 작성. 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성
