2023.11.20 [상자박스 및 메뉴판 만들기2]
-어제 내용 복습 HTML
meta = 다른 인터넷에 나와있는 내용을 보여주는거
apan 태그 이용해서 문장 일부를 꾸며줄 수 있다
form action : submit 을 누를 때 실행되는 기능
infot은 글자를 사용할 수 없어 label과 같이 사용함
<label for="name">이름</lavbel>
<input type="text" id="name">
label for와 id="name" 이 연결됨
label check 사용시 서버로 연결할때 쓰는 name이기 때문에 비워둠
button - submin,resat 은 form 안에서 꼭 사용
input 은 type 따라 모양이 바뀐다.
-챕터 6가지 배우기.
-블로그에 배운 내용 정리
내일부터 디자인 예정
질문햇더니
일단 자바스크립트 먼저 해보기.
웹카카오 토스 등은 알고리즘 gsat 위주 공부
궁금증 link 와 a 차이는 무엇인가? 혹은
link : head 에서 내부에있는 폴더 안에있는 소스파일 연결 css 등 자바스크립트 연결 , 눈에 안보임
a:body 안에서 활용하고 눈에 보임
a hrsf 이랑 img 이랑 같이 써도되는가? -> o
( 왜? a 태그는 글자만 들어갈 수 있는데
img와 같이 쓰면, 이미지로 이동가능함)
이미지로는 링크가 안되니 a 링크를 활용한다
<a href="https://www.naver.com/">
<img src="네이버 로고연습.png" alt="네이버로고">
</a></p>.
결과
위에 이미지 클릭시
------------------------------------------------------------------------
img
외부에서 이미지 가져올때 (서버에 용량 부족시) 이용하는경우
<p>
<h3>인터넷에서 가져온 이미지</h3>
</p>
<img src="https://cdn.pixabay.com/photo/2023/11/08/23/23/common-kingfisher-8376008_1280.jpg" alt="픽사베이">
input
<p> <h2> input 태그 연습</h2></p>
<!-- #은 form은 기본적으로 actino 이 따라오는데, 이동하지 않을때는
빈공간 보다는 #으로 채워준다 -->
<!-- tap 을 누르면 들여쓰기 가능 -->
<form action="#">
<input type="checkbox" id="" name="" value="">
<!-- checkbox는 필수적으로 id name value가 들어간다. -->
<!-- 지금 연습이라 서버에 전달하지않아서 비워둠. -->
<p>id : 태그를 구분</p>
<div>name : 서버로 전달할 때 그 값의 이름</div>
<div>value : 서버로 전달할 때의 값</div>
<div>책 첫 코딩 챌린지. name은 어떤 책인지 종류설정. value은 직접이름</div>
<div>예시 : 이름(name)-성해정(value)</div> </p>태그 간단정리
<p> <h2> input 태그 연습</h2></p>
<form action="#">
<input type="checkbox" id="" name="" value="">
<p>id : 태그를 구분</p>
<div>name : 서버로 전달할 때 그 값의 이름</div>
<div>value : 서버로 전달할 때의 값</div>
<div>책 첫 코딩 챌린지. name은 어떤 책인지 종류설정. value은 직접이름</div>
<div>예시 : 이름(name)-성해정(value)</div> </p>
결과
<p>
<h3>좋아하는 음식을 체크해주세요(중복가능)</h3>
<input type="checkbox" id="food1" name="food" value="한식">
<label for="food1">한식</label>
<!-- 라벨을 클릭하는 범위를 늘리는 역할, 체크시 편리함 -->
<input type="checkbox" id="food2" name="food" value="중식">
<label for="food2">중식</label>
<!-- value가 다르면 id는 서로 다른 이름이어야함-->
<!-- 동일한 항목에 name은 하나로 묶어줌-->
<!-- 라벨에 id 적는이유가 체크박스 뿐만 아니라 이름 체크시 같이
체크하기 편리하기 때문, 보통 설문조사때-->
<input type="checkbox" id="food3" name="food" value="일식">
<label for="food3">일식</label></p> <p>
<h3>좋아하는 음식을 체크해주세요(중복가능)</h3>
<input type="checkbox" id="food1" name="food" value="한식">
<label for="food1">한식</label>
<input type="checkbox" id="food2" name="food" value="중식">
<label for="food2">중식</label>
<input type="checkbox" id="food3" name="food" value="일식">
<label for="food3">일식</label>결과
<p><h3>성별을 체크해주세요</h3></p>
<input type="radio" id="gender" name="gender" value="여성">
<label for="gender">여성</label>
<!-- 여기서 id와 name 은 같은 이름으로 적어도 결과에는 상관없다-->
<!-- 라디오는 한번선택하면 철회가안되고 중복선택이 안된다 -->
<!-- 여기서 둘중에 하나 선택지를 만들려면 -->
<p><h3>성별을 체크해주세요</h3></p>
<input type="radio" id="gender1" name="gender" value="여성">
<label for="gender">여성</label>
<input type="radio" id="gender2" name="gender" value="남성">
<label for="gender">남성</label>
</p><p><h3>성별을 체크해주세요</h3></p>
<input type="radio" id="gender" name="gender" value="여성">
<label for="gender">여성</label>
<p><h3>성별을 체크해주세요</h3></p>
<input type="radio" id="gender1" name="gender" value="여성">
<label for="gender">여성</label>
<input type="radio" id="gender2" name="gender" value="남성">
<label for="gender">남성</label>
</p>
내가 혼자한 실습
</head>
<body>
<p>hellow world</p>
<div><h1>My form</h1>
</div>
<a href="https://pixabay.com/ko/illustrations/%EB%B0%B0%EA%B2%BD-%EC%BB%B5%EC%BC%80%EC%9D%B4%ED%81%AC-%EC%9D%8C%EC%8B%9D-%ED%8C%A8%EC%8A%A4%ED%8A%B8%EB%A6%AC-8129599/">
<img src="컵케이크.jpg" alt="케이크" width="300" height="300"></a>
<form action="#">
<lavel for="Usename">Usename</lavel>
<input type="text" id="check1" name="">
</form>
<form action="#">
<lavel for="Password">password</lavel>
<input type="text" id="check2" name="">
</form>
<div>
<form>
<input type="checkbox" id="" name="">
<label for="text">I'm not a robot.</label>
<button type="button">sign on</button>
</form>
</div>
</body>
</html>br대신 div 사용
div의 장점: 영역관계가 설정되기 때문에 관리하기 편함. 눈에 잘 보임
결과
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form action="#">
<h2>My From</h2>
<img src="https://cdn.pixabay.com/photo/2023/06/20/01/30/ai-generated-8075768_640.jpg"
alt="사진"
width="300">
<br>
<lavel for="Usename">Usename</lavel>
<input type="text" id="use" name="">
<br>
<lavel for="pw">password</lavel>
<input type="password" id="pw" name="">
</form>
</body>
</html>
<br>
<input type="checkbox" id="check" name="check" value="확인">
<label for="check">I am not robot.</label>
<br>
<button type="submit">sign in</button>
<br>
<button type="submit" value="sign in"/>
</form>결과는 동일한데 , value 값을 통해 이름을 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form action="#">
<h2>My From</h2>
<img src="https://cdn.pixabay.com/photo/2023/06/20/01/30/ai-generated-8075768_640.jpg"
alt="사진"
width="300">
<br>
<lavel for="Usename">Usename</lavel>
<input type="text" id="use" name="">
<br>
<lavel for="pw">password</lavel>
<input type="password" id="pw" name="">
<br>
<input type="checkbox" id="check" name="check" value="확인">
<label for="check">I am not robot.</label>
<br>
<button type="submit">sign in</button>
</form>
</body>
</html>div 대신 br 사용.
form 태그 사용시 자동 줄바꿈 효과있음
input type
-checkbox
-text
이 코딩에서는 name,value 값이 같아도 상관없음
ㅇㅇㅇ
사이트추천
인프런
-----------------------------