22.10.24 HTML
자기전에 한번 읽기
HTML 웹페이지의 Structure 마크업 언어
CSS 웹페이지의 Presentation 스타일
JS 웹페이지 간의 Interaction
HTML elements 참고서
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 트리구조
<!DOCTYPE html> -선언 부분 이 문서가 HTML문서임을 명시
<html> -html 시작 태그
<head> 부모 노드(재분배점) -문서의 메타데이터 선언(페이지에 대한 정보 가져. 브라우저의 탐색을 도와줄 정보)
<title> 자식 노드 -브라우저 탭에 보이는 문서 제목
<body> 부모 -문서 내용 담는
<h1> 자식 -heading. h1~h6 크기 차이
<div> 자식 부모 -content division. 줄바꿈 있음. 한줄을 차지.
<span> 자식 -content container (줄바꿈 없음). 컨텐츠 크기만큼 공간 차지.
...</태그> 선언 제외하고 각 태그당 쌍으로 닫는 태그 붙여줘
이미지 태그 <img src(속성.키.)="파일명.확장자?"(속성에 대한 값.밸류.) /> "/>"는 셀프 클로징. 생략 가능.
두 태그(시작과 종료) 사이에 콘텐츠 넣어서 구조 표현
<p class(attribute name)="paragragh"(attribute value)(attribute 속성)>여긴 콘텐츠 자리(contents)</p>
추가로 자주 사용하는 태그
<a> anchor 의 약자 link 삽입. href 속성 주로 사용
<a href="주소" target="_blank">스윗포테이토</a> 스윗포테이토 누르면 주소로 간다, target="_blank"새탭으로 열린다
<ul> unordered list 각각 리스트 앞에 숫자 대신 bullet mark 붙어
<ol> ordered list 넘버링 붙여줘
<li> list
<input> text, radio, checkbox 등 input
<input type="text" placeholder="type here"(쓰는 공간에 디폴트로 보여주는 글자)>
<input type="password"> 로 password 입력 가능
<input type="radio" name="option1"(option1라는 그룹설정. 이 그룹 선택지 중 하나만 선택하도록) value="선택지(선택값)"> 선택지명 (radio: 동그라미에 점찍는 선택지)
<input type="radio" name="option1" value="선택지(선택값)"> 선택지명 (체크 박스와 다르게 동그라미 중 하나 선택 가능)
<input type="checkbox"(체크박스)> 선택지명 (여러 선택지 체크 가능)
<textarea></textarea> 열고 닫아주면 텍스트 쓸 공간 삽입. 멀티 라인 가능(여러 줄 입력 가능)
<button>제출</button> 제출(이라 쓴) 버튼이지 뭐
웹 표준 HTML Living Standard 여기서 바람직한 표준 제시. MDN이 가장 신뢰성 있는 공식문서.
<script> 엘리먼트가 자바스크립트 실행 위해 사용된다. 예시 <script src="sp-javascript.js"></script>
<p> paragraph 하나의 문단 표현
<section> (시멘틱 요소의 일부) 큰 의미 단위가 될 수 있는걸 묶어서 하나의 구역으로 구분
-여기서 semantics. HTML 요소의 이름에 의미를 충분히 담고 있음. semantic 의미의. 그 태그 자체가 의미가 있는 거야 h1이 가장 큰 제목이란 역할을 부여하잖아 텍스트에. 폰트사이즈를 키워서 제일 큰 제목처럼 보이게 할 순 있지만 이건 이게 제목이다 라는 걸 이걸 보고 의미를 알 수 없잖아. 이게 시멘틱 요소 사용하면 제목이란걸 검색 엔진도 아니까 이걸 우선순위로 해서 검색 우선순위를 보여주겠지 맞는거 사용하는게 좋다~)
-마찬가지로 <div>도 섹션 구분의 의미를 갖고 있지 않아서 섹션 구분엔 사용하길 지양해. 작은 구역 구분 정도는 최후의 수단으로 괜찮다.
W3 Schools https://www.w3schools.com/html/html_exercises.asp 무료 글로벌 코딩 학습 사이트
tooltip : 커서를 위에 옮기면 뜨는 도움말. <p title="뜨게 할 도움말">커서를 위에 옮겼을때 도움말이 뜨게 할 텍스트</p> 여기서 p 태그는 p이든 div이든 상관 없는듯
이미지 크기 : <img src="불러오는 이미지 주소" width="폭(숫자)" height="높이(숫자)">
이미지 안보여지면 이미지 대신 보여줄 텍스트 : <img src="이미지주소" alt="이미지 대체할 문구">
주제와 주제 사이 구분 horizontal rule : <hr> 이걸로 구분 선을 넣을 수 있어 CSS에서 모양 잡기 가능
line break : <br> 구문과 구문 끊어서 다음 줄에 시작
preserve all spaces and linebreaks(such as poem) : <pre>contents</pre>
set color of the paragraph : <p style="color:원하는색;">blah paragraph.</p>
font setting : <p style="font-family:폰트체;">blah~ paragraph</p>
paragraph align : <p style="text-align : 어떤정렬;">~~</p>
text size : <p style="font-size : 50px;">~~</p>
뭐가 있는지만 나중에 봐야겠다