Front-end/CSS 8

[CSS3]Transition & Animation

Animation vs Transition 이 둘의 차이점으로 transition은 전환 즉, 어떤 요소에 property를 줬을 때 부드러운 전환이 특징인 반면 animation은 주고 싶을 때 언제든 요소에 움직임을 줄 수 있어 자유도가 높다. 👀CSS transition 우리는 Styling을 시도하다 보면 요소의 속성 값을 변경하는 경우가 발생한다. 이럴 때 속성 값을 바로 변경하는 것이 아닌 애니메이션을 통해 속성 값을 변경한다. Transition을 사용하기 위해서는 4가지 선언을 알고 있어야 한다. (HTML class에 active 추가되었을 때 동작하는 모습을 볼 수 있다.) .box.active{ font-size:30px; background-color: #ff4949; } /*해당 ..

Front-end/CSS 2022.04.03

[CSS3] Typography

🖋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은 ..

Front-end/CSS 2022.03.28

[CSS3]Media Query(반응형 웹)

🤔Media Query란? Media Query는 반응형 웹(Responsive Web)을 만들기 위해 반드시 알아야 하는 선언이다. 🤨그럼 반응형 웹이란 무엇인가? 우리는 웹 브라우저를 이용할 때 데스크톱, 태블릿, 스마트폰 등 서로 다른 화면 사이즈의 디바이스를 통해 웹 브라우저를 이용한다. 이때 브라우저에 접속한 디바이스에 화면 크기에 맞게 CSS가 적용되는 것을 바로 반응형 웹이라 할 수 있다. 😀반응형 웹 만들기 우리는 반응형 웹을 만들기 위해 2가지 조건이 충족되어야 한다. 1. viewportmeta (HTML meta tag) 2. mediaquery (CSS media query 문) @media screen and(min-witdh: 765px){ /* Where all the magi..

Front-end/CSS 2022.03.27

[CSS3]Flexbox

🤔 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️⃣..

Front-end/CSS 2022.03.26

[CSS3]Position

🤔Position이란? 요소를 원하는 위치에 자유롭게 이동하기 위해서 사용하는 property이다. Position에는 5가지의 종류가 존재한다. 1. static 2. relative 3. absolute 4. fixed 5. sticky (sticky는 지원하는 브라우저가 많지 않기 때문에 내용을 스킵하겠다.) ✨position공부 시 중요 포인트 ❗ 1. 내가 어떤 종류의 position을 사용하고 있는지 ❗ 2. 내가 사용하는 position은 무엇을 기준으로 사용하는지 기준점이 각각의 포지션 type에 따라 많이 달라진다. 💡 Type 1. static static은 모든 요소의 기본 position값이다. 모든 요소의 포지션은 모두 static으로 설정되어있다. 우리가 생각하는 일반적인 요소의..

Front-end/CSS 2022.03.20

[CSS3]Float란? / Layout 오류 시 해결 방법

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

Front-end/CSS 2022.03.14

[CSS3]BOX (Block,Inline,Inline Block)

🤔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: 굵기 스타일 색상*/..

Front-end/CSS 2022.03.13

[CSS3] CSS란?

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

Front-end/CSS 2021.11.04