[카테캠] FE week 3

Ch7. CSS 개요

• 선택자 : CSS 적용시킬 범위

• 속성 : CSS의 종류

  주석은 html과 다르게 /* */ 이기 때문에 단축키 이용 추천

• 내장 방식 vs 인라인 방식

  • 내장방식 : <style></style> 의 내용으로 html 내에서 css 작성하는 방식
  • 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식
  • html에서 직접 스타일을 지정할 수 있는 장점이 있지만 유지 보수에 악영향을 미칠 수 있기 때문에 사용하는 것을 권장하지 않음.

• link 방식 vs import 방식

  • import 방식 @import url("./box.css");
    • css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식으로 직렬 연결 구조
    • 고의적으로 서브 css 파일이 늦게 로딩되길 바라는 경우에 사용 권장
  • link 방식 <link rel="stylesheet" href="./css/main.css"/>
    • 외부 css 문서를 <link />로 가져와 연결하는 병렬 연결 구조

• nth-child는 (2n), (2n+1)과 같이 사용하여 홀, 짝수번째 하위 선택자를 선택하는 방식으로 사용할 수 있다.

• 이 때 n은 zero base numbering으로 2n은 짝수 2n+1은 홀수 번째 하위 선택자를 선택하는 것으로 사용 가능하다.

• (n+2)와 같이 앞의 몇 개의 요소를 제외하는 것도 가능하다.

  가상 요소 선택자

  :: 기호 뒤로 사용하는 것이 웹 표준

  가상 요소 선택자	설명	예시
  ABC::before	선택자 ABC 요소의 내부 앞에 내용을 삽입.
  content 속성을 무조건 포함해야만 적용	ex) .box::before

  class=”box” 인 요소의 앞 부분에 content
  속성의 값을 삽입한다. |
  | ABC::after | 선택자 ABC 요소의 내부 뒤에 내용을 삽입.
  content 속성을 무조건 포함해야만 적용 | ex) .box::after
  class=”box” 인 요소의 뒷 부분에 content 속성의 값을 삽입한다. |

• 스타일 상속이란 부모 요소에 스타일을 적용 하였을 때 후손 요소들까지 스타일이 적용되는 것을 말한다.

• 상속되는 CSS 속성들은 모두 글자/문자 관련 속성들이다.

• 모든 글자/문자 속성이 상속되는 것은 아님을 주의하자.

  강제 상속

• 스타일 상속이 자동으로 되지 않는 속성들을 강제적으로 상속시키는 방법이다.

• inherit 키워드를 사용한다.

• width, height, background-color와 같은 스타일 상속이 자동으로 일어나지 않는 속성들이 부모의 크기를 따라 갈 수 있도록 자식 선택자에 height: inherit;을 사용하면 부모의 값을 따라간다.

  선택자 우선순위

• 같은 요소가 여러 선언의 대상이 된 경우, 어떤 CSS 속성을 우선 적용할지 결정하는 방법

• 선택자에 점수를 부여하여 높은 점수의 선언을 우선 적용한다.

• 점수가 같다면 늦게 해석된 속성을 적용한다.

  

  • 위 사진의 모든 css는 div 태그에 적용될 수 있어 점수를 계산해서 적용해야 한다.

  • 선택자 우선순위 표

    선택자	점수
    !important 키워드	무한
    inline 선언	1000
    id 선택자	100
    class 선택자	10
    tag 선택자	1
    * 선택자	0
    상속	x

Ch 8. CSS 속성

• 요소의 가로/세로 너비

• auto : 기본 값 (요소에 이미 들어있는 속성의 값)

• 단위 : px, em, vw 등 단위로 지정

• span 태그는 인라인 요소로 포함한 콘텐츠 크기만큼 width height 속성이

  자동으로 줄어들게 설계됨. (글자를 제어하기 위함, width, height 속성 단위 지정 불가)
  

• div 태그는 블록 요소로 포함한 콘텐츠의 크기와 다르게 자동으로 부모 요소의 크기만큼

  `width` 속성이 최대한 늘어나게 설계되고, `height` 속성은 자동으로 줄어들게 설계됨.

  최대 가로/세로 너비, 최소 가로/세로 너비

  max-width 와 max-height 로 최대 가로/세로 너비를 지정할 수 있다. 기본 값 none

  min-width 와 min-height 로 최소 가로/세로 너비를 지정할 수 있다. 기본 값 0

  ---

  CSS 단위

  단위	설명	설명
  px	픽셀	디지털 화상을 구성하는 기본적인 단위
  %	상대적 백분율	부모 요소와의 상대적인 크기
  em	요소의 글꼴 크기	부모 요소의 font-size 가 기준인 상대 크기
  rem	루트 요소(html)의 글꼴 크기	root의 font-size 가 기준인 상대 크기
  vw	뷰포트 가로 너비의 백분율	viewport의 width 가 기준인 상대 크기
  vh	뷰포트 세로 너비의 백분율	viewport의 height 가 기준인 상대 크기

  ---

  외부 여백 (margin)

  margin : 요소의 외부 여백을 지정하는 단축 속성.

  value (margin 속성의 값)

  0 : 외부 여백이 없도록 지정.

  auto : 브라우저가 여백 계산 (가운데 정렬 활용)

  단위 : px, em, vw 등 단위 지정

  % : 부모 요소의 가로 너비에 대한 비율로 지정

  방향이 있는 외부 여백

  margin-bottom , margin-top , margin-left , margin-right 로 방향을 지정하여 각 외부 여백을 지정할 수 있다.

  또한 margin: top right bottom left 순으로 4개를 각각 다르게 한 번에 지정 가능하고

  1~4개의 값으로 구분하여 사용할 수 있다.

  ex ) margin: 40px 30px 20px 10px;

  ---

  내부 여백 (padding)

  padding : 요소의 내부 여백을 지정하는 단축 속성. (요소의 크기 조절)

  0 : 내부 여백이 없도록 지정.

  단위 : px, em, vw 등 단위 지정

  % : 부모 요소의 가로 너비에 대한 비율로 지정

  방향이 있는 내부 여백

  margin 과 같이 방향을 지정할 수 있다.

  ---

  테두리 선 (boarder)

  border : 요소의 크기가 커지고 속성의 값 3개를 모두 입력해야 한다.

  속성의 값은 권장 순서대로 border-width border-style border-color

  테두리 선이 굵어질수록 요소의 크기가 커진다.

  border-width : 테두리의 너비, padding, margin과 마찬가지로 1~4 방향 지정 가능.

• medium 중간 두께

• thin 얇은 두께

• thick 두꺼운 두께

• 단위 : px, em, % 등 단위 지정 (주로 사용)

  border-style : 테두리 선의 종류, 1~4 방향 지정 가능.

• none 선 없음

• solid 실선 (일반 선)

• dashed 파선 (- - -)

  border-color : 테두리 선의 색상을 지정하는 속성, 1~4 방향 지정 가능.

• black 기본 색상

• color 선의 색상 지정

• transparent 투명

  각 방향의 border를 제어하는 border-top-width 와 같은 속성이 존재하고 필요하다면 사용 가능.

  모서리 둥글게 (border-radius)

  border-radius : 요소의 모서리를 둥글게 깎음

  0 : 둥글게 없음

  단위 : px, em, % 등 단위 지정 (주로 사용)

  ---

  색상 표현

  표현 방법	설명	얘사
  색상 이름	브라우저에서 제공하는 색상 이름	red royalblue
  Hex 색상 코드	16진수 색상 코드	#000 #FFFFFF
  RGB	삼원색	rgb(0,0,0)
  RGBA	삼원색과 투명도 지정	rgba(0,0,0,0.5)

  ---

  크기 계산 (box-sizing)

  box-sizing : 요소의 크기 계산 기준을 지정

• content-box 요소의 내용으로 크기 계산

• border-box 요소의 내용 + padding + border로 크기 계산

  ---

  넘침 제어 (overflow)

  overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible 넘친 내용을 그대로 보여줌

• hidden 넘친 내용을 잘라냄

• auto 넘친 내용이 있을 경우에 잘라내고 스크롤 바 생성

  ---

  출력 특성 (display)

  display : 요소의 화면 출력 특성