텍스트와 관련된 태그
-
제목태그
h1~h6 - 크기순
-
본문태그
p - 문단구분 (내용상 구분)
br - 종료태그 /br가 없다! (빈 요소)
pre - 입력한 모습대로 즉 엔터와 들여쓰기를 그대로 인식해서 출력 (절대 좋은게 아님..!)
-
글자태그
strong - 볼드 / em - 이탤릭체 /
sub - 아랫첨자 / sup - 윗첨자 /
ins태그 - 밑줄 추가 / del - 취소선 추가
링크태그
-
링크태그
a - 필수 속성(href)으로 연결해주는 경로 명시
tartget 이라는 속성은 _self(새탭에서 열기)/_black(새창에서 열기)를 지정함
**속성은 반드시 "여기"안에
-
절대경로 / 상대경로 차이
멀티미디어
-
이미지태그
img - 필수속성(src 즉 이미지 url)이 있으며 br처럼 빈 요소 태그
alt 라는 속성으로 src안에 이미지가 없을 때 혹은 이미지를 불러오는 과정에서 어떤 에러가 났을 때 대신 표시되는 문장 지정
-
오디오비디오태그 잘안씀
그럼 유투브 영상은 어떻게?
iframe - 빈 요소로 주로 유투브 공유하기에서 풀코드로 짜서 제공해줌
테이블태그와 리스트태그
-
테이블태그
아무렇게나 쓰면 안되고 일정한 형식과 규칙에 따라야함
table(표전체) - tr(table row 행구분) - th(table heading 행내부 제목) - td(table data 행 내부 데이터 셀)
왼쪽에 표제목이 있도록?!
여러행, 열을 합쳐서 차지하게 하는 속성 : rowspan / colsapn
-
리스트태그
ol - 순서 있는 목록 감싸기 1.a 2.b 3.c (각 항목은 li)
start 속성으로 시작하는 숫자 결정 type 속성으로 시작하는 문자 결정
reversed 속성으로 순서 반대로 - ""없이 키만 쓴다는 점
ul - 순서 없는 목록 감싸기 -a -b -c (각 항목은 li)
value 속성으로 번호지정
들여쓰기가 포함되어있고 [ul 안에 ul / ol] 혹은 [ol 안에 ul / ol] 식으로 얼마든지 중첩이 가능하다
양식태그
-
양식태그
form - 어떤 양식의 입력 값들을 감싸는 태그
입력 받은 값들을 어떤 프로그램 혹은 어떤 주소의 서버에 넘겨줄 지를 표시하는 속성 action="xxx.py/xxx.php/http://~~"이 있음
서버로 넘겨줄 때는 method 속성으로 어떤 방식으로 넘겨줄지를 정해야함 (HTTP Request Message에 담아서 보낸다 → 이 메세지는 헤더 바디로 구성되며, 헤더 부분에 대상 url이, 바디에 내용이 담김)
Post 라고 무조건 좋은 건 아니고, 특징으로 인해 목적과 쓰임에 차이가있다.
-
Get 방식 : url끝(헤더)에 붙여서 눈에 보이게 보냄 (like 엽서카드)
데이터 조회만을 목적으로 할때 (like 네이버 검색창에 검색하는 것)
-
Post 방식 : body속에 감춰서 보냄(like 편지봉투)
게시물 작성, 수정, 삭제 목적 (→ 이게 get으로 이뤄진다면 남이 내 아이디로 로그인이 가능해지겠지)
input - form 안에서 사용자로부터 값을 입력을 받는 빈 요소 태그
type이라는 속성으로 입력 값의 타입 지정, value라는 속성은 실제 할당되는 값 지정(입력 받지 않을 때를 대비해서 초기값처럼 두면 개인정보 변경시 유리 - 사용자가 입력을 했다면 value속성에 그 값이 들어가서 변경된다), 가이드 문구를 제시하는 placeholder 속성과 이 입력 값들을 구분하기 위해 사용하는 name 속성도 자주 사용됨
타입이 정말 많으므로 상황에 맞게 타입을 잘 사용하자
password 타입을 쓰면 입력값이 별표로 들어가고 select는 option태그와 함께 (select 태그의 value를 가지고 있는 것이 option) 인풋값 선택을 가능하게 하며 checkbox/raido를 사용해서 체크버튼을 구현할 수도 있음
특히 form 태그에 넘겨주는 작업을 시작하도록 요청하는 input 타입은 "submit", 또는 input 태그 대신 button 태그로도 그 기능을 할 수 있음
input 태그의 submit type과 button 태그의 차이? 기능은 거의 동일하나 button 태그를 쓰면 태그 안에 이미지나 링크를 넣는 등이 가능하며 디자인적으로 자유롭고 적용가능한 템플릿이 많아서 button 태그를 쓰는 게 유리함
textarea - 긴 텍스트를 입력받을때 쓰는 태그 (짧은 텍스트는? 그냥 input type="text")
label - 각 input이 어떤 역할을 하는지 알려주는 이름표와 같은 기능
input에서 id 속성에 해당하는 "값"을 그대로 label에 for 속성에 붙여넣으면 이제 label을 클릭하면 자동으로 해당 label이 가르키는 input에 입력하도록 기능
div - 태그들을 구분짓고 묶기 위해 사용되는 태그
css와 함께 화면 정렬, 구성등을 만들어 내기 위해 html파일에 아주 많이 사용
-
-
이때 만들어진 html파일을 크롬브라우저에 넘겨주면, 브라우저가 자체적으로 웹 통신을 위한 포트(8000/8080)를 차용, 내 컴퓨터를 (임시)서버로 해서 통신 결과를 출력