[HTML&CSS]0811_CSS 속성
- CSS 속성을 사용하여 HTML 요소에 디자인을 적용할 수 있다.
자바스크립트를 적용하기 위한 환경을 설정할 수 있다.자바스크립트에서 제공하는 자료형을 나열하고 각 특징을 설명할 수 있다.자바스크립트 제어문의 사용법과 동작 흐름을 설명할 수 있다.자바스크립트 함수를 작성하고 활용할 수 있다.
CSS 속성 - position
✔ static : 모든 HTML 요소의 기본 속성
relative / absolute / fixed
- top / left / bottom / right 속성으로 위치 이동 가능
✔ relative : static의 특징과 위치 이동 기능을 가짐
✔ absolute : 문서(body)의 좌표를 기준으로 절대좌표 배치
→ 주로 PC 브라우저용으로 사용
✔ fixed : 현재 보이는 브라우저 화면의 좌표를 기준으로 절대좌표 배치
→ 주로 상단의 헤더, 하단의 푸터, 따라다니면서 보이는 광고용으로 사용
✔ static / relative 차이점
- statice : 위치 이동 불가
- relative : 위치 이동 가능
* display 속성의 영향을 받음
✔ absolute / fixed 차이점
- absolute : 문서 기준!
(예외 => bottom의 위치 시 문서의 완전 아래는 아니다. top, left, right는 해당 X)
- fixed : 브라우저(현재 보이는 화면) 기준
✔ 글자크기 → font-size
✔ 글자모양(글꼴) → font-family (보통 웹폰트 권장)
✔ 정렬 → text-align: center;
✔ 밑줄제거 → text-decoration: none;
✔ Z축설정(요소가 쌓이는 순서) → z-index (상대값)
✔ 부모요소 크기 초과 표시 → overflow: auto;
✔ 애니메이션 효과 → transition-duration: (초)s
✔ 출력장치 설정 및 브라우저 크기에 반응 → @media (미디어 쿼리 - 반응형 쿼리)
ex) @media (max-width: 700px) { .img { width: 50%; } }