HTML
하이퍼 텍스트 마크업 언어는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어이며 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.
html, css는 어떤 관점과 어떤 해석으로든 다양한 정의를 내릴 수 있다고 한다.
나만의 해석으로 만들어보기
html의 초창기, 모든 소프트웨어에 많이 쓰이는 문자를 고유한 숫자(아스키)로 저장하도록 약속하였는데 현재에 와서는 아스키가 아닌 유니버전(utf-8), 모든 나라 언어를 담을 수 있는 초초초초 광범위한 마크업 언어로 이루어진 텍스트파일을 브라우저로 변환할 수 있도록 하는 담당 도구라고 해석해보자 :D
<!DOCTYPE html> #문서의 HTML버전을 지정
* DOCTYPE #마크업 언어에서 문서형식을 정의하며, 웹브라우저가 어떤 HTML버전의
해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
= HTML 버전을 지정하여 알려주는 용도
<html></html> #문서의 전체 범위를 알려주는 역할
<head></head> #문서의 정보를 나타내는 범위, 눈에 보이지 않는 정보
<body></body> #문서의 구조를 나타내는 범위(로고,헤더,푸터,메뉴 등)눈에 보이는 정보
<title></title> #HTML문서의 제목(title)을 정의
<link rel="가져올 문서와 관계" href="./-.css/"/>
#외부문서를 가져와 연결할 때 사용
<script></script> #js파일을 가져오는경우 #js를 html문서 안에 작성하는 경우
<meta name="정보의 종류" content="정보의 값"/> #렌더링되는 영역의 정보 입력요소(element)
<태그>내용</태그> = element
<태그1>
<태그2>
<태그3>내용</태그3>
</태그2>
</태그1>이 로그를 보면 태그1은 태그2의 부모요소, 태그3은 태그2의 자식요소, 태그1은 태그2와 태그3의 조상요소 또는 상위요소, 태그3은 태그1과 태그2의 후손요소 또는 하위요소라 할 수 있다.
앞쪽 태그는 열린태그, 뒤에 /를 포함한 태그는 닫힌태그라 한다.
닫힌 태그가 없는 싱글element(Empty)도 있는데 내용이 필요 없는 태그를 의미한다.
화면에 출력되는 특성으로 크게 인라인 요소(글자를 만들기 위한 요소)와 블럭 요소(상자를 만들기 위한 요소)로 나뉜다.
인라인요소
<span></span>요소 #글자의 콘텐츠 영역을 설정하는 용도, 요소가 수평으로 쌓임. span의 줄바꿈은 띄어쓰기, 줄바꿈 안할 시엔 나눠진 요소라도 붙혀진 상태로 출력.
style은 (가로,세로) 속성을 추가해도 글자는 가로,세로의 사이즈를 가질수 없기 때문에 변화가 없음. 즉, 제약이 있음
블럭요소
<div></div> 요소 - 콘텐츠 영역을 설정하는 용도, 요소가 수직으로 쌓임.부모요소의 크기만큼 자동으로 가로가 늘어남. 시각적인 제어가 유용 = 제약이 없음
인라인&블럭 요소
input 사용자가 데이터를 입력하는 인라인&블럭 요소- 속성
- value #미리 값을 넣어주는 데이터 값
- placeholder="이름을 입력하세요" #사용자가 입력할 값의 힌트
- disabled #입력 요소 비활성화
- type="checkbox" #체크여부를 입력받음 +checked 미리체크가 되게하기
- type="radio" name=" " #같은 네임으로 묶인 그룹에서 1개만 선택가능 (택1)
html 전역속성
전체영역에서 모두 사용할수있는 속성
<태그 title=" "></태그> #요소의 정보나 설명을 지정
<태그 style=" "></태그> #요소에 적용할 스타일을 지정
<태그 class=" "></태그> #요소를 지칭하는 중복가능한 이름(CSS선택자)
<태그 id="이름"></태그> #요소를 지칭하는 고유한 이름
<태그 data-name="데이터"></태그> #요소에 데이터를 지정
