웹 공부중... 내 코딩 정리노트

//데이터를 변수(명)에 저장 const cssProperty = [ //CSS 속성 목록 {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다..

//데이터를 변수(명)에 저장 const cssProperty = [ //CSS 속성 목록 {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {name: "animation-duration", desc: "animati..

//데이터를 변수(명)에 저장 const cssProperty = [ //CSS 속성 목록 {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {name: "animation-duration", desc: "animati..

const searchBox = document.querySelector("#search-box"); //search-box(검색창)를 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수(cssList)에 저장 const cssCount = document.querySelector(".count em") //em을 변수(cssCount:전체 속성 갯수)에 저장 cssList.forEach((e, index) => { //전체 속성 갯수 설정:li의 모든 index를 불러옴 e.classList.add("show"); //li의 index에 class="show" 추가 cssCount.innerHTML = index +..

그리드 시스템이란? [참고1] [참고2] 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다. [참고] 웹디자인에서의 그리드 시스템 그리드 시스템의 기본 요소 그리드는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성됩니다. ① 칼럼(Columns) 실제로 컨텐츠를 포함하는 부분은 칼럼이라고 합니다. 칼럼의 넓이는 고정된 값으로 제공되며, 1개 이상의 칼럼이 조합하..

const searchBox = document.querySelector("#search-box");//search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => {//input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 변수에 저장 //console.log(searchWord); cssList.forEach(el => {//다수의 li한테 적용 console.log(el.dataset.name) const cssName = el.dataset..

화살표가 가르키는 태그만을 선택할 수 있는 CSS 선택자를 위에 입력해야합니다. Level 1 :first-child https://developer.mozilla.org/ko/docs/Web/CSS/:first-child :first-child - CSS: Cascading Style Sheets | MDN CSS :first-child 의사 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다. developer.mozilla.org Level 2 :not() https://developer.mozilla.org/ko/docs/Web/CSS/:not :not() - CSS: Cascading Style Sheets | MDN 부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자..

{ let sum = 0; for(let i=1; i

코드 header-top header-nav banner content1 content2 content3 footer-nav footer-info

코드 header banner content footer