Dragonball Online Goku Hand
본문 바로가기

코딩Gabojago~164

"슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여) 🎞 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직일 수 있게 만들어봅시다! 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :) 슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다. 코드 보기 javascript Slider Effect04 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 1 2 3 4 5 6 7 prev next CSS 부분적인 CSS입니다. 미디어쿼리도 사용했습니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* sli.. 2022. 9. 19.
"마우스이펙트 02" : 커서 두 개를 통해 다양한 효과 내기 🖱 마우스 이펙트 : 마우스 따라다니기(GSAP) 📌 마우스 cursor 두 개를 통해서 글자나 어느 위치에 마우스를 가져다 놓았을 때, 마우스가 떠났을 때 효과를 넣어 완성해봅시다! 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML cursor를 두 개로 지정해주었습니다. 마우스 cursor 두 개를 통해 어떤 효과를 표현할 수 있는지 만들기 위해 먼저 html로 밑에와 같이 틀을 짜줍니다. 지금 시작하세요. 미래는 아무에게도 약속되지 않았습니다. Go for it now. The future is promise to no one. 지금 시작하세요. 미래는 아무에게도 약속되지 않았습니다. ➰ CSS 마우스 커서와 마우스에 active가 들어왔을 때의 효과를 넣어줍니다. .. 2022. 9. 19.
[CSS] "한 웨이브 하는 동그라미" 를 만들어봅시다! codepen을 이용해서 저보다(?) 웨이브 잘하는 동그라미⚪️를 만들어봅시다! 동그라미 여러개가 작아졌다 커졌다를 반복하면서 웨이브하는 느낌을 PUG와 SCSS의 animation 기능을 이용하여 만들어봅시다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️PUG 동그라미 여러개를 가로 세로 12개씩 만들어줍니다. 이 때 정렬을 잘 맞춰 주어야 오류가 나지 않습니다. div.circle-wrap - for (var x = 1; x 2022. 9. 19.
[Error 명예 해결사] vs code SCSS 설정편 📍 SCSS를 VScode에서 사용하는 방법 SCSS를 VScode에서 사용하는 방법에 대해 알아봅시다! ➰ 설치 1. VScode에 Live Sass Compiler를 설치해줍니다. 2. 설치하셨다면 Sass 또한 설치해줍니다. 3. Sass도 설치완료하였다면 밑에를 확인해야합니다. 창 하단에 Watch Sass가 뜬다면 설치완료한 것입니다. 📍 SCSS를 CSS로 컴파일하는 방법 settings에 들어간 후 json을 검색하여 Edit in settings.json을 클릭후 밑에와 같이 넣어주면 됩니다. map 파일을 생성하지 않으면 아래와 같이 써주면 됩니다. -> "liveSassCompile.settings.generateMap": false 주석표시한 부분은 주석을 해주어야 .css파일이 작업.. 2022. 9. 19.
[사이트 제작] 헤더 유형부터 푸터 유형까지 : 반응형 포함 🧷 사이트를 제작해보자! 근데 이제 반응형을 곁들인...^^ [💁🏻‍♀️ 쉽지 않다편] 헤더, 슬라이드, 이미지, 이미지텍스트, 카드, 배너, 텍스트, 푸터 유형으로 이루어진 사이트를 만들어봅시다. 마무리는 역시나 막시나 반응형까지 해주어야 완성이겠죠? 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma로 구성 짜기 figma를 통해서 사이트를 어떤 유형으로 구성할 것인지, 유형마다 어떤 식으로 구성할 것인지를 구체적으로 짜주어야 합니다. (그래야 나중에 코딩할 때 수월하겠죠?🥹) 📋 헤더 유형 ➰ vscode를 통해 코딩해주기! : html편 사이트 헤더 부분을 어떻게 구성해야할지 틀을 짜주어야 합니다. 코드 보기 MOMENTO store main best codi product brand SNS 로그.. 2022. 9. 14.
MySQL에 대해 알아보고 활용해봅시다! 📎 MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. ➰ MySQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. http://www.mamp.info/en/downlads/ ➰ MySQL 실행 윈도우 : cs MAMP/bin/mysql/bin 로그인 : ./mysql -uroot -proot Welcome to the MyS.. 2022. 9. 14.
[사이트 제작] 웹기능사 실기 대비 : COOKIT 사이트 COOKIT 사이트 만들기 [웹기능사 시험 대비] 📌 웹기능사 실기 시험을 대비하기 위해 COOKIT 사이트를 만들어보겠습니다. ➰ HTML 사이트의 틀을 제작해줍니다. lt;div id="warp"> Cookit 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 Cookit 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub-menu3 sub-menu3 sub-menu3 sub-menu3 이벤트 sub-menu4 sub-menu4 sub-menu4 sub-menu4 My쿡킷 sub-menu5 sub-menu5 sub-menu5 sub-menu5 이미지1 이미지2 이미지3 우리집도 COOKIT 배송이 되나요? 배송 가능한지 알려드려요. 배송.. 2022. 9. 14.
[사이트 제작] 웹기능사 실기 대비 : 롯데월드 사이트 롯데월드 사이트 만들기 [웹기능사 시험 대비] 📌 웹기능사 실기 시험을 대비하기 위해 롯데월드 사이트를 만들어보겠습니다. ➰ HTML 사이트의 틀을 제작해줍니다. 즐길거리 subMenu-1 subMenu-2 subMenu-3 subMenu-4 요금/우대혜택 subMenu-1 subMenu-2 subMenu-3 subMenu-4 참여프로그램 subMenu-1 subMenu-2 subMenu-3 subMenu-4 이용가이드 subMenu-1 subMenu-2 subMenu-3 subMenu-4 소통서비스 subMenu-1 subMenu-2 subMenu-3 subMenu-4 이미지1 이미지2 이미지3 롯데월드 소식 1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.2019.05.03 1. 첫번째.. 2022. 9. 14.
"패럴랙스 이펙트 03" : 숨김 메뉴 + Top 버튼 🔮 패럴랙스 이펙트 - 숨김 메뉴 📌 이번 이펙트는 밑에서 위로 스크롤 했을 때 메뉴바가 나타나고 section9가 끝나는 지점에서 top버튼이 나타나 페이지 상단으로 갈 수 있도록 하는 이펙트입니다. 패럴랙스 이펙트를 피그마를 활용하여 설명 ➰ HTML footer를 제외한 전체 body 코드입니다. Javascript parallax Effect03 패럴랙스 이펙트 - 숨김 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃.. 2022. 9. 14.
"패럴랙스 이펙트 02" : 사이드 메뉴 🔮 패럴랙스 이펙트 - 사이드 메뉴 📌 이번 이펙트는 사이드 메뉴를 클릭했을 때 해당하는 페이지로 이동하는 이펙트입니다. 패럴랙스 이펙트를 피그마를 활용하여 설명 ➰ HTML footer를 제외한 전체 body 코드입니다. Javascript parallax Effect02 패럴랙스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 section4 인생은 가까이서 보면 비극,.. 2022. 9. 14.
[CSS] CSS animation Start Stop timing-function Start border-radius step-start step-end steps(4, start) steps(4, end) steps(10, start) steps(10, start) .timing6.show {animation: move 4s 1 step-start;} .timing7.show {animation: move 4s 1 step-end;} .timing8.show {animation: move 4s 1 steps(4, start);} .timing9.show {animation: move 4s 1 steps(4, end);} .timing10.show {animation: move 4s 1 steps(10, start);} .timing11.. 2022. 9. 8.
[CSS] CSS intro 📎 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 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션.. 2022. 9. 8.
[CSS] SVG animation CSS를 이용해서 text animation을 만들어봅시다! @keyframes를 이용하여 애니메이션을 줍니다. See the Pen Text Animation by KwonHyehyeon (@kwonhyehyeon) on CodePen. 애니메이션 코드 소스를 알아봅시다.💻 ✔️HTML noeyheyh ✔️CSS @font-face { font-family: 'Jalnan'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.. 2022. 9. 8.
[CSS] SVG intro 📎 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원.. 2022. 9. 8.
"패럴랙스 이펙트 01" : 메뉴 이동 🔮 패럴랙스 이펙트 - 메뉴 이동 📌 패럴랙스 이펙트는 좌표값 속성들을 통해 화면을 스크롤 할 때 자연스럽게 카테고리(메뉴)를 바꿔주는 이펙트입니다. 패럴랙스 이펙트를 피그마를 활용하여 설명 ➰ HTML 1. parallax__nav id를 통해 상단 메뉴를 구현합니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 2. 섹션(각 영역)별 번호, 제목, 명언을 작성해줍니다. [section1 - section9] 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 sec.. 2022. 9. 6.
[사이트 제작] 슬라이드(slide)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻‍♀️ 슬라이드 영역 편] 슬라이드 영역은 많은 웹사이트에서 흔히 볼 수 있는 영역으로 이미지를 넘길 수 있습니다. 슬라이드 유형을 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 그리드를 통해 해당 영역을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히보기 사이트보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 ➰.. 2022. 9. 6.
[사이트 제작] 배너(banner)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻‍♀️ 배너 영역 편] 배너란, 홈페이지의 한 쪽에 특정 웹 사이트의 이름이나 내용을 배너 유형은 배너 안에 약간의 글이 적혀 있는 유형으로 이름이나 내용을 부착하여 홍보하는 이미지를 말합니다. 배너 유형을 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 그리드를 통해 해당 영역을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 배너 영역 유튜버 입짧은 혠 다양한 먹방 영상을 유튜브를 통해 제공하고 있습니다. 배너 유형01 ➰ vscode를 통해 코딩해주기.. 2022. 9. 6.
[사이트 제작] 푸터(footer)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻‍♀️ 푸터 영역 편] 푸터 유형은 사이트의 제일 하단 부분에 해당합니다. 푸터 유형 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 푸터 영역 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형.. 2022. 9. 6.
mouseEnter / mouseOver 차이점 📎 mouseEnter와 mouseOver의 차이점에 대해 알아봅시다. mouseEnter와 mouseOver는 어떤 요소 안으로 마우스가 들어오면 들어오는 순간을 감지하는 마우스 이벤트입니다. 🧩 반대 : mouseOut과 mouseLeave : 마우스가 어떤 요소 밖으로 이동하는 순간을 감지 🧩 일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용합니다. ➰짝꿍 mouseOver ⎯ mouseOut mouseEnter ⎯ mouseLeave 📎 mouseOver와 mouseEnter 차이 이벤트 버블링 : 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만.. 2022. 9. 6.
"마우스이펙트 01" : 커서에 다양한 효과 넣기 🖱 마우스 이펙트 : 커서 변경/특정 단어에 올렸을 때 마우스 커서의 크기 변화 + 애니메이션 등 📌 마우스를 hover했을 때 나타나는 효과를 다양하게 만들어봅시다! 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML main을 통해 mouse부분을 묶어 주었습니다. 마음에 드는 명언을 골라 핵심 부분을 span으로 묶어주었으며 class를 주었습니다. mouse__info에는 마우스가 움직일 때 마우스의 좌표값들을 알려주는 속성을 브라우저, 요소, 페이지, 디바이스 기준으로 나누어 클래스로 지정해주었습니다. The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려 있다. clientX : 0px cli.. 2022. 9. 6.
[Error 명예 해결사] vs code Prettier 설정편 | 오류 해결 📍 코드 자동 정렬 기능 : Prettier 설정 방법 :vs code에서 코드를 예쁘게 정렬해주는 기능으로 설치 후 따로 설정을 해주어야 사용 가능합니다. ➰ 기본 설정 하는 방법 1. prettier를 설치해줍니다. 2. 설치하셨다면 일반적인 코드를 준비합니다. 3. 띄어쓰기를 해준 후 ctrl+s(맥 : command+s)를 눌렀을 때 자동 정렬이 되는지 확인해줍니다. 4. ㅎ...안되는 걸 알 수 있습니다. 그렇다면 prettier의 기본 설정을 해주어야 하는데 proference(환경설정)에 들어갑니다. 검색창에 "editor format on save"를 입력해준 후 체크 부분에 체크가 되어있는지 확인한 후 안되어있다면 체크를 해주어야 합니다. 5. "json"을 검색하여 Edit in set.. 2022. 9. 6.
스타일 관련 메서드 🧷 jQuery : 스타일 관련 메서드 ➰ css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0,1,2 // w은 각 div 요소 width 속성 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); …… 내용 내용 내용 ➿ css() 메서드 사용 예시 내용1 내용2 내용3 ⭐️ 결과 .. 2022. 9. 4.
속성 관련 메서드 🧷 jQuery : 속성 관련 메서드 ➰ attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://www.icoxpublish.com/").attr("target", "_blank"); $("a").attr({href: "http://www.icoxpublish.com/", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0,1,2 // h은 각 a 요소 href 속성 return attribute (속성) // 각 a 요소의 속성을.. 2022. 9. 4.
클래스 관련 메서드 🧷 jQuery : 클래스 관련 메서드 ➰ addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 ➿ addClass() 메서드 사용 예시 jQuery html css javascript ⭐️ 결과 ⭐️ See the Pen jq class method by KwonHyehyeon (@kwonhyehyeon) o.. 2022. 9. 4.
[CSS] "통통튀는 공" 을 만들어봅시다! 🧷 codepen을 이용해서 어디로 튈지 모르는 공🏐을 만들어봅시다! 공과 공의 잔상(?)까지 HTML과 CSS의 animation 기능을 이용하여 만들어봅시다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 공 5개를 만들어 주어야 합니다. ✔️CSS nth-of-type()을 통해서 공의 순번을 정해준 후 각각의 애니메이션 효과를 지정해줍니다. * { box-sizing:border-box } body { background:linear-gradient(to top, #a18ca1 0%, #fbc2eb 100%); width:100vw; height:100vh; display: flex; ju.. 2022. 9. 2.
"슬라이더이펙트 03" : 좌로 움직이기(연속) 🎞 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다! + 연속적으로!!! 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :) 슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다. 코드 보기 javascript Slider Effect03 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS const sliderWrap = document.querySelector(".slider__wra.. 2022. 9. 2.
[사이트 제작] 이미지 텍스트(image text)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻‍♀️ 이미지 텍스트 편] 이미지 텍스트 유형은 말 그대로 이미지와 텍스트로 이루어진 유형으로 웹사이트를 얼굴, 몸(발 제외), 발의 구조로 비유하자면 몸에 해당하는 부분입니다. 몸 부분에는 여러 유형으로 사이트를 만들어 줄 수 있는데 이번에는 이미지 텍스트 유형을 통해 사이트를 만들어보도록 하겠습니다. 이미지 텍스트(image text) 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 유용한 사이.. 2022. 9. 1.
[사이트 제작] 헤더(header) 유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻‍♀️ 헤더 영역 편] 우리가 웹사이트를 볼 때 반드시 필요한 부분이 어디인가요? 바로 헤더 영역입니다. 주로 메뉴나 목차 등으로 구성되어 있으며 로그인 혹은 회원가입 등도 볼 수 있습니다. 헤더(header)부분 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면.. 2022. 9. 1.
요소 크기 메서드 Javascript 요소 크기 메서드에 대해 알아봅시다! 📎 Javascript 요소 크기 메서드 종류 속성은 가져오는 것 밖에 못하고 메서드는 값을 설정해줄 수 있습니다. 번호 속성/메서드 이름 설명 01 element.clientWidth 요소의 가로값(마진/보더 미포함) 02 element.clientHeight 요소의 높이값(마진/보더 미포함) 03 element.clientTop 요소의 Y축값(부모기준) 04 element.clientLeft 요소의 X축값(부모기준) 05 element.offsetWidth 요소의 가로값(보더/패딩 포함) 06 element.offsetHeight 요소의 가로값(보더/패딩 포함) 07 element.offsetTop 요소의 Y축값(문서 기준) 08 element.. 2022. 9. 1.
[사이트 제작] 세번째 : 텍스트 유형 TYPE.03 사이트 제작하기 : 📝 텍스트 유형03 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 이번 유형은 카드유형01번과 비슷한 레이아웃이지만 디테일이 많이 추가 된 유형입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 bo.. 2022. 9. 1.