프로그래밍 공부 노트

미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와준다. 사용 방법 @media [only | not] 미디어 유형 [and 조건] * [and 조건] @media screen and ( min-width : 200px ) and ( max-width : 500px ) { body { background : purple ; } } 미디어 쿼리 연산자 and : 위의 소스코드처럼 조건을 계속 추가할 수 있다. ,(쉼표) : 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 사용한다. only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 한다. not : not 다음에 지정하는 미디어 유형을 제외한 미디어 유형에서만 적용된다. 미디어 유형의 종류 all : 모든 미디어 유형 print : 인쇄 장치 screen : 컴퓨터, 스마트폰의 스크린 tv : 음성과 영상이 동시 출력되는 TV aural : 음성 합성 장치(주로 화면을 읽어 소리를 출력해 주는 장치) braille : 점자 표시 장치 handheld : 패드(pad)처럼 손에 들고 다니는 장치 projection : 프로젝터 미디어 쿼리 조건 가로, 세로 값 설정하는 속성  width, height : 웹 페이지의 가로 너비, 세로 높이 min-width, min-height : 최소 너비, 최소 높이 max-width, max-height : 최대 너비, 최대 높이 화면 회전 orientation : portrait  단말기 세로 방향 orientation : landscapte  단말기 가로 방향 미디어 쿼리 중단점 부트스트랩 기준 아주 작은 화면 : 576px 미만 작은 화면 : 576px 이상 중간 화면 : 768px 이상 큰 화면 : 992px 이상 아주 큰 화면 : 1200px 이상

< input type = "submit" /> < button ></ button > <input type='submit' /> 과 <button><button/> 태그는 폼의 내용을 전달하는 경우 사용하게 된다. 두개의 태그 모두 폼의 내용을 전달하는데 사용되는데 여러 사람들의 코드를 보다보면 누구는 input 태그를 사용하였고 누구는 button 태그를 사용하여 코드를 작성한것을 확인할 수 있다. 나는 둘의 차이가 궁금하여 찾아보았다. 일단 <input type='submit' /> 과 <button><button/> 태그는 기능적으로 동일하게 동작한다. 하지만 input 태그의 경우 type='submit' 속성을 작성해야지만 submit 동작을 수행하는 반면 button 태그의 경우 type 속성을 따로 명시하지 않을 경우 기본값으로 type='submit' 속성이 적용되어있어 submit 동작을 바로 수행할 수 있다. button 태그에도 기본 기능 submit 이외에 몇가지 type 속성이 더 존재하는데  submit 속성을 포함하여 button | submit | reset 이렇게 세가지 type 속성이 존재한다. button 태그가 input 태그보다 갖고있는 장점이 있다면 일단 input 태그와 달리 디자인적인 부분에서 자유도가 높다. 일반적으로 태그들을 디자인하는데 사용되는 모든 것들을 동일하게 적용할 수 있으며 배경으로 이미지도 넣을 수 있고 <button> 과 <button/> 태그 사이에 다른 태그들을 삽입할 수도 있다. 마지막으로  button 의 기본적인 디자인은 브라우저별로 조금씩 다르게 보여지기 때문에 사용자들의 동일한 사용경험을 위한다면 CSS로 디자인을 적용하여 사용하는것이 좋다.(크로스 브라우징) button 태그 ...

[CSS] 반응형 작업을 위한 폰트 단위 em / rem  CSS에서 사용하는 단위는 여러가지가 있다.  많이들 사용하는 px에서부터 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 호환성 문제도있고 요즘엔 쓰이지 않는 단위도 있으므로 대표적으로 많이 사용되는 3가지에대해 알아보자. px 절대값으로 사용 되는 단위이다. 많이 사용되지만 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다. em 부모 태그의 영향을 받는 상대적인 길이다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어렵다. 반응형 웹사이트에 사용된다. 하지만 권장되지 않는다. rem rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이다. 즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다. 반응형 웹사이트에 가장 바람직한 단위이다. rem은 IE9 버전까지 지원이 된다. 반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다. px은 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되기 때문에 em / rem 을 사용 하는 것이 좋다. 이 중에서 rem을 많이 사용하는데 rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉽고 사용하기 편리하다. html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 font-size: 16px; 이다. html { font-size:16px; } 에서 16px은 1rem 이다. 17px은 1.063rem이다. 이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하거나 더 쉬운 방법은 html { font-size:62....

console console.log는 요소를 HTML과 같은 트리 구조로 출력한다.  - console.log()의 원래 return 값은 undefined 이다. 우리가 알고있는 console.log('hello world')의 경우 원래 기능에 부가적으로 'hello world'라는 단어 출력을 요청한것이기 때문에 'hello world'를 출력할 뿐 원래 return값은 undefined 이다. console.dir은 객체의 속성 목록을 상호작용 가능한 형태로 표시. 객체를 펼쳐서 내부 속성들을 확인할 수 있다. console.clear은 콘솔의 내용을 지운다. console.count은 호출한 횟루를 출력한다. console.time time이 적힌 부분부터 시간을 측정하여  console.timeEnd timeEnd가 호출되는 부분까지의 시간을 측정한다. 코드가 얼마나 효율적인지 확인하고자 할때 사용한다. console.error 에러 로깅 console.trace 함수안에서 사용하면 호출스택을 보여준다. console.table 값을 테이블 형식으로 깔금하게 보여준다. console.log(__filename); 파일이름 확인 console.log(__dirname); 패스(경로) 확인 참조링크: 1번. https://developer.mozilla.org/ko/docs/Web/API/Console 2번. https://developers.google.com/web/tools/chrome-devtools/console?hl=ko

JSON(JavaScript Object Notation)은 자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. JSON(JavaScript Object Notation)은 클라이언트와 서버 간 데이터 교환을 위해 사용된다. JSON은 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능하며 XML 포맷보다 가볍고 사용하기 간편하며 가독성도 좋다. JSON은 자바스크립트의 객체 리터럴과 매우 흡사하다. 하지만 JSON과 JavaScript 의 Object는 유사한 구조를 가지고 있지만 엄밀히 다른 개념이다.   JavaScript의 Object는 JavaScript Engine 메모리 안에 있는 데이터 구조이며, JSON은 객체의 내용을 기술하기 위한 text 파일이라는 점에서 다르다. 첫줄에서 말했듯이  자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. 또한 JSON은 확장자명이 .js가 아닌 .JSON 인 확장자를 가진다. JSON.stringify(); JavaScript 에는 객체를 JSON으로 바꿔주는 메서드 JSON.stringify(); 가 존재한다. JSON.stringify();를 사용하면 객체는 문자열 형식으로 변경되어 네트워크 통신 및 저장에 사용된다. 이렇게 변경된 결과의 문자열은 직렬화 된, JSON으로 인코딩 된, 문자열로 변환된 객체라고 부른다. 여기서 주의할 점은  JSON으로  변환하려는 객체안에 포함된  함수와 Symbol은 문자열로 변환시켜주지 못하기때문에 stringify로 데이터를 변환하여도 JSON 데이터에 포함시키지 못한다. JSON.parse(); JavaScript 에는 JSON을 객체(Object)로 바꿔주는 메서드  JSON.parse(); 가 존재한다. JSON.parse();를 사용하면 문자열 형식의 JSON을 다시 객체로 변경할 수 있다...

로컬 스토리지 ( localStorage ) 서버가 아닌 브라우저에 데이터를 저장하여 서버에 불필요하게 데이터를 저장하지 않을 수 있다. 로컬 스토리지 저장용량 Opera -> 5MB Safari -> 5MB FireFox -> 10MB Chrome -> 출처 당 10MB Internet Explorer -> 저장 영역 당 5MB localStorage, sessionStorage, cookie 중 저장 용량 한도가 제일 크다. 데이터를 브라우저에 반영구적으로 저장하며 브라우저를 닫더라도 데이터가 유지된다. 하지만 도메인(domain)이 다른경우에는 로컬 스토리지에 접근할 수 없다. (google.com에 저장한 localstorage를 naver.com에서 사용할 수없다.) localStorage는 key와 value 값을 받는데 key 값은 호출할 때 사용되며 value 값을 반환한다. * 값을 저장할 때 데이터 타입과 상관없이 무조건 문자열로 변환되어 저장되며, 값을 반환하는 경우에도 value 값은 문자열(String)이다. 추가적으로 알아두면 좋을만한 점은 객체를 저장하게되면 "[Object Object]"와 같은 형식으로 저장되는데 값을 출력해보면 데이터 값이 아닌 "[Object Object]"가 그대로 출력되어 객체를 정상적으로 사용할 수 없다. 그러므로 로컬 스토리지에 객체를 저장할때는 객체를 문자열로 바꿔 저장해야하며 문자열로 바뀐 객체를 가져와서 사용하고자 할때는 다시 객체로 바꾸어 사용해야 원래 객체를 정상적으로 사용할 수 있다. // 객체를 문자열로 변환 JSON . stringify (); // 문자열로 변환된 객체를 다시 원래 객체로 변환 JSON . parse (); - 로컬스토리지에서 사용되는 메서드 - //로컬 스토리지에 정보를 저장 localStorage . setItem ( key , value ) //로컬 스토리지에 저장된 정보를 출력 localStorage ....

사진과 같이 에러코드가 발생하면 영어로나오는 TypeError를 확인하고 맨밑에 3:3이라는 숫자를보면  첫번째 3은 3번째줄 뒤에 3은 띄어쓰기포함 왼쪽으로부터 3번째  단어에 에러가 발생했다는 것이다.  해당부분에 문제가 발생한것이기때문에 해당부분을 확인한다.

복제 와 참조 원시데이터타입은 복제, 객체는 참조 1. 변수에 담겨있는 값이 객체인 경우 같은 객체를 바라보게되므로 참조를하게된다. 즉 객체가 저장되어있는 메모리 주소인 객체에 대한 참조 값이 저장된다. 2. 변수에 담겨있는 값이 원시데이터타입인 경우 복제시 같은 데이터를 참조하지않고 같은 값의 데이터를 각각 소유한다 . 객체를 다른 변수에 할당하면 객체에 대한 참조 값이 하나 더 만들어진다. 하지만 객체도 참조하지않고 복제할 수 있는 방법이 있다. 1번. 빈 객체를 생성하고  프로퍼티값을 설정해준다. 설정해줄때는 기존에 복제하고자하는 객체를 for in문으로 순회하면서 프로퍼티 키와 값을 저장해주면 값은 똑같으면서 독립적인 객체가 생성된다. 2번. Object.assign() 을 사용하면 반복문 없이도 간단하게 객체를 복사할 수 있다. // ### 복제1 ### // var a = 1 ; var b = a ; b = 2 ; console . log (a) ; // 1 // ### 참조 ### // var a = { id : 1 }; var b = a ; b . id = 2 ; console . log (a . id) ; // 2 // ### 복제2 ### // var a = { id : 1 }; var b = a ; b = { id : 2 }; console . log (a . id) ; // 1 -#복제1#의 경우 숫자를 값으로 할당하고 있는데 숫자(Number)는 원시데이터타입으로 값을 참조하지않고 복제를 하게된다. 그러므로 b에 할당된 a의값이 변경되더라도 별개의 데이터이기때문에 오리지널 a의 데이터를 변경시키지 않는다. -#참조#를 보면 값을 원시데이터타입이아닌 객체로 할당받은경우 복제가아닌 참조를 하게되는데 이 경우 참조하고있는 a의 값을 2로 변경하였기 때문에 a.id값도 2가 출력된다. -#복제2#의 경우 a는 객체를 할당받...

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다. display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다. { display : block; } 블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다. { display : inline; } 인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다. 예시로 보면 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < style > #block img { display : block ; margin : 5px ; } </ style > </ head > < body > < p > inline 방식 </ p > < div id = "inline" > < img src = "./images/pic.png" alt = "초록색 사진" /> < img src = "./images/pic.png" alt = ...

대표적으로 많이 사용되는 웹 브라우저에는 크롬, 파이어폭스, 사파리, 오페라, 인터넷 익스플로러 등이 있다. 이러한 웹 브라우저에서 아직 표준 규약이 아닌 속성들 그러니까 간단히 말해 아직 CSS 권고안에 포함되지 못한 기능이거나, CSS 권고안에 포함되어 있지만 아직 완벽하게 표준이 되지 못한 상태의 속성들을 사용하고자 할 때 벤더 프리픽스(Vendor Prefix)를 사용한다. 아직 완벽한 표준이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원하기 때문에 속성 앞에 접두사(prefix)를 붙여 브라우저별로 구분해서 적용시켜 주어야 한다. 만약에 표준 규약이 아니었던 속성들이 표준 규약이 되었다 하더라도 이전 버전을 사용하고 있는 사용자들을 고려해서 계속 브라우저별 접두사를 붙여 사용하기도 한다. 대표적으로 많이 사용되는 웹 브라우저의 벤더 프리픽스(Vendor Prefix) 크롬, 사파리 : -webkit- 파이어폭스 : -moz- 오페라 : -o- 인터넷 익스플로러 : -ms- 사용법은 아래와 같다. < style > .button { background : red ; background : -webkit-linear-gradient ( red , yellow ); background : -moz-linear-gradient ( red , yellow ); background : -ms-linear-gradient( red , yellow ); background : -o-linear-gradient ( red , yellow ); background : linear-gradient ( red , yellow ); } </ style > prefix를 붙여 사용할 때에는 표준으로 결정된 후 사용할 속성을 맨 마지막에 작성한다. 이렇게 작성하면 나중에 속성이 표준으로 결정된 후 앞에 썼던 브라우저별 prefix 들만 지우면 된다. 만약 이렇게 일일...