CSS 선택자 - 조합, 그룹, 가상 Quote HTML, CSS 실력을 단숨에 수직상승 시킬 수 있는 팁! 바로 ‘클론 코딩’ 입니다. 단순 반복의 목록형 페이지 - 쇼핑몰이 클론코딩을 하기에 실용적이고, 어렵지 않으면서도 자주 쓰이는 기술이 많이 들어갑니다. 여러분들이 자주 접속하는 쇼핑몰 중에 심플하고 세련된 사이트를 선정하여, 똑.같.이! 한 페이지만 만들어보세요. 개발자도구를 보면 HTML, CSS 힌트를 얻으실 수 있습니다. CSS 선택자 상속(Inheritance) 부모 자식관계의 태그나 요소에서 상위에서 설정된 스타일이 상속된다. 이를테면 body태그에 스타일을 지정하면, 해당 태그내의 모든 태그는 영향을 받아 스타일이 적용된다.

CSS - Image Sprite Image Sprite란? 화면에 필요한 이미지 하나하나가 파일이고, 네트워크 요청을 하기 때문에 비용이 든다. 하나의 이미지 파일에 모든 이미지를 담은 후, 위치를 조정하며 골라 사용하는 방법 장점 10개의 아이콘이 10개의 파일로 존재한다면 10번을 요청하게 되지만, 1번의 요청으로 줄어들어 웹 성능의 향상을 기대할 수 있다. 이미지를 불러올 때마다 화면에 표현하기 위해 잠깐의 깜빡임이 생기는데, 하나의 이미지파일을 사용하면 이미 브라우저에서 불러온 파일이라 이 깜빡임이 없다. 단점 디자이너와 소통이 필요함 이미지가 하나만 수정되어도 파일이 변경되어야 함 각 이미지의 위치(좌표)를 정확히 관리해야 함 Image sprite 기법 다음은 NAVER 메인페이지의 메뉴아이콘이 할당되어있는 배경이미지 파일이다.

JavaScript - Basic 변수 변수는 2단계로 이루어진다. 변수의 선언 변수에 대한 값을 할당 let myNumber // myNumber라는 변수를 "선언" myNumber = 100 // 앞에서 선언한 변수에 값을 "할당" 용어 정리 - 변수 : 데이터를 담을 수 있는 대상 - 변수의 선언과 변수에 대한 값을 할당하는 것은 별개이다. 일반적으로 변수의 선언과 할당이 동시에 이루어진다. (아래 코드 참조) let myNumber = 100 변수를 선언하는 명령어 var, let, const 각각의 차이는?? 종류 선언 재선언 재할당 var O O O let O X O const O X X 위 표와 같이 즉, let이나 const는 이미 선언했던 변수를 다시 선언할 수 없다.

font Awesome 사용하기 다양한 아이콘을 사용하게 될 때가 있다. 이때 유용한 사이트가 바로 font Awesome이다. 주의할 점은, 간혹 아이콘이 작동하지 않을때가 있다. font Awesome의 HTML 태그는 아래 코드처럼 <i>로 시작한다. <i class="fa-solid fa-heart"></i> 이때 버전을 호환하지 않으면 간혹 이탤릭체로 인식하고 아이콘이 나타나지 않는다. 이것은 font Awesome의 버전이 호환되지 않아 생기는 문제로서, 아래 코드를 HTML에 입력해두면 해결된다. <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> 저기서 v5.2.0부분을 해당 버전으로 고쳐 입력하면 된다. 1 즉 호환되는 버전을 살펴보며 아이콘을 골라야지 무턱대고 골랐다가는 HTML에서 꼬이는 경우가 생길 수 있다.