CSS

CSS - 스타일을 지정하기 위한 언어 cascading style sheets

• CSS 구문은 선택자를 통해 스타일을 지정할 HTML요소를 선택
• 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
• 각 쌍의 선택한 요소의 속성, 속성에 부여할 값을 의미
  • 속성(property) : 어떤 스타일 기능을 변경할지 결정
  • 값(value) : 어떻게 스타일 기능을 변경할지 결정

CSS 정의 방법

• 인라인 : 해당 태그에 직접 style속성을 활용
• 내부 참조(embedding)-<style> : head태그 안에 지정
• 외부 참조(link file) - 분리된 CSS 파일 - head link를 통해 불러오기

선택자(selector)

선택자(Selector) 유형

• 기본 선택자
  • 전체 선택자, 요소 선택자
  • 클래스 선택자, 아이디 선택자, 속성 선택자
• 결합자(Combinators)
  • 자손 결합자, 자식 결합자
  • 일반 형제 결합자, 인접 형제 결합자
• 의사 클래스/요소(Pseudo Class)
  • 링크, 동적 의사 클래스
  • 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자

CSS선택자 정리

• 요소 선택자
  • HTML 태그를 직접 선택
• 클래스(class) 선택자
  • 마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목을 선택
• 아이디(id) 선택자
  • #문자로 시작하며, 해당 아이디가 적용된 항목을 선택
  • 일반적으로 하나의 문서에 1번만 사용. 여러번 사용해도 되지만, 단일id 사용 권장

결합자(Combinators)

• 자손 결합자 - 모든 것
  • selectorA 하위의 모든 selectorB요소
• 자식 결합자 - 바로 아래 것만, >로 찍어서 자식
  • selectorA 바로 아래의 selectorB요소
• 일반 형제 결합자 ~
  • selectorA의 형제 요소 중 뒤에 위치하는 selectorB 요소 모두 선택
• 인접 형제 결합자 +
  • selectorA의 형제 요소 중 바로 뒤에 위치하는 selecotrB요소 선택

CSS 적용 우선순위(cascading order)

• CSS우선순위

1. 중요도(importance) - 사용시 주의
   1. !.important
2. 우선순위
   1. 인라인>id>class,속성,pseudo-class>요소,pseudo-element
3. css 파일 로딩 순서

선택자 우선순위

범위가 큰거 < 작은거

CSS 코드 작성 순서가 위 < 아래

CSS 상속

• CSS상속을 통해 부모 요소의 속성을 자식에게 상속
  • 속성(property) 중에는 상속이 되는 것과 되지 않는 것들이 있다.
  • 상속 되는 것 예시
    • text 관련 요소 (font, color, text-align),opacity, visibility 등
  • 상속 되지 않는 것 예시
    • Box model 관련 요소
      • width, height, margin, padding, border, box-sizing, display
    • position 관련 요소
      • position, top/right/bottom/left, z-index등

CSS 크기 단위

• px(픽셀)
  • 모니터 해상도의 한 화소인 ‘픽셀’기준
  • 픽셀의 크기는 변하지 않음, 고정적인 단위
• %
  • 백분율 단위
  • 가변적인 레이아웃에 자주 사용
• em
  • (바로 위, 부모 요소에 대한) 상속의 영향을 받음
  • 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐
• rem
  • (바로 위, 부모 요소에 대한) 상속의 영향 받지 X
  • 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐

rem ⇒루트, 16px
- 16px X 1.5 = 24px

em은 부모에서 영향 받음
- 부모 : 16px X 1.5 = 24px
- em : 24 x 1.5 = 36px

• viewport
  • 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역(디바이스 화면)
  • 디바이스 viewport를 기준으로 상대적인 사이즈가 결정됨
  • vw, vh, vmin,vmax

색상

• 색상키워드 - 대소문자 구분x
• RGB 색상- 16진수 표기법 or 함수형 표기법 등 사용해 특정색 표현
• HSL색상 - 색상, 채도, 명도를 통해 특정색 표현
• rgba, hsla 이때 a는 alpha(투명도를 말함)
• 서체 : font-family
• 서체 스타일 : font-style
• 자간(글자 간격): letter-spacing
• 단어 간격 : word-spacing
• 행간(줄과 줄 사이): line-height
• 들여쓰기: text-indent

CSS 원칙1

• 모든 요소는 네모(박스모델)이고,
• 글자는 inline, 박스는 block
• 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓임. (좌측 상단에 배치)

 

Box Model

• 모든 HTML 요소는 box형태로 됨
• 하나의 박스 = 4 영역

• Margin : 테두리 바깥의 외부 여백
• Border : 테두리 영역
• Padding : 테두리 안쪽의 내부 여백. 요소에 적용된 배경색, 이미지는 padding까지 적용
• Content : 글이나 이미지 등 요소의 실제 내용

 

• 내부 공간을 늘리고 싶을 때 : padding 이용
• 다른 것과의 공간을 늘리고 싶을 때 : margin 이용
• 시계 방향으로 margin과 padding을 적용 시킬 수 있음!

box-sizing

• 기본적으로 모든 요소의 box-sizing은 content-box
  • padding을 제외한 순수 contents 영역만을 box로 지정
• 다만, 우리가 일반적으로 영역을 볼 때는 border까지의 너비를 100px 보는 것을 원함
  • 그 경우 box-sizing을 border-box로 설정

CSS원칙2

• 모든 요소는 네모(박스모델)이고, 좌측 상단에 배치
• display에 따라 크기와 배치가 달라진다

 

 

인라인, 블록요소

• dispaly : block
  • 줄 바꿈이 일어나는 요소
  • 화면 크기 전체의 가로 폭을 차지
  • 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음.
• display : inline
  • 줄 바꿈이 일어나지 않는 행의 일부 요소
  • content 너비만큼 가로 폭을 차지
  • width, height, margin-top,margin-bottom을 지정할 수 없음.
  • 상하 여백은 line-height로 지정
• display : inline-block
  • block과 inline레벨 요소의 특징 모두 가짐
  • inline처럼 한 줄에 표시 가능, block처럼 width,height,margin속성 모두 지정 가능
• display : none
  • 해당 요소를 화면에 표시하지 않고, 공간조차 부여되지 않음
  • 이와 비슷한 visibility : hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다.

 

블록 레벨 요소와 인라인 레벨 요소

• html 4.1까지 블록 레벨 요소와 인라인 레벨 요소 구분
• 대표적인 블록 레벨 요소
  • div/ ul,ol,li/p/hr/form 등
• 대표적인 인라인 레벨 요소
  • span/a/img/input,label/b,em,i,strong등

block

• block의 기본 너비는 가질 수 있는 너비의 100%
• 너비를 가질 수 없다면 자동으로 margin이 부여

inline

• 컨텐츠 영역만큼이 기본 너비

 

 

CSS position

• 문서 상에서 요소 위치를 지정
• static : 모든 태그의 기본 값(기준 위치)
  • 일반적인 요소의 배치 순서에 따름(좌측 상단)
  • 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치됨
• 아래는 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동 가능
  • relative : 상대 위치
    • 자기 자신의 static 위치를 기준으로 이동 (normal flow)
    • 기본 위치(normal position)대비 offset
    • 레이아웃에서 요소가 차지하는 공간은 static과 같음 (normal position 대비 offset)
    • relative는 원본은 그대로 있지만 분신만 움직이는 것!
  • absolute : 절대 위치
    • 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지 하지 않음 (out-of-flow)
    • normal flow에서 벗어나 부모/조상 요소를 기준으로 위치
    • static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동(없는 경우 body)
  • fixed : 고정 위치
    • 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음 (out-of-flow)
    • normal flow에서 벗어나 viewport기준으로 위치
    • 부모 요소와 관계없이 viewport를 기준으로 이동
      • 스크롤 시에도 항상 같은 곳에 위치
    • sticky와 비슷한데 특정 위치에 완전 고정 되어있는 것
    ex)쇼핑몰 홈페이지에서 장바구니 같은 거에 사용?
  • sticky
    • 본체는 그대로인데 분신만 움직이는것!
    • 상단 메뉴에 적용할 수 있음
  fiexed-top(위쪽이 잘림 (자리차지 여부가 다름) -margin bottom을 줘야함) vs sticky-top

 

• position
  • 브라우저 기준 : sticky, fixed
  • 네모 위 네모 : absolute

💡 CSS원칙 1,2 : Normal flow

모든 요소는 네모(박스모델), 좌측 상단에 배치
display에 따라 크기와 배치가 달라짐
CSS원칙 3

position으로 위치의 기준을 변경
relative : 본인의 원래 위치
absolute : 특정 부모의 위치
fixed : 화면의 위치

Flex Box

💡 사용하는 이유는?

이전까지 normal flow를 벗어나는 수단은 float 나 position

그렇지만 (수동 값 부여없이) 수직정렬, 아이템의 너비와 높이 혹은 간격을 동일하게 배치가 어려웠음.

 

행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델

• 축
  • main axis(메인 축)
  • cross axis(교차 축)
• 구성 요소
  • Flex Container(부모 요소)
    • flexbox 레이아웃을 형성하는 가장 기본적인 모델
    • Flex item들이 놓여있는 영역
    • display속성을 flex 혹은 inline-fliex로 지정

    .flex-container {
    	display: flex;
    }
    
    부모 요소에 display:flex 혹은 inline-flex
    

  • Flex Item(자식요소)
    • 컨테이너에 속해 있는 컨텐츠(박스)