일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- JS null undefined
- js 변수
- JS typeof연산자
- JS 형변환
- JS appendChild
- CSS기초
- HTML기초
- JS 데이터타입
- JS 기초
- JS prompt
- JS clearInterval
- JS preventDefault
- git 협업셋팅
- JS append
- JS 숫자
- JS setTimeout
- JS 삼항연산
- JS form action
- JS 연산
- CSS속성정리
- JS 함수
- JS setInterval
- JS classList
- JS 화살표함수
- JS 타이머기능
- JS form
- JS localStorage
- JS value속성
- JS redirection
- JS 스코프
공부기록용
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/W2iAK/btsGsqRnP00/OjpaHMqRGdCjFUL0OKkMGk/img.gif)
🔴자동슬라이드 구현하기 body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { width: 100%; height: 250px; overflow: hidden; position: relative; } ul { overflow: hidden; /* width: 208..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQF8Lp/btsGmN0rtHX/1AV1aOVqOC831fA7gloKqK/img.gif)
🔴무한슬라이드 구현하기 무한으로 슬라이드되도록 구현하고자 하는데 처음의 앞과 마지막의 뒤로 슬라이드가 더이상 이어지지 않는다. 이런 형태를 만들어주기위해 요소를 복제해 앞뒤로 넣어주도록 한다. body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { border: 5..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/djOIIL/btsGn6YWEJC/NyXhWSGeSZpzFFfD9hikw1/img.gif)
body { margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } img { width: 400px; } button { padding: 0; } /* */ body { position: relative; height: 100vh; } .contanier { width: 1240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { border: 5px solid #000; width: 100%; height: 250px; /* overflow: hidden; */ position: relative; } ul { border: 1px so..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rPqeF/btsF79bOPsh/yWUTeF79f1zVWSMAQKlAO0/img.jpg)
생성자 함수 "객체를 생성하는 역할을 하는 함수" 함수의 이름의 첫 글자는 대문자로 시작한다. 일반 함수와 구분하기 위함 'new'연산자를 붙여서 실행한다. new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다. 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다. 만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다. 객체를 return 한다면 this 대신 객체가 반환 원시형을 return 한다면 return문이 무시 return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다. 일반적으로..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bAdSgh/btsF16Tij4v/MSK1UuVYcbkkf2hKzpgx70/img.png)
크로스 브라우징(Cross Browsing) 크로스 브라우징은 `브라우저 간 상호 호환성` 을 의미하는 것이다. 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것을 의미한다. 하지만 여기서 중요한 것은 크로스 브라우징이 모든 브라우저에서 100% 똑같이 보이도록 만드는 `동일성`이 아닌 `동등성` 및 `등가성`을 의미하는 것이다. 크로스 브라우징 작업이 필요한 이유 브라우저 마다 랜더링 엔진이 다르기 때문으로 작동되지 않는 HTML5, Javascript 코드가 존재 해석하지 못하는 CSS 코드 존재 브라우저 버그들이 존재 브라우저마다 자체적인 CSS 스타일 고려해야 할 부분 호환성 테스트에는 웹 페이지를 구성하는 모든 것이 포함될 수 있지만, 모든 부분을 테스트할 수 없을 것이다. 그렇기 때문에..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Dtyii/btsF3bTVD3c/uLIIsUIHelzVcT80McZSwK/img.png)
시맨틱 마크업 시맨틱(Semantic)이란 "의미론적인" 의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 태그가 가 지고 있는 의미에 맞게 사용하는 것으로 CSS스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖틑 것이기 때눔에 시맨틱 마크업에 적합하지 않은 것이다 시맨틱 마크업을 사용하면 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다. 웹 접근성 측면에서, 시각장애가..