본문 바로가기

CODING166

웹사이트 만들기 : 이미지 텍스트 유형 레이아웃01 레이아웃 : 이미지 텍스트 유형01 다음과 같은 이미지와 텍스트가 혼합된 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스 안에 텍스트와 첫번째 이미지, 두번째 이미지를 삽입할 div 박스를 3개 만들어 주었습니다. 텍스트 박스에는 제목, 설명, 내용 목록을 작성해 주었고, 이미지 박스에는 이미지와 링크를 작업해 주었습니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 소스 세 개의 div 박스는 flex와 space-between.. 2022. 9. 1.

웹사이트 만들기 : 헤더 유형 레이아웃01 레이아웃 : 헤더 유형01 다음과 같은 헤더 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 헤더 유형은 header__wrap 안에 header__inner 박스를 만들어 주고, logo, menu, member의 세 부분으로 나누어 주었습니다. logo에는 웹사이트의 제목(로고), menu에는 다섯 가지의 메뉴, member에는 로그인 버튼을 만들어 주었습니다. web site 헤더 영역 슬라이드 영역 배너 영역 콘텐츠 영역 푸터 영역 로그인 CSS 소스 각각의 위치는 flex, space-between 속성을 이용해 설정해 주었습니다. 각각의 메뉴 버튼, 로그인 버튼에는 마우스를 대면 background 색상이 점차적으로 변화하는 hover 효과를 추가해 주었습니다. /* headerTy.. 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축 값(문서 기준) elemen.. 2022. 9. 1.

제이쿼리 : 탐색 선택자 제이쿼리 : 탐색 선택자 오늘은 JQuery의 탐색 선택자에 대하여 알아보도록 하겠습니다. 1. 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃03 레이아웃 : 텍스트 유형03 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 제목을 적어 주고, 카드 부분은 contents 박스를 만들어, contents 박스 안에 세 개의 card를 만들어 주었습니다. 각각의 카드는 내용 부분과 info 부분, 링크 부분으로 나누어 주었습니다. info 박스는 icon과 정보 부분으로 나누어 주었습니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달 전만 해도 여러 원인들로 인해 자존감이 밑바닥이었던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음 속으로 울고 싶다를 외쳤던 저였는데 이제는 조금이나마 이겨낼 수 있을 것 같네요. 다음에 선생님을 만났을 때는 많.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃02 레이아웃 : 텍스트 유형02 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 title과 contents 박스를 만들어준 뒤, section 클래스에 display: flex, space-between 속성을 추가해 레이아웃을 배치했습니다. title 안에는 sub title 상자, title, desc를 만들어 주었습니다. contents는 top과 bottom으로 나누어, 각각 두 개의 card가 배치되도록 작업해 주었습니다. TEXT TYPE02 귀여운 동물들 전문과정 세상의 귀여운 댕댕이... 귀여운 고양이... 귀여운 다람쥐... 귀여운 고라니... 귀여운 알파카... 귀여운 고릴라... 세상의 귀여운 댕댕이 귀, 귀, 귀 자로 끝나는 말.. 2022. 8. 31.

제이쿼리 : 필터 선택자 제이쿼리 : 필터 선택자 지난 시간에 이어 오늘은 필터 선택자에 대하여 알아보도록 하겠습니다. 필터 선택자는 선택자에 ':'이 붙은 선택자를 말합니다. 1. 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. ... 2022. 8. 30.

웹사이트 만들기 : 텍스트 유형 레이아웃01 레이아웃 : 텍스트 유형01 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스를 만들어 주고, 그 안에 text__card 클래스명을 가진 div 박스를 만들어 주었습니다. 총 6개의 카드를 만든 뒤, 각각의 카드 안에는 아이콘과 제목, 설명, 더보기 버튼을 추가해 주었습니다. 텍스트 유형01 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더 더보기 세상의 귀여운 야옹이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효.. 2022. 8. 30.

제이쿼리 : 속성 선택자 제이쿼리 : 속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 속성 선택자에 대하여 알아보도록 하겠습니다. 1. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 .. 2022. 8. 30.

제이쿼리 : 기본 선택자 제이쿼리 : 기본 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 기본 선택자에 대하여 알아보도록 하겠습니다. 1. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다.. 2022. 8. 30.

제이쿼리 : 연결 방법 제이쿼리 : 연결 방법 JQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. JQuery를 이용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 1. JQuery의 장점 1. JQuery는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다. 4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다. 5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다. 6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있.. 2022. 8. 29.

자바스크립트 : GSAP란? 자바스크립트 : GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS나 JQUERY로 구현하는 것이 일반적이지만, 그 이상의 복잡한 애니메이션을 보다 간단하게 구현하기 위해 탄생한 것이 바로 GSAP입니다. 오늘은 GSAP의 사용법을 간단하게 알아보도록 하겠습니다. 1. CDN에서 라이브러리 가져오기 CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말합니다. GSAP이나 jQuery의 라이브러리를 호스팅된 서버에 직접 설치해서 사용할 수도 있지만, CDN을 사용하면 클라이언트가 직접 자신의 위치로 라이브러리를 전송받게 됩니다. 위와 같이, 라이브러리를 사용하려면 js파일의 .. 2022. 8. 29.

CSS 애니메이션 만들기 : 굴러가는 네모 CSS 애니메이션 : 굴러가는 단무지 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation01 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 단무지의 그림자는 가상요소로 작업해줄 것이기 때문에, HTML 소스는 box 클래스를 가진 div 박스 하나로 충분합니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; .. 2022. 8. 29.

CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원 CSS 애니메이션 : 빙글빙글 돌아가는 원 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.. 2022. 8. 29.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 왼쪽으로 미끄러지듯이 이미지가 넘어가는 효과를 추가해준 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .slider__wrap { width.. 2022. 8. 29.

자바스크립트 슬라이드 효과 : transition 자바스크립트 : 슬라이드 효과 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, slider__img 박스 안에는 이미지 5장을 삽입해 주었습니다. CSS 소스 각각의 이미지가 담긴 slider 클래스에는 absolute와 z-index 속성을 부여함으로써 이미지를 층층이 쌓아, 한 장처럼 보이게끔 작업해 주었습니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-item.. 2022. 8. 29.

CSS : 요소 숨기기 CSS : 요소 숨기기 우리가 코딩을 할 때, 때때로 웹 접근성 준수, 탭 효과 등을 이유로 어떠한 요소가 화면에서 보이지 않도록 설정해야 할 필요가 있습니다. 오늘은 CSS로 요소를 숨기는 5가지 방법에 대하여 알아보겠습니다. 1. display로 속성 주기 display: none; display는 요소가 화면에 보여지는 방식을 결정하는 속성입니다. display: none; 속성을 추가하면 요소를 숨길 수 있습니다. 이 방법은 애니메이션을 사용할 수 없고, 요소가 차지하는 영역이 사라집니다. 2. opacity 속성 주기 opacity: 0; opacity는 요소의 투명도를 의미합니다. 요소의 투명도를 0으로 처리하는 이 방식은, 요소가 불투명해지는 애니메이션을 사용할 수 있습니다. 요소가 차지하는.. 2022. 8. 25.

자바스크립트 퀴즈 효과 : 객관식(여러 문제 유형) : 슬라이드 형식 자바스크립트 : 퀴즈 효과 : 슬라이드 형식 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하고, '다음 문제' 버튼을 누르면 다음 문제로 이동하는 슬라이드 형식으로 퀴즈를 작업했습니다. 객관식(여러 문제) 유형 : 슬라이드 형식 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2013년 01회", a.. 2022. 8. 24.

Illustrator : 사슴 그림 그리기 일러스트레이터 : 사슴 그림 그리기 오늘은 일러스트레이터를 활용하여 사슴 그림을 그려보도록 하겠습니다. 스케치 작업 다음과 같은 사슴 그림을 그려볼 예정입니다. 이미지에 투명도를 설정해 주고, 펜 툴(Pen tool, 단축키 P)로 선을 그어주며 스케치 작업을 먼저 해 주었습니다. 선 두께는 우선 1px로 작업하고, Shift + W을 사용하여 세세하게 조절해 주었습니다. 토 나오는 과정입니다. 누구든 저의 노고를 알아주시면 좋겠습니다. 채색 작업 스케치 작업을 마무리했다면, 채색을 해줍니다. 채색 작업을 하기 전, 메뉴의 Object에서 Expand Appearance 작업을 먼저 해 줍니다. 이후, 메뉴의 Object에서 Live Paint를 만들어 줍니다. Live Paint를 사용하면 단축키 K와.. 2022. 8. 24.

자바스크립트 퀴즈 효과 : 객관식(여러 문제) 유형 : 웹디자인기능사 2013년 2회 기출 60문제 자바스크립트 : 퀴즈 효과 : 웹디자인기능사 2015년 2회 기출 문제 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제의 객관식 정답을 선택하는 퀴즈 유형을 작업해 보도록 하겠습니다. 객관식(여러 문제) 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 : 배열 안에 객체를 넣은 형태로 각 문제를 작성했습니다. const quizInfo = [ { answerType: "웹디.. 2022. 8. 24.

CSS : 색상 표현 방법 색상 표현 방법 CSS에서 색상을 표현하는 방법에는 여러 가지가 있습니다. 대표적인 방법 몇 가지를 알아보도록 하겠습니다. 1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 브라우저에는 약 140가지의 색상 이름들이 정의되어 있습니다. 적용 예시를 살펴보겠습니다. 멋진 빨간색 글자 멋진 주황색 글자 멋진 파란색 글자 멋진 빨간색 글자 멋진 초록색 글자 멋진 파란색 글자 2. HEX값으로 표현 #RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법입니다. RR, GG, BB는 각각 red, green, blue를 나타내는 값으로, 16진수 00에서 FF사이의 값으로 결정됩니다. 적용 예시를 살펴보겠습니다. 노잼 검정색 글자 촌스러운 분홍색 글자 민트색 같은 글자 아무렇게나 써본 글자 노잼 검.. 2022. 8. 23.

CSS : 단위 CSS : 단위 오늘은 CSS에서 유용하게 사용하는 단위에 대하여 알아보겠습니다. 참고로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다. font-size: 150%; 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다. em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로서, 다음과 같이 표현합니다. font-size: 1.5em; 특별한 설정이 없다면 16px이 1em이.. 2022. 8. 23.

자바스크립트 : 함수의 유형 함수의 유형 자바스크립트에서 함수의 유형은 여러 가지가 있습니다. 오늘은 다양한 함수의 유형에 대하여 알아보겠습니다. 1. 함수와 매개변수를 이용한 형태 자바스크립트에서 함수의 특징은 실행문의 집합체라는 점과, 재활용이 가능하다는 점입니다. 함수와 매개변수를 이용하면, 다음과 같이 함수를 재활용할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " +str2 + "되었습니다.") } func("1", "함수", "실행"); // 매개변수를 str1, str2로 전달 func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 .. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : charAt() 문자열 검색 메서드 : charAt() charAt() 메서드는 문자열에서 특정 인덱스에 위치하는 값을 반환합니다. charAt() 메서드 "문자열".charAt(숫자) const str1 = "javascript reference"; const currentStr1 = str1.charAt(); const currentStr2 = str1.charAt("0"); const currentStr3 = str1.charAt("1"); const currentStr4 = str1.charAt("2"); 결과보기 j j a v 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : match() 문자열 검색 메서드 : match() match() 메서드는 문자열(정규식 포함)을 검색하고, 배열로 반환합니다. match() 메서드 1. "문자열".match("검색값") const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); const currentStr2 = str1.match("reference"); const currentStr3 = str1.match("r"); 결과보기 javascript reference r 2. "문자열".match(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.match(/reference/); co.. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : search() 문자열 검색 메서드 : search() search() 메서드는 문자열(정규식 포함)을 검색하고, 위치값(숫자)을 반환합니다. indexOf() 메서드와 같지만, search() 메서드는 정규식을 사용할 수 있다는 점에서 차이가 있습니다. search() 메서드 1. "문자열".search("검색값") const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); const currentStr2 = str1.search("reference"); const currentStr3 = str1.search("j"); const currentStr4 = str1.search("a"); const currentStr5 = st.. 2022. 8. 22.

자바스크립트 검색 효과 : charAt() 자바스크립트 : 검색 효과 : charAt() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 charAt() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 알파벳 선택창, 하위 목록들을 작성해 주었습니다. 각 알파벳이 쓰인 버튼을 클릭하면, 해당하는 알파벳으로 시작하는 속성들이 목록에 나타납니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g.. 2022. 8. 22.

Illustrator : 토끼 그림 그리기 일러스트레이터 : 토끼 그림 그리기 오늘은 일러스트레이터를 활용하여 그림을 그리는 방법을 알아보도록 하겠습니다. 스케치 작업 다음과 같은 토끼 그림을 그려볼 예정입니다. 펜 툴(Pen tool, 단축키 P)로 선을 그어주며 스케치 작업을 먼저 해 주었습니다. 선 두께는 우선 1px로 작업하고, Shift + W을 사용하여 세세하게 조절해 주었습니다. 채색 작업 스케치 작업을 마무리했다면, 채색을 해줍니다. 채색 작업을 하기 전, 메뉴의 Object에서 Expand Appearance 작업을 먼저 해 줍니다. 이후, 메뉴의 Object에서 Live Paint를 만들어 줍니다. Live Paint를 사용하면 단축키 K와 Alt(스포이트)를 활용하여 손쉽게 채색 작업을 할 수 있습니다. 다음과 같이 채색을 마.. 2022. 8. 22.

CSS : 이미지 스프라이트(image sprite) 이미지 스프라이트(Image Sprite) 오늘은 이미지 스프라이트 기법에 대하여 알아보겠습니다. 이미지 스프라이트란? 이미지 스프라이트란, 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다. 이럴 때, 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로, 매우 간편합니다. 이미지 스프라이트 만들기.. 2022. 8. 22.

HTML : 블록 구조와 인라인 구조 블록 구조와 인라인 구조 HTML 태그를 배우기 전에는 요소의 유형과 성질을 먼저 알아두어야 합니다. 요소의 유형은 '블록 구조'와 '인라인 구조'로 나누어집니다. 블록 구조와 인라인 구조의 특징 요소 유형 특징 블록 구조 1. 블록 구조는 줄 바꿈이 일어납니다. 2. 블록 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 블록 구조 중에는 블록 구조를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. 인라인 구조 1. 인라인 구조는 줄 바꿈이 일어나지 않습니다. 2. 인라인 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 인라인 구조는 블록 구조를 자식 요소로 포함할 수 없습니다. HTML5로 넘어오면서 블록 구조와 인라인 구조.. 2022. 8. 21.

이전 1 2 3 4 5 6 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바