공부기록용

🔴 파일분리 // hello.js alert('안녕!') // javascript.js alert('자바스크립트!') ❓HTML에서 태그가 head에도 쓰이고 body에도 쓰이고 해서 차이가 알고 싶었당❓ https://realzzu.tistory.com/155 엄격 모드 'use Strict' function exampleNonStrict() { nonStrictVar = 20; // No error, 암묵적으로 전역 변수로 처리 } exampleNonStrict(); console.log(nonStrictVar); // 20 엄격 모드를 사용하지 않은 위 코드는 nonStrictVar 변수를 미리 선언하지 않고 사용해도 에러가 발생하지 않았다. 이렇게 되면 변수 nonStrictVar는 암묵적으로 전..

🔴align-content 🔴justify-content align-content & justify-content flex box 방식과 유사하게 사용한다. grid container의 수직축과 수평축에서의 item 정렬 방식을 결정한다. container에 여유 공간이 있을 때 사용할 수 있다. ⭐내용실습⭐ 1 2 3 4 5 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align-items: center; background-color: beig..

🔴align-items 🔴align-self 🔴justify-items 🔴justify-self align-items flex box방식에서와 유사한 역할을 한다. grid container 행 트랙의 높이를 기준으로 grid item의 배치를 결정한다. 트랙 행과 열을 의미한다. align-self 각각의 grid item이 어떤 식으로 배치될 것인지를 스스로 결정한다. (즉, item에 직접 지정하는 속성!) justify-items 수평축(행)을 따라 grid item을 정렬하고자 할 때 사용할 수 있는 속성으로, grid container에 지정한다. 아이템에 할당된 열 방향 너비가 기준이 된다. justify-self 수평축(행)을 따라 grid item을 정렬하고자 할 떄 사용할 수 있는 속성..

🔴grid-template-areas 🔴grid-area grid-template-areas grid 영역 즉, item의 이름을 이용해 layout의 형태를 정의할 수 있다. grid-area grid 영역 즉, item의 이름을 지정할 때 사용하는 속성이다. grid-area 속성은 CSS 그리드 레이아웃에서 사용되는 속성으로, 그리드 셀의 행과 열을 한 번에 지정하여 그리드 아이템의 위치와 범위를 설정하는 데 사용되기도 한다. 이를 통해 요소를 그리드 컨테이너 내에서 원하는 위치와 크기로 배치할 수 있습니다. 요소 { grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝; } /* 행 시작: 요소가 시작하는 행의 위치를 나타냅니다. grid-row-start 열 시작: 요소가 시작하는 열의..

🔴grid-column 🔴grid-row grid-column과 grid-row는 grid item을 지정해주는 속성으로 grid container의 줄 번호를 이용해 item을 배치할 수 있다. 줄 번호는 시작하는 부분부터 끝나는 부분까지 경계선 하나하나마다 번호가 지정되어 있으며 grid-column과 grid-row의 속성 값으로 이 줄 번호를 사용한다. ⭐내용실습⭐ 1 2 3 4 5 6 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align..

트랙관련함수 grid container의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수들이 있다. repeat( ) : 반복되는 값을 자동으로 처리할 수 있는 함수 minmax( ) : 최솟값과 최댓값을 각각 지정할 수 있는 함수 auto - fill & auto - fit : 반응형을 고려해 사용할 수 있는 키워드(함수❌) ⭐내용실습⭐ 1 2 3 4 5 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align-items: cente..