Yoonmin

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

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

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

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

🤔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으로 설정되어있다. 우리가 생각하는 일반적인 요소의..

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

How to write Markdown?🤔 Github에서는 Markdown Editor를 지원하고 있습니다. 레포지를 작성하거나 이슈에 글을 남길 때 HTML tag를 늘 사용하는데 불편했습니다..😂 김 버그 CSS, HTML강의를 듣는 과정 중 Markdown 튜토리얼을 발견하게 되었고 공부해두면 전보다 능률적이고 이쁜 레포지를 작성 할 수 있을 것 같습니다 😍 🌲이탤릭체와 볼드체 텍스트 형식에 대한 두 가지 기본 요소인 이탤릭체 와 볼드체에 대해 알아보겠습니다. 🌱이탤릭체(_이탤릭체_) 마크다운으로 이탤릭체 를 사용하기 위해서 여러분은 글자의 바깥쪽에 밑줄(_)을 추가하면 됩니다. 예를 들어, _이것_은 이탤릭체 가 됩니다. Writing in Markdown is _not_ that hard! ➡..

📢HTML 요소 TAG를 사용해 만들 수 있는 HTML요소에 대해 알아보겠습니다. HTML 태그의 종류는 매우 많습니다.(해당 링크로 들어가면 확인하실수 있습니다) 이 모든 것을 알아야 할까요? (X) 실무 혹은 프로젝트에서 제가 많이 사용하는 태그들을 모아 보았으니, 제가 부족할 수 있지만 이 태그들은 그만큼 중요하다는 것이니 알아두시면 좋을 거 같습니다. 사용 빈도수에 따른 태그들을 소개해드리겠습니다. 🟡가끔씩 사용하는 태그들 , , , -해당 태그들은 🔵 사용 빈도가 높은 태그 , , , , , , , , , , , , , , , , , 주로 이 태그들로 HTML body부분이 구성되니 잘 보시고 공부하시면 좋을 거 같습니다. 해당 글에선 사용빈도가 높은 태그들을 분석해보고자 합니다. HTML 요소..

전 글에서 HTML은 일련의 요소(elements)로 이루어져 있다고 말씀드렸습니다. elements는 tag로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 글씨체의 크기를 조정하거나 변경 할 수 있습니다. 하단의 컨텐츠를 보면서 설명해보죠 HTML은 매우 흥미로워 이 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러싸서 하나의 문단임을 명시할 수 있습니다. HTML은 매우 흥미로워 📢요소(Element) , Tag 하단 사진의 문단 요소를 분석하면 이렇게 나옵니다. 여는 태그(opening tag): 요소의 이름(p)으로 구성되고 ()로 감싸집니다. 이는 요소가 시작된다. 효과를 시작한다 알리는 것입니다. 닫는 태그(closing ta..