오늘 내가 배운 것
1. HTML - form 태그
2. CSS - :before, :after
3. 반응형 웹 - 미디어 쿼리
1. HTML-form 태그
form 태그 : 사용자가 제공하는 데이터를 서버에 저장시키기 위해 사용하는 태그 (사용자의 데이터를 수집한다.)
<div class="login_frm">
<form method="" action="http://naver.com">
<input type="hidden" name="where" value="nexearch" />
<span class="int">
<input type="text" name="userid" id="uid" placeholder="아이디를 입력해주세요">
</span>
<span class="int">
<input type="password" name="userpw" id="upw" placeholder="비밀번호를 입력해주세요">
</span>
<button type="submit">로그인</button>
<div class="between">
<span>아직도 회원이 아니신가요?</span> <a href="#">회원가입</a>
</div>
</form>
</div>
input 태그를 이용할 때 form 태그를 상위 태그로 사용해 데이터를 서버에서 저장한다.
form태그를 쓸 때는 상위에 다른 엘리먼트로 감싸서 사용하는 것을 권장한다.
form 태그의 필수 속성으로 속성 method 와 속성 action이 있다.
속성 action 과 속성 method
action의 속성 값은 “링크” 이다. (button type=”submit” 과 연동해서 작동한다.)
method의 속성 값은 get 과 post가 있다. (초기값은 get)
get 의 특징
쿼리스트링(queryString) 형태로 전달된다.
쿼리스트링 : 입력 데이터를 가장 단순하게 전달하는 방법으로 url 창에 ? 이후에 표현된다.
url에 표시되기 때문에 직접적으로 확인이 가능하다.
ex) naver.com?userid=aaa&userpw=1234
? 뒤부터 변수(파라미터)1=값1&변수2=값2&변수3=값3 … 형태로 표현된다.
? : 쿼리 스트링 시작을 뜻하고, & 는 변수를 구분해주는 구분자로 사용된다.
post 의 특징
똑같이 쿼리스트링으로 전달을 하며, url에 직접적으로 보이지 않는다.
보이지 않는다고 볼 수 없다는 것은 아니고, 숨겨져 있기 때문에 찾아서 확인할 순 있다.
input 태그의 속성
type : text, password ... 텍스트 입력창, 체크박스 등을 만들어 준다.( hidden 도 있지만 아직 안 배움.)
name : 쿼리스트링의 변수의 이름을 지정한다. 데이터의 변수 이름이 되기 때문에 헷갈리지 않게 잘 구분해서 적는다.
input 박스에 값(텍스트 입력 값)은 쿼리스트링의 변수 값에 해당한다.
id : input 태그의 이름을 지정한다.
placeholder : 텍스트 입력창에 기본적으로 보이는 문구를 작성할 수 있게 해 준다. 포커스가 되면 텍스트는 지워진다.
button 태그의 속성
type=”submit”
submit 스스로는 의미가 없지만 form 태그 안에서 사용해야 기능이 생긴다.
form 태그 안에 button의 타입을 submit으로 지정 후,
button을 클릭하면 form의 속성이었던 action의 속성 값으로 지정한 링크로 이동하게 된다.
2. before 와 after
/*before 과 after의 기본문법*/
선택자::before{
content : “”;
}
선택자::after {
content : “”;
}선택자 앞 또는 뒤에 content의 내용을 출력해준다.
가상의 엘리먼트를 만든 것이라 margin, padding 등등을 사용할 수 있다.
3. Media Query
뷰포트(화면)에 따라 유연하게 변하며 컨텐츠를 배치하는 반응형 웹사이트를 만드는데 기본이 되는 CSS
/* media 기본문법 */
@media (기준점){
css문법
}
EX)
/* 화면이 0~800px 까지 적용. */
@media (max-width: 800px){
#header{
display:none;
}
}
/* 화면이 500px~ 적용. */
@media (min-width: 500px){
#header{
display:block;
}
}
TIP.
기본적인 웹페이지는 여러 페이지의 html 을 연결해서 쓰는 것이다.
link로 이루어져 있고 새로운 웹페이지를 갈 때마다 html과 css를 새로 그린다.
하나의 웹페이지(하나의 html)에는 다른 페이지의 html 을 연결해서 링크를 걸어주는 탭도 있지만,
css로 다른 블럭을 보여주는 경우도 있다. (보고 있는 페이지의 내용이 다르다 해도 같은 html 일 수 있다는 뜻.)
기존과 다른 html 로 이동하게 되면 로딩하는 효과, url의 이름이 바뀌는 경우 등등 있다…
css 파일을 파트별로 만들어서 연결할 때 link를 html순서대로 연결해야 깨지는 현상을 없앨 수 있다.
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>
<link rel="stylesheet" href="./public/css/index.css">
</head>
<body>
<input type="checkbox" id="layer_btn" />
<div id="layer">
<div id="content">
<h2>
<span>로그인</span>
<span><label for="layer_btn">X</label></span>
</h2>
<div class="login_frm">
<form method="" action="http://naver.com">
<input type="hidden" name="where" value="nexearch" />
<span class="int">
<input type="text" name="userid" id="uid" placeholder="아이디를 입력해주세요">
</span>
<span class="int">
<input type="password" name="userpw" id="upw" placeholder="비밀번호를 입력해주세요">
</span>
<button type="submit">로그인</button>
<div class="between">
<span>아직도 회원이 아니신가요?</span> <a href="#">회원가입</a>
</div>
</form>
</div>
</div>
</div>
<div id="wrap">
<div id="header">
<h1>logo</h1>
<ul>
<li>
<label for="layer_btn">
menu
</label>
</li>
</ul>
</div>
</div>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
#layer_btn {
display: none;
}
#layer_btn:checked ~ #layer{
display: flex;
}
#layer{
position:absolute;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
}
#layer > #content{
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
height: 300px;
box-shadow: 5px 5px 15px #666;
background: #fff;
}
#content > h2 {
display: flex;
justify-content: space-between;
width: 100%;
height: 20%;
padding:15px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
#content > .login_frm{
width: 400px;
height: 80%;
}
#content > .login_frm > form {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
#content > .login_frm > form > .int > input{
width: 100%;
padding: 7px 14px;
box-sizing: border-box;
margin-bottom: 5px;
}
#content > .login_frm > form > button[type="submit"] {
width: 100%;
padding: 7px 14px;
border: 0px;
border: none;
background: #ddd;
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
}
#content > .login_frm > form > .between {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221031 JavaScript - prompt()함수, 지역변수, 전역변수, 조건문 if-else if문, 데이터타입, 배열 (0) | 2022.10.31 |
|---|---|
| 221028 JavaScript(JS) - 자바스크립트의 특징 /자바스크립트 변수와 상수 / 자바스크립트 기본 연산자와 데이터 타입 / 자바스크립트 변수명 표기법 (0) | 2022.10.28 |
| 221026-게시판 만들기 : HTML table 태그, CSS-!important, box-shadow, CSS 선택자 (0) | 2022.10.26 |
| 221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩 (0) | 2022.10.25 |
| 221022 네이버 회원가입 클론코딩 (0) | 2022.10.23 |
댓글