정의페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의할때 사용기본 문법 One Two Three Four Five Six.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto);}.one { grid-column: 1 / 3; grid-row: 1;}.two { grid-column: 2 / 4; grid-row: 1 / 3;}.three { grid-column: 1; grid-row: 2 / 5;}.four { grid-column: 3..

정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..

정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지

정의 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 값 static - 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative - 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, tabl..

tailwind class에 !important 적용 시키는 법 클래스 명 앞에 느낌표를 붙이면 된다. 클래스 명 앞에 느낌표를 붙이면 된다.

tailwind가 적용되어있는 repository 내려받은 후 npm install 기존 프로젝트에 tailwind 추가 프로젝트 teminal에 nvm list 입력해서 현재 설치, 선택되어있는 nvm 확인 설치가 안 되어있다면 nvm install 16.13.1(원하는 버전) 선택이 안 되어있다면 nvm use 16.13.1(해당 버전) common.css 복사 후 같은 폴더에 붙여넣기 후 common.base.css로 설정 common.base.css 파일 최상단에 @tailwind utilities;, @tailwind components; terminal에 npm install -D tailwindcss npx tailwindcss init .gitignore/에 node_modules/ 추가 ..

영상 영상 내용 HTML 단순히 화면에 요소들이 이런 구조로 보여라 하고 정하는 수단 CSS HTML에서 정해놓은 것들을 꾸며주는 문서 JS 브라우저에서 다양한 일을 수행하고 HTML로 올려놓은 요소들을 변형시키거나, 직접 만들어내기도 한다. 후기 조별과제를 하면서 알게되었던 내용들을 다시 복습하는 느낌이었다. 웹계산기를 만드는 예시를 통해 더욱 명확하게 이해가 되는 기회였다.

영상 내용 HTML과 CSS, JavaScript의 기본 개념 및 예시 코드, 관련된 밈 후기 학원에서 배우고, 독학을 하면서도 잘 몰랐었던 HTML과 CSS, JS에 대해서 더 깊이 알아보고 평소에 궁금했었던 JS와 Java의 관계 등 여러 내용을 확실히 알게 되어서 굉장히 뜻 깊은 시간이었다고 생각한다.