개발세발

JQuery : 웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈 소스 기반의 자바스크립트 라이브러리 - 웹 페이지 상에서 엘리먼트(Element)를 쉽게 찾고 제어 - 웹 브라우저 호환성이 뛰어남 - 애니메이션과 같은 다양한 기능 제공 www.jquery.com jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a m..

calc() 계산을 이용하여 빠르게 값 구하기 vh, px 처럼 단위가 달라도 사용 가능 css 에서 변수 설정하기 왜 변수를 사용할까 - 속성에 값을 줄 때 일관성을 유지하기 위해서 변수로 설정해두고 불러옴 - 일괄적으로 수정이 편하게 가능함 [사용방법] .css --속성이름 : value ; --속성-이름 : value ; .scss $속성이름 : value; (*) 혼자서 만들어 보기 [샘플] [코드] logo menu info top left top right bottom 1 bottom 2 bottom 3 up bottom 3 down bottom 4 footerMain .scss $fragHeight: 80px; $bg: #03a9f4; * { margin: 0; padding: 0; } .c..

Flex box : 가변적인 박스를 만드는 기술 : 박스 요소들을 다양하고 자유롭게 배치할 수 있음 ➡️ 반응형 웹사이트를 제작하기에 최적의 기술 * 기존 웹사이트의 레이아웃을 만드는 방법 - position - float - table ➡️ 1️⃣ 복잡하고 시간이 오래 걸리며 2️⃣ 박스안 아이템들의 수직 정렬 등에 제약이 있음 - float ; '배치'와는 전혀 상관없는 속성으로 박스 배치를 해오고 있었기에 요즘은 잘 사용하지 않음 flex box의 축 주축 교차축 기본적으로 수평 방향 (왼쪽에서 오른쪽으로 배치) 기본적으로 수직 방향 (위에서 아래로 배치) 주축: 아이템이 정렬하는 방향 따라서, 위의 사진은 주축이 가로지만 아래의 사진은 주축이 세로! flex container (=부모 박스) : ..

반응형 웹(responsive Web) : 다양한 기기게 반응하는 웹사이트 - 사용자가 접속하는 화면에 따라 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌 (*예시) https://www.mmca.go.kr/ 국립현대미술관 www.mmca.go.kr - 반응형의 사용여부는 사이트의 용도와 사용자가 주로 접속하는 기기에 따라 결정 : pc와 모바일용 웹사이트 사용자의 접속 빈도가 비슷한 경우 반응형 웹 사이트가 필요 ➡️ 사이트를 하나만 만들어도 pc와 모바일 기기에서 모두 사용할 수 있음 (+) 반응형 웹사이트 구성 살펴보기 - 보통 상단 메뉴 노출이 사라지는 경우가 많음 - 관람∙참여/전시/교육 등의 메뉴란이 태블릿/모바일 버전으로 줄어드는 경우 사라지고 햄버거 버튼으로 함축됨 - 햄버거 버튼 클릭..