분류 전체보기 (207) 썸네일형 리스트형 CSS Grid 수업필기 (4) - Grid Template Areas My Website Welcome To My Site Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? Contac.. CSS Grid 수업 필기(2) Spanning Columns and Rows Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 .grid { display: grid; grid-template-columns: repeat(4, 1fr); } 우선 4개의 columns에 1fr씩. .item:first-child { grid-column-start: 1; grid-column-end: 4; } item1을 span하고 싶을 때. item1의 왼쪽 border을 1번이라고 생각해서, 1번 줄에서 시작해서 4번째 줄까지 아이템을 늘여줌. (칸으로 따지면 3칸) (아래 그림이 적용된 모습) .item:first-child { grid-col.. CSS Grid 수업 필기(1) grid-template-columns, grid-template-rows grid-template-columns 기본 셋팅 .item { padding: 3rem; background: #f4f4f4; border: #ccc 1px solid; text-align: center; font-weight: bold; font-size: 1.4rem; } Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 .grid{ display:grid; grid-template-columns: 300px 300px 300px; } 우선 컨테이너에 display:grid; 선언 (display:flex와 다르게 아무 변화 없음) grid-template-columns에 만들고 싶은 column의 갯수와 너비를 설정. 저렇게 하면 한 줄에 3개의 아이템이 배치되고 각각 .. TIL3. A first splash into JavaScript 정리 1. 1과 100 사이 랜덤 숫자 하나를 생성한다. 2. 플레이어의 시도 횟수 설정 (일단 1로) 3. 플레이어에게 어떤 숫자인지 추측할 수 있는 방법을 제공 4. 플레이어가 숫자를 submit하면 그 기록을 띄움 (플레이어가 이전에 추측한 숫자가 무엇인지 알 수 있게) 5. 플레이어가 제출한 숫자가 맞는지 체크 6. 맞다면 6.1 축하 메시지 띄운다 6.2 Player가 더이상 숫자를 입력하지 못하게 한다. 6.3 게임 restart 버튼 display 7. 틀렸지만 여전히 시도 횟수가 남았다면 7.1 플레이어에게 추측이 틀렸다고 알려준다. 7.2 플레이어가 다른 숫자를 입력할 수 있도록 한다. 7.3 시도 횟수를 1 증가 시킨다. 8. 틀렸는데 남아있는 시도 횟수가 없다면 8.1 플레이어에게 게임이 .. CSS Transitions CSS Transtions를 사용하면 주어진 duration동안 property values가 스무스~~하게 변한다. (* duration을 안정해주면 default 값으로 0초가 설정되기 때문에 아무런 변화가 일어나지 않는다!) div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } Change Several Property Values The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and .. CSS Animations What are CSS Animations? CSS Animation을 사용하면 element를 변신시킬 수 있다!! (멋져멋져) Animation을 사용하기 위해서는 먼저 animation을 위한 keyframe 구체적으로 명시해야 한다. 이 Keyframes에는 특정한 시점에 도달했을 때, element가 어떤 스타일로 변신하게 될 지에 대한 정보가 담겨있다. @keyframes에 담은 css styles가 작동하려면 element와 애니메이션을 연결해줘야 한다. /* The animation code */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } /* The element to apply t.. Box Shadow *효과를 극명하게 보여주기 위해 예쁘지 않은 색을 선택했다. 이해 바람.. 0. 기본 셋팅 Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! 1. offset-x | offset-y | color /* offset-x | offset-y | color */ box-shadow: 10px 20px teal; offset-x는 박스 shadow 오른쪽 두께 offse.. before & after Pseudo Selector (feat.포토샵 없이 배경 이미지 흐리게) Name form 작성 시 유용한 코드. 반드시 input을 받아야하는 경우 (이름, 이메일 주소 등등..) 개발자 도구를 보면 마크업에는 나타나있지 않다. 사실 내가 before, after Pseudo Selector를 처음 배우게 된 건 랜딩 페이지에서 배경 이미지는 약간 흐리지만, nav나 content는 선명하게 보이는 효과를 원했을 때! 처음 배우게 됐다. 예시) - 개발자 도구에서 ::before 부분을 선택하면 거기에 적용 된 css 코드들을 볼 수 있다. 실제 코드) Hello World Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic! Lorem, ipsum dolor. Lorem ipsum, dolor sit .. 이전 1 ··· 20 21 22 23 24 25 26 다음
