들어가면서 1.일반적으로 하나의 태그에는 하나의 class를 가진다. 2.하지만, 하나의 태그에 여러 개의 클래스를 선언해 CSS 스타일을 독립적으로 혹은 집단적으로 적용할 수 있다. 하나의 태그에 여러 개의 class 선언하기 1.하나의 태그에 여러 개의 class 선언은 '띄어쓰기'로 구분한다. 일 월 화 수 목 금 토 1)위 예제에서 2번째줄 코드와 12번째줄 코드간 grid라는 클래스를 서로 공유하고 있고 각각 서로 다른 date-title클래스와 date-board클래스를 가지고 있다. .grid { display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 5px; padding: 20px; } /* 그리드 각 블록을 div로 정의한다. *..
Javascript/HTML CSS
들어가면서 1.'그리드 레이아웃(grid layout)' 2차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다. 2.이때, '2차원 방식'이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식을 말한다. 그리드는 플렉스보다 더 폭 넓게 레이아웃을 설계할 수 있다. 3.가로(row)와 세로(column)는 각각 행과 열로 표현되며 표를 만들 수 있다. HTML에서 grid-container 태그 생성하기 1.HTML에서 부모 태그가 되는 그리드 박스와 자식 태그가 되는 그리드 아이템을 생성한다. 2.각각의 그리드 아이템은 부모 태그인 그리드 박스의 CSS 속성에 영향 받는다. ... item-1 item-2 item-3 item-4 ... CSS에서 gri..
들어가면서 1.'플렉서블 박스 레이아웃(flexible box layout)'은 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다. 2.이때, '1차원 방식'이란 가로(row)나 세로(column) 중 한 방향으로만 레이아웃을 설계하는 방식을 말한다. 3.플렉스 박스를 사용하기 위해서는 HTML에서 태그를 생성하고 CSS에서 플렉스 박스를 선언해야만 한다. HTML에서 flex-container 태그 생성하기 1.HTML에서 부모 태그가 되는 플렉스 박스와 자식 태그가 되는 플렉스 아이템을 생성한다. 2.각각의 플렉스 아이템은 부모 태그인 플렉스 박스의 CSS 속성에 영향을 받고 동등하게 움직인다. ... item-1 item-2 item-3 item-4 ... CSS에서 f..
HTML CSS -display:inline or inline-block : 요소를 가로로 정렬한다. 만약, ul태그안 li태그에 inline or inline-block를 적용하면 세로로 정렬된 태그들이 가로로 정렬된다. 더불어, inline 속성이 적용되면 li태그에 태그 기호도 사라지게 된다. 여기서, inline 요소는 같은 줄에 포함되는 것을 의미한다. -display:none/block/inline/inline-block: none 설정시 화면에서 보이지 않음. block 설정시 블록으로 설정. inline 설정시 인라인 박스로 설정. inline-block 설정시 블록과 인라인 박스의 중간 형태로 설정. 이때, block은 기본적인 div가 갖게 되는 값으로, 설정하면 width:100%으로..
