3. 2023.11.17 [상자 박스 및 메뉴판 만들기1]
-복습-
<html>
<head>
<title> 태그 연습</title>
</head>
<body>
<!-- 제목 : html 수업 복습
이미지: 픽사베이에서 다운로드 줄바꿈없음
글 문단으로 어제배운 html 활용
링크 html 파일 연결 -->
<h1>html 수업복습</h1>
<!-- 이미지 태그와 p태그 이용하여 사용해보기. 저장후 live server 사용하여 실행 -->
<p> 어제배웠던 html을 활용합니다.</p>
<img src="dododo.jpg" alt="흰족제비그림" width="500" heihgt="500">
<!-- 초보는 프로모션 사이트 같은 이벤트 사이트에서 사이트 분석하며 공부를 권장합니다.-->
<a href="20231116대표적인태그.html">어제배운 파일</a>
</body>
</html>
form (body 영역, 속성이 있어서 자동완성으로 쓰는게 효율적)
-lavel
위에있는 infut 태그와 연결
라벨이 id값 찾을수있게
-infut : </> 가 없다. 반드시 , <input type="__">
로그인할때,설문조사,게시글 작성시 주로 활용
특수한 태그
사용자가 데이터를 입력하는 영역을 결정
-action 버튼 눌렀을때 넘어가는 다른 홈페이지(html)
결과
-checkbox
button 클릭 시 사용, 글자 이미지 삽입 가능
제출 눌러도 변화가 없음
두번째 제출 누르면 input type sumit에 설정된거
그리고 내 이름입력하고 체크박스 체크시 초기화누르면 초기화됨
**form정리**
<!DOCTYPE html>
<html lang="en">
<head>
<title>대표적인태그2></title>
</head>
<body>
<form>
<label>이름</label>
<input type="text">
<input type="submit">
</form>
<form action="20231117 태그연습1.html">
<label for="name">이름</label>
<input type="taxt" id="name">
<input type="checkbox" name="" id="check">
<lavel for="check">동의하시겠습니까</lavel>
<input type="submit">
<!--버튼태그 확인-->
<button type="button">버튼</button>
<button type="submit">제출</button>
<button type="reset">초기화</button>
<!-- 폼태그의 경우는 속성이 있어서 자동완성으로 쓰는게 효율적 -->
</form>
결과
ol,ul 태그
-ol 순서대로 1234567 등 배열 목적
-ul 순서없는 기호 점 등으로 나열목적
여기까지 코딩입력파일
여러 케이스 form 분석 > 카카오톡의 경우
submit 이 로그인
input이 아이디적기란
>구글의 경우
검색란을 input으로 활용
>네이버 블로그
댓글쓰기가 input을 활용
등록은 submit을 활용
list 경우
>네이버에서 쇼핑 원플원 쇼핑라이브 등 이런건
이름에 오른쪽마우스 클릭->검사 클릭->링크 분석
태그의 속성
부모의 자식관계
<ol>
<li>커피</li>
<li>차</li>
<li>우유</li>
</ol>결과
1. 커피
2.차
3.우유
ol 은 부모코드 li자식코드
if)
<li>커피</li> 를 지운다면
결과
1.차
2.우유
네이버에서 '2024 수능' 검색했는데
네이버는 robots.txt로 정보수집 할 수 없다고 뜬다
즉 검색어로 정보제공할 수 없으니, 이 링크에 정보를 보고 참고하라는 뜻이다
메타태그 - 웹사이트에서 잘 검색될 수 있게 도와주는 태그
결과값은 없지만 검색시 도움됨
-header
<body>
<header>
<h1>현재 웹사이트의 제목</h1>
</header>
시멘틱태그 - 의미있는태그
section 태그
<section><h2>글의제목</h2><p>글의내용</p></section>
97p 참고
footer - 언제만들었는지 등 제작자에 대한 정보 (하단부분에 위치해있음)
ex)
&검색엔진 인식 범위
meta 인지
시멘틱코드 인지범위는 h1 에 인지함
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ총정리
1117 HTML 태그2와 태그의 특징 (81p~
form: 입력 칸을 만듬. 그래서 폼태그 안에 input 태그 넣어서 진행함.
input: 사용자가 값을 입력하면(사용자로부터 값을 가져옴) 그것을 서버로 전송
- text : 값 입력
- submit : 폼태그 안에있을때만 실행, 작성한 내용을 제출함
label: input 의 설명을 보충 및 표시
button : 버튼형태로 만듬. 여러 기능이 있는데, 제출 기능,제출 안하는기능,초기화 기능 등이 있음
-button,submit,reset
84p~
ol : 1234등으로 순서대로 나열
ul: 순서없이 나열
*이 두 태그는 늘 li태그를 자식으로 둠(sub?)
86p~
웹에서 가장 많이 쓰는 태그
90p
HTML 특징
1.모든 태그는 부모(상위) 자식(하위)관계를 가지고 있다.
- 쓰는 이유 하위분류를 줄여서 코딩 제작 및 버그 수정에 쉽기 때문에
-ol ul > li
2. 검색엔진 (알아두면좋은내용,화면출력하는데 영향끼치진 않음, 검색엔진이라서)
검색엔진이 잘 되게 도와주는 태그들
1) 시멘틱 태그: 의미를 가진 태그 (HTML5 부터 사용함-네이버 다음같이 오래된서버는 사용안함)
-header
-nav
-section
-article
최근사용예시
구미라면 축제 (xn--2e0bw4qfnckzb.com)
-aside
-footer
총 오늘 연습한 파일 1117