상추의 IT저장소

gird에서의 gapgird 속성 사용 시 자식요소의 box의 여백(공간)을 주기 위한 속성의 값이다. gap과 margin의 차이는 무엇일까?margin : 엘리먼트 요소 이외외 것에도 여백이 생긴다.gap : 엘리먼트 요소에만(!!) 여백이 생긴다.(단, 인접요소가 없다면 적용되지 않는다.) margin을 활용한 여백 주기margin을 이용하여 여백을 주는 방법은 아래의 코드로 확인할 수 있다. .out_box{padding: 30px;}.box{display: flex;flex-wrap: wrap;width: 600px;font-size: 0;background: blue;margin: -10px}.in_b..

Grid 레이아웃 Grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 관계를 정의하는데 유용하다. 그리드의 형태 정의 - grid-template-row와 grid-template-columns 로 Grid트랙의 크기들을 지정해주는 속성이다. - 여러가지 단위를 사용할 수 있고 섞어서 쓰기도 가능하다. - gird-template-row는 행의 배치를 grid-template-column은 열의 배치를 결정한다. .container{ display: grid; grid-template-columns: 200px 200px 500px; grid-template-rows: 200px 200px 500px; background-color: aqua; } .co..

flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flexbox를 만드는 방법은 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 부모 요소와 자식 요소에 정의하는 속성 구분 flexbox..

웹폰트란? -웹 서버에 원하는 폰트를 요청해서 사용자에게 보여주는 방식 @font-face 명령어로 웹 브라우저에게 서체 이름과 다운받을 위치를 알려준다. @font-face의 기본 문법 @font-face { font-family: 내맘대로 사용하여 폰트 이름지정; src: url(폰트를 가져오는 url); font-weight: 폰트의 굵기 값; font-style: 폰트의 스타일 값; } 활용 예제 @font-face { font-family: 'Cafe24Oneprettynight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff'); fon..

flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flexbox를 만드는 방법은 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 부모 요소와 자식 요소에 정의하는 속성 구분 flexbox..

전체 선택자 모든 요소를 선택 하위 선택자 div 태그의 하위 요소 중 class 속성의 값이 orange인 요소 선택 div .orange { color: orange; } 자식 선택자 ul 태그의 자식 요소 중 class 속성의 값이 orange인 요소 선택 ul > .orange { color: orange; } 인접 형제 선택자 h1 태그의 다음 형제 중 ul 태그 하나를 선택 h1 + ul { color: orange; } 일반 형제 선택자 h1 태그의 다음 형제 중 ul 태그 모두를 선택 h1 ~ ul { color: orange; } 가상선택자 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 지정해줄 수 있다. /* h1태그를 클릭했을 때 */ h1:active { colo..

nth-child, nth-of-type 정리 :nth-child(N)= 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소 :first-child= 부모안에 모든 요소 중 첫번째 요소 :last-child= 부모안에 모든 요소 중 마지막 요소 A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소 A:last-of-type= 부모안에 A라는 요소 중 마지막 요소 예제>> .first :nth-child(2n){ background-color: aqua; } .first :nth-child(2n+1) { background-color: yellow; } /* 첫번째 요소부터 5번째 요소까지 2개마다 선택 */ .second span:nth..