728x90
반응형
CSS
<style>
/* */
#calc{
/* 계산기 전체 테두리 사이즈 */
width: 320px;
height: 480px;
border: 1px solid black;
margin: 50px auto;
}
.flex {
display: flex;
}
.top {
padding: 5px 10px;
}
.top > .flex > div {
margin: 0 10px ;
}
.sb{
/* 버튼, m버튼, mode에 공통적으로 지정 */
display: flex;
justify-content: space-between;
}
.mode {
padding: 10px 5px;
}
.input {
/* 0부분 */
font-size: 50px;
font-weight: bold;
text-align: right;
padding: 10px;
}
.mbtns > div {
padding: 15px;
font-size: 14px;
margin: 0 auto;
}
.btns {
display: flex;
flex-flow: wrap;
}
.btns > div{
background-color: white;
/* 박스사이즈를 알아서 맞춘다. */
box-sizing: border-box;
width: 24%;
height: 2.8em;
line-height: 2.8em;
/* div글자 중간 배치 */
text-align: center;
border: 0.5px solid #e4e4e4;
border-radius: 5px;
margin: 0 auto;
box-shadow: 1pd 1px 1px #cccccc;
}
/* 마지막 btns의 버튼 */
.btns > div:last-child{
background-color: #005ca2;
color: white;
}
</style>
<BODY>
<body>
<h1>10-calculator.html</h1>
<hr>
<!-- 마우스로 지정해서 색깔을 찾아냄 -->
<input type="color">
<div id="calc">
<!--상단 탭 계산기 이름, 창ui 버튼 -->
<div class="top sb">
<div class="">📱계산기</div>
<div class="flex">
<div>-</div>
<div>ㅁ</div>
<div>x</div>
</div>
</div>
<!--상단메뉴버튼, 모드표시 -->
<div class="mode sb">
<div class="">🟰 표준 🥃 </div>
<div class="">⏱️</div>
</div>
<div class="input">0</div>
<!-- M 버튼 -->
<div class="mbtns sb">
<div>mc</div>
<div>mR</div>
<div>m+</div>
<div>m-</div>
<div>ms</div>
<div>m⬇️</div>
</div>
<!--숫자, 연산 키패드 버튼 -->
<div class="btns">
<div>%</div>
<div>CE</div>
<div>C</div>
<div>←</div>
<div>⅟x</div>
<div>x <sup>2</sup> </div>
<div> <sup>2</sup>✓x</div>
<div>÷</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>×</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>-</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>+</div>
<div>+/-</div>
<div>0</div>
<div>.</div>
<div>=</div>
</div>
</div>
</body>
실행
<input type="color">
클릭해서 스포이드로 색깔을 찾아내는 기능
무슨 색깔인지 찾아야 할 때 유용하다.
input
사용자의 입력값을 서버에 전송하기 위한 요소, 주로 form과 연계하여 사용한다.
모든 input은 타입도 중요하지만
name과 value가 핵심이다.
value를 직접 지정할 수 도 있지만.
지정하지 않으면 사용자에게 입력을 받을 수 있다.
<body>
<h1>02-input.html</h1>
<hr>
<h3>사용자의 입력값을 서버에 전송하기 위한 요소, form과 연계하여 사용한다. </h3>
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th>태그</th>
<th>type</th>
<th>특징</th>
<th>예시</th>
</tr>
<tr>
<td rowspan="10">input</td>
<td>text</td>
<td>일반적인 텍스트의 입력을 받는다. </td>
<td><input type="text" placeholder="글자입력"></td>
</tr>
<tr>
<td>password</td>
<td>마스킹된 텍스트를 입력받는다.</td>
<td><input type="password" placeholder=""></td>
</tr>
<tr>
<td>number</td>
<td>숫자를 입력받는다.</td>
<td><input type="number" placeholder="숫자입력"></td>
</tr>
<tr>
<td>date</td>
<td>날짜를 입력받는다.</td>
<td><input type="date"></td>
</tr>
<tr>
<td>range</td>
<td>마우스로 범위 사이의 숫자를 입력받는다.</td>
<td><input type="range"></td>
</tr>
<tr>
<td>file</td>
<td>사용자의 첨부파일을 입력받는다.</td>
<td><input type="file"></td>
</tr>
<tr>
<td>radio</td>
<td>여러 요소 중 하나를 선택하여 입력받는다.</td>
<td>
<label><input type="radio" name="adult" value="true">성인</label>
<label><input type="radio" name="adult" value="false">미성년자</label>
</td>
</tr>
<tr>
<td>checkbox</td>
<td>여러 요소중 해당하는 값을 복수 선택하여 입력받는다.</td>
<td>
<label><input type="checkbox" name="pet_type" value="dog">강아지</label>
<label><input type="checkbox" name="pet_type" value="cat">고양이</label>
<label><input type="checkbox" name="pet_type" value="pig">돼지</label>
</td>
</tr>
<tr>
<td>hidden</td>
<td>이름과 값이 정해져있으나, 시각적으로 보이지 않는다 (display: none)</td>
<td>
<input type="hidden" name="csrf_token" value="abcdefghi">
</td>
</tr>
<tr>
<td>color</td>
<td>색상값을 입력받는다.</td>
<td>
<input type="color">
</td>
</tr>
<tr>
<td colspan="2">select</td>
<td>여러 선택지 중 하나를 입력받는다 (radio와 유사하다)</td>
<td>
<select name="lang">
<option value="">==언어선택==</option>
<option value="korean">한글</option>
<option value="english">en</option>
<option value="chinese">中文</option>
<option value="japenese">日本語</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">textarea</td>
<td>여러 줄로 구성된 텍스트를 입력받는다.</td>
<td>
<textarea name="content" placeholder="내용을 입력하세요 "></textarea>
</td>
</tr>
</table>
input:
search
submit
<style>
input,select {
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>03-search.html</h1>
<hr>
<form action="https://search.naver.com/search.naver">
<select name="where">
<option value="nexearch">통합검색</option>
<option value="image">이미지</option>
<option value="news">뉴스</option>
<option value="video">동영상</option>
</select>
<input type="search" name="query" placeholder="네이버검색" required autofocus>
<input type="submit" value="검색">
</form>
</body>
form action은 네이버 검색 쿼리 /
value값으로 검색카테고리를 개별로 지정할 수 있다.
form태그가 알아서 앞부분의 주소링크로 값을 넘겨줄 것이다.
<form action="https://search.naver.com/search.naver"> <input type="search" name="query" placeholder="네이버검색" required autofocus>
<input type="submit" value="검색">
select name의 where는 통합검색 query는 검색어 이다.
구글에서 검색을 할 수 있게 구현해보자.
<body>
<body>
<h1>01-google-search.html</h1>
<hr>
<form action="https://google.com/search">
<input type="text" name="q" placeholder="구글검색">
<input type="submit" value="검색">
</form>
</body>form태그 = 구글링크
input으로 검색을 사용자에게 받아주고
submit으로 데이터를 서버에 제출해준다.
input은 무조건 form태그 안에 있어야 한다.
input의 스타일
focus : 마우스를 클릭해서 포커스받고있을때의 색깔
active : 클릭하고 있는 순간의 색깔
hover: 마우스를 갖다대면 바뀌는 색깔
<body>
<tr>
<td>
👤<input type="text" name="test1">
</td>
<td>
input을 선택하여 포커스를 받고있는 중이면 적용되는 스타일
</td>
</tr>CSS
td{
border: 2px solid black;
padding: 5px 10px;
}
input:focus{
background-color: lightcoral;
}
input:active {
background-color: skyblue;
}
input:hover {
background-color: lightgreen;
}
색깔이 깔려있는 곳이 실제 input이고
👤 <= 이모티콘은 input 밖의 태그다.
<tr>
<td><input type="text" name="test2"></td>
<td>focus 중일때만 커지는 input</td>
</tr>CSS
input[name="test2"]{
all:unset;
border-bottom: 2px solid black;
padding: 5px;
transition-duration: 0.5s;
width: 150px;
}
input[name="test2"]:focus{
width: 300px;
transition-duration: 0.5s;
}
<실행>
728x90
반응형
'vscode를 이용한 웹구축(html)' 카테고리의 다른 글
| HTML CSS <style> font- style (0) | 2023.07.12 |
|---|---|
| html에 대한 기초 정리 , background (0) | 2023.07.12 |
| float , z-index , display (0) | 2023.07.11 |
| position : static, relative, absolute, fixed , sticky (0) | 2023.07.10 |
| CSS 웹 이미지 , hover, flex(가로축, 세로축 ) ,justify-content (0) | 2023.07.10 |
