4. CSS 정리

-position : static, relative, absolute, fixed

 

position은 레이아웃을 배치하거나 객체를 위치시킬때 사용하는 css이다.

top, bottom, left, right의 위치를 설정할 수 있다.

 

위의 도형에 position은 적용해보자

 

static (기본값) :위치를 지정하지 않을 때 사용한다.

 

position:static을 적용했을때

 

 

 

relative : 위치를 계산할때 static의 원래 위치부터 계산한다. static의 원래 위치부터 계산한다. 

 

 

static위치로부터 top, left 값이 설정됨

top: 0px --> static 도형으로부터 위쪽에 0px 만큼 공백

left: 100px --> b도형의 left 값은 static 도형으로부터 100px 떨어진곳에 위치

 

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. (부모 element의 영향을 받지 않음) 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

 

 

 

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 

 

---

  

-margin

 

 

• margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다.
• margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
• margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
• margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.

 

---

 

-cursor : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정

 

 

        1) 일반 : auto, default, none

 

        2) 링크와 상태 : conext-menu, help, pointer, progress, wait

 

 

 

---

 

 

-overflow : 내용이 element의 크기를 벗어났을 때 어떻게 처리할 것인지

 

 

overflow : visible, hidden, scroll, auto, initial, inherit

 

• visible : 박스를 넘어가도 보여줌
• hidden: 박스를 넘어간 부부은 보이지 않음
• scroll: 박스를 넘어가든 넘어가지 않든 스크롤바를 보여줌
• auto: 박스를 넘어갈때는 스크롤바가 나옴
• initial: 기본값으로 설정
• inherit: 부모 요소의 속성값을 상속받음

 

---

 

-font-decoration : 선으로 텍스트를 꾸밀 수 있게 해주는 속성

 

text-decoration : none, line-through, overline, underline, initial, inherit

 

 

• none : 선을 만들지 않음
• line-through : 글자 중간에 선을 생성
• overline : 글자 위에 선을 생성
• underline : 글자 아래에 선을 생성
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받음

 

---

 

 

-class, id -> style 적용

 

 

 

 

class의 경우 

 

.클래스명{ 속성1: 속성값; 속성2: 속성값;} 

 

id의 경우

#아이디{ 속성1: 속성값; 속성2: 속성값;} 

 

 

---

 

-Responsive Web

 

responsive web : 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹. 하나의 HTML 소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공함.

 

 

 

Media Query : Responsive Web을 구현하는 CSS 테크닉. 특정 조건에서 어떤 CSS 적용하라는 규칙을 줌

 

1) 480px 보다 작은 화면에서 body태그 내의 font 크기를 전부 12px로 변환시키는 쿼리문

 

최대 480px 화면에서 보이는 것

 

 

@media — 이 키워드는 media 쿼리를 시작하겠다는 의미.
only screen — 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됨 screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됨.
and (max-width : 480px) — 이건 media feature라고 불리는 부분. 어느 조건에 아래의 css를 적용할지 작성해줘야 함.

 

 

 

최소 320px ~ 최대 480px인 화면에서 보이는 것