Yoonmin

🖋CSS사용 시 Typo에 해당되는 속성을 알아보겠다. 디자이너들이 설정한 부분을 setting 할 때, 사용되는 속성들을 다뤄본다. 1. font size 폰트의 사이즈를 조절한다. .text{ font-size: 16px; } 폰트 사이즈를 조절할 때 사용 가능 단위는 3가지 px, em, rem이다. (font size를 조절할 때는 주로 px이 많이 사용된다.) 📏 px ✔절대 단위 📏 em (equal to capital M: 대문자 M사이즈를 기준으로 한다.) ✔상대 단위(기준에 따라 달라지는 단위) ✔실제로 적용된 폰트 사이즈이다. .text{ font-size: 16px; } p{ font-size: 1em; } 상단의 코드가 실제로 적용된 폰트 사이즈(부모 요소)가 16px이니 1em은 ..

🤔Float란 무엇일까? float는 사전적 의미로 (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 등 뜬다는 의미를 가지고 있다. 🤨Float는 왜 필요할까? 우리가 Float를 배우는 이유는 block요소들을 가로 배치하기 위함이다. block은 자기의 영역을 침범 받지 않은 길막의 특징을 가지고 있어 가로 배치에 어려움이 있는데 이를 float가 해결해준다! 📑Float사용법과 원리 float는 부모태그 안에 존재하는 자식 태그들에 적용해 사용된다. Float Float Float 한번 예시로 사용법을 배워보자. 우리가 여러 자식 요소(red, blue, green)중 요소 red에 float를 넣으면 red는 부모 요소(float) 로부터 뜨게 된다. .red{ float: left; ..

🤔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개의 파트로 나뉘어..