전체 글

z-index? HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다. z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다. 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다. z-index 속성을 너무 많이 사용하면 유지보수가 매우 힘들어질 수 있기 때문에 가급적이면 z-index 속성을 아예 사용하지 않는 편이 좋다. z-index가 없을 때 요소(element)간의 깊이 A Box B Box 상위 일반 요소 일반 요소 B Box position 속성(not static) 일반 요소 A Box position 속성(not static) positi..

.attr() 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다. .attr(attributeName) // 속성값 가져오기 .attr(attributeName, val) // 속성값 제어하기 적용 //-- left menu $(function () { $(".menu").on("click", function () { let leftMenuNo = $(this).attr("class").substring(5, 6); $(".right").hide(); $("#view_" + leftMenuNo).show(); }); let menuNo = 0; //-- right view_4 $(".r..

jQuery? jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손 쉽게 구현할 수 있으며, Ajax 응용 프로그램 및 플러그인도 jQuery를 활용하여 빠르게 개발할 수 있다. jQuery 문법 $(선택자).동작함수(); 달러($) 기호는 jQuery를 의미하고, 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. $() 함수 $() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할이다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자..

GitHub Repository 이름 명명 방법 학원 수업을 듣기 위해 GitHub 레포지토리를 생성하는데 규칙이 있나 궁금해졌다. commit도 규칙이 있는데 레포지토리 역시 당연히 있었다. commit만큼 길지 않아서 따로 적을까 말까 고민하다 그래도 혹시 모르니 일단 올려놓자 싶어서 올리러 옴. 1. 소문자 사용 (use lower case) 2. 대시(-) 사용 (use dashes) 3. 명확하게 작성 (be specific) 4. 일관성있게 작성 (be consistent) 추가로 다른 블로그에서 본 꿀팁(?)으로 더 이상 쓰지 않는 프로젝트의 경우 프로젝트 명 앞에 legacy 접두어를 붙인다. 지금까지는 나만 보기 좋게 작성했는데 이제는 올바른 방식으로 작성해야지... 참고링크 Is the..

class class 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용된다. 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름은 가지는 요소들을 모두 선택한다. 선택자 명명시 숫자로 시작하면 안되며, 언더코어(_)나 하이픈(-)을 제외한 특수문자는 사용 불가하다. id id 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용된다. 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만 선택한다. 여러 요소에 같은 아이디 이름을 사용해도 작동은 하지만 중복된 아이디를 가지고 javascript 작업을 하게 되면 오류가 발생하여 되도록 하나의 웹 페이지 안에서 중복되지 않게 사용해야한다. id 속성 명명시 최소 1글자 이상이며, 공백은 없어야한다. id는..

Padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 padding 영역의 크기를 설정한다. 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 받는다. padding 속성 padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다. padding-top : 윗쪽의 padding 값을 설정한다. padding-right : 오른쪽의 padding 값을 설정한다. padding-bottom : 아래쪽의 padding 값을 설정한다. padding-left : 왼쪽의 padding 값을 설정한다. Margin margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. 마진 ..

와 의 차이 HTML 문서에서 특정 영역이나 구획을 정의할 때 사용한다. 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로도 사용되며, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정할 때에도 종종 사용된다. 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다. 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있다. 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요..

1. Class 접근 가능한 위치 구분 선언한 클래스 내 상속받은 클래스 내 인스턴스 public o o o protected o o x private o x x public: 모든 클래스에서 접근 가능 protected: 해당 클래스와 자식 클래스에서 접근 가능 private: 해당 클래스 내에서만 접근 가능하며, 자식 클래스에서도 접근 불가 class Player { constructor( private firstName:string, private lastName:string, public nickname:string ){} } const mi = new Player("mi", "ma", "go") mi.firstName // error private라 mi.nickname // "go" class..

call signatures 코드에 마우스 올리면 나온다. Call(=Function) Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다. 타입을 만들고 함수가 어떻게 작동하는 지 서술 가능하다. // 기존 함수 const add = (a:number, b:number) => a+b // 함수의 call signature 타입 생성 type Add = (a:number, b:number) => number; // 위에 타입 지정으로 타입이 number라 선언 안 해도 됨 const add2:Add = (a,b) => a+b // 함수의 call signature 길게 작성하는 방법 type Add = {(a:number, b:number) : number} o..

Array let a : number[] = [1]; let b : string[] = []"li"]; let c : boolean[] = [true]; let d : array = []; // error let e = [1, 2]; // 타입을 지정하지 않아도 타입스크립트가 추론함 readonly 요소들을 읽기 전용으로 만들 수 있음 type Age = number type Name = string type Info = { readonly name:Name, // readonly가 앞에 붙으면 수정 불가능 age?:Age } const playerMaker = (name:string) : Info => ({name}); const mi = playerMaker("mi") mi.age = 10; mi.n..