HTML/CSS 정리06

그라데이션

선형 그라데이션에는 브라우저 접두사 안붙여도 되지만, 원형 그라데이션에는 아직도 붙여야해 (-webkit- / -moz- / -o- )
(그라데이션 지원 따라 코드 달아줘야해)

선형 그라데이션 .linear gradient

background : linear-gradient(to bottom , skyblue, yellowgreen);}
background : linear-gradient(to top , skyblue, yellowgreen);}
{background : linear-gradient(45deg, skyblue, yellowgreen);}
background : linear-gradient(to right,red 10% , skyblue 60%, yellow 80%);} 

원형 그라데이션 .radial gradient

background:  blue; /그라데이션 적용 안되는 브라우저
background:  -webkit-radial-gradient(20% 20% circle,#f00,#ff0);
background:  -moz-radial-gradient(20% 20% circle,#f00,#ff0);
background:  -o-radial-gradient(20% 20% circle,#f00,#ff0); /브라우저들
background: radial-gradient(red, yellow);} / 그라데이션 브라우저
원형 그라데이션 원의 크기 조절
background:-webkit-radial-gradient(20% 20%, circle closest-corner, #f00 , #ff0)
background:-webkit-radial-gradient(20% 20%, circle closest-side, #f00 , #ff0); 
background:-webkit-radial-gradient(20%20%, circle farthest-corner, #f00 , #ff0
background: -webkit-radial-gradient(20% 20%, circle farthest-side, #f00 , #ff0);

그라데이션 반복 repeating

background: repeating-linear-gradient(yellow, red 15px);}
background: repeating-radial-gradient(circle,yellow, red 50px);}
background: repeating-linear-gradient(green,green 20px,yellow 20px, yellow 40px);}   
background: repeating-radial-gradient(circle,green,green 20px,yellow 20px, yellow 40px);}

글꼴 (font-family)

웹폰트 적용 - @font-face{font-family: 글꼴 이름; src:url(파일경로) format(파일유형)

ttf 트루타입 <용량 큼
otf 오픈타입 <용량 큼
woff 웹오픈폰트
woff2 웹오픈폰트2
svg
eot (IE 용.. 요즘 잘 안써)
폰트 형식 바꿀 수 있는 컨버터 사이트 있음

기본형 : @font-face {
font-family: 'nanum' ;
src: url(font/NanumGothic.woff) format('woff'),url(font/malgun.woff) format('woff');
나눔고딕 쓰고 없으면 맑은폰트 쓰는 코드

@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap')
구글 폰트에서 적용

font 축약속성 이제 사용 안 함 일일이 적어야해

http://www.spritecow.com/ 이미지 자르는 사이트
url 태그 imgs라서 img로 수정해줘야해

폼 태그

폼 :　웹 사이트로 정보를 보낼 수 있는 요소들 , 데이터 입력 받는 부분　(로그인창, 회원가입 창 등)

속성
method – 사용자가 입력한 내용들을 서버 쪽으로 어떻게 넘겨줄지/ 속성 값

-get방식 :주소 표시줄에 사용자가 입력한 대로 내용이 드러나는 것
-post방식 : 사용자의 입력을 표준방식으로 넘겨주기 때문에 입력 내용의 길이에 제한 받지 않고 사용자가 입력한 내용이 드러나지 않음

name – 폼 이름 지정
action – form 태그 안의 내용들을 처리해줄 서버상의 프로그램 지정
target – action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 창에 열도록 지정

label 태그 – 폼 요소에 레이블 붙이기

<fieldset><!--비슷한 것 끼리 묶어줌 웹 접근성 측면에서는 넣는게 맞지만 꼭 있어야하는건 아님-->
<legend>회원가입 정보</legend>
</fieldset>

얘 실행하면

회원가입 정보

input 입력하는 부분

속성 – text(텍스트)/search(검색 상자)/file(파일 추가)/email(이메일 형식 유효성검사 알아서 해줌) /password(비밀번호)/tel(전화번호) etc ··· (p.143)

선택박스

radio, checkbox 버튼은 value값 따로 지정해줘야함. 안그럼 안넘어가
checked 속성 적용하면 기본값을 체크 상태로 바꿀 수 있음
checkbox 자체모양 수정 안돼 모양 바꾸려면 label에 background-image 처리 함

폼 태그 사용 예시

<label for="userid">아이디</label><input type="text" 
id="userid" placeholder="아이디를 넣어주세요" maxlength="5">

아이디

label for 과 id는 일치해야해

<input type="submit" value="제출하기">
<input type="reset" value="취소하기">
<input type="button" value="버튼">
<button>버튼</button>( 디폴트는 submit)

버튼

콤보상자 select / optgroup / option

<select name="" id="select1">
  <option value="10">10개</option>
  <option value="20">20개</option>
</select>

10개 20개

그외 사용 예시

<input type="date" name="" id=""> 브라우저마다 모양 다름
<input type="week" name="" id="">
<input type="time" name="" id="">
<input type="range" name="" id="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<input type="submit" name="" id="">
<input type="url" name="" id="" placeholder="url">
<input type="tel" name="" id="" placeholder="전화번호">
<input type="button" value="버튼" name="" id="" placeholder="버튼">
<input type="search" name="" id="" placeholder="검색">

날짜(브라우저마다 모양 다름)
주
시간
숫자범위
radio
checkbox
submit
url
tel
button
search

필수입력 속성 – required
읽기전용 속성 – readonly
입력 커서 표시 - autofocus
hidden - 히든 필드(화면상에는 보이지 않지만, 사용자가 입력을 마치면 전송되는 속성)
여러줄 입력하는 텍스트 영역 - textarea