CSS 자료

Display&Position

  • div:블럭 레벨이라 한줄에 하나씩 나온다
  • span: inline레벨이라 공간만되면 한줄에 여러개 나온다
  • display:레벨 기본값 변경이 가능하다
  • inline:한줄에 여러개가 들어갈수잇다
  • inline-block:한줄에 여러개가 들어갈수잇는 box
  • block:한줄에 하나만 들어가는 box

container box Position

  • static: 기본적으로 가지고 잇고 HTML에 정의된 순서대로 브라우저 상에 자연스럽게 보여진다
  • relative: 원래 잇어야하는 자리에서 지정한 위치까지 이동
  • absolute: 내 아이템이 담겨 잇는 박스 안에서 원하는 위치까지 이동한다
  • fixed: 박스를 벗어나 윈도우 안에서 지정위치까지 이동
    • flex-flow:아래 내용을 묶어서 사용가능 [flex-flow:column wrap;]
        • flex-direction:순서 바꾸기:
      • row:왼쪽에서 오른쪽 방향 정렬
      • row-reverse:오른쪽에서 외쪽 정렬
      • column:위에서 아래 정렬
      • column-reverse:아래서 위 정렬
        flex-wrap:한줄에 꽉찻을때의 동장 정의
      • nowrap:지정하지 않는다 한줄에 붙어 잇는다
      • wrap:한줄에 꽉 차게 되면 자동으로 다음 라인으로 넘어간다
      • wrap-reverse:꺼꾸로 wraping된다
  • justify-content:중심축에서 아이템 들을 어떻게 배치할건지를 결정해준다
      • justify-content: space-between;[양옆에는 붙이고 중간에만 간격을 넣어 준다]
    • flex-start:기본 값 왼쪽에서 오른쪽으로 정렬
    • flex-end:오른쪽 축으로 아이템 배치(순서는 유지) [여기서 flex-direction이 column이면 아래 축으로 배치 된다
    • center:아이템을 가운데로 맞춘다
    • space-around:매개 박스에 간격을 넣어 준다
    • space-evenly:박스 간격을 똑같이 넣어 준다
    • space-between:양옆에는 붙이고 중간에만 간격을 넣어 준다
  • align-items:반대축에서 아이템들을 배치하는 속성 값
      • align-items:center;
    • align-items:center;상자들을 수직 적으로 중간에 배치
    • baseline:베이스 라인에 맞춰서 균등하게 보여준다
  • align-content:반대축에 아이템을 지정하게 된다
      • justify-content 나왓던 속성들을 다 쓸수잇다 (*쓰기전 브라우저가 지원하는지 확인 필요)
    • space-between:위 아래는 붙이고 중간에만 간격을 넣어 준다
    • center:아이템을 중간으로 맞춘다
  • flex-grow:아이템이 커질때의 크기 정의
  • flex-shrink:아이템이 작아질때의 크기 정의
  • flex-basis:아이템들이 공간을 얼마나 차지할껀지 세부적 정의[flex-basis:60%]이런식으로 grow,shrink없이도 매개 박스의 크기를 설정할수잇다
  • align-self:아이템별로 아이템들을 정렬할수잇다
  • sticky: 원래 잇어야하는 자리에 잇으면서 대신 스크롤링 되어도 사라지지않는다

    • Units

      Absolute length units [고정형]
    • cm:Centimeteers
    • mm:Millimeters
    • Q:Quarter-millimeters
    • in:Inches
    • pc:Picas
    • pt:Points-
    • px:Pixels-
      Relative length units [상대적 유닛]
    • em:현재 지정된 포인트 사이즈를 나타내는 단위,부모의 폰트 사이즈를 곱한 값 으로 계산된다
    • ex:
    • ch:
    • rem:루트에 지정된 폰트 사이지에 따라서 크기가 결정된다
    • lh:
    • vw:뷰폴트(브라우저) 너비의 지정 크기 만큼 쓴다
    • vh:뷰폴트(브라우저) 높이의 지정 크기 만큼 쓴다
    • vmin:뷰폴트(브라우저) 너비 와 높이 중 작은 값의 지정 크기 만큼 쓴다
    • vmax:뷰폴트(브라우저) 너비 와 높이 중 큰은 값의 지정 크기 만큼 쓴다
    • %:부모요소의 상대적 퍼센트 값
    • *%는 부모 요소의 영향을 받지만 v는 부모요소와 상관없이 브라우저 크기에 따라 변한다

그리드 컨테이너 display: grid;

유연한 트랙을 만들수잇다. 그리드 컨테이너는 요소에 display: grid 또는 display: inline-grid를 선언하여 만듭니다. 이렇게 하면 해당 요소 바로 밑에 있는 모든 자식 요소는 그리드 아이템이 됩니다.

자주 쓰틑 속성

  • transform: 좌표공간을 변형
  • opacity: 투명도 설정 0.8 = 80%
  • color: 글자 색
  • background color: 배경색
  • decoration: 꾸미다.
  • text-decoration:글씨의 장식(선) 색을 지정
  • list-style:목록 스타일 속성
  • transition:애니메이션 속도를 조절
  • order:현재 아이템이 잇는 순서를 바꿀수잇다 [order:2;]
  • z-index: Z축 순서를 숫자로 지정
  • overflow:요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법
  • text-align: -webkit-center; 콘텐츠 센터 정렬
  • vertical-align:속성은 인라인 또는 테이블 셀 상자로 도피합니다.
    • vertical-align:inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
  • border-radius: 둥근 테두리 [원:50%;]
  • element+element:"+"element 뒤에 따라오는 첫 element만 선택

CSS선택자(css selector):

우선순위: id > class > 태그(element) ;


         id = " # "  
         class = " . "
         element = " a,q,h1,h2 "

Property,속성


         a = Selector 선택자
         color:red= declaration,선언,효과
         color = Property,속성
         red = Property Value,값

반응형 디자인 Media Query

화면의 크기에 따라 웹 페이지의 각요소들이 반응하여동작하게 된다.


         /* screen width >800px min[초소값],max[최대값]*/
         @media(min-width: 800px){#grid{
         display: block;
         }}