포이머웹(poiemaweb) CSS 정리 1~11

포이머 웹 CSS

1.CSS 기본문법

https://poiemaweb.com/css3-syntax

• 셀렉터(원하는 HTML요소를 정의)

• 프로퍼티와 밸류 (속성,속성값) 셀렉터 {}내에 속성,값으로 정의된것

• 링크스타일, 임베드 스타일, 인라인 스타일

• Reset CSS : 각 브라우저별로 내장, 디폴트값이 다르기 때문에 맞춰주기 위함

2.셀렉터

https://poiemaweb.com/css3-selector

• 전체 셀렉터(*) : HTML 문서 내의 모든 요소를 선택

• 태그 셀렉터: 지정된 태그명을 가지는 요소를 선택한다. ex) p {color:red}

• ID셀렉터(#):id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. 중복X 유일한값

  ex) #p1 { color :red }

• 클래스 셀렉터: .class 어트리뷰트 값, 중복될 수 있는 값이다.

  ex) .container { color: red }

• 어트리뷰트 셀렉터: 지정된 어트리뷰트를 갖는 모든 요소를 선택

  ex) a[href] { color:red }, a[target="_blank"] { color: red; } 등..

• 복합 셀렉터

  • 후손 셀렉터
  • 자식 셀렉터
  • 형제 셀렉터
  • 일반 형제 셀렉터

• 가상 클래스 셀렉터 : 요소의 특정 상태에 따라 스타일을 정의 할 떄

  ex) 마우스 오버, 포커스 등... 마침표대신 :를 사용해 표기 a:hover, input:focus

• 그외 링크 참조해서 필요할 때 마다 체크하자

3.CSS 프로퍼티 값의 단위

https://poiemaweb.com/css3-units

• 크기단위 : px는 절대값, em, %는 상대값이다. 기본값은 16px, 1em, 100%
• Viewport단위 (vh, vw, vmin, vmax) : 반응형 웹디자인을 위한 %단위
• 색상 표현 단위 : red, blue키워등도 있지만 색상코드를 사용할 수 있다.
• 상하좌우 4방향 스타일 지정이가능하고 상하좌우 max, min 길이 조정이 가능하다.

4.박스모델

https://poiemaweb.com/css3-box-model

• 모든 html요소는 box형태의 영역을 가지고 있다.(content, padding, border, margin)
• 브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로하여 렌더링을 실행한다.

5.display, visibilty, opacity 프로퍼티

https://poiemaweb.com/css3-display

자세히 정독

6.백그라운드

https://poiemaweb.com/css3-background

자세히 정독

7.폰트와 텍스트

https://poiemaweb.com/css3-font-text

자세히 정독 (정렬등...)

8.요소의 위치 정의

https://poiemaweb.com/css3-position

• static (기본위치) : 왼쪽에서 오른쪽으로 순서에 따라 배치되며, 부모 요소내에 자식요소로 존재하면 부모 요소를 기준으로 배치된다.
• relative(상대위치) : 기본위치를 기준으로 좌표 프로퍼티(top,bottom..)를 사용하여 위치 시킨다.
• absolute(절대위치) : 부모 혹은 가장 가까운 조상 요소(static제외)를 기준으로 좌표 만큼 이동한다.
• fixed(고정위치) : 부모 요소와 관계없이 브라우저늬 viewport를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다. 스크롤이 되더라도 항상 같은 곳에 위치한다.
• z-index 프로퍼티 : z-index 프로퍼티에 큰 숫자값을 지정할 수록 화면 전면에 출력된다.
• overflow : 자식 요소가 부모 요소의 영역을 벗어났을 때 처리 방법을 정의한다.(visible,hidden,scroll,auto)

9.요소 정렬(CSS3 Float)

https://poiemaweb.com/css3-float

• float 프로퍼티는 좌측, 우측 가로 정렬만 할 수 있다. 중앙 가로 정렬은 margin:0 auto 사용
• 오른쪽 가로 정렬의 경우 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.
• overflow: hidden사용법 참고하기

10.스타일의 상속과 적용 우선 순위(CSS3 Inheritance & Cascading)

https://poiemaweb.com/css3-inheritance-cascading

• 부모, 조상의 요소에 적용된 프로퍼티를 하위 요소가 물려받는 경우가있고 아닌 경우가 있다.
• 물려받지 않는경우 inherit 키워드를 사용해 명시적으로 상속받을 수 있다.
• Cascading : 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS적용 우선순위가 필요한데 이를 캐스캐이딩 이라고 한다.
  • 중요도 : 어디에 선언 되었는지에 따라
  • 명시도 : 대상을 명확하게 특정할수록 우선순위가 높다.(!important > 인라인 > 아이디...)
  • 선언순서 : 나중에 선언된게 우선 적용된다.

11. 벤더 프리픽스(Vendor Prefix)

https://poiemaweb.com/css3-vendor-prefix

http://www.tcpschool.com/css/css3_module_vendorPrefix

브라우조 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해

사용하는 접두사를 의미한다.

• 브라우저별 CSS지원 정보를 확인하기 https://caniuse.com/
• 불필요한 벤더 프리픽스 사용하지 않기 위해선 https://projects.verou.me/prefixfree/