CSS
1.01.CSS 기초 - CSS Selector
HTML 문서의 특정 부분에 대해 렌더닝 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야함CSS Selector는 이런 특정 부분을 선택하기 위한 문법임전체 Selector : html 전체를 선택함 👉🏻 \*{ 속성:값; 속성:값; 속성:값; }✍🏻 cs
2.01.CSS 기초 - Reset CSS
🌈 Reset CSS > ### 🔥 Reset CSS 란? > ### 🔥 Normalize 방법 > ### 🔥 RESET CSS 파일 1. Reset CSS 란? 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어, 이를 초기화함으로써 다양한 웹
3.01.CSS 기초 - 박스 모델 이해
🌈 박스 모델 이해 > ### 🔥 CSS BOX MODEL 이란? > ### 🔥 box-sizing 속성 > ### 🔥 overflow 속성 > ### 🔥 max-width & max-height 속성 1. CSS BOX MODEL 이란? block 또는
4.01.CSS 기초 - font 이해
폰트는 각 사용자 PC에 해당 폰트가 설치되어 있어야 웹페이지에 적용이 되는데, 개발자가 원하는 폰트가 사용자의 PC에 설치되어 있지 않더라도 적용될 수 있게 하는 방법이 Web-font임즉, 개발자가 Web-font를 설정하면 사용자의 웹브라우저에서 해당 폰트를 다운
5.01.CSS 기초 - block-level & inline-level
🌈 block-level & inline-level > ### 🔥 block-level & inline-level 란? > ### 🔥 display 속성 > ### 🔥 visibility 속성 > ### 🔥 inline-block 특징 1. block-lev
6.01.CSS 기초 - position 이해
🌈 position 이해 > ### 🔥 position 속성 > ### 🔥 z-index 속성 1. position 속성 position 속성은 HTML 요소 위치를 비교적 자유롭게 위치시키는 방식으로, 아래 4가지 방식으로 나뉨 >#### 1) 기본 위치(
7.01.CSS 기초 - animation 효과
CSS 속성 값의 변화에 대해 옵션을 설정하여 일정 시간에 걸쳐 일어나도록 하거나, 어떤한 애니메이션과 같은 효과를 적용시키는 기능일반적으로 상태가 변화하는 과정에 개입하여 효과를 풍부하게 만듬trasition-property : 트랜지션 적용 대상이 되는 속성 지정t
8.01.CSS 기초 - float 이해
요소를 띄우는 속성으로 텍스트와 함께 이미지를 자연스럽게 배치하기 위해서 고안되었음실무에서는 수평 정렬 및 배치를 위해 flexbox나 grid를 사용하기 때문에 기본적인 개념만 이해float 속성 값none : 요소를 떠 있지 않게 함(default)right : 요
9.01.CSS 기초 - 미디어 쿼리
적응형 웹 : 디바이스에 따라 다른 페이지로 접속함으로써 최적화된 페이지를 보여줌PC로 접속하면 naver.com으로 접속하고, 모바일로 접속하면 m.naver.com으로 접속됨단점은 디바이스 환경(해상도)에 따라 페이지를 여러번 만들어야 함반응형 웹 : 동일한 웹페이
10.01.CSS 기초 - flex box
flex box는 div와 같은 block 요소들을 수평으로 정렬하기 위해 고안된 기능임수평으로 정렬하기 위해 float이나 inline-block을 사용하면 여러 문제가 발생되기 때문flex box로 사용하는 방식은 정렬하고 싶은 해당 요소들의 부모에게 flex를 적
11.01.CSS 활용 - Tag style 초기화
아래와 같이 dafault 값으로 설정된 a tage style을 초기화하는 방법✍🏻 htmlul 과 li는 기본 default style로 인해 앞에 기호가 생기고, margin 및 padding 앞을 갖고 있음이에 list-style 속성을 none을 통해 기호를
12.TIL13. CSS : container에 주는 flex 속성들
📌 이 포스팅에서는 Flex의 container에 주는 속성들에 대해 알아보겠습니다. 🌈 container에 주는 flex 속성들 > ### 🔥 container & item > ### 🔥 main axis & cross axis > ### 🔥 justify
13.TIL14. CSS : item에 주는 flex 속성들
📌 이 포스팅에서는 Flex의 item에 주는 속성들에 대해 알아보겠습니다. 🌈 item에 주는 flex 속성들 > ### 🔥 item의 크기를 유연하게 조절하는 속성들 > ### 🔥 개별 item을 제어하는 방법 > ### 🔥 item의 나열 순서 제어하기
14.TIL15. CSS: gird 사용법 정리
📌 이 포스팅에서는 CSS의 grid에 대해서 정리하겠습니다! 🌈 gird 사용법 정리 > ### 🔥 grid 란? > ### 🔥 grid container에 주는 속성들 > ### 🔥 grid item에 주는 속성들 > ### 🔥 grid 정렬 및 순서
15.TIL22. CSS : Layout의 모든 것
📌 이 포스팅에서는 CSS의 레이아웃에 필수 요소인 position 속성과 display 속성의 inline, inline-block, block에 대해서 정리하였습니다. 🌈 Layout의 모든 것 > ### 🔥 position 속성 - relative, abs