프론트엔드29 Media Query ▶ 우리는 웹 사이트를 다양한 화면 사이즈에서 본다. 때문에 화면 사이즈에 맞게 웹사이트를 가독성 있게 변화해 주어야 하는데, 이러한 처리를 하는 것을 반응형 웹이라고 한다. ▶ 반응형 웹을 사용하기 위해서는 viewport meta(html)와 media query(css)를 사용해야 한다. ★ viewport meta ★ media query 2022. 2. 12. Flexbox ▶ 정렬의 끝판왕이다. ▶ 사용법만 잘 알고 사용하면 된다. ★ 사용법 ① Flexbox를 쓸 것이라는 것을 display로 선언한다. ● 정렬하고자 하는 요소들의 부모에게 적용해야 한다. ● display: flex; → block과 비슷하나 block 보다 쉽게 요소를 정렬할 수 있다. ● display: inline-flex; → inline-block과 비슷하나 inline-block 보다 쉽게 요소를 정렬할 수 있다. ② 요소들을 가로로 정렬할 것인지, 세로로 정렬할 것인지를 flex-direction으로 정한다. ● 보이지 않는 축(Axis)을 생각하고 사용해야 한다. ● flex-direction: row; → 가로방향으로 정렬되며, 요소는 왼쪽에서 오른쪽으로 흐른다.(기본값) ● flex-.. 2022. 2. 8. Display Display: block | inline | inline block ▶ Display는 박스타입을 결정짓는 CSS속성이다. ① display: block ● '길막'을 생각하면 된다. ● 영역(면)의 설정을 담당한다. 따라서 width, height, padding, border, margin 모두 다 사용이 가능하다. ● 1번 블록 옆으로 2번 블록은 이동할 수 없다. 직접적으로 보이지는 않지만 1번블록이 한줄을 모두 차지하고 있기 때문이다.(길막을 하고 있음) ● 따로 width를 선언하지 않은 경우에는 부모의 width값의 100%를 차지한다. ● 따로 width를 선언한 경우에 남는 공간은 margin으로 채워버린다. ● 부모의 height를 선언하지 않은 경우에는 자식요소의 height의 합이.. 2022. 2. 1. Float float: left | right; ▶ Float를 사용하는 이유는 요소를 가로배치 하기 위해서이다. ▶ Float의 사전적 의미는 물위나 공중에 "뜨다" 라는 의미를 가지고 있다. ▶ 어떤 요소에 Float를 적용시키면 기본 Dispaly는 무조건 Block으로 바뀌지만, 길막을 하지못하는 Block으로 변경된다. ▶ 특이하게도 Inline은 Float를 인식할 수 있다. ● float가 적용된 요소 파랑이는 그림과 같이 부모요소를 떠나 위로 떠오르게 된다. ● 파랑이는 부모요소나 나머지 형제요소인 노랑이와 빨강이가 인지하지 못하게 된다. ● 파랑이는 노랑이와 빨강이가 인식하지 못하므로 옆에있던 노랑이가 파랑이의 자리를 차지하고, 부모요소는 파랑이가 차지했던 만큼의 자리를 없애버린다. ※ Float로.. 2022. 1. 25. 이전 1 2 3 4 ··· 8 다음
