Gentleman'study 젠틀맨

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.d..

웹 표준이란? 웹 표준은 웹 접근성을 지키기 위한 표준입니다. 어떤 웹 브라우저를 사용하던, 모바일, 태블릿 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준입니다. W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어집니다. 웹 표준을 지켰을 때 장점 소스의 통일화로 수정 및 운영관리 용이 다양한 브라우저, 휴대폰, PDA, 장애인 지원용 프로그램에서도 대응이 가능하기때문에 접근성이 향상 검색 로봇 수집을 통한 효휼적 노출과 같은 검색엔진 최적화 가능 효율적 소스를 통해 File size 축소 및 서버 저장 공간을 절약 CSS와 HTML 문서의 분리 등을 통해 페이지 로딩속도 향상과 같은 효율적인 마크업 가능 웹 접근성이란? 모두가 차별없이 웹에서 제공하는 정보를 이..

조건문 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문, else문 그리고 else if문이 있습니다. if문 if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 다음은 if문의 기본형입니다. 조건식은 앞에서 배웠던 Boolean()내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다. 이 내용은 적용 예제를 보며 자세히 살펴보겠습니다. if(조건식) { 자바스크립트 코드; } 아래 예제에서 num

절대길이 단위 단위 이름 다음과 동일함 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/16th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 일반적으로 화면에 사용하는 값은 px입니다. 상대 길이 단위 단위 관련 사항 em 요소의 글꼴 크기 ex 요소 글꼴의 x-heigth ch 요소 글꼴의 glyph"0"의 사전 길이(너비) rem 루트 요소의 글꼴 크기 lh 요소의 라인 높이 vw viewp..

시멘틱 태그(semantic tag) 시멘틱 태그(semantic tag)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. HTML5에서 추가된 시멘틱 태그 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다. 1. header 요소 2. nav 요소 3. main 요소 4. section 요소 5. articl..

벤더 프리픽스란? 벤더 프리픽스(vendor prefix)란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. -ms- -webkit- -moz- -webkit- -o- 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.