이번에는 flex 컨테이너 내의 아이템들의 사이즈를 반응형으로 변경하는 일부 CSS 속성들에 대해 정리하겠습니다. 기본 Flex 컨테이너 생성 Flex Container Home About Contact Us The Best Programmer In The World style.css .container{ display: flex; gap: 10px; } .container > *{ border: 5px solid black; } 우선 테스트해볼 flex 적용 컨테이너를 만들어주었습니다. 해당 컨테이너에는 4개의 각각 다른 내용들이 들어있는 아이템들이 있습니다. gap 10px을 넣어 사이의 간격을 넣어주었고, border 속성을 통해 외각선을 넣어주었습니다. flex로 컨테이너를 설정해주었기 때문에 이..

flexbox 를 설정하여 반응형 CSS를 적용하였으면 이제 적용한 flex 아이템들의 순서, 방향을 지정해줄 수 있습니다. 그 중에서 일부 속성과 옵션들을 정리해보겠습니다. order [ html ] Red Orange Yellow Green Blue Indigo Purple [ style.css ] .red{ background-color: red; order: 2; // 2가 두번째로 높으므로 마지막에서 두번째 순서로 위치 } .orange{ background-color: orange; } .yellow{ background-color: yellow; } .green{ background-color:green; order: 1; // 1은 세번째로 높으므로 마지막에서 세번째 순서로 위치 } .bl..

HTML 에서 태그로 생성한 구조들은 기본적으로 왼쪽에서 오른쪽으로 채워지는 순서를 가지고 있습니다. 이처럼 flex box 에도 구성물들을 넣게 되면 왼쪽에서 오른쪽으로 기본적으로 채워집니다. 이는 flex-direction 이라는 방향 속성에 행 (row)이 기본값으로 설정되어 있으며 왼쪽에서 오른쪽으로 행 방향으로 채워집니다. 열 (column)으로 설정하면 모든 내용들이 위에서 아래로 이동하게 됩니다. flex-basis CSS를 적용하면 flex로 배치된 각 내용들이 flex-basis에서 정한 크기만큼 넓혀지거나 좁혀집니다. 만약 flex-direction 이 row 이면 주축 방향인 가로로 크기가 정해지고 column이면 주축 방향을 따라 세로로 길이가 정해집니다. 예시 코드 Red Oran..

레이아웃을 설정하는 방법에는 여러가지가 있습니다. flex, grid, 외부 라이브러리, 부트스트랩, media query 등... 그 중에서 flex 는 유연하게 원하는 레이아웃을 설정해줄 수 있습니다. Flexbox Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis voluptate ex corporis magni deleniti. Ipsum id at ad quo neque ..

반응형을 만들기 위한 방법 중 하나인 Media Query 에 대해 좀 더 정리해보겠습니다. @media(max-width: 600px){ h1{ font-size: 15px; } } Media Query 는 위와 같은 양식으로 반응형을 구현합니다. selector 대신에 @ 기호와 media 키워드를 입력하고, (괄호) 안에 조건을 기입합니다. 중괄호에는 조건에 부합할 경우에 적용될 CSS 동작 코드를 입력하게 됩니다. 괄호 안에 들어갈 조건은 다양하게 넣을 수 있습니다. min-width 와 같이 최소 넓이에 관련된 내용의 조건을 넣거나 할 수 있다는 뜻이죠. max-width를 조건으로 걸 경우 오른쪽에서 왼쪽 방향으로 넓이를 파악하고, min-width를 조건으로 걸 경우 왼쪽에서 오른쪽 방향으로..

개발한 웹 사이트가 플랫폼 환경에 따라 화면 구성이 동적으로 반응하여 적용될 수 있어야 합니다. 모바일, PC, TV, pad 등 다양한 환경에서 한 가지의 일관된 형식으로 화면이 보여지게 되면 사용하는 클라이언트 입장에서도 많이 불편하기 때문입니다. 따라서 반응형 웹 사이트는 현대 웹 개발에 필수라고 볼 수 있습니다. 이 반응형을 구현하기 위해선 대표적으로 4가지의 방법이 있습니다. 1. Media Queries 2. CSS Grid 3. CSS Flexbox 4. 외부 프레임워크 / 부트스트랩 Media Queries Media Query 예시 코드를 보면 양식은 이렇습니다. 마치 Spring의 Lombok 의 형태처럼 @ 기호와 media 키워드를 사용하고 괄호 안에 조건을 겁니다. 위의 코드의 조..