kebab00's

- 저희가 계획하고 있는 사이트는 식물을 관리하는 방법을 알려주고 집에서 더욱 쉽게 식물에게 접근할 수 있도록 진입장벽을 낮춰주는 사이트를 계획하고 있습니다. - 사용한 타입들은 헤더타입, 슬라이더타입, 이미지&텍스트 타입, 이미지타입, 푸터타입 등이 있습니다. - 특히 이미지&텍스트타입을 많이 사용하였습니다. - 그리고 타입으로 분류하기 애매한 검색창이 하나 있습니다. - 설명을 살짝하자면 일단 헤더에는 메뉴창이 들어가서 네비게이션 역활을 같이 합니다. - 슬라이더에는 이번달 식물&꽃과 이벤트등의 베너가 들어갈 예정이며 - 그다음장은 이번달 식물과 약간의 설명이 같이 들어가면 이쁠 것 같아서 넣어 보았습니다. - 그리고 그다음 이미지&슬라이더타입은 식물의 기능성 종류(공기정화, 좋은향, 두통완화등등)을..

- 자 오늘은 수많은 메서드들 중에 문자열과 관련된 문자열들 중에서 10개만!! 골라서 해보겠습니다. - 10개지만 2시간 반이 걸린... 개당 15분 실화냐?? 가슴이 웅장해진다. - 한번 보시죠 01. at() "문자열".at([위치값]) - at()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 요소를 반환합니다. - 배열과 같이 0부터 첫번째 자리의 요소를 반환하며 -1은 마지막 자리의 요소부터 시작합니다. { "javascript reference".at(0); //j "javascript reference".at(1); //a "javascript reference".at(-1); //e "javascript reference".at(-3); //n } 02. charAt() "문자열".c..

- 오늘은 어제 한 패럴랙스효과를 사용해서 저희 반 소개 라고 하기엔 빈약하지만 소개 페이지를 만들었습니다. - 만드는데 하루종일 걸렸습니다... - 코드입니다. Hello World Web's 2023 Class 2023.02.13 Start! Keep up the good work. 2023.03.10 첫 회식 2023.04월 조별과제1 2023.04월 조별과제2 - 패럴랙스 효과는 스크롤링에 따라 배경 이미지를 움직여 깊이감을 연출하는 효과입니다. - 스크룰의 위치에 따라 요소들에게 효과를 주는 것이죠 - 위치를 바꾼다거나 빙글뱅글 돌린다거나 투명도를 조정한다거나 크기를 바꾸는 등의 효과와 스크롤의 위치를 조합해서 에니메이션 같은 효과를 줄 수 있습니다. - "data-" 뒤에 있는 숫자는 스크룰 ..

PHP란 -PHP는 서버 측에서 실행되는 프로그래밍 언어로 HTML을 프로그래밍적으로 생성해주고, 데이터베이스와 상호작용 하면서 데이터를 저장하고, 표현해 줍니다. - PHP는 웹을 위해서 만들어졌고, 지금도 웹을 위해서 발전하고 있는 웹을 위한 언어이며 많은 장점이 있습니다. PHP사용하기 - PHP를 사용하기 위해서는 웹페이지와 연동할 수 있는 PHP 폴더를 만들어 주어야 합니다. - 저는 MAMP를 사용해서 서버를 만들고 연동해 주었습니다. - php는 로 감싸서 안에 php언어를 사용해주면 됩니다. 회원가입 페이지 회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다. 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호 확인 연락처 회원가입 완료 - 를 사용해서 html과 css를 가져올 ..

- 오늘 할 것은 패럴랙스 효과입니다. - 패럴랙스 효과란 페이지를 스크롤 했을 때 현재 보여지는 화면에 해당되는 좌표값을 가져온 다음 좌표값에 따라 이미지에 효과를 주는 방식입니다. - 그러려면 가장 중요한 것은 기준에 따른 좌표값을 가져오는 것인데 해당 블로그에서는 현재 Y좌표값과 각 사진의 Y좌표값을 구해보았습니다 - 스크립트를 보시죠 - window.addEventListener에 scroll를 주어 스크롤를 했을 때 함수가 실행되게 해주었습니다. 그리고 가장 먼저한 일은 좌표값을 저장한 것입니다. - 그리고 그걸 .scroll 에 있는 span 태그에 저장해 주었습니다. - document.querySelector(".info .offset1").innerText = document.getEle..

- 오늘 할 것은 4번에 했던 명언에 인터넷에서 가져온 사진을 배경으로 추가해주고 - 그 사진이 계속 바뀌는 것 입니다. - 저는 사진이 바뀌는 과정을 저번에 했던 슬라이드 형식을 가져왔습니다. - 꽤나 고심을 한 흔적이 보이시나요? 좀 힘들었습니다.(생색내기 장인) - 함께 코드를 보시죠 * { margin: 0; padding: 0; } .wrap { margin: 0 auto; justify-content: center; width: 1000px; height: 800px; position: relative; overflow: hidden; } .slider__inner { width: 1000px; height: 800px; } .slider__inner > div > img { width: 10..