[CSS] css 입문 01 (170323)

CSS 입문 01

** 생소했던 개념들 위주의 포스팅 **

• CSS 방향 순서

- top -> right -> bottom -> left : 시계방향

- padding : 10px 20px 30px 40px; 경우 시계방향으로 위치 가리킴

- padding : 10px 20px 경우 상하, 좌우

- padding : 10px 20px 30px 경우 left는 마주본 right인 20px로 자동 지정됨

• overriding (재정의)

- 기본으로 적용되어있는 margin, padding등은 overriding이 가능하다.

• CSS 가상클래스(pseudoClass)

- 대표적인 예로 hover가 있다. 

- 마우스가 올라가면 자동으로 추가되는 가상 클래스

- 눈으로는 확인할 수 없지만 마우스가 올라가면 가상클래스가 추가됨.

• margin의 특이사항

두 개의 div가 있을 경우 각각의 div에 margin-bottom과 margin-top을 주면 큰 수를 갖는 값만 적용된다. 

반면 margin-left와 margin-right가 각각의 값을 갖는다면 두 값 모두 적용된다.

• 가상 클래스 적용

- focus의 적용

input:focus{ background-color: #ff00ff; }

button:focus{ color:red; }

- active의 적용

button:active{ width:100px; height:100px; }

 - p:first-child / p:last-child 의 적용

p:first-child { background-color: #000000; color:#ffffff; }

p:last-child { background-color: #000000; color:#ffffff; }

• window VS body(document)

- 이 화면은 body영역이 아닌 window영역이다. 

- body영역은 document 전체를 말하고 window는 body의 일부분을 보여주는 창을 말한다.

- body가 window보다 클 경우 스크롤 바를 이용하여 볼 수 있다.

• position 속성  (static, relative, absoulte, fixed)




- default : 모든 요소의 default position 속성의 value

- relative : 원래 배치되어야 할 위치를 기준으로 상대 좌표에 요소를 배치하고 할 때 사용.

- absolute : 특정 요소를 기준으로 절대 좌표에 배치하고 할 때 사용

- fixed : window(창) 기준으로 고정 위치에 배치하고자 할 때 사용

• 응용 예시 1 > 특정 요소 안에서 원하는 위치에 배치하기

** 출력 결과 **

• 응용 예시 QUIZ > input창 안에 돋보기 넣기

ANSWER >

감싸는 곳 - relative;

감싸지는 곳 - absolute;

로 적용해주고 input창은 크기 조절 후 검색 버튼 이후로는 글씨가 나타나지 않도록 padding값을 적용시켜준다.

• 응용 예시 QUIZ 2 >

노란 박스 내부에 있는 검은 박스를 100px바깥으로 빼보세요.

ANSWER >

** 출력 결과 **

• display 속성

- none : 보이지 않게 함

- inline : 인라인 요소로 보이게 함, 줄바꿈이 없음.

- block : 블럭 요소로 보이게 함, 줄바꿈이 있음.

- inline-block : 인라인 블럭 요소로 보이게 함, float을 적용한 것처럼 보임.

• background 속성

- 이 때, background : 으로 모든 요소를 연결하여 사용할 수 있다.

** 출력 결과 **

• 기타 가상 요소 ( first-letter, first-line, :before, :after )

** 출력 결과 **

• float 속성

    - block 요소를 왼쪽 혹은 오른쪽으로 정렬시킨다.

** 출력 결과 **