Display&Position

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:flex-start;)
  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:반대축에 아이템을 지정하게 된다
  space-between:위 아래는 붙이고 중간에만 간격을 넣어 준다
  center:아이템을 중간으로 맞춘다
  justify-content 나왓던 속성들을 다 쓸수잇다 (*쓰기전 브라우저가 지원하는지 확인 필요)
• flex-grow:아이템이 커질때의 크기 정의
• flex-shrink:아이템이 작아질때의 크기 정의
• flex-basis:아이템들이 공간을 얼마나 차지할껀지 세부적 정의[flex-basis:60%]이런식으로 grow,shrink없이도 매개 박스의 크기를 설정할수잇다
• align-self:아이템별로 아이템들을 정렬할수잇다
• sticky: 원래 잇어야하는 자리에 잇으면서 대신 스크롤링 되어도 사라지지않는다
• order:현재 아이템이 잇는 순서를 바꿀수잇다 [order:2;]
• z-index:속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

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를 선언하여 만듭니다. 이렇게 하면 해당 요소 바로 밑에 있는 모든 자식 요소는 그리드 아이템이 됩니다.

 

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; }}