📘 HTML
기본 문법 작성 : <태그이름> 꺽쇠 괄호 안에 적절한 태그 이름 넣기
태그는 표현이나 어떠한 기능의 수행을 지시할 수 있는 HTML의 문법으로
컨텐츠를 가지는 태그와 컨텐츠를 가지지 않는 태그로 구분된다.
- 컨텐츠를 가지는 태그
<div> 콘텐츠 </div>
기본적으로 <> 열리는 태그 (시작 태그)와 </> 닫히는 태그 (종료 태그) 사이에 콘텐츠를 작성한다.
- 컨텐츠를 가지지 않는 태그
<br />
시작 태그 하나만 존재하는 단일 태그로 self closing으로 /> 을 붙여서 닫아줘야 한다.
- 속성과 값
태그는 기본적으로 속성과 속성에 따른 값을 가지고 있다.
어떤 태그를 쓰느냐에 따라 그 태그가 가진 고유 속성 이 있고,
모든 HTML 태그에서 공통으로 사용할 수 있는 전역 속성이 있다.
<div title = "제목"> Content </div>여기서 title은 전역 속성으로, div 태그에 대한 속성이고 "제목"은 속성에 대한 값이다.
<a href = "https://naver.com"> 네이버 바로가기 </a>a라는 태그는 웹사이트에서 글자를 누르면 해당 페이지로 이동하게 하는 기능을 가지고 있다.
이 태그에는 고유 속성인 href 속성이 있고 이 속성에 대한 값으로 url 입력이 가능하다.
- HTML 기본 문서 구조
<!DOCTYPE html> 1. 문서의 버전을 명시한다.
<html lang = "ko"> 2. HTML 문서 시작 선언 및 문서 기본 언어 설정
<head> 3. 문서에 필요한 정보가 기입되는 곳
<title> 문서 제목 </title> 4. head태그 안에 들어가는 title태그는 탭이나 창에 뜨는 이름 표시
</head>
<body> 5. 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
안녕하세요!
</body>
</html>
- 부모 요소와 자식 요소
head 태그와 body태그는 html 태그의 자식 요소이다.
<html>
- <head>
- <title>
- <body>개발자들은 들여쓰기의 깊이를 보고 부모 요소와 자식 요소를 판단하기 때문에
들여쓰기 깊이 꼭 지켜야 한다.
- 주석
개발자가 코드 내에 입력한 메모
<!-- 주석 내용 -->줄바꿈해서 여러 줄 만들 수 있지만 주석 안에 또 주석을 생성할 수는 없다.
개발자 도구나 소스 보기를 통해 코드가 보일 수 있으니 개인 정보나 보안 정보 기입 금지!
📘 head
사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역
- head가 가질 수 있는 정보의 종류
- 타이틀
- 메타 데이터
<meta charset = "UTF-8"> - 인코딩 정보
<meta name = "description" content = "이 문서는 실습 문서입니다."> - 문서 설명
<meta name = "author" content = "yunsu"> - 문서 작성자- CSS, Script
- style
컨텐츠를 가지는 태그로 head태그 안에서 문서를 스타일링 하는 태그.
시작 태그와 종료 태그 사이에 CSS가 들어간다.
코드 작성 시 style이 너무 길어지면 해당 파일의 head태그가 너무 길어져 편집이 힘들어지는데 이럴때 link태그를 사용하게 된다.
- link
컨텐츠를 가지지 않는 단일 태그.
link태그는 기본적으로 rel 속성과 href 속성을 가진다.
<link rel = "" href = "" />
style.css를 생성해서 style태그를 따로 분리 작성하면 더 많은 CSS 적용이 가능해진다.
그 후 link태그로 style.css의 stylesheet를 불러오면 그대로 적용이 가능해진다.
- script
CSS는 head안에 style 태그를 사용하거나 별도 시트 파일 만들어 link태그로 불러오는데
script태그는 두가지 기능을 한번에 사용 가능하다.
script태그는 컨텐츠를 가지는 경우와 가지지 않는 경우로 나뉜다.
- 컨텐츠 방식
<script>
const hello = 'world';
console.log)hello);
</script>style 태그를 사용하는 것 처럼 작성하면 된다.
- 링크 방식
<script src = "script.js"></script>컨텐츠를 가지지 않는다고 단일태그처럼 self closing을 사용하면 안되고 꼭 종료 태그를 작성해줘야 한다.
link 태그 처럼 별도의 시트를 만들어 관리가 가능하다.
📘 body
사람 눈에 실제로 보이는 영역으로 body 태그 내 여러개의 태그를 사용해서 웹문서를 만들고,
웹문서 여러개를 모아서 웹사이트가 만들어진다.
- block (블록 레벨 요소)
레고 블록처럼 차곡차곡 쌓이고 그 줄의 너비가 화면 너비를 꽉 채우는 요소
블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소 를 나타낸다.
인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
블록요소는 너비를 아무리 작게 설정해도 가로 영역을 모두 차지하기 때문에 다른 요소가 옆으로 올 수 없다.
대표적인 블록 레벨 요소
<div>, <article>, <section>...
- inline (인라인 레벨 요소)
컨텐츠가 가진 크기만큼만 범위를 가진다.
블록 요소 내에 포함될 수 있는 요소 (블록 레벨 요소를 자식 요소로 가지지 못한다.)
주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열 된다.
블록이랑 다르게 크기 조절 불가, 좌/우에 여백을 넣는 것만 허용된다.
대표적인 인라인 레벨 요소
<span>, <a>, <strong>...
- inline-block (인라인 블록)
글자처럼 취급되나, block태그의 성질을 가지는 요소
block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
css로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소 이다.
