display: flex 와 justify-content display: flex ⇒원래 박스들은 한 줄에 하나만 나타낼 수 있게 되었다. 인라인블록은 1줄에 여러개 가능! 한 줄에 하나만 있을 수 있던 박스들도 display: flex를 이용하면 1줄에 여러 박스 배치가 가능해진다. justify-content ⇒ 콘텐츠 항목 사이와 주위에 공간을 분배하는 방법을 정의합니다. justify-content의 여러가지 속성들 justify-content: center; /* Pack items around the center */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from th..

css-collection 1.정렬 관련 태그들 margin: auto; 브라우저에서 자동으로 margin을 골고루 넣어준다. 수평이 중심축인 중앙정렬 text-align: center; 블럭레벨이 아닌 아이들은 text-align을 이용하면 중앙으로 정렬된다. ex)button 블럭레벨은 위에 나와있는 margin: auto; 를 이용하여 중앙으로 정렬한다. margin: auto; 와 text-align은 수평으로 중앙 정렬이 가능하지만 수직적으론 불가능하다. line-height: 100px; line-height의 부모상자만큼 수치를 준다면 수직적으로 정렬된다. 한 줄의 길이를 정해주는 것 이기때문에 부모상자와 맞추면 자동으로 수직정렬이된다. 문제점: 줄 띄우기를 해서 두줄로 만들게 되면 텍스트가..

css 3강 study date:2021.07.13 css 기초 강의 3편 https://youtu.be/7neASrWEFEM float :정렬이라고 생각하면 편함 left, center, right Flexbox 구성요소들 container, item 속성을 따로 지정한다. 수평축, 수직축이 있다. 하나는 중심축 하나는 반대축이다. 축은 수평이냐 수직이냐에 따라서 바꿔질 수 있다. 1 2 3 4 5 6 7 8 9 10 .container{ background: beige; height: 100vh; } .item{ width:40px; height: 40px; } .item1 { background: #ef9a9a; } .item2 { background: #f48fb1; } .item3 { backg..

css 2강 study date:2021.07.13 css 기초 강의 2편 https://youtu.be/jWh3IbgMUPI block과 inlineblock의 차이 1 2 3 div, span{ width: 80px; height: 80px; margin: 20px; } div{ background: pink; } spand{ background:blue; } div는 inline- block으로 span은 block으로 변경하였다. div, span{ width: 80px; height: 80px; margin: 20px; } div{ background: pink; display: inline-block; } span{ background:blue; display:block; } inline → ..

study date:2021.03.29 css 기초 강의 1편 https://youtu.be/gGebK7lWnCk CSS란? Cascading style sheet Author Style→User Style→Browser selectors에 대해 알아보기 First Second Button 1 Button 2 Naver Google Empty 1.universal → *, 모든 태그를 선택한다 * { color:green; } 2.type →tag, tag만 변경한다 First Second Button 1 Button 2 Naver Google Empty * { color:green; } li { color:blue; } 3.id → #id, 이 아이디를 가진 아이들 모두 변경한다. First Secon..