[HTML&CSS]0811_CSS 속성

1. CSS 속성을 사용하여 HTML 요소에 디자인을 적용할 수 있다.
2. 자바스크립트를 적용하기 위한 환경을 설정할 수 있다.
3. 자바스크립트에서 제공하는 자료형을 나열하고 각 특징을 설명할 수 있다.
4. 자바스크립트 제어문의 사용법과 동작 흐름을 설명할 수 있다.
5. 자바스크립트 함수를 작성하고 활용할 수 있다.

 

---

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%; }  }