728x90 HTML, CSS39 HTML, CSS - 반응형 웹(viewport, media-query) 반응형 웹이란? 2023. 10. 2. CSS - 컨테이너 아이템 정렬(justify-content) 예시 코드 .container { display: flex; /* x축: 좌에서 우로 */ flex-direction: row; } 실습 코드 A B C 구현 예시 2023. 10. 2. CSS - 레이아웃을 만들기 위한 CSS (table 레이아웃, flexbox 레이아웃) 예시 코드 .display-table { display: table; width: 100%; } 실습 코드 A B C A1 B1 C1 A2 B2 C2 A3 B3 C3 A B C A1 B1 C1 A2 B2 C2 A3 B3 C3 구현 예시 *추가. flex-wrap 프로퍼티 컨텐츠의 크기가 container의 크기보다 클 경우 크기를 변경하지 않고 컨텐츠의 크기 그대로 줄바꿈을 하여 보여준다. 예시 코드 .container { display: flex; /* x축: 좌에서 우로 */ /* flex-direction: row; */ /* x축: 우에서 좌로 */ /* flex-direction: row-reverse; */ /* y축: 위에서 아래로 */ flex-direction: column; /* y축:.. 2023. 10. 2. CSS - overflow overfolow란 html 작식 요소가 부모 요소보다 컨텐츠의 크기가 더 클 경우 자식 요소를 어떻게 보여줄지를 결정한다. ex) overflow-x, overflow-y, overflow 예시 코드 컨텐츠 컨텐츠 컨텐츠 컨텐츠 컨텐츠 컨텐츠 컨텐츠 속성 내용 overflow:scroll 인터넷 익스플로러같은 브라우저의 경우 컨텐츠의 길이, 높이에 상관없이 스크롤바가 생긴다. overflow:auto 컨텐츠의 길이, 높이가 부모 요소를 벗어나지 않는다면 스크롤바가 보이지 않고, 벗어난 순간에 스크롤바가 자동으로 생긴다. 2023. 9. 30. 이전 1 2 3 4 ··· 10 다음 728x90
