Will find a way

들어가기 전나는 평소에 레이아웃을 만들 때 flex로만 구성하기도 한다. grid로도 할 수 있지만 이미 flex에 익숙해져 있어서 grid 사용 경험이 따로 없다. grid로도 할 수 있는 것들은 flex로 다 할 수 있지만 그래도 상황에 따라서는 grid가 더 나을 수 있기도 하다. 그래서 grid를 한번 사용해보고 간단하게 grid에 대해서 포스팅해보려고 한다. Grid 에 대해서grid도 flex처럼 레이아웃을 배치할 때 사용한다.물론 grid로 할 수 있는 것들은 flex에서도 가능하지만flex 와 grid가 편한 경우가 상화에 따라 각각 다르다. flex 는 간단하게 한줄의 레이아웃을 할 때 간편하고grid 는 조금 더 복잡한 2D 레이아웃을 제작할 때 간편하다. (쉽게 말해 1줄로 정렬과 가..

목차 1. media query란? 2. media query 사용 방법 3. Device에 따른 media query 너비 1. media query 란? 브라우저 화면 크기에 따라 CSS 스타일을 적용할 수 있는 것을 의미한다. 2. media query 사용 방법 @media only screen and (min-width : 400px) { div { display : none; } } media query는 @media (조건문) {스타일 적용} 세부분으로 나뉜다. 위에 코드는 "브라우저 너비가 400px 부터 div 태그에게 display:none 속성을 적용한다. " 는 의미를 가지고 있다. 브라우저의 너비의 조건을 줌으로써 우리는 반응형 페이지를 만들 수가 있다. 3. Device에 따른 ..

목차 1. transition 2. transform 1. transition transition 은 animation과 같이 효과를 줄 때 사용하지만 animation 처럼 구체적으로 애니메이션을 지정하지 못하지만 간단하게 애니메이션 효과를 줄 수 있는 장점이 있습니다. transition에 대해 알아보겠습니다. transition: (property/속성) (duration/지속 시간) (timing-functing/타이밍 기능) (delay/지연) 위에는 transition: 방식입니다. 모든 속성에 변화를 주고 싶으면 transition : all 로 쓰기도 합니다. transition-property : 속성 / transition-duration : 지속 시간 transition-timing-..

animation animation 은 뜻 그대로 동적인 움직임을 줄 때 사용하는 속성입니다. animation 을 속성을 사용하는 방법은 아래와 같습니다. animation : animation이름 시간 진행방식; 위에 예시를 보면 animatioin 이름이 있는데 이를 지정하기 위해서는 keyframes를 알아야합니다. 밑에서 keyframes를 지정하는 방식을 알아보겠습니다. @keyframes animation이름 { 0% { 속성 : 값; } 100% { 속성 : 값; } } keyframes 는 애니메이션 이름을 설정해주면서 어떤 속성이 어떻게 흘러가는지 지정해주는 영화필름과 같은 역할이라고 생각하면 됩니다. 위와 같이 %별로 어떤 속성이 얼마나 진행되는지 지정해줄 수 있습니다. 코드가 어떻게..

인접 결합자 / 형제 결합자 CSS 를 배우면서 우리는 결합자라는 것을 배웠습니다. 결합자라는 것은 두 개 이상의 선택자를 결합하여 동일한 패턴을 만드는 것을 목적으로 합니다. 보통은 직계자손 선택자인 "선택자 > 선택자", 와 "ul li" 요소의 모든 자식을 의미하는 식으로 썼습니다. 오늘은 그와는 다른 "인접 결합자"와 "형제 결합자"에 대해서 알아 보겠습니다. 인접 결합자 인접 결합자는 "+" 를 붙여 사용합니다. 하는 역할은 바로 다음 인접한 태그를 선택해줍니다. 위에 사진에서 의미한 코드는 첫번째 li에 인접한 li 태그를 선택해준 것입니다. 코드 결과를 보면 box 1 다음에 box 2 에 빨간색이 적용된 것을 확인할 수 있습니다. 여기서 중요한 것은 바로 다음에 인접했다는 것입니다. 만약 ..

flex 정리 오늘은 주로 쓰는 display : flex 에 대해서 알아보겠습니다. display : flex 는 블록 요소를 정렬할 때 사용하며 부모요소에 속성을 주어 사용합니다. 지금 화면은 div 태그 안에 p태그 세개를 넣은 것입니다.. 보기와 같이 p태그는 블록요소이기 때문에 너비와 높이를 지정해도 부모태그의 한 줄씩 사용하는 것을 볼 수가 있습니다. 그럼 부모 요소에 display: flex를 줘서 어떤 변화가 있는지 확인해 보겠습니다. display : flex 왼쪽div 태그에 display : flex 를 준 모습입니다. 세로로 정렬됐던 Box 들이 가로로 정렬 된것을 볼수 있습니다. 마치 inline-block 속성처럼 좌우로 나열 된 것을 주는 것을 볼 수 있습니다. display ..

목차 CSS 기초 이론 문법 선택자 모든 요소의 선택자 태그 선택자 클래서 선택자 아이디 선택자 결합자 스타일의 속성과 값 1. CSS 기초 이론 HTML이 구조를 위한 내용이면 CSS는 모양을 위한 시트 브라우저의 요소에 모양을 적용시킨다. 2. 문법 선택자 { 속성 : 값 } CSS는 선택자 속성 값으로 이루어져 있다. 3. 선택자 선택자 : 어떤 요소에 스타일을 적용시킬지를 명시해주는 것이다. 선택자 유형 *{} : 모든 요소의 선택자 div {} : 유형 선택자 모든 div 태그에 스타일을 적용 시키겠다. .class {} : 클래스 선택자 #id {} : 아이디 선택자 4. 결합자 결합자 : 여러 선택자를 연결해서 스타일을 사용 div div {} : 자손 결합자 .class .class2 {}..