Form문
아이디:
비밀번호:
성별: 남자 여자
성별: 남자 여자
취미: 드라이브 영화감상 게임 캠핑 운동
직업: 선택하세요 무직 학생 회사원 기타
직업그룹: 선택하세요 무직 학생 회사원 기타
사진
어느 웹사이트에서나 이렇게 아이디,비번, 개인정보를 입력하는 창을 쉬이 볼 수 있다. 바로 form문 이다.
입력양식<body> <h2>Form</h2> <form method="post" action="./test.php"> <!-- method는 입력 데이터의 전달 방식을 선택함--> <!-- action은 입력 데이터의 전달 위치를 지정함--> <p> 아이디: <input type="text" size="30" maxlength="10" placeholder="아이디를 입력해주세요" /> </p> <!-- size="30" 은 30px이 아닌 '30글자가 들어갈만한 정도의 크기' 라는 뜻 --> <!-- maxlength="10" 는 10글자가 '최대 입력치' --> <!-- placeholder="아이디를 입력해주세요" 를 넣으면 input text칸에 뜬다. 사용자가 아이디 입력을 시작하면 사라진다. --> <p> 비밀번호:<input type="password" size="30" maxlength="10" placeholder="비밀번호를 입력해주세요" /> </p> <p> 성별: <label for="man">남자</label <input type="radio" name="gender" id="man" /> <label for="woman">여자</label> <input type="radio" name="gender" id="woman" /> </p> <!-- input=type "radio" => 선택 버튼을 준다 하지만 이중 선택이 가능해서 name="gender" 라는 동일한 이름을 부여해주면 1개만 선택되게 가능 --> <!-- id 속성을 주고 label태그에 for="id이름"을 주면, 이젠 "남자", "여자" 라는 단어를 눌러도 선택이 가능하다 --> <p> 성별: <label>남자<input type="radio" name="gender" /></label> <label>여자 <input type="radio" name="gender" checked /></label> </p> <!-- label 태그를 처음과 끝에 감싸주면 for=""를 써줄 필요가 없다 --> <!-- checked => 미리 체크되어 나타남 --> <p> 취미: <label>드라이브 <input type="checkbox" name="hobby"/></label> <label>영화감상</label> <input type="checkbox" name="hobby"/></label> <label>게임 <input type="checkbox" name="hobby"/></label> <label>캠핑 <input type="checkbox" name="hobby"/></label> <label>운동 <input type="checkbox" name="hobby"/></label> </p> <p>직업: <select multiple="multiple"> <!-- shift 누르면 다중선택가능 --> <option>선택하세요</option> <option value="무직">무직</option> <option value="학생">학생</option> <option value="회사원">회사원</option> <option value="기타">기타</option> <!-- value 속성이 바로 db에 들어가는 데이터값이 된다 --> </select> </p> <p>직업그룹: <select> <option>선택하세요</option> <!-- 옵션 그룹화 --> <optgroup label="group1"> <option value="무직">무직</option> <option value="학생">학생</option> </optgroup> <optgroup label="group2"> <option value="회사원">회사원</option> <option value="기타">기타</option> </optgroup> <!-- value 속성이 바로 db에 들어가는 데이터값이 된다 --> </select> </p> <p><textarea cols="50" rows="10"></textarea></p> <!-- cols="50" 세로 50글자, rows="10" 가로 10글자 --> <p>사진 <input type="file"></p> <p><input type="submit" value="전송"> <input type="reset" value="재작성"> <input type="button" value="클릭" onclick="alert('클릭되었습니다')"> </p> </form> </body>
이름
<form method="post" action="./test.php"> <!-- method는 입력 데이터의 전달 방식을 선택함--> <!-- action은 입력 데이터의 전달 위치를 지정함--> <fieldset> <legend>입력양식</legend> <table> <tr> <td><label>이름</label></td> <td><input id="name" type="text" size="50px" /></td> </tr> <tr> <td><label>email</label></td> <td><input id="email" type="text" size="50px" /></td> </tr> </table> <input type="submit" /> </fieldset> </form>이번엔 fieldset 과 legend 를 이용한 form문이다.
The fieldset tag is used to group related elements in a form.
It draws a box around the related elements.
And the legend tag defines a caption for the fieldset element.
그래서 저렇게 입력양식 이라는 큰 사각형으로 이름과 이메일 제출란을 감싸준다.
the display tag
.box1 { background-color: rgba(0, 255, 255, 0.2); /* 배경만!!! 투명해짐 */ } .box2 { /* display: none; box3가 box2 자리를 차지하고 box2의 자리가 아예 없어진다. (=아예 없어짐) */ /* opacity: 0; box2가 없어지지만 자리는 그대로다. 즉, box3가 box2의 자리로 올라가지 않고 그냥 비워둔다. (=있는데 안보임) */ /* visibility: hidden; =opacity:0; */ } /* 배경 +글자까지!! 투명해짐 */ }
색상은 키워드 (ex)blue,red,...), rgb, rgba, #000000 로 다양하게 지원되는데 그 중 rgb는 red, green, blue 로 삼색을 나타내고 a 는 alpha의 약자로 투명도를 나타낼 수 있다. 0.0 => 완전 투명, 1.0 => 완전 불투명.
하지만 opacity와 visibility:hidden; 또한 투명도를 의미하는데 rbga를 이용한 것과는 차이가 있다.
opacity를 주면 배경+그 안에 있는 글자까지 같이 투명도 조절이 들어간다.
하.지.만 rgba에서 a 값을 투명하게 조절해주면 글자는 여전히 자신의 설정을 지킨 채 배경만 a의 값으로 설정이 바뀌게 된다.
display:none; 은 그냥 안보이게 되는 걸 넘어서 아예 없어지게 된다. 즉, 자리가 reserved 되지않는다는 것! 그래서 밑에 있던 게 올라오며 자리를 차지해버린다.
반면, opacity/visibility:hidden; 은 그냥 단순히 보이지 않게 된다. 즉, 자리는 그대로 있다. 그래서 아무도 자리 이동이 일어나지 않는다.
gradient
.box1 { /* background-color: rgb(162, 162, 185); */ background: linear-gradient(blue, red); /* 배경에 동시에 여러 색상을 넣을 수 있다 (그라데이션 효과) */ background: -webkit-linear-gradient(blue, red); background: -ms-linear-gradient(blue, red); background: -o-linear-gradient(blue, red); background: -moz-linear-gradient(blue, red); /* 다른 웹브라우저에 혹시나 실행이 안될 걸 대비하는 방법이다 */ } .box2 { background: -webkit-linear-gradient(left, blue, red); /* 그라데이션의 방향을 설정할 수 있다 left, right, top, bottom */ } .box3 { background: -webkit-linear-gradient(left top, blue, red); /* 그라데이션의 방향을 설정할 수 있다 left, right, top, bottom */ } .box4 { background: -webkit-linear-gradient(0deg, blue, red, green); /* 원하는 각도값으로 설정할 수 있다 0deg 는 왼쪽에서 시작한다 */ } .box5 { background: -webkit-linear-gradient( 0deg, blue, rgb(255, 0, 0), #008000 ); /* 원하는 각도값으로 설정할 수 있다 0deg 는 왼쪽에서 시작한다 */ } .box6 { background: -webkit-linear-gradient(0deg, blue 50%, red 80%, green); /* 색에 따라 차지하는 비율 설정 가능 */ } </style>
css3 웹 브라우저별 접두사 (vendor prefix)
css3은 표준안이 아직 확정되지 않은 상태이기 때문에
최신 웹 브라우저들은 css3 속성을 실험적으로 제공하고 있다.
이를 위해 속성이나 속성 값 앞에 웹 브라우저별 접두사(vendor prefix)를 제공하고 있다.
이 접두사의 경우 웹 브라우저별로 다르기 때문에
하나의 속성을 선언하기 위해서는 여러번의 동일한 선언을 지정해야 한다.
웹 브라우저별 접두사는 아래와 같다.
firefox -moz-
chrome, safari -webkit-
opera -o-
explorer -ms-
.box1 { background: -webkit-radial-gradient(blue, red); } /* 모서리 그라데이션 */ .box2 { background: -webkit-radial-gradient( blue, white 20%, #60af60 30%, red 90% ); } .box3 { background: -webkit-linear-gradient( top, rgba(255, 26, 0, 1) 0%, rgba(255, 182, 0, 1) 18%, rgba(38, 178, 0, 1) 36%, rgba(0, 33, 181, 1) 57%, rgba(189, 0, 247, 1) 84%, rgba(189, 0, 247, 1) 84% ); /* Chrome10-25,Safari5.1-6 */ } </style>사실 정말 원하는 그라데이션을 css에서 글자만으로 만드는 것은 어렵다. 그래서 사용할 수 있는 웹사이트가 있는데 마지막 box3는 그걸 이용해서 만든거다.
http://www.colorzilla.com/gradient-editor
다음 웹사이트에 가면 쉽게 내가 원하는 그라데이션을 generate 할 수 있다.
