1. 기초
- 서버(server): front-end를 주는 역할
- 프론트엔드(front-end): HTML, CSS, JavaScript 등 사이트 이용자의 눈에 보이는 부분
- 백엔드(back-end): 사이트 이용자의 눈에 보이지 않는 부분
HTML은 크게 head와 body로 구성된다.
- head
<head>페이지의 속성 정보</head>
- body
<body>페이지의 내용</body>
2. 문법
<tegname>contents</tegname>- <tegname>: 시작 태그, </tegname>: 종료 태그 - <contents>: 내용
주석
<!--주석 내용-->주석: 웹브라우저가 해석하지 않는 코드주석처리 하고싶은 라인 선택 → [ctrl+/]줄맞춤
줄맞춤 하고싶은 라인 선택 → [Ctrl + Alt + L]
속성
<tagname attribute="value">Contents</tagname>태그에 속성을 추가하고 값을 정함 => 같은 태그가 여러개일 경우 특정 태그를 CSS로 꾸미려면 그 태그에 이름을 붙여줘야 함<예시>
<div class="mytitle">제목입니다.</div> div라는 태그에 class라는 속성을 추가하고 "mytitle"이라는 값을 지정함
3. 자주 사용되는 태그
3-1. 구역을 나누는 태그
<div>구역을 나누는 태그</div> <p>문단을 나누는 태그</p>- 구역과 구역, 문단과 문단 사이 간격이 크게 있음 - p는 paragraph의 약자
<br>: 줄바꿈 <hr>: 수평 가로선
<ul> <li>bullet 1</li> <li>bullet 2</li> <ul>
- bullet 1
- bullet 2
3-2. 구역 내 콘텐츠 태그
- h1은 페이지마다 하나씩 써줘야 검색이 잘 된다.
<h1>제목을 나타내는 태그</h1> <h2>소제목을 나타내는 태그</h2> <h3>더 작아진 제목</h3> <h4>더더 작아진 제목</h4> <h5>더더더 작아진 제목</h5> <h6>더더더더 작아진 제목</h6>제목을 나타내는 태그
소제목을 나타내는 태그
더 작아진 제목
더더 작아진 제목
더더더 작아진 제목
더더더더 작아진 제목
특정 <span style="color:red">글자</span>를 꾸밀 때 사용특정 글자를 꾸밀 때 사용
링크
<a href="link">Label</a><예시>
<a href="https://blog.naver.com/eunjo_ourism">은주의 블로그</a>
input
<input type="text"/><input type="password"/><input type="radio"/><input type="checkbox"/><input type="button"/><input type="submit"/><input type="reset"/><input type="image" src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjAxMTdfMjkx%2FMDAxNjQyNDA5OTA2ODkw.8ZSk_14G_Zxo__E4lLuBjyLrNpi6GdbSSIcT4H1q9Ccg.zXpE9i5bnxKsAWF0iLZtLH8TZHirvAAsLSZ317Lzf3sg.JPEG.eunjo_ourism%2FIMG_1092.JPG&type=a340"/><input type="file"/>
<textarea>여러 줄의 문자열을 입력할 수 있는 양식</textarea>
