웹 개발 공부 컨텐츠134 펼침연산자 펼침연산자 펼침연산자는 점3개(...)로 표시하며 복잡한 갹체 나열을 단순화하거나 객체의 병합, 함수의 인자 처리를 단순하게 처리할 수 있도록 개선하는 함수입니다. 펼침연산자는 복사, 추가, 결합의 3가지 기능이 있습니다. 1. 펼침연산자 : 복사 배열 혹은 객체에 포함된 항복을 그대로 복사해 목록으로 만듭니다. { const obj = { a: 100, b: 200, c: "javascript" } //복사 const spread = { ...obj } //...이 펼침연산자의 기능 document.write(spread.b); document.write(spread.b); document.write(spread.b); } 결과보기 2. 펼침연산자 : 추가 복사한 항목 뒤에 항목을 추가합니다. { co.. 2022. 9. 20. SASS 설치 방법 SASS 설치법 SASS(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어입니다. Sass는 그대로 사용할 수 없고 CSS로 컴파일링하여 사용됩니다. VSCODE에 SASS 설치 방법 vscode의 확장 프로그램 설치창에 가서 sass를 검색 후 Sass와 Live Sass Compliler를 설치합니다. preference > setting에서 Live sass compilier를 찾은 후 edit.setting.json를 클릭합니다. 설정 창에서 옵션을 설정합니다. format : css로 변환 시 expanded는 코드를 계층 구조.. 2022. 9. 19. 실전 사이트 만들기 01 사이트 만들기 이번 사이트는 다수의 유형을 종합하여 하나의 사이트를 만드는 방법입니다. ○ 사이트 완성하기 01 여태까지 했던 사이트 유형을 종합하여 가장 기본적인 하나의 사이트 형태로 구성합니다. 사이트의 구성은 헤더 영역, 메인 영역, 푸터 영역으로 구성되어 있으며 메인 영역은 여러개의 타입이 모여 구성합니다. 또한 만든 사이트를 태블릿과 핸드폰의 크기에 맞춰 반응형 웹까지 완성합니다. 1. 헤더 영역 로고와 메뉴 및 로그인 버튼이 들어가는 헤더 영역은 반응형 시 메뉴창이 햄버거 버튼 형태로 구성됩니다. 헤더 영역 코드 web site 이미지 영역 이미지/텍스트 영역 카드 영역 배너 영역 텍스트 영역 로그인 반응형 및 햄버거 버튼 코드 햄버거 버튼은 마치 햄버거 모양의 3선 메뉴 버튼을 클릭하거나 터.. 2022. 9. 15. SQL 01 MYSQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰이는 오픈 소스 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드) 등 일반적으로 웹 개발에 널리 사용하고 있습니다. MYSQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 maxOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. https://www.mamp.info/en/downloads/ MYSQL 실행 윈도우 윈도우 : cs.. 2022. 9. 14. 페럴렉스 이팩트 02 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 02 - 사이드 메뉴 패럴랙스 01과 동일한 효과이지만 매뉴를 사이드에 적용하는 방법입니다. ▶ 화면 구성 형태 이번 효과는 패럴랙스 이펙트 01의 메뉴바를 사이드로 만들고 CSS를 이용해 지정된 부분을 강조하는 원을 그려야 합니다. (사이드 이미지) //HTML 파트 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 사이드 메뉴는 패럴랙스 이펙트 01의 메뉴와 만드는 방법이 동일합니다. 하지만 텍스트를 가려야 하기 때문에 일단 안에 텍스를 넣었습니다. //CSS 파트 CSS로 와 태그에 동일한 크기의 원을 그리고 태그에 position: absolute를 적용해 겹치게 합니다. 이 때 모습은 원이 겹쳐있어.. 2022. 9. 14. CSS Animation 2 CSS 애니메이션 효과 CSS를 이용해 애니메이션 효과를 주는 방법입니다. 포토샵을 이용한 애니메이션 이번 애니메이션 효과는 포토샵을 이용해 여러개의 이미지를 하나로 이어 붙인 후 css를 사용해 애니메이션을 주는 효과입니다. ▶ 포토샵으로 이미지 만들기 CSS로 사진같은 이미지의 애니메이션을 구현하기 위해선 여러장의 이미지를 이어붙여야 합니다. ▶ CSS로 애니메이션 구현하기 백그라운드로 이어붙인 이미지를 불러온 후 애니메이션 속성으로 각 이미지를 연속적으로 보여줌으로써 애니메이션이 구현됩니다. 이 때 step은 이미지의 초당 프레임을 나타내며 이미지가 24장일때 24를 쓰면 1초에 모든 이미지가 연속적으로 보여집니다. border-radius Start Stop } .stepBtn a { backgr.. 2022. 9. 8. css animation 1 CSS 애니메이션 효과 CSS를 이용해 애니메이션 효과를 주는 방법입니다. animation 속성 animation은 요소에 애니메이션 효과를 주는 속성입니다. animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이.. 2022. 9. 7. SVG Animation SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 시작하기에 앞서 SGV In.. 2022. 9. 7. SGV Intro SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. ※ 부트스트랩이란 부트스트랩.. 2022. 9. 7. 패럴랙스 이펙트 만들기 01 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 01 - 메뉴 이동 따라다니기 스크롤의 위치에 따라 메뉴에 효과를 주거나 메뉴 클릭시 해당 위치로 자연스럽게 이동하는 효과입니다. ▶ HTML 및 CSS 파트 //CSS //HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지.. 2022. 9. 6. 푸터 유형 사이트 01 사이트 만들기 이번 사이트는 푸터 유형입니다. ○ 푸터 유형 01 푸터 유형은 컨텐츠 최하단에 들어가는 유형으로 사이트맵이나 주소, 이메일, 연락처 등이 주로 들어갑니다. ▶ HTML 파트 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 > div { width: 16%; } .footer__menu > div h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; display: block; } .footer__right { border-top: 1px solid #d9d9d9.. 2022. 9. 6. 배너 유형 사이트 01 사이트 만들기 이번 사이트는 배너 유형입니다. ○ 슬라이드 유형 01 배너 유형은 컨텐츠 중간에 긴 가로로 긴 형식으로 삽입되는 유형으로 광고나 홍보용 컨텐츠 등이 자주 들어갑니다. ▶ HTML 파트 배너 영역 저녁의 와인 한잔 오늘 밤은 좋은 무드를 가지고 와인 한잔 어떨까요? 와인은 포도를 발효시켜 만든 오랜 역사를 가진 양조주입니다. 배너 유형01 ▶ CSS 파트 .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color.. 2022. 9. 6. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
