파송송의 코딩테스트 공부

노마드코더 : 코코아톡 챌린지8일 transform, @keyframes 사용

Requirements: Use external CSS Use animations, transformations Clues: Use 'animation-delay' Use 'transform' Use 'border-radius' body, html{ width: 100%; height: 100%; background-color : #6BBCBE; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* 도트애니메이션 */ .animation-dot { width: 200px; height: 200px; display: flex; justify-content: space-around; align-item..

노마드코더 : 코코아톡 챌린지7일 Pseudo Selector(의사 선택자) 사용하기

Requirements: 지난번 챌린지와 마찬가지로, css 파일을 생성하고 그 안에 css 코드를 작성해주세요. 4개 박스의 색상 부분은 Pseudo Selector(의사 선택자)를 사용해 구현하세요. 색상이름과 색상코드가 적힌 박스의 위치는 Position 속성을 사용해 구현하세요. TA's 힌트 Flex를 썼는데, 예시처럼 2x2로 안나오고 한줄로 나오는 경우 flex를 선언하면 하위 컨텐츠들의 width가 아무리 커도 강제로 한줄로 배치됩니다. 하지만 어떤 속성을 선언해준다면, 부모의 width를 초과하는 컨텐츠는 다음 행에 정렬됩니다. Pseudo Selector 또는 Pseudo Class 지난 번 챌린지처럼 새로운 class를 만들어 특정 요소의 배경색을 설정하는 방법으로도 구현할 수 있습니..

노마드코더 : 코코아톡 챌린지6일 flex box 이용하기

Requirements: flex 가운데 정렬을 비롯한 대부분의 정렬은 flex를 통해 구현할 수 있습니다. 특히 여러 컨텐츠를 가로 혹은 세로 방향으로 일정 간격으로 배치하고 싶다면 더욱 적합할 것입니다. flex는 방향(direction)에 따라 메인 축(main-axis)과 교차 축(cross-axis)이 의미하는 바가 다릅니다. 구현하고자 하는 컨텐츠의 방향이 가로인지, 세로인지 잘 판단해서 작성하시기 바랍니다. flex-direction에 대해 알아보세요. class 하나의 요소에 한 개 이상의 class를 설정할 수 있습니다. 하나의 class가 하나의 스타일을 갖는다면, 두 개의 class를 가진 요소는 두 가지의 스타일이 모두 적용됩니다. border 테두리를 의미하는 border 속성에는..

노마드코더 : 코코아톡 챌린지4일 form과 input 태그

Requirements: label 태그를 사용하세요. id 속성을 사용하세요. 입력받는 모든 항목이 필수가 되도록 작성하세요. 비밀번호는 최소 10자리 이상 입력받도록 작성하세요. label 태그 사용하기 label 태그를 이용해, 사용자 입력을 받는 element의 설명을 추가하세요. label는 단순히 설명임을 명시하지 않습니다. label을 click하면 element가 선택됩니다. Id 속성 사용하기 사용자 입력을 받는 element에 id 속성을 사용하세요. label와 element를 연결하기 위해, 각각 필요한 속성(attribute)들이 있습니다. 모든 항목이 '입력필수'가 되도록 작성하기 Create Account 버튼을 눌렀을 때, 입력되지 않은 항목에 대해 입력을 요구하도록 작성하세..