전체 글 106

자바스크립트 property 가지고 놀기

let my = { name: '심명섭', age: 345, height: 371, myNull: null, hobby: { title: '개발', lang: 'javascript' } } 라는 object가 있다. 이 오브젝트 안에 속성값을 수정, 추가, 삭제가 가능할까 ? 정답은 당연히 가능하다 이다. 아래 코드를 보자 // 수정 console.log(my.name); // 심명섭 my.name = '원빈'; console.log(my.name); // 원빈 // 추가 / undefined이기 때문에 이건희 할당이 가능하다. console.log(my.ceo); // undefined my.ceo = '이건희'; console.log(my.ceo); // 이건희 // 삭제 console.log(my...

JavaScript 2020.08.26

자바스크립트 객체를 다루는 방법

객체를도 값이기 때문에 다루기 위해서는 변수에 할당하면서 이름을 만들어준다. let my = { name: '심명섭', age: 345, height: 371, myNull: null, hobby: { title: '개발', lang: 'javascript' } } 이상태에서 객체에 값에 접근하는 방법은 두가지가 있다. 1. 점 표기법 console.log(my.name); // 심명섭 이렇게 객체 이름다음에 마침표(.) 다음에 값의 이름을 넣는다. 가장 간단하고 많이 사용하는 방법이다. 하지만 한가지문제가 있다. 지난 포스팅에서 말했듯이 ' ' 따옴표로 감싸주어야하는 이름을 가진경우에는 점 표기법으로 접근이 불가능하다. let my = { 'my name': '심명섭', } 이렇게 되어있다고 가정하고 ..

JavaScript 2020.08.26

자바스크립트의 객체 (object)

영어로는 object라고 한다. 여러가지 값을 한번에 담을 수 있는 상자라고 생각하면 된다. 자바스크립트의 거의 모든것이 객체로 되어있기 때문에 객체를 아는 것은 자바스크립트를 아는데 굉장히 중요하다 객체만드는 법은 중괄호 {} 를 사용한다 . ex) { userName : '이름', userAge: 24, userBool : true, userNull : null } 쉼표(,) 오른쪽에 있는 값을 value 왼쪽에 있는 값을 Key(값 이름) 이라고 부른다. 이렇게 키와 벨류 한쌍을 속성 영어로는 property라고 한다. 그래서 키를 propertyName , 값을 propertyValue 라고도 한다. propertyName은 문자열 형태이며 propertyValue는 어떠한 자료형이라도 올 수 있..

JavaScript 2020.08.26

접근성 table 작성

접근성에 table 요소 작업은 꽤 어렵다. 하나하나 살펴보자. 일단 table의 제목인 caption 이 작성되어야 한다. caption은 table 바로 아래 위치 해야하며 마크업 순서는 table > caption > colgroup > thead > tbody > tfoot 순 이다. 보통 caption을 나타내야하거나 사용한다면 그대로 두고 css로 style 하면 되지만, 사용하지 않고 숨겨야 한다면 마찬가지로 clip를 사용하여 숨기면 된다. 그리고 또 중요한 점은 scope이다. scope는 표의 제목이 어떤 방향을 얼마만큼 가르키고 있는지를 알려준다. 위와 같은 테이블의 제목은 연령별,성별,조회수,비율 그리고 좌측에 전체 , 0-12 , 남, 여 이렇게 th로 작성이 될 것이다. 연령별,..

웹 접근성 2020.08.26

jwFreeNote - 트리구조 메모장

트리구조 윈도우 메모 프로그램이다. 생각보다 쓰기 쉽게 되어있고 좋은 기능이 많은 것 같다. 저는 아래 사이트에서 확인하고 다운 받았습니다. https://badayak.com/3737 jwFreeNote 5.10.6을 다시 올립니다. 트리구조 윈도우 메모 프로그램 jwFreeNote5.10.6 트리 구조로 메모와 노트를 관리하는 jwFreeNote가 5.10.5로 업그레이드했습니다. 업그레이드 내용은 Ctrl-Shift-F로 실행하는 트리 안에서의 검색에는 모�� badayak.com

잡다한 지식 2020.08.26

null 과 undefined 의 차이

let coder; console.log(coder); 위와 같은 코드를 출력하면 어떤 값이 나올까 ? 바로 undefined 가 나온다. 변수를 선언 후에 초기값을 주어 주지 않았으니 당연히 정의되지않았다는 표시로 undefined라고 표현이된다. null은 의도적으로 비어있는 값을 표현하고 싶을 때 null 을 넣는다. let coder; console.log(coder); // undefined coder = null; console.log(coder); //null 의미는 모두 값이 없다라는 것을 지칭하는 것이지만, 선언을 하고 값을 지정하지 않은 undefined 와 의도적으로 표현한 null인 것인지의 차이다. 비교문을 써서 비교해보면 console.log(x == y); console.log..

JavaScript 2020.08.25

템플릿 문자열

아래 코드를 살펴보자 let year = 2020; let month = 8; let day = 25; console.log('오늘은 ' + year + '년 ' + month + '월 ' + day + '일 입니다.'); 단순히 변수에 담긴 년 / 월 / 일을 호출 하는 함수이다. 이렇게 사용하여도 큰 지장은 없으나 템플릿 문자열을 사용한다면 더 쉽고 간편하게 표현할 수 있다. 템플릿은 `` (그레이브, 키보드 1 옆에 문자) 안에 담고 나머지는 $사인과 중괄호 안에 담으면 된다. console.log(`오늘은 ${year}년 ${month}월 ${day}일 입니다.`); + 기호도 생략되고 눈으로봐도 이해하기 쉬운 코드가 나온다. 그리고 또한 함수도 호출 할 수 있다. let number = 3; f..

JavaScript 2020.08.25

썸네일 이미지 목록 - 2

기존에 작성하였던 썸네일 이미지 목록에서 순번과 상승 / 찜을 추가해보겠습니다. 완료 이미지는 아래와 같습니다 . 순번을 넣고 상승 / 하향 / 유지 / 찜목록 등을 추가하겠습니다. 기존 코드에서 추가하는 코드로 진행하였습니다. html TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 ♡ 99,999 99:99..

HMTL & CSS 2020.08.24

썸네일 이미지 목록

오늘 만들어 볼 이미지 목록 리스트. 은근히 이런 목록도 자주 쓰이는 마크업 중에 하나이다. 원래 만들 수 있었으나 두줄 말줄임은 오늘 처음 해본것이다. 구글 검색하면 두줄 / 세줄말줄임 모두 하는 방법이 나오니 잘 검색해보자 ! html TOP100 8.21 오전 9시 ~ 오전 10시 기준 (재생수, 재생시간, 좋아요) 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 산악스키 오스트리아 최대의 산악스키 연맹, 산악스키 아마데! 5개 지역에 걸쳐있고, 총 25여개의 슬로프 길이 국제육상경기연맹으로부터 라벨을 부여받은 국내의 단 두 개..

HMTL & CSS 2020.08.22
728x90