카테고리165 [사이트 만들기] 이미지/텍스트 유형 01 사이트 만들기 _ 이미지텍스트 유형01 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ 유용한 사이트 살펴보기 .blind{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 대제목에 블라인드 효과를 주어 감추었습니다.큰 주제이지만 구조상 밑으로 내려가니깐 웹표준을 준수하기 위해서 이렇게 한게 아닐까...?싶습니다. .imgText__txt ul li::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 5px; top: 9px; background: #666; } li태그에서.. 2022. 9. 1. [사이트 만들기]헤더 유형01 사이트 만들기 _ 헤더 유형01 이번엔 헤더 유형을 만들어 보겠습니다. 헤더 유형은 간단해서 크게 설명할 부분은 없지만 그래도 같이 공부해볼까요 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .header__menu { width: 60%; text-align: center; } .header__member { width: 20%; text-align: right; } .header__logo { font-size: 30px; font-weight: 700; text-transform: uppercase; width: 20%; } 로고와 메뉴바, 로그인버튼에 width값을 주지않으면 추후에 내용이 추가될 경우 배치가 어색해보이게 됩니다. 그렇기 때문에 언제든지 가운데정렬로 보이게 하기 위해서 각각 width값을 .. 2022. 9. 1. [메서드] 요소 크기 메서드 요소 크기 메서드 이 메서드는 요소의 크기, 높이 등을 구하는 메서드입니다. element.clientWidth : 요소 가로값(margin/border 미포함) element.clientHeight : 요소 높이값(margin/border 미포함) element.clientTop : 요소 Y축값(부모기준) element.clientLeft : 요소 X축값(부모기준) element.offsetWidth : 요소 가로값(border/padding 포함한 값) element.offsetHeight : 요소 높이값(border/padding 포함한 값) element.offsetTop : 요소 Y축값(문서 기준) element.offsetLeft : 요소 X축값(문서 기준) element.getBounding.. 2022. 9. 1. [사이트 만들기] 텍스트 유형03 사이트 만들기 _ 텍스트 유형03 이번 시간은 텍스트 유형 세번째 시간입니다. 이번엔 제가 임의로 만든 사이트라서 제가 여러가지 실험 아닌 실험을 많이한 사이트네요. 같이 가보시죠 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ ir효과와 이미지스프라이트효과에 대한 설명은 또 할 이유가 있을까요ㅎㅎ패스하겠습니다. 구글 아이콘 활용하기! star star 오늘의 피그마를 보시면 별점을 메기는 박스가 있었는데요. 세개의 박스에 전부 같은 별점그림이면 이미지태그를 썼겠지만 하나는 별점이 4개라서 두개의 이미지로 저장해서 또 넣기는 조금 비효율적인것 같더라구요!그래서 저는 이걸 이미지말고 또 색다른 방법으로 구현을 해보고 싶더라구요. (근데 이게 웹표준을 준수할 수 있는 방법일지...😶) 아.무.튼! 단순하게 이미지파일로.. 2022. 9. 1. [사이트 만들기]텍스트 유형 02 사이트 만들기 _ 텍스트 유형02 이번 시간은 텍스트 유형 두번째 시간입니다. 들어가기에 앞서 이번엔 레이아웃 배치를 원활하게 하기 위해서 dispaly:grid를 사용해서 작업했구요. 더보기링크가 없으므로 아이콘에 a링크를 부여할 예정입니다. 한번 따라가 보실까요 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } .icon{ background: url(img/text_type02.svg) no-repeat; width: 60px; height: 60px; border-radius:.. 2022. 8. 31. [제이쿼리] 탐색 선택자에 대해 알아보자 탐색 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 세번째 시간입니다.필터 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 보러가기 3. 필터 선택자 보러가기 4. 탐색 선택자 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫번째 div 요소를.. 2022. 8. 30. [제이쿼리] 필터 선택자에 대해 알아보자 필터 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 세번째 시간입니다.필터 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 보러가기 3. 필터 선택자 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("tr:first") 첫 번째 td요소를 선택합니다. :last $("tr:last") 마지막 td요소를 선택합니다. :header $(":header") 해당(h1 ~ h6)요소를.. 2022. 8. 30. [제이쿼리] 속성 선택자에 대해 알아보자 속성 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 두번째 시간입니다.속성 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 3. 필터 선택자 보러가기 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("s.. 2022. 8. 30. [제이쿼리] 기본 선택자에 대해 알아보자 기본 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 이번 시간부터 선택자에 대해서 낱낱이 파헤쳐보도록 하겠습니다. 오늘은 그 첫번째 시간으로 기본 선택자를 알아볼까요. 1. 기본 선택자 2. 속성 선택자 보러가기 3. 필터 선택자 보러가기 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 .. 2022. 8. 30. [사이트 만들기] 텍스트 유형01 사이트 만들기 _ 텍스트 유형01 이번 시간에는 텍스트 유형을 만들어 보겠습니다. 6개의 섹션으로 구성되어 있으며, 아이콘은 div태그에 background를 이용했지만 웹표준을 준수하기 위해 ir효과를 입힐 예정입니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } 시각적으로는 아이콘이 표시되지만 웹표준을 준수하기 위해서는 의미없는 div태그에 이미지를 입혀서는 안되겠죠? 그래서 span태그에 그림에 대한 설명을 적어주고 ir효과를 주어서 시각적으로 텍스트는 가리지만 리더기가 읽.. 2022. 8. 30. [코드펜] 애니메이션 효과 만들어 보기 CSS를 이용해서 요소 숨기기 오늘은 쉬어가는 시간?으로 코드펜을 이용해서 간단한 CSS애니메이션 효과를 만들어 보았습니다. ■ 네모 굴리기 네모를 열심히 굴려봅시다. 그림자는 가상요소를 이용해서 표현해 주었습니다. See the Pen 공굴리기 by Parkhyeonshin (@parkhyeonshin) on CodePen. ■ 로딩처럼 계속 돌아가는 원 만들기 원 두개를 계속 돌려봅시다. 제 머리도 같이 돌아갈거 같네요. .loading의 안에 circle이라는 원 두개를 만들어서 배치한 후 loading의 배경을 없앤상태로 뱅글뱅글 돌리면 마치 원이 돌아가는 시각효과를 가져올 수 있게 됩니다. 뱅글뱅글 돌아가는 속성과 관련된 값은 transform: rotate가 있습니다. See the Pen 로.. 2022. 8. 29. [자바스크립트 라이브러리지만 CSS랑 연관이더깊은...]GSAP를 아라보자 GSAP 알아보기 웹페이지를 보다 있어 보기에 하기 위해서 우리는 애니메이션 효과를 사용하는 경우가 많은데요. 이러한 애니메이션효과는 CSS로 적용할 수 있습니다만, 많이 무겁다는 단점이 있죠. 하지만 이 복잡한 애니메이션 효과를 보다 쉽게 다른 도구의 힘을 빌려 구현할 수 있다면 너무 좋겠죠? 그래서 오늘은 GSAP에 대해서 알아보고자 합니다. GSAP는 초보자들이 사용하기엔 좀 난해합니다만 그래도 힘을 내서 공부해볼까요? GSAP ■ 개념 GSAP란 'GreenSock'에서 만든 자바스크립트 기반 애니메이션 라이브러리입니다. 앞서 말씀드렸듯이 GSAP를 사용하면 제이쿼리, CSS를 사용하는 것보다 효율도 잘나오고 사용법도 간단합니다. ■ 특징 ▶ 코어-모든 객체의 속성에 애니메이션을 적용하는 엔진의 .. 2022. 8. 29. [자바스크립트 라이브러리] 제이쿼리를 알아보자 제이쿼리(jQuery) 제이쿼리는 자바스크립트 라이브러리중의 하나입니다. 아마 다들 어디선가 이름을 들어봤을정도로 유명하지 않나 싶은데요. 요새는 잘 쓰이지는 않습니다만, 그래도 유명했던만큼 한번 알아볼까요? ■ 개념 오픈소스기반의 자바스크립트 라이브러리입니다. "write less, do more(적게 작성하고, 많은 것을 합시다)"의 모토로 2006년 미국의 SW 개발자 존레식(John Resig)이 발표하였습니다. ■ 장점 ▶ 애니메이션 효과나 대화형 처리를 간단하게 적용해줍니다. ▶ 동일한 동작을 하는 프로그램을 짧은 코드로 구현시켜줍니다. ▶ 다양한 플러그인이 있습니다. ▶ 오픈 라이선스라서 누구나 자유롭게 사용할 수 있습니다. ▶ 대부분의 브라우저에서 지원합니다. ▶ 웹페이지 상에서 엘리먼트를.. 2022. 8. 29. [자바스크립트 응용] 슬라이드 효과 02 이미지 슬라이드 효과 02 저번 시간에 이어서 두번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 슬라이드유형1은 슬라이드 효과가 딱딱하게 바뀌어서 보는 맛이 밋밋하진 않으셨나요? 그래서 준비했습니다! 이번엔 슬라이드가 넘어가는 방식을 부드럽게 표현해보겠습니다. 그리고 자바스크립트 라이브러리 중에서 GSAP와 유명한 JQUERY로도 구현할 예정입니다. 잘 따라와 주세요💨 원본 소스 보기 원본 사이트 ▶ 이번 02유형은 라이브러리 중 GSAP와 JQUERY를 사용했어요! 그래서 원본소스에는 js, GSAP, JQUERY가 올라갈 예정입니다. 말로는 표현이 힘들기도 하고 이해도 잘 안되실 수 있어서 그림으로라도 준비해봤습니다. 오늘의 핵심은 밑의 그림을 참고하시면 되겠습니다. JS 소스 cons.. 2022. 8. 29. [자바스크립트 응용] 슬라이드 효과 01 이미지 슬라이드 효과 웹페이지를 보면서 가장 많이 접했을 유형이기도 한데요. 오늘은 이미지가 슬라이드 형식으로 변화하는 효과를 배워보겠습니다. 원본 소스 보기 원본 사이트 ▶ 슬라이드 유형 사이트는 iframe상의 '소스 보기'를 누르시면 각각 사용된 코드를 확인하실 수 있습니다. 그래서 이번엔 js소스만 올려드리고 같이 알아보는 시간을 가져볼게요. JS 소스 분석하기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderImg.querySelectorAll(".slider"); let currentIndex.. 2022. 8. 29. [CSS] 요소 숨기는 방법 : display, opacity, scale, visibility... CSS를 이용해서 요소 숨기기 여러분은 반응형웹을 하면서 요소를 숨기는 상황이 많지 않나요? 저는 그런 상황이 많더라고요! 그래서 여태까지 display:none만 이용했었는데 이 방법 말고도 더 많은 방법이 있단걸 알고 계신가요? 오늘은 CSS를 이용해서 요소를 숨기는 방법에 대해서 알아보겠습니다. ■ display: none; 레이아웃에는 영향을 주지 않습니다. 차지하던 공간자체도 사라지는 개념입니다. ■ visibility: hidden; 차지하던 공간은 유지한채로 컨텐츠만 사라집니다.고로 사라진 공간은 빈 공간으로 남게 됩니다. ■ width: 0; height: 0; 넓이와 높이를 0으로 지정해서 보이지 않게 하는 방법입니다. 제가 실험해보니 안에 텍스트가 들어가면 텍스트는 적용이 안되더라구요?.. 2022. 8. 26. [일러스트레이터] 사슴 그리기 일러스트레이터로 사슴그리기 저번시간에 이어서 일러스트레이터를 이용해서 사슴을 그려보겠습니다. 마찬가지로 스케치 파일을 깔아놓고 펜툴을 이용해서 작업해주세요. ■ 꿀팁 채색은 그라데이션툴을 이용하면 저번토끼작업처럼 펜툴을 이용해서 명암작업하지 않아도 그럴듯한 명암효과를 낼 수 있답니다. 여러분도 써보세요🎨 그리고 펜툴 사용법에 대해 아주아주아주 1%정도만 사진으로 설명드릴게요. 오늘의 그림은 펜툴의 진행방향을 잘 컨트롤 하실 수 있어야 그림을 이쁘게 작업할 수 있거든요. 추가로 "채색까지 완료된 그림의 색상을 변경하고 싶은데 언제 다시 색칠하지...?"라는 고민을 품고 계시진 않았나요? 그런분들께 드리는 color guide기능이 있습니다. 아래 사진과 함께하시죠! 스케치 파일을 준비해주세요. 펜툴을 이용.. 2022. 8. 24. 퀴즈 만들기06 / 객관식 다중형(슬라이드) 퀴즈 만들기_객관식 유형(슬라이드) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 문제 안의 변하는 내용들은 가변하는 값이지만 기본틀은 변함없으므로 html에서 필요한 부분(기본틀에 해당하는 요소들)만 작성합니다. 무엇이 빠지는 건지는 주석처리로 해놨으니 주석표시를 보시면서 확인해 주세요! 정답🐾 오답 입니다! 다음 문제 ≫ JAVASCRIPT 소스 if(quizInfo.length -1 == quizCount){ quizConfirm.innerHTML = "총 " + quizInfo.length +"문제 중 " + answerCou.. 2022. 8. 24. 퀴즈 만들기05/ 객관식 다중형 퀴즈 만들기_객관식 유형(다중) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 js를 이용해서 quiz__wrap안에 기존의 소스들을 반복해서 넣어주기 위해 안의 내용들은 제거합니다. JAVASCRIPT 소스 exam.push(``) quizWrap.innerHTML = exam.join(''); const exam = []으로 배열형식으로 exam을 지정했습니다. push()메서드는 값을 배열로 넣어주는 메서드인데요. 배열로 값이 들어가는 특성때문에 ,(쉼표)로 각각 구분이 됩니다. 그래서 저희가 원하는 기존의 소스형식대로 들어갈 .. 2022. 8. 24. [CSS] CSS에서 색을 표현하는 방법 CSS 색표현방법 CSS를 공부하시면서 가장 많이 사용되는 속성이 뭘까요? 바로 color입니다.🎨 그런데 단순히 color값을 지정한다고 하면 뭐 별거 있어요? "빨간색이면 빨간색이고 노란색이면 노란색이죠" 아니요~ 빨간색도 채도, 명도 등에 따라 정말 많은 색이 존재한답니다. 그렇다면 이 수많은 색상을 도대체 저흰 어떻게 표현해줘야할까요? 오늘은 이 색을 표현하는 방법에 대해 알아볼까 합니다. 01_ 색상명으로 표현하기 제가 소개글에 단순하게 "빨간색은 빨간색이죠"라고 말씀드렸듯이 가장 원초적인 방법입니다. 그냥 저희가 알고있는 색상명을 입력하는 것입니다. CSS에서는 140가지의 이름을 지원한다고 합니다. 일일히 나열할 수는 없어서 몇가지 색상만 예시로 보여드릴게요. ▶ 표현은 다음과 같이 합니다... 2022. 8. 24. [CSS]CSS 기본 단위 : %, vh, vw, em, rem 등등 CSS 단위 우리가 웹을 코딩 후 디자인을 할때 CSS를 사용해야 한다는 것은 당연히 알고 있는 사실인데요. 대부분이 px(픽셀)과 %단위만 알고 있지 다른 단위값도 있다는 것을 아시나요? 심지어 반응형 웹이 기본이 된 지금! 더 알고 있어야겠죠? 오늘은 이 CSS를 좀 더 정교하게 만들 수 있는 CSS의 기본이 되는 단위에 대해 낱낱히 파헤쳐 보겠습니다. | 절대 길이 단위 | 절대 길이 단위는 화면이 어떤 사이즈이던간에 항상 동일한 크기를 지니는 단위값입니다. 그래서 화면 출력보다는 인쇄에 사용할 때 더 유용합니다.단, 반응형을 고려하지 않을시에는 괜찮게 쓰입니다. ■ px 픽셀이라고 불리며, 가장 익숙한 단위입니다. 화면의 크기를 1920x1080이라 가정한다면 px은 가로: 1920개, 세로: 1.. 2022. 8. 24. 일러스트로 토끼 그리기 일러스트레이터로 토끼그리기 오늘은 일러스트레이터를 이용해서 토끼를 그려보겠습니다. 참고로 저는 왕초보라서 스케치사진을 구해서 밑배경을 깔아놓고 그위에 펜툴로 작업을 했답니다🤗 (작업은 일러스트레이터CS6로 했습니다.) ■ 작업과정 ▶토끼 스케치 이미지 파일을 불러와서 일러스트의 레이어 맨밑으로 배치를 합니다. 이후 저희가 작업중에 실수로 눌릴 경우를 대비해 레이어를 반드시 잠금처리 해주세요. ▶펜툴을 이용해서 스케치를 따라 토끼를 그립니다!🐰 ▶완성된 토끼를 어딘가에 백업해두시고... 채색을 위해 [Object]-[Expand]or[Expand Apperance]를 합니다. 이후에 [Live Paint-make]를 눌러주시고...원하시는 색을 마구마구 입혀주세요! ▶명암 작업을 위해서 다시한번 펜툴을 이.. 2022. 8. 22. 서치 이펙트03 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 이번엔 일치하는 단어를 찾는것이 아니라 알파벳 순으로 찾기를 만들어 볼게요. 또 알파벳순으로 검색된 이후에 나타난 검색 속성값의 갯수를 구해보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 charAt()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열에서 지정한 index(위치값)에 해당하는 값을 문자열로 출력합니다. const str1 ="javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a .. 2022. 8. 22. charAt()메서드 charAt() 이 함수는 문자열 메서드 중 하나입니다. 오늘도 열심히 함수에 대해 배워보자구요! ■ 개념 이 함수는 문자열에서 지정한 index(위치값)에 해당하는 값을 문자열로 반환합니다. ■ 문법 "문자열".match("검색값"); "문자열".match(정규식); ■ 특징 ▶index가 문자열 길이를 벗어나면 빈 문자열을 반환합니다. ▶index를 제공하지 않으면 기본값이 0입니다. ■ 예제 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 ="javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3.. 2022. 8. 22. match() 메서드 match() 이 함수는 문자열 메서드 중 하나입니다. 오늘도 열심히 함수에 대해 배워보자구요! ■ 개념 이 함수는 문자열을 찾아 배열로 반환합니다. 이 메서드도 정규식을 지원합니다. ■ 문법 "문자열".match("검색값"); "문자열".match(정규식); ■ 특징 ▶정규식을 지원합니다. ■ 예제 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 ="javascript reference"; const currentStr1 = str1.match("javascript"); //['javascript'] const currentStr2 = str1.match("reference"); //['reference'] const currentStr3 = str1.matc.. 2022. 8. 22. search() 메서드 search() 이 함수는 문자열 메서드 중 하나입니다. 오늘도 열심히 함수에 대해 배워보자구요! ■ 개념 이 함수는 문자열에서 조건 문자열을 찾아서 몇번째 위치에 있는지 찾아주는 함수입니다. 조금 더 쉽게 말하자면 문자열의 index값(위치값)을 숫자로 반환합니다. 찾지 못하는 경우 -1을 반환하게 됩니다. ■ 문법 "문자열".search("검색값"); "문자열".search(정규식 표현); ■ 특징 ▶위치값을 찾아서 숫자로 반환해주는게 저번에 알려드렸던 indexOf()와 굉장히 유사한데요. indexOf()와 다른점은 정규식을 지원한다는게 가장 큰 차이입니다. ■ 예제 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 ="javascript reference.. 2022. 8. 22. 함수의 유형 함수의 유형 함수는 저번에 함수에 대해서 배웠듯이 '선언적함수(일반 함수 문법), 익명 함수, 매개변수 함수, 리턴값 함수'로 나뉩니다. 이번에는 이 함수들을 응용해서 실전에서 자주 쓰이는 함수의 여러가지 유형에 대해서 배워보겠습니다. 함수가 뭔지 모른다구요? 얼른 달려가서 보고 와주세요!!! (☞함수 기본☜) 01_ 함수와 매개변수를 이용한 형태 함수와 매개변수를 응용한 케이스입니다. 각 매개변수에 실행문에 기입한 변수를 대입시켜 출력할 수 있습니다. function func(num, str1, str2){ document.write(num+"."+str1+str2+"되었니?"); } func("1", "함수", "실행"); //각각 "1" = "num", "함수" = "str1", "실행" = "st.. 2022. 8. 22. 이미지 스프라이트 기법과 백그라운드 표현방법, IR효과 이미지 스프라이트와 백그라운드 표현 이 기법은 우리나라에서 아무도 모를 수가 없는 대표 사이트 '네이버'에서 자주 사용되는 기법입니다. 이게 도대체 무슨 기법이길래 네이버에서 사용을 할까요? 같이 알아보자구요! ■ 개념 여러 개의 이미지를 하나의 이미지로 합쳐 관리하는 이미지를 뜻합니다. 웹 페이지가 서버에 이미지를 요청할 때, 사용된 이미지가 많은 경우 당연히 이미지의 수 만큼 요청을 하므로 로딩 시간이 오래 걸리겠죠? 하지만 위의 개념대로 여러개의 이미지가 들어가 있는 하나의 이미지만 요청한다면 로딩시간을 대폭 감소시킬 수 있습니다. ■ 장점 - 많은 이미지를 각각 서버에 요청하면 로딩 시간이 오래 걸릴 수 밖에 없는데, 뭉쳐진 이미지를 하나만 부르면 되므로 로딩시간이 현저히 감소합니다. - 많은 이.. 2022. 8. 21. 블록/인라인 구조 블록/인라인 오늘은 웹사이트의 기본중의 기본이죠. 비전공자도 어디선가 들어봤을법한 키워드! 정말 이것도 모르고 어디가서 코딩한다고 하면 안되겠죠? 블록 구조와 인라인 구조에 대해서 알아보겠습니다. 각각 간단히 설명 후 비교하여 설명하는게 더 이해하기 쉬우므로 비교위주로 설명 들어갈게요~ 01_ 블록 레벨 요소 마크업 할 때 줄이 바뀌는 특성을 가집니다. 좀 더 알기 쉽게 표현하자면 한줄에 하나만 표현된다는 것입니다. 즉, 가로 정렬이 안되는 것입니다. 블록 레벨 요소 블록 레벨 요소 블록 레벨 요소 블록 레벨 요소 //결과 블록 레벨 요소 블록 레벨 요소.. 2022. 8. 21. 웹사이트 만들기/ImageType 03 사이트 만들기 _ 이미지 유형03 이번 시간은 이미지 유형 세번째 시간입니다. 5개의 이미지로 구성되어 있으며 마우스 오버시 아이콘과 내용이 출력되게 구성해 보겠습니다. 여태까지는 flex를 사용했지만 이번구조는 flex를 사용하게 되면 2-5번째 이미지를 한 박스로 묶어서 작업하다보니 추후에 불편할 수 있으므로 이번엔 grid를 이용해서 레이아웃을 작업할게요! 앞서 말씀드렸듯 이번 구조는 gird를 이용해서 작업했습니다. 이번 구조는 와이드웹구조라서 기존에 사용하던 1160px의 구조로는 구현할 수 없습니다. 그래서 사용한게 다음과 같은 속성값입니다. .container-fluid{ width: 100%; padding: 0 100px; box-sizing: border-box; } 와이드 웹이다보니 .. 2022. 8. 21. 이전 1 2 3 4 5 6 다음 반응형
