[HTML//CSS] ; input & textarea
- Input ; type, placeholder 속성(attribute)가 있다
<input type="text" placeholder="ID">
<input type="password" placeholder="비밀번호">
<input type="number" placeholder="학번">type="text"
text를 입력하는 속성, input type = text.
어느 텍스트나 입력할 수 있고 이름, id, 주소, 닉네임 등을 입력 받을 때 사용.
type="password"
text와 비슷한 속성인데, 뭔가를 입력하면 남이 보지 않도록 까만 원으로 나옴.
화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있음.
type="number"
숫자만 입력, type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력x
placeholder
placeholder는 도움말을 넣어주는 부분으로 실제 input에 입력되어 있어 보이지만 텍스트X.
- textarea : input보다는 더 긴 텍스트를 입력받고 싶을 때. (보통 짧은 방명록이나 댓글을 입력할 때 사용)
*참고.
input은 시작태그, 끝태그로 구성x 하나의 태그가 하나의 요소.
textarea처럼 input에도 미리 값을 세팅해놓고 싶을 떄,value라는 attribute를 사용.
[CSS] ; Position _ relative & absolute & fixed
- relative : 이것만 갖고는 큰 의미는 없으나, 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동 가능.
top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티.
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}
//참고 :마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 됩니다.- absolute : 이름과 같이 절대적인 위치에 둘 수 있다.
특정 부모 기준으로 에 대해 절대적으로 움직일 수 있음. 결과적으로 내가 원하는 위치에 갖다 넣을 수 있음 - 이미지든 텍스트든 등등등.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됨.
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됨.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}- fixted : 말그대로 고정됐다는 뜻
absolute는 relative를 가진 부모가 필요했는데,fixed는 필요x
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직이는 데, 가령 스크롤을 계속 내렸을 때도 알림창은 그자리에 계속 있는 다는 등 할 때 사용함.
*참고 :
right: 0;은 브라우저의 오른쪽에서 0떨어져있다는 뜻 => 브라우저 우측에 바짝 붙어있음
bottom: 0;도 하단에서 0떨어져있다는 뜻이고 브라우저 하단에 붙어있음.
.coupon {
position: fixed;
right: 0;
bottom: 0;
background-color: red;
color: white;
font-size: 20px;
}[CSS] ; @Media Query
- media query : Responsive Web 을 구현하는 CSS technique
특정 조건에서는 어떤 CSS 를 적용하라는 규칙을 줄 수 있다
** CSS에 @media 라는 문법으로 작성하게 됩니다.
//하기는 css는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}- @media — 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.
- only screen — 어떤 디바이스에서 적용하는지.
예를 들면 프린트를 하고싶을 때 적용하려면 only print.
screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용. - and (max-width : 480px) — 이건 media feature로 어느 조건에 아래의 css를 적용할지 작성.
background-color: red;
}//백그라운드 컬러가 그냥 빨강
@media only screen and (min-width: 320px) and (max-width: 480px) {
body {
background-color: yellow;
}// 미디어쿼리로 스크린 최소 너비가 320px, 최대가 480px일때 백그라운드 컬러가 노랑으로 바뀌게 됨.
}```
