더보기 Flexbox Box와 item을 행/열로 자유자재로 배치해줄 수 있는 기능 아주 예전에는 모든 브라우저에서 호환 가능한 레이아웃을 만들기 위해 position, float, table 등을 이용하였다. (It's me....😭) 하지만, flexbox가 나타나면서 float는 순수 목적인 이미지와 텍스트의 배치를 이용할때만 사용하게 되었다. Flexbox는 크게 두가지만 이해하면 된다. 컨테이너와 각각의 아이템에 적용 가능한 속성들이 존재한다. flexbox 두 개의 축이 존재한다. (중심축과 반대축) container item display flex-direction flex-wrap flex-flow justify-content align-items align-content order fle..
Display & Position 웹사이트를 만들 때 가장 중요한 것은? ⇒ 잘 정의한 박스들을 원하는 위치에 원하는 사이즈로 배치하는 것 ⇒ display & position Display display : inline, block, inline-block Inline 요소는 컨텐츠 자체를 꾸며주는 것이므로 width, height 을 무시한다. (컨텐츠의 width, height에 따라 크기가 변함) 1 2 3 div, span { width: 100px; height: 100px; margin: 20px; background :pink; } div { background: red; display: inline-block;//한줄에 진열되는 상자 } span { background: blue; d..
CSS Cascading style sheet Cascade : 작은 폭포, 종속, 연속 ⇒ 지정된 스타일이 없다면 다음 우선순위로 지정되어 있는 sheet로 넘어간다는 의미이다. [우선 순위] 1. author : 우리가 작성하는 스타일 시트 2. user : 사용자가 지정하는 스타일시트 ex) 다크모드 3. browser : 브라우저 상에서 기본적으로 제공하는 스타일 시트 !important : cascading의 우선순위를 무시하고 '내가 제일 중요한 스타일 이야' 라는 의미를 가지며 가능한 사용하지 않는 것이 좋다. Selectors (선택자) * , Tag , #id , .class , : , [ ] First Second Hello button1 button2 Naver Google Empty..