코딩하는 김딸기

의도적인 반복훈련을 해라어려울 수록 가치있는 일이며 도전할 이유가 있는 것이다->할수록 어려워지는 것이 당연한 것일주일에 40이상, 그이외의 시간도 수업에 할애해야 한다.평소 좋은 태도를 항상 유지하면 기회를 잡기 유리해진다. 수업시간인 평일에 이론을 공부한 뒤 주말에는 실습을 해야한다!->이론 암기만 하는 것은 시험을 위한 공부,  모든것은 실제로 실습해봐야 나의 것으로 만들 수 있다끊임없이 제대로 된 기능을 하는 사이트(제품)을 만들어나가는 것이 가장 효율적이고 빠른 공부법 적절한 태도1. 개방성과 호기심->열린 마음으로 새 기술과 개념을 배우고 끊임없이 변하는 개발지식을 호기심을 지니고 배우려는 자세가 필요2. 적극적 참여 ->부캠은 실습중심 수업이므로 수동적으로 강의를 듣기보다 적극적으로 질문해가..

1. 초기값(initial value)의 설명으로 맞는것은?1.초기값은 웹브라우저가 기본으로 제공하는 사용자 에이전트 스타일시트를 의미한다.2.모든 속성의 초기값은 auto이며 맥락에 따라 다르게 계산 되어진다.3.초기값은 사용자 에이전트 스타일시트를 초기화한 결과값을 의미한다.4.초기값은 속성마다 고유하며 CSS 명세가 변경되지 않는 한 일정하게 유지된다.5.(보기없음)  4. flex-basis 속성의 초기값(initial value)이다.flex-basis: auto의 설명으로 가장 올바른 것은 다음과 같습니다:4. flex-basis 속성의 초기값(initial value)이다.설명:flex-basis: auto는 flex-basis 속성의 초기값입니다. 이 경우, flex 아이템의 기본 크기는 ..

폼 관련 가상 클래스폼과 관련된 가상 클래스는 사용자가 폼을 상호작용하는 동안 다양한 상태에 따른 스타일을 적용하는데 활용되어 웹 접근성 / 사용자 경험 향상에 도움을 줍니다.:focus:focus-within:focus-visible:checked:disabled:valid:invalid:requiredfocus:focus 가상 클래스는 사용자가 입력 요소를 클릭하거나 키보드로 선택하여 포커스를 받았을 때 적용됩니다. 이 상태는 사용자가 입력을 시작할 준비가 되었음을 의미합니다.:focus-within:focus-within 가상 클래스는 해당 요소 또는 자식 요소 중 하나가 포커스를 받을 때 적용됩니다. 주로 폼 컨테이너나 그룹에 사용됩니다.:focus-visible:focus-visible 가상 클..

폼 입문폼(Form)은 사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송할 수 있도록 하는 인터페이스를 제공합니다. 폼은 로그인, 회원가입, 검색 등의 작업을 수행할 때 사용되며, 다양한 입력 요소들을 포함할 수 있습니다.`" data-ke-size="size26">form 요소는 폼을 정의하는 데 사용됩니다. 이 요소는 사용자가 입력한 데이터를 서버로 전송하기 위한 컨테이너 역할을 합니다.주요 속성 (attribute)action: 폼 데이터를 제출할 때 데이터를 처리할 서버의 URL을 지정합니다.method: 폼 데이터를 서버에 전송하는 방법을 지정합니다. 보통 GET 또는 POST를 사용합니다.GET: URL에 데이터를 붙여 서버에 전송합니다. 데이터를 URL에 표시하기 때문에 보안이 낮고, 소..

.casts{  display: flex;}.casts-icon{  border-radius: 50%;  width: 64px;  height: 64px;  flex-shrink: 0;  border: 4px solid #111;  margin-right: -20px;  position: relative;}.casts-icon img{  border-radius: 50%;}.casts-icon figcaption{  background-color: dodgerblue;  position: absolute;  left: 50%;  top: 0;  white-space: nowrap;}이 CSS 코드는 .casts 클래스와 그 안에 있는 .casts-icon 요소 및 그 내부의 이미지와 캡션(figcapti..

Grid로 만드는 범용 Wrapper Layout Class /*변수*/:root{  --wrapper-width:960px;  --wrapper-padding:20px;}/* Layouts */.l_wrapper {  max-width: var(--wrapper-width);  margin: 0 auto;  padding: 0 var(--wrapper-padding);} .l_grid_wrapper{  display: grid;  grid-template-columns:   [start]     minmax(var(--wrapper-padding), 1fr)   [wrapper-start]     minmax(0, var(--wrapper-width))   [wrapper-end]     minmax(..

html 마크업 설정DOCTYPE html>html>  head>    title>Coffeetitle>    link rel="preconnect" href="https://fonts.googleapis.com">    link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>    link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">    link rel="stylesheet" href="style.css">  head>  body>    div class="conta..

컨텐츠가 그리드의 컨테이너 블록보다 커 튀어나갈 경우=>overflow:hidden; / overflow: scroll 사용 =>혹은 minmax사용!          /*2개의 칼럼 예약-min-width:0 초기화하는 기법=>그리드 콘태아너에서의 안전성 확보        min-width: auto가 되면 컨텐츠의 크기때문에 부모의 크기가 커지므로 이를 방지하기 위해 0으로 만듦 */        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 1. grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);이 코드는 ..