- 복습
position
: 요소를 배치하는 속성
1) static
2) relative
3) absolute
4) fixed
5) sticky
6) z-index
고급선택자
1) 연결선택자
상위요소 하위요소 {}
부모요소 > 자식요소 {}
요소1 + 요소2
요소1 ~ 요소2
2) 속성선택자
선택자[속성]
선택자[속성=속성값]
3) 가상선택자
선택자:가상클래스{}
선택자::가상요소{}
1. transform
: 요소의 크기 조절, 이동, 회전 효과를 나타낼 때 사용
** 주의사항 ! 요소의 display 속성이 block 또는 inline-blocked 이어야 한다
1) transform 함수
-
translate(x, y), translateX(x), translateY(y)
: 작성한 값만큼 x, y 좌표로 이동 -
scale(x, y), scaleX(x), scaleY(y)
: 작성한 값만큼 확대, 축소 -
rotate(각도 deg)
: 넘겨준 값만큼 회전
2. transition
- transform 은 단순한 변형을 수행한다
- transition 은 변형에 시간을 설정하여 마치 하나의 애니메이션처럼 표현할 수 있다
- transform 과 달리 완전히 다른 스타일로 변경시킬 수 있다
1) transition 의 속성
- transition-property : all | none | 속성명
: 트랜지션을 적용할 속성을 설정한다 - transition-duration : 시간s
: 트랜지션의 진행 시간을 설정한다 - transtion-timing-function : 속성값
속성값의 종류
ease : 천천히-점점 빨리-천천히 (기본값)
linear : 시작부터 끝까지 같은 속도로
ease-in : 느리게 시작
ease-out : 느리게 끝
ease-in-out : 느리게 시작해서 느리게 끝 - transition-delay : 시간s
: 트랜지션을 바로 시작하지 않고 지연시간을 설정한다 - transition : property | duration | timing-function | delay
위의 모든 속성을 간편하게 설정할 때 사용
3. animation
: css 로 애니메이션 효과를 만들기 위한 속성
transition 보다 더 쉽고 상세하게 애니메이션 효과를 설정할 수 있다
animation 속성은 특정 지점에서 스타일을 바꿀 수 있는데, 그 지점을 keyframe 이라고 한다
keyframe 을 미리 만들어두고 적용시키고 싶은 요소에 다양한 속성으로 애니메이션을 적용시킨다
1) animation 의 속성
- @keyframes : 특정 지점을 설정한다
만들고 싶은 애니메이션 이름을 설정한다
from(시작), to(끝), percent(진행도) 를 선택자로 사용한다
@keyframes 키프레임이름 {
선택자{스타일;}
}2) 적용시킬 곳에 사용하는 속성
- animation-name : 키프레임이름
미리 만들어둔 키프레임을 사용한다 - animation-duration : 애니메이션 실행 시간을 설정
- animation-iteration-count : 반복횟수 | infinite
- animation-delay : 시작 시간 설정
- animation : name | count | duration : 애니메이션 속성을 간편하게 설정한다
4. 입력태그
1) form 태그
<form action = "데이터를 처리할 주소", method = "get | post"> 폼 요소 </form>
- 사용자에게 입력받은 데이터를 서버로 전송하기 위해 작성
- 입력받은 데이터를 폼 데이터, 필드라고 부른다
- form 태그 내부 요소로 input, textarea, select, option 태그 등을 가질 수 있다
- 주요 속성은 다음과 같다
action : form 태그 내부 요소에 작성된 데이터를 처리할 서버쪽 주소
method : 서버에 데이터를 넘겨주는 방식을 작성
2) input 태그
<input type = "사용할 타입">
- 실질적으로 사용자에게 입력을 받는 태그
- form 태그 내부에 작성되어야 서버쪽에 데이터를 전달할 수 있다
- type 속성의 값에 따라 입력받는 방식이 바뀐다
text : 텍스트 형태로 사용자에게 입력받는다 (검색어, 아이디, ...)
password : 패스워드를 입력받는다 (화면에 입력한 값이 보이지 않음)
date : 년, 월, 일을 선택하여 입력받는다
submit : 전송 버튼을 만든다
reset : 리셋 버튼을 만든다 (초기화)
file : 첨부파일 버튼을 만든다
hidden : 화면에는 보이지 않는 칸을 만든다
주로 name 과 value 속성을 같이 사용한다
radio : 라디오 버튼을 만든다
라이도 버튼은 여러 선택지 중 하나만 선택할 때 사용
checkbox : 체크 박스를 만든다
여러 선택지 중 여러 개를 선택할 때 사용
라디오, 체크 박스는 name, value 와 checked 속성을 사용한다
3) label 태그
: 사용자가 입력하는 input 태그에 대한 설명
(1) label 태그를 사용하고 하위 태그로 input 태그로 사용
<label>
이름 :
<input type = "text">
</label>(2) for 와 id 속성을 사용하여 연결
<label for = "name"> 이름 : </label>
<input type = "text" id = "name"></input>4) fieldset 과 legend
- filedset 은 여러 label 을 묶을 때 사용
- legend 는 fieldset 의 설명을 표시한다
5) input 태그 속성
- autofocus
페이지 진입 시 자동으로 focus 됨
마우스 커서가 해당 input 에서 깜빡임 - readonly
읽기 전용 필드로 설정함
(사용자가 입력할 수 없음) - disabled
해당 태그를 비활성화 시키며 데이터를 서버에 전송하지 않음 - placeholder
input 에 힌트를 표시함 - required
필수 필드로 설정한다(반드시 입력해야함)
submit 버튼을 눌러 전송할 때 필수 필드에 데이터가 있는지 확인함 - value
실제로 서버에 전달되는 값
텍스트를 입력하는 input에 미리 데이터를 채울 수 있다
submit 버튼의 텍스트를 변경할 수 있다 - name
서버쪽에 데이터를 보낼 때 데이터가 무슨 데이터인지 이름을 붙여 보낸다
5. 자주 사용하는 입력태그
1) textarea
: 텍스트를 여러 줄 입력하는 영역을 만드는 태그
<textarea cols="가로너비" rows="세로길이"> 내용 </textarea>
2) select, option 태그
: 여러 옵션 중 하나를 선택하는 드롭다운 목록을 만드는 태그
<select>
<option value="값1"> 내용1 </option>
...
</select>- option 의 value 가 실질적으로 서버에 넘어가는 값
- selected 속성을 이용하면 페이지 진입 시 선택되는 옵션을 설정할 수 있다
3) button 태그
: 버튼을 만드는 태그
<button type="submit | reset | button">내용</button>=> <input type = "submit | reset"> 과 유사하다
type 종류
submit : 서버로 폼 데이터를 전송(기본값)
reset : 폼 데이터 초기화
button : 딱히 기능 없이 버튼만 만든다 주로 java script 와 함께 쓰인다
6. CSS 우선순위
1순위 : 인라인 스타일을 적용한 경우
2순위 : 선택자로 id를 사용하는 경우
3순위 : 선택자로 class를 사용하는 경우
4순위 : 선택자로 tag를 사용하는 경우
- 우선 순위가 같다면 선택자를 상세하게 작성한 css가 적용된다
- 선택자도 동일하다면 나중에 작성한 css 가 적용된다
