<div>여러개의 태그들을 묶어주는 역할<div> <h2>카레만들기</h2> <ul> <li></li> <li></li> </ul> </div>
<span>인라인 태그들을 묶어주는 역할
ex) 오늘 이라는 글자에서 그린만 변형시키고 싶을 때
<p><span>오늘</span> 날씨가 좋다.</p>
-> "오늘"만 변형
태그숫자(원하는 태그 갯수)를 입력하면 그 원하는 갯수만큼 입력된다
li*3<li></li> <li></li> <li></li>
태그를 중첩시키고 모두 3개 입력하고 싶을 때
(ul>li*3)*3<ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> ```
폼태그
input : 속성
name : 전송되는 변수 명
id : input의 이름
type : 입력형태
value : 값
placeholder : input 설명글
required : 필수입력지정
readonly : 읽기전용(수정할 수 없음)
disabled : 사용불가
autocomplete : 자동완성 기능 지원 (on/off 로 키고 끄고 가능하다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>폼태그</h1>
<form method="get" action="join.php">
<input type="text" name="userId">
<input type="text" name="userPass">
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
</body>
</html>폼태그
- input은 name값이 필요하다
- method는 전송방식
- submit은 전송
- reset은 입력했던 값을 모두 취소
- name= ? 에 작성하는 것은 한글이 아닌 영어로 작성하는 것이 좋다.
- reset은 form 태그 안에 있는 모든 것들을 reset 시킨다. 따라서 form 태그 안에 있어야한다.
- cellpadding="10" cell과 cell 사이의 간격을 설정하는 태그
- hidden : 입력은 할 것이지만 사람들 눈에는 보이지 않도록 숨기는 태그
◼ 입력되는 비밀번호를 *** 형식으로 숨기고 싶으면
<input type="password" name="userPass">◼ 아이디와 비밀번호 입력창에 아이디와 비밀번호라는 글씨를 만들고 싶을 때
<input type="text" name="userId" placeholder="아이디 or 비밀번호"> 를 입력하면 생성된다.◼ 여러가지 중 하나를 선택해야할 때 (이 경우, name을 일치시켜준다.)
<input type="radio"> 를 이용하면 남 여 와 같은 체크형식을 만들 수 있다.
◼ required : input 값을 만들고 전송을 보낼 때 필수 입력값을 입력하지않았을 때 작성하도록 만드는 태그
*<input type="text" placeholder="이메일" name="userEmail" required />*
◼ 여러가지 중 다수를 선택해야할 때에는 input type="checkbox"로 작성합니다.
<input type="checkbox" />오렌지
청포도
◼ 여러가지 중 하나를 리스트 형식으로 선택해야할 때에는 select을 사용합니다.
<select name="student" id="">
<option value="a">초등학생</option>
<option value="b">중학생</option>
<option value="c">고등학생</option>
</select>◼ 파일을 지정할 때
<input type="file" />◼ 버튼을 만들 때에는 input type="button" 또는 이미지 버튼 input type="image"을 사용합니다.
<input type="button" value="버튼"></button>
<button>버튼</button>
<input type="image" src="사진 주소" alt=""/>
<button type="submit">버튼 라벨</button>
버튼
버튼 라벨
◼ 같은 form에 type이 submit/reset인 input을 입력해두면 전송 및 취소가 가능한 버튼을 생성할 수 있습니다.
<p><input type="submit" value="전송"></input></p>
<p><input type="reset" value="취소"></input></p>◼ button에 sumbit과 같은 타입을 지정하여 전송/취소가 가능한 버튼을 생성가능합니다. .
<button type="submit">전송 버튼</button>전송 버튼
◼ block tag
p, h1~h6, div, ul, li, ol, dl, dt, dd
◼ inline tag
a, span, img, input, select, small, mark
<a href="#">네이버</a> <a href="#">구글</a> <a href="#">다음</a> <a> 태그는 옆으로 배치가 된다 -> inline tag
<p>네이버</p> <p>구글</p> <p>다음</p> <p> 태그는 옆에 아무리 공간이 있어도 옆에 배치가 되지 않고 밑에 배치가 된다. -> block tag
사이트 만들기 실습
내가 만든 코드
< !DOCTYPE html >
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="wrap">
<div id="subtitle"></div>
</div>
<h1>ORGANIC</h1>
<h2>오가닉</h2>
<p>러프한 소재와 함께 자연 속의 공간을 풍부하게 경험할 수 있는 오가닉한 스타일</p>
</div>
<div>
<div id="greenstyle">
<div>
<img src="../03.사이트실습/homecc/images/green_img.gif">
</div>
</div>
<div id="concept">
<div>
<h3><img src="../03.사이트실습/homecc/images/title03_03.gif"></h3>
<p>오가닉 스타일은 가족이 편안함을 느끼며 휴식할 수 있도록 감성에 초점을 둔 스타일입니다. 시간이 지나도 가치를 잃지 않는 공간을 디자인 컨셉으로 하여 자연소재를 사용하고, 고급스러우면서 감성적인 분위기를 연출합니다. 내추럴과 상반되는 마감재와의 믹스 앤 매치. 그리고, 따뜻하고 유기적인 패턴을 포인트로 주어 자칫 밋밋해 보일 수 있는 공간에 생동감을 주었습니다.
</p>
<li>자연 친화적인 공간 연출</li>
<li>뉴트럴 컬러, 그린 포인트 컬러, 재질의 조화를 통한 내추럴한 분위기 연출</li>
<li>유기적 패턴의 소품과 미려한 곡선의 스칸디나비아 스타일의 가구로 스타일 완성</li>
</div>
<div>
<h3>책임 디자이너<br>김미화</h3><img src="../03.사이트실습/homecc/images/photo.gif">
</div>
</div>
<div id="life">
<div>
<h3><img src="../03.사이트실습/homecc/images/title03_02.gif">
<h3><img src="../03.사이트실습/homecc/images/title04.gif"></h3>
<p>물질적인 풍요를 바라기 보다 현재 상황에 만족하고 감사함을 가지며 소외된 계층에 관심을 가지고 더불어 잘사는 사회를 만들기 위해 작은 금액이라도 나눔을 실천하려고 노력합니다. 그린라이프 스타일의 사람들은 자연의 느낌을 좋아하지만 그렇다고 도시에서 멀리 떨어진 곳에서 살려고 하지는 않습니다. 대신 자연의 아름다움을 담은 주거 공간에서의 삶을 살고자 합니다.</p>
</div>
</div>
<div id="styleview">
<div>
<h3><img src="../03.사이트실습/homecc/images/title03_03.gif"></h3>
<h4><img src="../03.사이트실습/homecc/images/view_img01.gif"></h4>
<p><img src="../03.사이트실습/homecc/images/viewtext01.jpg"><img src="../03.사이트실습/homecc/images/detail_view.gif"></p>
<h4><img src="../03.사이트실습/homecc/images/view_img02.gif"></h4>
<p><img src="../03.사이트실습/homecc/images/viewtext02.jpg"><img src="../03.사이트실습/homecc/images/detail_view.gif"></p>
<h4><img src="../03.사이트실습/homecc/images/view_img03.gif"></h4>
<p><img src="../03.사이트실습/homecc/images/viewtext03.jpg"><img src="../03.사이트실습/homecc/images/detail_view.gif"></p>
</div>
</div>
</div>
</body>
</html>선생님이 만든 코드
< !DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div id="title">
<h1>ORGANIC</h1>
<h2>오가닉</h2>
<p>러프한 소재와 함께 자연 속의 공간을 풍부하게 경험할 수 있는 오가닉한 스타일</p>
</div>
<div id="green">
<div id="greenLeft">
<img src="images/green_img.gif" alt="녹색식물 이미지">
</div>
<div id="greenRight">
<h3><img src="images/title03_01.gif"></h3>
<p>오가닉 스타일은 가족이 편안함을 느끼며 휴식할 수 있도록 감성에 초점을 둔 스타일입니다. 시간이 지나도 가치를 잃지 않는 공간을 디자인 컨셉으로 하여 자연소재를 사용하고, 고급스러우면서 감성적인 분위기를 연출합니다. 내추럴과 상반되는 마감재와의 믹스 앤 매치. 그리고, 따뜻하고 유기적인 패턴을 포인트로 주어 자칫 밋밋해 보일 수 있는 공간에 생동감을 주었습니다.</p>
<ul>
<li>자연 친화적인 공간 연출</li>
<li>뉴트럴 컬러, 그린 포인트 컬러, 재질의 조화를 통한 내추럴한 분위기 연출</li>
<li>유기적 패턴의 소품과 미려한 곡선의 스칸디나비아 스타일의 가구로 스타일 완성</li>
</ul>
</div>
<div>
<dl>
<dt><img src="images/photo.gif" alt="여자 흑백사진"></dt>
<dd>책임디자이너<br />김미화</dd>
</dl>
</div>
</div>
<div>
<h3><img src="images/title03_02.gif" alt=""></h3>
<h3><img src="images/title04.gif" alt=""></h3>
<p>물질적인 풍요를 바라기 보다 현재 상황에 만족하고 감사함을 가지며 소외된 계층에 관심을 가지고 더불어 잘사는 사회를 만들기 위해 작은 금액이라도 나눔을 실천하려고 노력합니다. 그린라이프 스타일의 사람들은 자연의 느낌을 좋아하지만 그렇다고 도시에서 멀리 떨어진 곳에서 살려고 하지는 않습니다. 대신 자연의 아름다움을 담은 주거 공간에서의 삶을 살고자 합니다.</p>
</div>
<div id="styleview">
<h3><img src="images/title03_03.gif" alt="styleview"></h3>
<ul>
<li>
<img src="images/view_img01.gif" alt="">
<div>
Keyword <span class="smallText">오가닉키워드</span>
<span class="right"><img src="images/detail_view.gif" alt=""></span>
</div>
</li>
<li>
<img src="images/view_img02.gif" alt="">
<div>
Image Map <span class="smallText">오가닉이미지맵</span>
<span class="right"><img src="images/detail_view.gif" alt=""></span>
</div>
</li>
<li>
<img src="images/view_img03.gif" alt="">
<div>
Material Photo <span class="smallText">오가닉마감재</span>
<span class="right"><img src="images/detail_view.gif" alt=""></span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>실습 후, 수정해야할 것과 숙지해야할 것
<li>는 무조건<ul>안에 넣어줘야하는 점을 숙지하지 못하고 독립적으로 li를 사용했다.- 태그를 열고 닫는 것에 익숙하지 않아서
<div>의 열린 코드가 있지만 코드를 닫는</div>가 없어서 오류를 발생시킨다.- 같은 사이즈로 h3로 만들어줘야하지만, h3와 h4를 사용하며 크기가 다른 글자를 만들었다.
<br/>이나<img/>를 사용할 때, 닫는 코드로 사용하는 것이 좋다.<dl>,<dt>,<dd>의 사용법을 다시 한 번 숙지하기 !
