AI교육과정 - CSS.3

단비·2022년 10월 27일
0

AI교육과정

목록 보기
20/69
  • 다단 레이아웃
    • 텍스트를 column 속성으로 다단을 생성
    • 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
    • column-count : 단의 갯수를 설정
    • column-rule : 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
    • column-gap : 단과 단 사이의 여백을 설정
    • column-span : 단과 안의 포함된 요소를 다단편집에서 해제
  • Flex 레이아웃 css3에 새롭게 추가되었음 display: flex
    • flex-flow flex-wrap과 flex-direction 을 한꺼번에 지정할 수 있는 속성 예) flex-flow : row nowrap;
      • flex-wrap
        • 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
        • nowrap
          • 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
        • wrap
          • 플렉스 요소에 여유 공간이 없다면 다음줄로 넘김
        • wrap-reverce
          • 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김)
      • flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
        • row: 기본값. 가로로 배치
        • row-reverce: 가로로 배치(반대로)
        • column: 세로로 배치
        • column-reverce: 세로로 배치(반대로)
    • justify-content 플렉스 요소의 수평 방향 정렬 방식을 설정
      • flex-start: 기본값. 앞쪽에서부터 배치됨
      • flex-end: 뒤쪽에서부터 배치됨
      • center: 가운데 배치됨
      • space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
      • space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)
    • align-items 플렉스 요소의 수직방향 정렬 방식을 설정
      • stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
      • flex-start: 요소들이 시작점으로 정렬됨
      • flex-end: 요소들이 끝으로 정렬됨
      • center: 요소들이 가운데로 정렬됨
      • baseline: 요소들이 텍스트 베이스라인 기준으로 정렬됨
    • align-content flex-wrap: wrap 설정된 상태에서 아이템들이 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
      • stretch: 기본값. 위 아래로 늘어남
      • flex-strat: 요소들이 시작점으로 정렬됨
      • flex-end: 요소들이 끝으로 정렬됨
      • center: 요소들이 가운데로 정렬됨
      • space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
      • space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)
    • align-self
      • 플렉스 요소에 수직축으로 다른 align 속성값을 개별적으로 설정
    • order
      • 플렉스 요소들의 순서를 설정
    • flex
      • flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속성
      1. flex-basis

        플렉스 요소의 기본 크기를 설정

        • break-word: 단어 기준으로 줄바꿈
        • 0 : 해당 줄에서 크기를 꽉 채움
      2. flex-grow

        플렉스 요소를 flex-basis의 설정한 값보다 커질 수 있는지를 결정하는 속성 (비율로 설정됨)

        • 1: 컨테이너에 플렉스 요소를 채움
        • 2: 같은 컨테이너에 해당하는 요소의 2배
      3. flex-shrink

        • 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성(flex-grow와 쌍)
  • 미디어 쿼리(media query)
    • 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도로 변경하지 않아도 알맞는 형태로 스타일을 조절

      @media 매체유형 and(속성에 대한 조건){
      	css코드
      	...
      }

      😚 매체유형

    • all: 모든 매체

    • screen: 켬퓨터, 태블릿, 스마트폰, …

    • print: 프린터

    • speech: 스크린 리더

    • 기종별 크기

      • 구형폰: 320px
      • 일반폰: 360px ~ 380px
      • 태블릿: 768px
      • 데스크탑: 1024px
  • em과 rem 상대적인 크기를 정하는 단위
    • em: 부모 요소 크기의 몇 배인지로 크기를 설정 pc의 일반 텍스트 크기: 16px(기본값) 모바일의 일반 텍스트 크기: 12px(기본값)
      #hello {font-size:2em}
      <div id="hello"> /*2em - 32px*/
      	<div>안녕하세요</div> /*1em - 32px*/
      </div>
    • rem: 문서의 최상위 요소(html)의 몇 배인지로 크기를 설정
profile
tistory로 이전! https://sweet-rain-kim.tistory.com/

0개의 댓글