개발일기

반응형 웹 * 반응형 웹이란? PC, TV, 스마트 기기 등 사용자의 다양한 기기에 따라 웹 사이트 크기가 달라지는데, 그런 접속환경에 맞춰서 최적화된 화면의 레이아웃으로 바꾸어 주는 것이다. 보통 모바일(320px이상), 태블릿(768px이상), PC(1024px이상)를 기준으로 설정한다. * 뷰포트(viewport) 스마트 폰 화면에서 실제 내용이 표시되는 영역 pc화면에 맞춰 제작된 웹사이트들을 스마트 폰으로 보면 글자가 작아짐 -> pc화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문 뷰포트를 지정하면 기기의 화면 크기에 맞게 확대하거나 축소해서 표시할 수 있다. 기본형식 뷰포트 속성 ex) -> 내용은 기기의 폭에 맞춰 조절되고, 초기값은 원본 비율로 출력된다 뷰포트 단위 첫번째 '안녕하세요'..

list style * 리스트의 모양을 꾸미는 CSS3 프로퍼티 1. list style-type : 아이템 마커 타입 지정 - 디폴트 : disc (채워진 동그라미) - circle (안채워진 동그라미) - square (채워진 사각형) - none, upper-roman(Ⅰ,Ⅱ,Ⅳ...), lower-alpha(a,b,c...), decimal(1,2,3...) 등 2. list-style-image : 아이템 마커 이미지 지정 list-style-image : url("images/marker.png"); 3. list style-position : 아이템 마커의 출력 위치 지정 커피메뉴 Espresso Cappuccino Cafe Latte ul 스타일에 list-style-position: in..

글자 가로 가운데 정렬하기 home shop notice mypage * 메뉴를 가로로 정렬하고, 사이즈를 주고싶을 때는 p에 position : inline-block을 사용한다. 1. width, height만 줘서는 박스 사이즈가 적용되지 않는다 : inline-block 필수 2. inline을 할 경우 메뉴 글자만큼만 사이즈로 인식한다. * p태그들을 가운데로 배치시키고 싶으면, div로 묶어주고 그 div에서 text-align : center를 준다. 이미지 가로 가운데 정렬 * inline-block은 가 아니라 태그에 적용시켜야 한다. * p박스 안에 이미지를 다 채우려면 똑같이 img에도 width와 height 를 적용시킨다. * img:hover 이미지 마우스 오버시 효과주기 p:h..

position 속성 1. static : HTML태그가 작성된 순서대로 위치한다(디폴트) top, bottom, left, right 값은 적용X 2. relative : 현재위치에서 top, bottom, left, right 속성값만큼 이동한 위치에 배치 top/bottom 동시지정 시 bottom 무시 left/right 동시지정 시 right 무시 3. absolute : top, bottom, left, right 속성값으로 정한 절대위치에 배치 - position : absolute를 추가하고, top/left 등은 입력하지 않을 경우 순서대로 배치된다. - top: 0, left: 0을 넣어주면 브라우저 왼쪽 상단 모서리에 위치한다. - top: 100, left:100 의 경우 모서리에서..

객체생성방법으로는 객체 생성자 방식, 객체 리터럴 방식 2가지가 있다. 1. 객체 생성자 방식 let person = new Object(); //Object라는 새로운 객체를 생성한다. 2. 객체 리터럴 방식 let person = { key: "value", key1: 123, key2: true, key3: undifined, key4: [1, 2], key5: function() {} }; 생성자 방식과 다르게 let person = { }; 이렇게 괄호만 사용하여 객체를 생성할 수 있고, 괄호 안에는 객체가 저장하고 싶은 값을 넣어준다. 객체 생성자 방식보다는 객체 리터럴 방식을 더 많이 사용한다. * 값을 넣는 형식 key: value 이렇게 key와 value로 구성된 것을 프로퍼티(=속성)..

함수표현식, 함수선언식, 호이스팅 함수를 만드는 방법은 위처럼 두가지가 있다. 1. 함수를 변수에 저장하는 함수표현식 2. 함수이름을 지정하여 만드는 함수선언식 이 두 방식의 차이점은 호이스팅이 되냐 안되냐 이다. * 호이스팅이란? 함수 또는 변수를 선언하기 전 윗부분에 함수/변수를 호출해도 출력이 되는 것으로 선언부분을 스코프의 가장 위쪽으로 끌어올리는 방식으로 해석한다. 함수표현식은 호이스팅되지 않는 반면, 함수선언식은 호이스팅이 된다. 함수표현식은 직접적으로 선언이 되기 전에 사용할 수 없다. 함수선언식을 사용한 1번 line은 호이스팅 되어 "안녕"으로 출력되고, 함수표현식을 사용한 2번 line은 호이스팅 되지않아 에러가 뜬다. 화살표함수 함수 표현식을 더 빠르게 사용하는 방법으로 화살표함수를 ..

Consolas font font-weight 900 현재 크기의 1.5배 크기로 hn 태그의 폰트 수정 문제의 첫번째 줄 consolas font는 h1태그를 사용하여 css에 font-style과 family를 주었다. 그런데 속성을 두번 주기 번거로워서 font 속성만으로도 작성할 수 있는지 확인해봤다. font: italic 100% 'consolas font'; 이렇게 font size를 100%로 줄 경우 h1 사이즈 그대로 출력될 줄 알았으나 더 작은 사이즈로 출력이 되었는데, 그 이유는 font-size는 브라우저 기준으로 16px의 100%가 출력 된 것이다. 1rem, 1em 도 마찬가지. h1사이즈로 맞추려면 더 번거로워지므로 font-size, font-family 이렇게 주는게 낫..

구조 가상클래스 - :first-child, :last-child, :nth-child(n) 구조가상클래스로 풀려고 했는데 도저히 안되서 deepskyblue(#00BFFF) brown(#A52A2A) fuchsia(#FF00FF) darkorange(#FF8C00) darkcyan(#008B8B) olivedrab(#6B8E23) 결국 이런식으로 각각에 스타일을 줬다. 구조 가상클래스로 주기 위해서는 1. div들을 div로 한번 묶어서 div div:first-child { } (반드시 div div처럼 상위, 하위 요소를 다 입력해야 에러가 생기지 않는다) 이런식으로 주거나 CSS3 색 활용 deepskyblue(#00BFFF) brown(#A52A2A) fuchsia(#FF00FF) darkora..

한입 크기로 잘라먹는 리액트 : javascript 기본 형변환 let a = 12; let b = "2"; console.log(a * b); // 변수 a는 숫자형, b는 문자형이지만 둘을 곱하면 // 문자형이 숫자형으로 자동 형변환되어 숫자 2가 된다. console.log(a + b); // 122 // 하지만 둘을 곱할 경우 변수 a가 문자로 자동형변환되어 // 값이 122가 되는데 // 위처럼 변수 b가 숫자로 형변환되게 하려면 console.log(a + parseInt(b)); // 14 // 변수 B를 명시적 형변환을 하면 된다. // parseInt(변수) : 문자형 변수를 숫자로 형변환 시켜줌 비교연산자(==, ===) let a = 1 == 1; console.log(a); // t..

* codesendbox : 코드 입력시 자동으로 브라우저에 자바스크립트 엔진에게 실행하라고 명령을 내려주는 온라인 웹 에디터 자바스크립트 파일을 실행한 결과를 콘솔 창에 보여준다(저장하면 콘솔창에 뜸) 코드샌드박스는 입력하는 와중에도 계속 코드가 실행되서 콘솔 로그가 출력되는데 -> 저장할 때만 출력하는 방법 open preferences - preview - preview on edit, instant preview off * 변수선언 let num = 20; num = 30; //변수 num의 값 변경 - 변수 선언 시 변수명 규칙 1. _, $를 제외하고 기호 사용불가 2. 문자로 시작 3. 예약어(ex.if) 사용 불가 - let은 변수 중복 선언 불가(var은 중복 선언 가능) -> var보다..