김성원의 코딩 일기

12 배수 (12-column grid system)는 반응형 웹 디자인에서 매우 인기 있는 레이아웃 시스템으로, 특히 CSS Grid나 Flexbox를 사용한 레이아웃에서 널리 채택되고 있다. 그 이유와 함께 12개의 컬럼을 사용하는 방식이 이류는 아래와 같다 1. 12 배수 시스템의 이유1.1. 나누기 쉽기 때문12라는 숫자는 균등하게 나누기 좋은 숫자이기 때문이다. 12는 다음과 같은 방식으로 나눌 수 있다.1, 2, 3, 4, 6, 12 등으로 나눌 수 있어, 유연하게 다양한 크기의 칸을 만들 수 있다.이렇게 나누기 좋은 특성 덕분에, 다양한 크기의 모바일, 태블릿, 데스크톱 레이아웃에서 유연하게 사용할 수 있다.1.2. 여러 화면 크기에서 유연성 제공12개의 컬럼을 기준으로 하게 되면, 화면 크..

반응형 디자인은 웹 페이지가 다양한 화면 크기(모바일, 태블릿, 데스크톱 등)에서 일관된 사용자 경험을 제공하도록 설계하는 방법이다.해상도나 기기의 화면 비율이 달라도 콘텐츠가 자연스럽게 조정되도록 하는 것이 목표며,반응형 디자인을 구현하는 주요 방법은 CSS 미디어 쿼리, 유동적인 레이아웃, Flexbox 및 Grid 활용이 있다. CSS 미디어 쿼리 사용미디어 쿼리(Media Queries)는 특정 화면 크기에 따라 CSS 스타일을 다르게 적용할 수 있도록 해주며,이걸 이용하면 작은 화면에서는 요소를 세로로 배치하고, 큰 화면에서는 가로로 배치하는 식의 조정이 가능하다.@media (max-width: 768px) { .container { flex-direction: column; }} 이..

HTML에서 스타일 적용 방식- html에 스타일을 적용하는 방법은 3가지가 있다.인라인 스타일 (style="")내부 스타일 (클릭 3. 외부 스타일 React에서 스타일 적용 방식- React에도 스타일을 적용하는 방법은 3가지가 있다.인라인 CSS (style={{}})CSS-in-CSS (.css 파일 사용)CSS-in-JS (styled-components, Emotion)적용 방식설명특징인라인 CSSJSX에서 style 속성을 객체 형태로 사용JS 값을 직접 스타일로 사용할 수 있지만 성능 이슈 (렌더링 시 새로운 객체가 생성됨)가 있으며 미디어 쿼리, hover, :before 등의 기능 사용 불가능함CSS-in-CSS기존 CSS 방식과 동일, className으로 적용기존 CSS와 동일한 ..

1. 선언하기 아래의 패키지를 설치 후 사용할 수 있다. npm i styled-components 함사 밖에 선언해 컴퍼넌트 선언처럼 사용을한다. 기본적은 형태는 import styled from 'styled-components'; const 변수명 = styled.태그` css 작성 `; function App() { return ( ); } export default App; 2. css컴퍼넌트에 몇 개 요소만 변경하고 싶을 때 1. prop스로 선언하여 css에 적용하기 - JSX에 선언한 컴퍼넌트에 prop를 선언하고 원하는 css에 넣는다. 예) import styled from 'styled-components'; const Box = styled.div` width: 100px; heig..

- React css를 적용하는 방법은 제가 알고 있는 부분에서는 5가지가 있다. 1. 태그에 직접 적용하기 이것은 html안에 style을 적용하는 것이랑 동일하며 JSX문법에 속하고 태그 안에 style를 선언한 후 {{}} 중괄호 2개를 선언하여 중괄호 안에 적으면 된다. css랑 조금 다르게 객체의 형태로 반환해야 한다. 예) 테그에 적용하기 가시성도 안 좋아지고 모든 태그에 직접 다 적용해야 한다는 단점으로 잘 사용 안 하는 것으로 알고 있다. (그냥 안 씀.) 2. css파일을 import로 불러오기 이 방법은 기존의 html과 css파일을 불러와 사용하는 것이랑 비슷하다. 하지만 단점이 있는데 리액트는 싱글페이지이다. 즉, 상단의 파일에 선언이 되어 있으면 하위 파일에도 적용이 된다는 단점이..

grid 자식 위치 조절 - grid의 부모에서 자식 속성의 위치를 조정하는 것들에 대해 알아보자. 키워드 justify-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 가로 정려을 다양하게 하는데 사용 align-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 세로 위치 정려을 다양하게 하는데 사용 place-content : 위에 두 프러퍼티를 묶어서 사용. (place-content: justify-content의 값 align-content 값 순으로 선언) https://waraliyo.tistory.com/106에 들어가면 felx에서 사용하는 프로퍼티와 동일한 기능을 가짐 (justify-content 동일, align-content == a..

fr - 크기 설정으로 박스 안에서 주어진 값을 비율로 하여 박스를 가득 채운다. 모바일, pc 황경을 고려해서 만들 때 사용하면 좋음. grid-template - grid-template-areas랑 사용방법이 비슷하지만 박스의 사이즈도 정할 수 있는데 fr로 하며 grid-template-columns와 grid-template-rows가 없어도 된다. 2-2에 html과 css를 그대로 사용한다고 생각했을 때 코드를 적용하면 .grid { display: grid; height: 70vh; gap: 10px; grid-template: "header header header header" 1fr "content content content nav" 2fr "footer footer footer f..

전 페이지 처럼 HTML을 적용하고 시작한다!! gap - 부모 속성에 display: grid를 적용 후 사용할 수 있으며 자식 속성에 적용한 값 만큼 간격은 둔다. 예) .grid { display: grid; gap: 10px; } column-start, column-end - start의 기준으로 end까지 하나로 묶으며 숫자로 위치와 범위를 정하며 기준은 가로다. end는 숫자에 -1 한대까지 라고 생각하면 된다. 앞에 아무 값을 넣지 않고 뒤에 꺼에 start값을 1을 넣으면 처음에 들어오고 2를 넣으면 2번째에 위치한다. 예) .header { background-color: #2ecc71; grid-column-start: 1; grid-column-end: 5; } row-start, ..

- 부모 태그에 display: grid;를 하면 적용이 되며 표저럼 만들어서 구간을 나누는 형태라고 생각하면 쉽다. ※ 기본 적으로 HTML에 만들고 난 후 css를 할게요~~ grid-template-columns - 가로의 넓이와 계수를 정한다. (밑에와 같이) - 값으로 원하는 개수 만큼 200px 200px 200px 200px 입력하면 가로에 200px길이의 칸 4개를 만든다. 그런데 개수가 늘면 비효율 적이다. 그래서 repeat()를 이용한다. 예는 아래 코드 박스에 있다. .grid { display: grid; grid-template-columns: repeat(4, 200px); /* === 200px 200px 200px 200px */ } .header { background-c..

order - flexbox의 children 요소의 순서를 변경하는 property이다. 앞으로 옮기고 싶다면 음수를 뒤로 옮기고 싶다면 양수를 넣어주면 된다. child2 { order: 2; //기존 위치에서 뒤로 2칸 이동한다. } flex-basis - flexbox의 children 요소에 적용되는 property이며 flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다. flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다. (잘 사용하지 않는다고 한다.) flexboxfroggy (링크) - flex 연습할 수 있는 곳!! (재미 있고 하다보면 이해됩니다. 저는 24단계 까지 클..