Gentleman'study 젠틀맨

break문 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 즉, break 문은 반복문을 강제로 종료할 때 사용합니다. 다음은 for문과 while 문에서 break 문이 사용된 기본형입니다. break 문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for 문과 while 문이 바로 종료됩니다. for(초깃갑; 조건식; 증감식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; } var 변수 = 초깃값; while(조건식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; 증감식; } 다음은 for 문을 이용하여 1부터 10까지 반복하도록 작성한 예제입니다. 그리고 break 문을 사용하여 변수 ..

const cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "19", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "24", name: "ani..

색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다. 16진수 색상값으로 표현 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

const cssProperty = [ {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: "animation-duration 속성은 애니메이션이 움직이는 ..

const searchBox = document.querySelectorAll(".search span"); // 알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); // 속성 리스트 const cssCount = document.querySelector(".count em"); // 속성 갯수 const reset = document.querySelector(".search .reset")// 리셋(all) 버튼 // 모든 데이터 보이기 cssList.forEach((ele, index) => { ele.classList.add("show"); cssCount.innerHTML = index + 1; }); // 버튼을 클릭하면 클릭한 ..

const searchBox = document.querySelector("#search-box");// searchBox 변수에 저장 const cssList = document.querySelectorAll(".list ul li");// 다수의 li를 cssList에 저장 const cssCount = document.querySelector(".count em");// em을 cssCount에 저장 cssList.forEach((element, index) => {// cssList의 각각 요소값에 적용 element.classList.add("show");// 각각의 요소의 클래스 show 추가 cssCount.innerHTML = index + 1;// cssCount 에 인덱스값 + 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.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- 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.

HTML 링크(Link) 오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다 문법 HTML 링크 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 예제 이 링크를 클릭해 보세요! 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. targer 속성 target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _..

변수란? 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간입니다. 데이터를 담을 수 있는 그릇이라 할 수 있죠. 변수에는 데이터가 오직 한개만 저장됩니다. 그러다 보니 새로운데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 됩니다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean) 그리고 빈(Null) 데이터가 있습니다. 변수 선언 방법 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수명 앞에 붙입니다. 변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수 문자(_,$)만 포함할 수 있습니다. var 변수명 = 값; let 변수명 = 값; 변수명 자바스크립트에는 의미를 가진 단어..

float 속성 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. clear 속성 clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서, float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다. overflow 속성 float 속성이 적용된 HTML 요소가..

연산자 연산의 방식을 결정하는 기호를 '연산자'라고 부르고 연산되는 대상을 '피연산자'라고 합니다. 우리에게 가장 익숙한 +, -, *, / 이 가장 대표적인 예라고 볼 수 있습니다. 산술연산자 기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있습니다. 이밖에도 나머지(%), 거듭제곱(**) 연산 정도가 있는데, 일반적인 산술연산자는 피연산자 2개 사이에서 이항 연산자로도 활용되고, 특별히 ++(증가), --(감소) 연산자는 피연산자 앞이나 뒤에 붙으면서 단항 연산자로도 활용됩니다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 다음 예제를 통해 더하기, 빼기, 곱하기, 나누기, 나머지 연산자를 어떻게 사용하는지 ..

웹에서 이미지를 표현하는 방법은 3가지로 나눌 수 있습니다. HTML 태그를 통해서 : img 태그 (의미가 있는 이미지) CSS 속성을 통해 : background 속성 (의미가 없는 이미지) 이미지 스프라이트 : background와 ir 효과를 통해서 이미지를 표현 img 태그를 통해 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 주요 속성은 src, alt, width, height, loading입니다. src alt width height loading 예제 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 값이 출력됩니다. width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율..

IR효과 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다. pm(Phark Method) 의미있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다. .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } wa 의미있는 이미지의 대체 텍스트로 이미지가 없어도 텍스트를 보여주고자 할 때 사용합니다. .ir_wa { display: block; overfl..

# 자바스크립트 객체(Object) 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다. 객체는 여러가지 값을 가질 수 있으며, 함수도 가질 수 있다. 객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다. (둘다 프로퍼티라고 하기도 한다) 객체의 프로퍼티와 메서드들은 '키값'으로 구분된다. var object ={ key1: value1, key2: value2, ... } # 객체 생성 방식 객체를 생성하는 방법은 3가지 정도가 있다. 1) 객체 리터럴, 2) 생성자 함수, 3) Object.create() 1. 객체 리터럴 방식(Object Literal) var obj = { key: value, ... } : 변수처럼..

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대..