CSS 기본 문법1

가상 클래스 (셰도 클래스)

• 클래스는 아니지만 클래스처럼 사용하는 속성

• 같은 레벨의 클래스가 적용돼있으면 css 에서는 뒤에 있는 클래스가 적용됨

• 가상클래스는 아래 순서대로 적용하는 것이 좋음    

- :link

- :visited

- :hover

- :active

로렌 입숨 (립숨)

• 테스트할때 긴 텍스트 제공

text-align

• left, right, center, justify

• justify 는 양쪽 동등하게. 대신 자간이 조정됨

 

 

web font

• 웹에서 다운로드 받아서 사용하는 방식

• 외국어보다 한글이 용량이 크다

• 폰트는 확장자가 여러 개인데 브라우저마다 폰트를 저장하는 방식이 달라서 그에 대응하기 위함

• 구글폰트 적용방법

- link 태그 head 에 복사

- 적용하고자하는 font-family 를 css 에 적용

 

 상속 inherited

• color 는 상속되고 border 는 상속되지 않음

stylish

• 크롬에 확장플러그인 추가

• 다른사람이 만들어놓은 디자인 사용가능

• 커스터마이징 가능

cascading

• 한 앨리먼트에 대해 웹브라우저, 사용자, 저자 간 우선순위

• 웹브라우저 < 사용자 < 저자

• 태그선택자(tag selector) < 클래스 선택자(class selector) < 아이디 선택자(id selector) < 인라인 스타일 속성(style attribute)

• !important 는 가장 우선순위를 높이는 방법. 남용은 하지말 것

bracket

• adobe 에서 만든 오픈소스 에디터 html, css 코딩에 최적화

• brackets.io 접속 > 설치

레이아웃

• block element : 화면전체를 사용하는 태그

• ex. p div h1

• inline level element : 화면의 일부를 차지하는 태그

• ex. span a

• display 속성을 이용하면 블록 -> 인라인, 인라인 -> 블록 변경 가능

박스 모델

• padding : 앨리먼트와 내부 요소 간의 간격

• margin : 엘리먼트 간 간격

• inline element 에서는 width, height 값은 무시된다.

박스 사이징

• box-sizing 속성을 border-box 로 지정하면 테두리를 포함한 크기 지정 가능

• box-sizing:content-box //컨텐트만 포함

• box-sizing:border-box //테두리까지 포함

마진겹침 현상 (margin-collapsing)

• 같은 레벨 엘리먼트 사이에 margin 이 적용돼있는 경우 둘 중 더 큰 margin 값 하나만 적용되는 현상

• 상위/하위 레벨 엘리먼트에 모두 margin 이 적용돼있는 경우  더 큰 margin 값 하나만 적용되는 현상 // 단 상위레벨 엘리먼트에 시각적 속성이 적용돼있으면 겹침 현상은 일어나지않음

• 엘리먼트에 top과 bottom margin 값 중 큰 값이 양쪽으로 적용 // 시각적 요소가 없는 경우 한정

Position

• relative - 부모 엘리먼트를 기준으로 속성값 적용
• absolute - 최상위인 html 엘리먼트를 기준으로 속성값 적용. 포지션이 absolute 가 되면 부모와 독립의 관계가 됨
• static - 위치를 지정하지 않은 상태 (디폴트)
• fixed - 화면상에 노출된 위치에 고정 (스크롤과 상관없이)

** 참고 : 생활코딩 (https://opentutorials.org/course/2418)