개발/HTML,CSS,JS (10) 썸네일형 리스트형 [ResponsiveWeb]반응형 웹과 BootStrap - 미디어쿼리 / 부트스트랩 적용법 1. 개념 반응형 웹 ( = Responsive Web ) Web 디자인의 기법 중 하나로, 디바이스의 디스플레이 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹 크게 말해, 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미 반응형 웹 디자인 예시들 1. 카카오 모빌리티 https://www.kakaomobility.com/ 2. 삼성 뉴스 룸 https://news.samsung.com/kr/ ( 워드 프레스 사용 ) 3. 네이버 (적응형 웹) https://m.naver.com/ https://naver.com/ 왜 반응형이 필요한가에 대한 답은 아래 영상을 보면 잘 느낄 수 있다. Youtube - 노마드 코.. [JS] JQuery 자바 스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반 자바스크립트 라이브러리 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능 HTML DOM를 손쉽게 조작 가능, CSS 스타일도 간단히 적용 가능 애니메이션 효과나 대화형 처리를 간단하게 적용 같은 동작을 하더라도 더욱 짧게 구현 가능 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능 JQuery 사용법 1. 파일 다운로드 2. CDN (content Delivery Network) 사용 https://releases.jquery.com/ 1. JQuery 메소드 값 가져오기 & 설정하기 메소드 예시 설명 $(선택자).val( ); var value = $("input").val(); Input과 같은 value.. [JS] JavaScript(3) - 객체 / DOM 1. JavaScript 표준 객체 - 자바 스크립트가 기본적으로 가지고 있는 객체들 Date 객체 - 함수 date.now() 기준 시간으로부터 지금까지 지난 밀리초 date.getFullYear() 년도 date.getDate() 초기화 한 시간의 일 date.getDay() 현재 요일의 index date.getTimes() 내가 기준으로 잡은 시간이 기준 시간으로부터 얼마나 지났는지 밀리초 date.getHours() 현재 시간 (시) date.getMinutes() 현재 시간 (분) date.getSeconds() 현재 시간 (초) Math 객체 - 함수 Math.PI() π Math.E() e Math.min() 최솟값 Math.max() 최댓값 Math.random() 랜덤한 수를 추출 Ma.. [JS] JavaScript(2) - 함수 / 조건문 / 반복문 / 메소드 / 배열 1. Function ( 함수 ) - 함수란? 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) // 함수 선언문 : 어디서든 호출 가능 function sayHello(name){ console.log(`Hello, ${name}`); } // 함수 표현식 : 코드에 도달하면 생성 let sayHello = function(name){ console.log(`Hello, ${name}`); } // 화살표 함수 let sayHello = (name) => { console.log(`Hello,${name}`) } 호이스팅 (Hoisting) 이란? - 함수 안에 존재하는 모든 선언들을 해당 함수 최상단으로 끌어올리는 것 - 호이스팅은 선언에서만 발생함 2. Onclick - 각각의 html 요소에 .. [JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자 html 이 집의 구조, css가 집의 인테리어 였다면 js 는 집의 기능 역할을 한다. 1. 개념 - JavaScript 란? 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다 - console.log() ➡️ 브라우저의 개발자 도구-> 콘솔 에서 확인 가능하다. - alert() ➡️ 브라우저가 열렸을 때, 그 내용을 알림창으로 보여준다. - 내장 방식과 링크 방식으로 작성 가능하다 ➡️ 내장방식 : html 파일 내에 작성하는 방식으로, Head 태그 Body 태그와 상관 없이 어느 위치에서나 사용 가능 ➡️ 링크방식 : JS 일을 따로 만들어서 사용하는 방식으로, 내장방식과 마찬가지로 위치는 어디서나 사용 가능 - 읽히는 순서에 따라 작동한다. 2. 표기법 .. [CSS] CSS(4) - transform / transition / animation 1. 전환 ( Transform ) 요소의 변환 효과 transform : 변환함수1 변환함수2 변환함수3 ... ; transform : 원근법 이동 크기 회전 기울임 ; 2D 변환 함수 2D 변환 함수 px translate(x,y) 이동(x축,y축) translateX(x) 이동(x축) translateY(y) 이동(y축) 없음 ( 배수 ) scaleX(x) 크기(x축) scaleY(y) 크기(y축) deg rotate(degree) 회전(각도) skew(x,y) 기울임(x축,y축) skewX(x) 기울임(x축) skewY(y) 기울임(y축) matrix(n,n,n,n,n,n) 2차원 변환 효과 3D 변환 함수 3D 변환 함수 px translateZ(z) 이동(z축) translat.. [CSS] CSS(3) - position / background / display 이번엔 CSS 의 속성 중 position 과 flex 에 대해 정리해보았다. CSS 속성 중 가장 헷갈리는 부분이다. 1. position static : 정적 위치 지정 방식 ( 고정값 ) relative : 상대 위치 지정 방식 absolute : 절대 위치 지정 방식 fixed : 고정 위치 지정 방식 position relative 요소 자신을 기준으로 배치 absolute 위치상 부모요소를 기준으로 배치 → 부모는 무조건 relative 여야함. 없으면 부모의 부모 조상까지 올라감. 계속 없으면 뷰포트까지도 올라감. → 브라우저 크기가 바뀌면 변함, 그러나 고정은 안됨 ( = 스크롤 내려도 변함 ) fixed 뷰포트를 기준으로 배치 → 고정 됨 (스크롤내려도 그대로) ➡️ pos.. [CSS] CSS(2) - 폰트 / 속성 CSS 는 속성이 참 다양해서 정리 할 것이 많다. 어렵다기 보다 내용이 많아서 기억 해야 할 것이 많은 느낌이다. 1. 폰트 Font font-weight 글자의 두께(가중치) normal : 기본 두께 bold : 두껍게 bolder : 상위(부모)요소보다 더 두껍게 lighter : 상위(부모)요소보다 더 얇게 100~900 : 100단위 숫자 9개, normal 과 bold 이외의 두께 font-size 글자의 크기 16px = 기본 크기 px / em / rem 등 단위로 지정 % : 부모 요소 폰트 크기에 대한 비율 smaller : 상위(부모) 요소보다 작은 크기 larger : 상위(부모) 요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 .. 이전 1 2 다음
