Yoonmin

🤔 Flex Box 우리가 flexbox를 사용할 때 4가지 사고를 가지고 사용하면 된다. 1. 플렉스 사용 (선언) 2. 가로 정렬 or 세로 정렬 3. 무조건 한 줄 안에 다 정렬? or 여러 줄 정렬? -----(준비과정)----- 4. flexbox 사용하면 된다. 😃Flexbox 사용 준비 과정 1️⃣ 선언 .flexbox{ display: flex; /* flex | inline-flex */ } ❗ flex도 box의 type 중 하나이다. flex는 block과 비슷하지만 요소를 쉽게 정렬할 수 있다. inlin-flex는 inline-block과 비슷하지만 요소를 더 쉽게 정렬할 수 있다. ✨Flex를 사용하고자 할 때는정렬을 하고자 하는 요소를 감싸는 부모한테 적용을 하면 된다. 2️⃣..

🤔BOX란 무엇인가? Box는 Box Model만을 이해한다고해서 바로 사용 가능한 것이 아니다. 내가 어떠한 BOX Type을 쓰느냐에 따라 Box Model은 달라진다. 우리에게 중요한 Box type은 4가지가 있다. Block / Inline / Iline Block / Flex 📢BoxModel Box Model는 4가지 영역으로 나뉜다. 1. Content content는 content가 들어가있는 상자로 가로는 width, 세로는 height로 표현한다. 2. Padding 안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 것을 padding이라 한다. 3. Border 테두리를 나타내는 border, 사용법이 다른 BOX들과 다르다. /*border: 굵기 스타일 색상*/..

❗CSS(Cascading Style Sheet) 🤔CSS란 무엇일까? HTML markup 내에 있는 정보(타이포그래픽, layout, img 등)의 시각적 요소를 분리하여 관리하기 위해 생긴 언어가 CSS이다! 🤔WEB은 왜 Document(HTML)와 Style(CSS)을 분리해서 관리해야 하나? HTML내에 CSS를 코드를 모두 입력해서 작성하게 된다면 유지보수가 어려우며 코드 가시성이 매우 떨어진다. 이러한 문제점을 해결하기 위해 W3C(World Wide Web Consortium)에서 웹 표준을 지정하였다. 이때, stylesheet전용 언어로 css가 사용되었다. 📝CSS 작성하는 방법 selector{ property: value; } ❗CSS는 크게 선택자와 선언부 2개의 파트로 나뉘어..