우선 처음 velog를 써봐서.. 이런저런 것들을 눌러보면서 해보려고한다.
많은 도움을 받은 사용법 정리 velog
정말 감사합니다...
HTML이란
HyperText Markup Language.
HTML문서(즉 코드)로 웹페이지를 만든다. 웹페이지는 우리가 보는 인터넷 창 화면을 뜻한다. 이런 웹페이지들을 랜더링을 통해 서버컴퓨터에 보내진다.
수월한 공부를 위해서.. 코딩 결과 확인을 즉각적으로 할 수 있는 LIVE SERVER를 설치한다. LIVE SERVER를 통해 열리는 html창은 127.0.0어쩌구로 시작된다.
기본 용어
1. 태그
쉽게 말해 태그는 <행동!>의 느낌이다.
<p>content</p>위는 content라는 요소를 출력시키는 명령어다.
- 모두 소문자여야한다.
- 열고 닫음이 확실해야한다.
- 태그 안에 태그 가능하다.
- 들여쓰기는 뭐든 필수
자주 쓰는 태그
<p>문장</p> : 문단을 만든다 <h1>제목</h1> : 제목을 단다. 1이 제일 큰 폰트(1~6) <hr> : 수평선 <br> : 줄 띄우기   : 공백 2번 이상 만들 떄 (중복사용가능)
이미지, 목록, 표, 입력
<img src="url"> : 이미지 출력 (경로 정확히..)
<a href="url/">content</a> : content가 하이퍼텍스트로 변함
<ul></ul> : unordered list
<ol></ol> : ordered list
<li></li> : list item
<table> : 하나의 표
<table border="1"> : 표 테두리
<tr> : 행
<th> : 행에서 제목
<td> : 셀
<caption> : 문장 가운데정렬
<input type="데이터유형">뭐든 속성에 따라 쓸 수 있는 방법이 정말 많은데.. 일단 다음엔 input에 대해서 좀더 자세히 알아보고싶다.
2. 요소
블록레벨 요소와 인라인 요소가 있다.
블록레벨은 자신이 속한 영역 너비 모두 차지하는 것.
인라인레벨은 자신이 필요한 영역만 차지하는 것.
인라인요소
<mark>content</mark> : 형광펜효과content
<strong>content</strong> : 볼드효과content
<em>content<em> : 이태리체content
<g>content</g> : 인용구content
<s>content</s> : 취소선content
3. 속성
<태그>를 이렇게!! 해주세요 라는 뜻이다.
많은 종류가 있어보인다.. 공부를 하고 내가 만들고 싶은 것들이 생기면 구글링 해가며 필요한 것들을 들고와서 써야겠다.
<태그 속성명="값">content</태그>
<태그 속성명="값" 속성명="값"/>
4. 컨테이너
콘텐츠나 레이아웃에 영향을 끼치지 않는다.
요소를 묶어서 관리하는데 이는 콘텐츠의 내용을 구분하고 공통적인 스타일을 구분할 때 유용하다
<div></div> : 블록레벨 <span></span> : 인라인레벨
5. 전역속성
모든 HTML 태그에 공통으로 쓸 수 있는 속성
변수에 카테고리 붙여주기(라고 해도 되나...?
- id : 요소에 고유이름 부여
- class : 요소를 그룹별로 묶기
- style : 요소에 적용할 css style 선언
- title : 요소의 추가 정보 제공, 툴팁 제공(부가정보)
6. 주석
컴퓨터는 알아보지 못하는 개발자의.. 포스트잇..
<!--주석내용-->
문서구조
빈 파일에 !+enter를 하면 기본 구조가 짠!하고 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>여기서 meta란 HTML문서에 대한 메타데이터를 말한다.
일반적으로 문자세트, 페이지설명, 키워드, 문서작성자 등등이 있다.
즉, 웹페이지에 대한 정보를 제공한다.
아래줄은 정보송수신방법에 대한 정보를 제공한다. 나는 이것도 추가해주고 언어도 en에서 ko로 바꿔줬다.
<meta http-equiv="x-ua-compatible" content="IE=edge">
<form> 으로 meta data를 서버로 보냄!
<input type="submit"> : 서버로 제출하기 버튼
