코딩코딩

반응형 @media screen and (min-width: 800px) { .container { width: 50%; } } /* screen이 적어도 넓이가 800이상일때 .container 안 수행 */ >> 외 자세한 내용은 mdn(Beginner's guide to media queries, Using media queries)에서 확인 가능! item을 반응형으로 만드는 가장 좋은 방법은 크기를 100%로 지정해주는것! .player video { width: 100%; max-width: 1000px; }​ realative length units em - 부모의 폰트사이즈에 상대적으로(곱한 값) 계산되어짐 .parent{ font-size:8em; /*800%와 동일*/ } .child{..

Flex box container 속성 (박스) 사용하기 .container{ background: beige; height: 100vh; display: flex; /*flexbox 설정*/ flex-direction: row; /*방향*/ /*row(기본값) : 왼쪽에서 오른쪽 (수평) row-reverse : 오른쪽에서 왼쪽 column : 위에서 아래 (수직) column-reverse: 아래에서 위 */ flex-wrap: nowrap; /*아이템이 많아질때 줄바꿈의 유무*/ /*nowrap(기본값) : 아이템이 한줄에 유지 wrap: 한줄이 차면 다음 라인으로 내려감 wrap-reverse: 밑에서 위로 랩핑됨*/ /* flex-flow: column nowrap; direction, wrap..

레이아웃 block level은 한줄에 하나씩, inline level은 사이즈 되는 한 표기됨. display - block-level과 Inline-level을 변경할 수 있음, 속성값 : block, inline-block, inline span { display: block; } div { display: inline-block; }​ inline: 상자크기와 상관없이 안에 내용물만을 꾸며줌. 내용물이 없다면 아무 효과도 나타나지 않음. inline-block: 물건크기와 상관없이 상자에 맞춰서 표기. 한줄에 사이즈 되는만큼 여러상자 표기됨. block : 물건크기와 상관없이 상자에 맞춰서 표기. 한줄에 하나의 상자만. 정리 ! inline은 물건, inline-block은 한줄에 여러개가 들어가..

[Seletors] Universal * type Tag ID #id Class .class State : Attribute [] 사용하기 selector { property: value; } * { color: green; } li { /*우선순위 universal보다 높음*/ color: blue; } #special { /*id*/ color: pink; } li#special { /*li에 있는 special만*/ color: pink; } .red { /*class*/ width: 100px; height: 100px; padding: 20px; /*컨텐츠 안에 spacing*/ padding-top : 100px; padding-right : 100px; padding: 20px 20px 0p..

[Tag] 박스 vs 아이템 : 박스는 안에 컨텐츠가 없다면 보여지지 않음. 아이템은 보임 block level vs inline level : block은 한줄에 하나, inline 레벨은 공간이 있다면 이어서 쭉 == 줄바꿈 유무 inline ex) span, b, ... block ex) div, ... 종류 div, span - 묶음? 영역설정. div는 block, span은 inline 태그임 a - anchor tag 링크 태그 Click p - 문단 태그 This is a sentence. That is... bold채 태그 This is a sentence. That is... list(ol vs ul) - 리스트 태그 ol : 순서가 있음 ul : 순서가 없음 li : ol이나 ul 안..