오쌤의 니가스터디 (37) 썸네일형 리스트형 [ES6강좌] 2강 화살표함수(Arrow Function) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/8SVWsfc1mzI 1. 화살표함수(Arrow Function) - 화살표함수란 ES6에 새롭게 나온 함수의 새로운 형태입니다. 1) 기존 함수 문법 ## 함수 선언식 function test(){ //함수 선언 - 생각만 하고 있는 상태 //코드의 집합 } test(); //함수 호출 - 코드를 실행 - 위와 같이 함수를 선언하는 부분과 호출하는 부분으로 나눠서 작성하였습니다. ## 변수 선언식 var test = function(){ //함수 선언 - 생각만 하고 있는 상태 //코드의 집합 } test(); //함수 호출 - 코드를 실행 - 위의 방식은 함수명으로 선언하는 것과 달리 변수에 담아서 처리하였습니다. .. [SASS강좌] 10강 SASS의 @for - 반복관련 - 오쌤의 니가스터디 1. @for - @for 키워드는 스타일을 반복적으로 출력하는데 사용합니다. - JS의 for문과 유사합니다. 1) @for문법 ## 문법1 // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } - 변수는 JS처럼 관례상 $i를 사용합니다. ## 문법2 // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } - 변수는 JS처럼 관례상 $i를 사용합니다. 2) #{ } - #{ } 를 통해서 코드의 어디든지 변수 값을 넣을 수 있습니다. ## test.scss $img: unquote("test01.jpg"); h1{ background-image: url(images/#{$img}); } - 위에서.. [포토샵강좌] 4강 2020버전에서 CS6때의 커스텀쉐입불러오기 - 오쌤의 니가스터디 - 포토샵을 현재 2020버전이나 혹은 2021버전으로 새로 나온 것을 사용하면 과거 버전의 커스텀쉐입은 보이지 않습니다. - 요번 블로그 포스트는 과거버전(cs6)의 커스텀쉐입을 불러오는 것을 알아보도록 하겠습니다. - 특히 GTQ같은 포토샵 시험을 보실때 과거 버전의 쉐입들이 나오는데 2020버전을 써서 찾을 수 없다면 너무 힘들겠죠? - 그럼 한번 확인해보도록 하겠습니다. 1. Custom Shape(커스텀 쉐입) 툴을 눌러 확인해보기 - 일단 툴박스에 커스텀쉐입툴을 누릅니다. (빨간색으로 칠한 툴입니다.) - 옵션바에서 오른쪽 끝에 보면 쉐입모양을 선택할 수 있습니다. - 그럼 과거버전들과는 다른 모양의 쉐입들만 있는 것을 확인할 수 있습니다. 2. [Window]메뉴-[Shapes]패널 누르기 .. [HTML5강좌] 19강 tabindex태그속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/o3DeYfWQMUY 1. 초점이동이란? - 키보드 접근성이란 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것을 의미한다. - 특히, 초점이동이란 [tab]키를 누르면 좌측상단부터 초점받는 요소로 부터 이동되고, [shift] + [tab]키를 누르면 반대로 올라가는 것을 의미한다. 1) 네이버 사이트의 초점이동 - 위에 보면 까만 테두리가 초점의 이동을 보여줍니다. 과거에는 파란색으로 크롬에 체크해줬으나 요즘은 저런 검은색 테두리로 처리합니다. 2) 기본적으로 초점을 받는 태그 - HTML태그가 기본적으로 초점을 받는 것들이 있습니다. - 그 태그들을 알아보도록 하겠습니다. 태그명 설명 a 클릭 .. [JS강좌] 11강 자바스크립트 기본내장객체 - Number와 Math - 오쌤의 니가스터디 ** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=2M5s64NLa_A * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. Number 객체 선언 1) 변수식 선언 ## 문법 var 변수명 = 수치; ## 예시 코드 ## 코드 결과 2) 생성자 함수를 이용한 객체식 선언 - 기본내장객체는 미리 선언되어 있어 생성자 함수를 통해 호출해서 사용하면 됩니다. ## 문법 var 변수명 = new Number(수치); ## 예시코드 ## 코드결과 3) Number를 이용한 문자열의 숫자변환 ## 문법 .. [JS강좌] 10강 자바스크립트 기본내장객체 - String ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=NPXtNC20EAc * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. String 객체 선언 1) 변수식 선언 ## 문법 var 변수명 = '문자열'; ## 예시 코드 ## 코드 결과 - 값은 [안녕하세요]로, 데이터유형은 [string]으로 나오는 것을 확인할 수 있습니다. 2) 생성자 함수를 이용한 객체식 선언 - 기본내장객체는 미리 선언되어 있어 생성자 함수를 통해 호출해서 사용하면 됩니다. ## 문법 var 변수명 = new String.. [CSS3강좌] 31강 CSS outline속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=TaXDcQFAOkw 1. outline 속성이란? - outline(윤곽선)은 요소를 눈에 띄게 하기 위해 테두리(border)의 바깥쪽에 그려지는 선입니다. - 위의 그림을 보면 border보다도 바깥쪽으로 처리되는 것을 그림으로 확인하실 수 있습니다. - 보통은 일단 요소들에는 주지 않고 초점을 받는 태그인 [a, input, button, select, textarea]에 줍니다. 1) 속성의 종류 속성 설명 outline-style outline(윤곽선)의 스타일을 지정합니다. outline-color outline(윤곽선)의 색상을 지정합니다. outline-width outline.. [JS강좌] 9강 자바스크립트 객체와 생성자함수 - 오쌤의 니가스터디 ** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭해 주세요. https://www.youtube.com/watch?v=k0HterZEszY 1. 객체의 종류 - 객체는 자바스크립트가 명령가능한 모든 대상을 의미합니다. 1) 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object Model) 브라우저오브젝트 모델, 브라우저 관련 객체 DOM(Document Object Model) 문서객체모델, 태그나 컨텐츠 등을 의미하는 객체 사용자정의객체 개발자가 직접적으로 생성하는 새로운 객체 2) 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내.. 이전 1 2 3 4 5 다음
