[개발자되기: css] Day-6

Kyoorim LEE·2022년 5월 2일
0

css (cascading style sheets)

  • 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
  • 웹사이트 사용자가 html문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할

프론트엔드 개발자에게 요구되는 css역량

  • 컴포넌트 기능별로 묶어서 제작
  • 화면의 구성이나 배치 (레이아웃 디자인)
  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일
  • (선택) 정렬이나 배색에 대한 감각
  • (선택) UX에 대해 고민해보고 UX가 잘 적용된 웹이나 앱을 분석해 본 경험

셀렉터: id & 클래스

id

  • #으로 선택
  • 한 문서에 단 하나의 요소에만 적용
  • 특정 요소에 이름을 붙이는 데 사용

class

  • .으로 선택
  • 동일한 값을 갖는 요소 많음
  • 스타일의 분류(classification)에 사용

스타일링

  • 굵기 :font-weight
  • 밑줄, 가로줄: `text-decoration'
  • 자간: letter-spacing
  • 행간: line-height

정렬

  • text-align: left,right,center,justify

절대단위 vs 상대단위

절대단위: px, pt

상대단위: %, em, rem, ch, vw, vh 등

  • 글꼴 사이즈 정할 때
    - 환경에 영향받지 않는 절대적 크기로 정하는 경우
    : px
    • 일반적인 경우
      : 상대 단위인 rem 사용 (브라우저의 기본 글자 크기가 1rem이며 두 배로 크게 하고싶다면 2rem, em은 부모 엘리먼트에 따라 상대적 크기가 변경되므로 계산이 어려운 반면 rem은 root의 글자 크기에 따라서만 상대적으로 변함)
  • 화면 사이즈 정할 때
    - 반응형 웹(responsive web)에서 기준점 만들 때
    : iphone 12 Pro Max 의 너비는 414px, 보통 450px 미만의 너비를 갖는 디바이스는 세로 모드로 생각하면 됨
    • 화면 너비나 높이에 따른 상대적 크기가 중요할 때
      : vw(viewport width), vh(viewport height) -> 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 로 구현한 것

박스모델

줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline block)

  • block
    - 대표적인 예:<div>, <p>
    • width, height 속성이 적용됨
  • inline
    - 대표적인 예: <span>,a,img
    • width, height 속성이 적용되지 않음
  • inline-block 박스
    - inline 박스처럼 다른 요소의 옆으로 붙으면서 자체적으로 고유의 크기를 가짐
    • width, height 속성이 적용됨
blockinline-blockinline
줄바꿈 여부OXX
기본 너비값100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용가능여부OOX

박스 구성 요소

  • border
p {
  border: 1px solid tomato; 
}
  • margin
p {
  margin: 10px 20px 30px 40px;
} // 시계방향 (top, right, bottom, left)
  • padding
  • overflow
    - 콘텐츠가 박스를 뚫고 나가는 경우 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 함
    • overflowauto값은 콘텐츠가 넘치는 경우 스크롤을 생성하도록 함. 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 경우 overflow속성에 hidden값을 사용함
    • overflow-x, overflow-y
  • box-sizing: border-box -> 박스의 여백과 테두리를 포함한 크기로 자동 계산됨
  • content-box vs border-box

css selector

<header>
  <p> 
    <span>
      <p></p>
    </span>
  </p>
  <p> 
    <span>
      <p></p>
    </span>
  </p>
</header>

자식 셀렉터

  • header > p {}
  • 첫번째로 입력한 요소의 바로 아래 자식인 요소
  • <header> 요소 바로 아래 있는 두 개의 <p> 요소는 선택되지만 <span> 요소의 자식인 <p> 요소는 선택되지 않음

후손 셀렉터

  • `header p {}
  • 첫번째로 입력한 요소의 후손
  • <header> 요소 바로 아래 있는 두 개의 <p> 요소와 <span> 요소 자식인 <p> 요소까지 선택됨

형제 셀렉터

  • section ~p {}
  • 같은 부모를 공유하면서 첫 버너쨰 입력한 요소 뒤에 오는 두번째 입력한 요소 모두를 선택
<header>
  <section></section>
  <p></p> <!--선택-->
  <p></p> <!--선택-->
  <p></p> <!--선택-->
</header>

인접 형제 셀렉터

  • section + p {}
  • 같은 부모 요소를 공유하면서 첫번째 입력한 요소 바로 뒤에 오는 두번째 입력한 요소를 선택
<header>
  <section></section>
  <p></p> <!--선택-->
  <p></p> 
  <p></p> 
</header>

가상 클래스 셀렉터

  • 요소의 상태정보에 기반해 요소를 선택함
    a:link {} // 사용자가 방문하지 않은 a요소를 선택
    a:visited {} // 사용자가 방문한 a요소를 선택
    a:hover {} // 마우스를 요소위에 올렸을 때 선택
    a:active {} // 활성화 된(클릭된) 상태일 때 선택
    a:focus {} // 포커스가 들어와있을 때 선택
  • UI 요소 상태 셀렉터
    input:checked + span {} // 체크상태일때 선택
    input:enabled + span {} // 사용가능한 상태일때 선택
    input:disabled + span {} // 사용불가능한 상태일때 선택
  • 구조 가상 클래스 셀렉터
    p:first-child { }
    ul > li:last-child { }
    ul > li:nth-child(2n) { } // 짝수
    section > p:nth-child(2n+1) { } // 홀수
    ul > li:first-child { }
    li:last-child { }
    div > div:nth-child(4) { }
    div:nth-last-child(2) { } // 같은 형제 중 끝에서 2번째
    section > p:nth-last-child(2n + 1) { } // 같은 형제 중에서 끝에서 홀수
    p:first-of-type { }
    div:last-of-type { }
    ul:nth-of-type(2) { }
    p:nth-last-of-type(1) { }
  • 부정 셀렉터
    input:not([type="password"]) { }
    div:not(:nth-of-type(2)) { }
  • 적합성 확인 셀렉터
    input[type="text"]:valid { }
    input[type="text"]:invalid { }

헷갈리는 셀렉터 작성방법

  • #container.mx-auto {…} : id가 container이면서 동시에 class가 mx-auto인 엘리먼트를 선택
  • #container .mx-auto {...} : id가 container인 자손 중에 class가 mx-auto인 엘리먼트를 선택
profile
oneThing

0개의 댓글