목록프론트엔드 국비교육 (98)
안녕하세요

[220720 웹코딩(게임)] [ html / css / js ] 게임 타이틀을 강조한 메뉴를 구현했습니다. html을 다 만들고 js를 작업한 것이 아니라, 한 섹션을 만들 때마다 js로 기능을 추가하는 것을 반복하다 보니 js 코드가 엉망이 되었습니다. 앞으로는 html과 css를 다 구현한 뒤에 js로 기능을 추가하도록 해야겠습니다. 반응형으로 작은 화면에서는 메인타이틀을 클릭하면 미니타이틀이 나타나도록 했습니다. 모바일 화면에서 가독성이 좋으면서도 작지 않은 폰트 사이즈를 잘 모르겠습니다. Oswald, 메인타이틀 20px, 미니 타이틀 15px 입니다.
태그에서 첫 글자를 대문자로 쓰는 것은 컴포넌트의 유지 보수를 용이하게 하기 위해 함수에 담아서 정의하는 방식입니다. 컴포넌트가 아닙니다. Line 8:8: 'Div' is not defined 이름을 대문자로 표시합니다. 컴포넌트 안에 내용을 입력할 수는 없습니다. dasdsd 아무것도 출력이 되지 않습니다. 객체의 속성을 가져오는 방법은 {props.객체이름.속성이름}입니다. {props.member[0].name} 태그안에 넣는 변수는 {}로 감싸주어야 합니다. {props.member.map((el) => ( {el.name} ))} li의 자식은 고유한 key를 가져야 합니다. Each child in a list should have a unique "key" prop. 따라서 key를 설정해..
form의 action으로 지정한 위치로 이동시킬 수 있습니다. input의 type="submit"은 button과 같은 역할을 합니다. require 속성을 주게 되면 input이 빈 칸일 경우 경고문을 띄웁니다. palce 홀더에 속성을 주려면 :placeholder로 선택을 하면 됩니다. #searchForm input[name="search"]:focus::placeholder { color: transparent; } 가상요소 클래스를 이용하면 다양한 효과를 줄 수 있습니다. 아래는 첫 글자만 선택하는 예시입니다. .gnb a::first-letter { color: #f00; } 첫번째 글자만 빨간색으로 변합니다. header를 구성할 때 두 개 이상의 박스를 오른쪽 끝으로 밀어넣고 싶으면 ..

반응형으로 변환하기 위해 slick 슬라이드의 설정을 변경해주는 것에 어려운 점이 많았습니다. [220720 웹코딩(게임)] [ html / css / js ] slick 슬라이드 두 개를 연동하고, 표시되는 화면을 변환하는 버튼을 구현했습니다. var num = 0; $(".slider").on("afterChange", function (e, s, c) { num = c; }); $(".infoSlideBtn .prev").on("click", function () { $(".titleSlider").slick("slickPrev"); $(".description") .children() .eq((num - 1) % 4) .addClass("on") .siblings() .removeClass("on..