본문 바로가기

KATEGORIE159

[CSS] 애니메이션04 : 웨이브~~웨이브~~ CSS : 애니메니션 만들기 : 물결 웨~이부~~~ 🌊 🌊 이번 시간에는 CSS 실습으로 원들이 훌랄라 하는 듯한 애니메이션을 만들어보겠습니다. 😄 오늘 실습의 포인트는 퍼그와 SCSS 그리고 반복문입니다~! #1. PUG 다음은 PUG 코드와 컴파일한 HTML 코드 입니다! 🐶 PUG div.circle-wrap - for (var x =1; x 2022. 9. 19.

[VSCODE] SCSS 설치 및 적용하기 VSCODE : SCSS 설치하기 안녕하세요~! 토매토 입니다 🍅 이번 시간에는 vscode에서 SCSS를 설치하고 사용하는 방법을 알아볼텐데요! 우선 아래의 확장 프로그램(extension)을 다운받아 주세요! 🔶 01. Sass 🔶 02. Live Sass Compiler 아래의 Live Sass Compiler는 실시간으로 SCSS를 CSS로 컴파일 시켜주는 확장 프로그램입니다. 다운 모두 받으셨나요? 그럼 다음의 방법과 함께 차근차근 적용시켜보겠습니다~! 1. 먼저 cmd + ⇧ + p 또는 F1을 눌러서 'json'을 검색한 후 'settings.json'에 들어갑니다. (들어가는 방법은 지난 에러 솔루션을 참고하시면 됩니다~! ) 2. 그 다음 다음의 코드를 중괄호 안에 넣어주면 됩니다. "l.. 2022. 9. 19.

[EFFECT] 슬라이드 효과 04 : 버튼으로 이미지 이동시키기! 이미지 슬라이드 : 버튼을 통해 슬라이드 움직이기 (왼쪽 오른쪽 모두 동작) 이번 시간에는 자동으로 넘어가지 않고 버튼을 클릭했을 때 해당 순서로 이미지가 넘어가도록 구현해보겠습니다! 🥹 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. 구조는 지난 시간과 똑같으나 slider__img 밑에 형제 요쇼로 버튼 영역을 선언해주었습니다! ✏️ HTML 스크립트 보기 prev next ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지.. 2022. 9. 19.

[EFFECT] 마우스 효과 02 : 커서 따라다니기 🖱 마우스 효과 : 마우스 커서 따라다니기 🖱 이번 시간에는 해당 영역에 커서가 닿았을 때 이벤트가 발생하는 효과에 이어서 커서를 따라다니는 요소를 구현해보겠습니다 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다. 또한 텍스트에서 스타일 변경 및 이벤트를 발생시키고 싶은 곳에 각각 선택자를 선언합니다. ✏️ HTML 스크립트 보기 Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기(GSAP) 1 2 3 4 5 6 7 Energy and persistence conquer all things 기운과 끈기는 모든 것을 이겨낸다. ! .. 2022. 9. 19.

[EFFECT] 페럴렉스 효과 04 : 나타내기 효과 🖱 페럴렉스 효과 : 스크롤을 내릴 때 요소 나타내기🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 스크롤을 내릴 때 각 섹션의 요소들이 개별적으로 에니메이션 동작을 하도록 실습해보겠습니다~!🤩 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 section4 먼저 핀 꽃은 .. 2022. 9. 19.

[SITE] 통합 유형 웹사이트 제작하기 01 : 애니멀 유치원 SITE 만들기 지금까지 웹페이지에 들어가는 기본적인 유형들을 실습해보았죠? 이번에는 지금까지 배웠던 유형들을 합쳐서 실제 웹페이지 + 반응형을 함께 제작해보겠습니다. 🫠 특히 이번 슬라이더 유형은 직접 자바스크립트를 구현하지 않고 스와이퍼라는 슬라이드 프리소스를 사용하여 제작해보았습니다. 📖 Swiper란? 슬라이드 이펙트를 간단히 작성할 수 있도록 공개된 무료 소스로 HTML, CSS, JAVASCRIPT를 모두 지원해줍니다. 제작하기 전 사이트의 구성 요소를 정해줍니다. #1. HTML 헤더와 푸터 유형을 제외한 유형들은 메인 영역에 섹션별로 나누어 저장하였습니다. 항상 강조했지만 웹사이트를 제작할 땐 웹표준과 접근성, 호환성을 반드시 지키도록 합니다. 특히 사이트.. 2022. 9. 15.

[EFFECT] 페럴렉스 효과 03 : top버튼 구현과 메뉴 숨김 효과 🖱 페럴렉스 효과 : top 버튼 구현하기🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 top버튼을 누를 때 스크롤이 최상단으로 부드럽게 이동하는 효과를 실습해보겠습니다. 추가로 버튼이 가장 하단에서만 보이게 하고 메뉴 버튼도 스크롤을 내릴 시 보이지 않도록 구현해보겠습니다 😆 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 se.. 2022. 9. 14.

[EFFECT] 페럴렉스 효과02 : 스무스~한 버튼 이동 🖱 페럴렉스 효과 : 사이드 메뉴 이동 효과🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 사이트 메뉴 버튼을 눌렀을 때(active) 해당 화면으로 스크롤이 부드럽게 이동하는 효과를 실습해보겠습니다. 😆 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 se.. 2022. 9. 14.

[CSS] 애니메이션 실습 : 걷기 애니메이션 (from.토매토) CSS : 애니메니션 만들기 : 걸어가는 토매토 이번 시간에는 CSS실습으로 귀여운 걷기 애니메이션을 만들어보겠습니다. 😄 border-radius Start Stop #1. HTML 다음은 HTML 코드 입니다! Start Stop #2. CSS 다음은 CSS 코드 입니다! .step { height: 700px; background: #fde7ef; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://user-images.githubusercontent.com/106949433/188998629-e1cb8ac8-0263-4b69-935d-eacd186c2535.jpg); border-rad.. 2022. 9. 8.

[CSS] CSS 애니메이션에 대해 알아보자! CSS : 애니메이션(animation) 이번 시간에는 CSS로 표현할 수 있는 애니메이션 속성들에 대해 알아보겠습니다! 😄 #1. animation 속성의 기본 표현 animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 애니메이션: 이름 | 지속시간 | 타이밍 기능 | 지연시간 | 방향 | 채우기 모드 | 재생 상태 #2. animation의 종류 다음은 animation의 종류입니다~! 표를 보며 함께 알아봅시다! 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. .. 2022. 9. 8.

[CSS] SVG : 애니메이션 구현하기 CSS : SVG를 이용하여 애니메이션 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽으로 애니메이션을 구현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • .. 2022. 9. 8.

[CSS] SVG : 백터 그래픽 도형 표현하기 CSS : SVG를 이용하여 백터 그래픽 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽을 표현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • 벡터 방식이기.. 2022. 9. 8.

[EFFCET] 페럴렉스(parallax) 효과 : 메뉴 이동 🖱 페럴렉스 효과 : 메뉴 스크롤링 효과 🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 버튼을 눌렀을 때(active) 해당 화면으로 스크롤이 부드럽게 이동하는 효과와 스크롤을 내릴 때 해당 버튼이 강조되는 효과를 실습해보겠습니다. 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 섹션 별로 구조를 설정합니다. 이 때 큰 틀부터 구조를 설정하는 것이 중요한 포인트 입니다! 구조는 먼저 크게 nav : 메뉴 | main : 메인 콘텐츠(이미지, 텍스트) | aside : 스크롤의 위치값으로 나누어 줍니다. 세부적인 구조는 아래의 코드를 참고하시기 바랍니다! ✏️ H.. 2022. 9. 7.

[SITE] 웹사이트 - 푸터 유형 01 FooterType01 웹페이지 실습을 위한 푸터 유형을 실습해보겠습니다! 이번 푸터 유형은 텍스트와 비슷한 유형으로 웹사이트 가장 하단에 위치합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용.. 2022. 9. 6.

[SITE] 웹사이트 - 배너 유형01 BannerType01 웹페이지 실습을 위한 배너 유형을 실습해보겠습니다! 이번 배너 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용.. 2022. 9. 6.

[SITE] 웹사이트 - 슬라이드 유형01 SliderType01 웹페이지 실습을 위한 슬라이드 유형을 실습해보겠습니다! 이번 슬라이드 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 슬라이드 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2.. 2022. 9. 6.

[EFFECT] 마우스 효과 01 : 커서 따라다니기 🖱 마우스 효과 : 마우스 포인터 따라다니기 🖱 이번 시간에는 마우스 커서를 움직임에 따라 해당 영역에 커서가 닿았을 때 이벤트가 발생하는 효과를 실습해보겠습니다 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다. 또한 텍스트에서 스타일 변경 및 이벤트를 발생시키고 싶은 곳에 각각 선택자를 선언합니다. ✏️ HTML 스크립트 보기 The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려 있다. clientX : 0px clientY : 0px offsetX: 0px offsetY: 0px pa.. 2022. 9. 6.

[JAVASCRIPT] mouseover와 mouseenter의 이벤트 차이점 자바스크립트 : Mouse Event Method 이번 시간에는 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이점에 대해 알아보겠습니다 ~ 😁 #1. mouseover와 mouseout 메서드 📖 • mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. • mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다. 💡 이처럼 mouseover 메서드는 mouseout 메서드와 짝을 이루기 때문에 꼭 함께 사용해주어야 합니다! #2. mouseenter와 mouseleave 메서드 📖 mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서.. 2022. 9. 6.

[ERROR] VSCODE : 맥북 Prettier 설정 오류 해결 방법 (+윈도우) 안녕하세요! 이번 시간에는 vscode 확장팩 중 코드 정렬을 자동으로 설정해주는 Prettier 설정하는 방법에 대해 알아보겠습니다. 🧐 1. 먼저 vscode에서 아래의 확장팩을 설치해주세요! 2. 설치가 끝난 후 오른쪽 하단 설정(settings)에 들어가서 'editor format on save'를 검색합니다. 다음 화면에 나오는 것처럼 체크박스를 클릭해주면 됩니다. 그 다음 정렬이 되는 지 확인하기 위해 html 아무 문서로 들어가 cmd + s (윈도우 에서는 ctrl + s)를 눌러줍니다. 정렬이 자동으로 된다면 완료입니다👍 💡 만약 체크를 해도 실행이 되지 않는 경우! 어라라? 체크하고 다시 껐다 켜도 실행이 되지 않는 경우에는 다음과 같은 코드를 추가적으로 입력하시면 됩니다. 1. 먼저.. 2022. 9. 5.

[JQUERY] 스타일 메서드 Jquery : 스타일 관련 메서드 이번 시간에는 css 속성을 추가할 수 있는 jquery 스타일 관련 메서드에 대해 알아보겠습니다.🧐 #1. jquery : css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성 / 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 함수 $("div").attr("width", function(index, w) { //index는 각 div 요소의 index 0,1,2 //w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 c.. 2022. 9. 5.

[JQUERY] 속성 메서드 Jquery : 속성 관련 메서드 이번 시간에는 자바스크립트의 jquery 속성 관련 메서드에 대해 알아보겠습니다.😆 #1. jquery : attr() 메서드 attr()메서드는 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성 / 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 div 요소의 index 0,1,.. 2022. 9. 5.

[JQUERY] 클래스 메서드 Jquery : 클래스 관련 메서드 이번 시간에는 자바스크립트의 jquery 클래스 관련 메서드에 대해 알아보겠습니다.😆 #1. 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() 메서드 예제 See the Pen Unti.. 2022. 9. 5.

[EFFCET] 이미지 : 슬라이드 유형03 이미지 슬라이드 : 연속적으로 움직이기 지난 시간에는 슬라이드가 좌측으로 이동하는 타입으로 마지막에서 슈루룩~ 첫번째로 돌아갔다면 이번 시간에는 이미지가 자연스럽게 넘어가도록 2초 지날 때마다 이미지가 연속적으로 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이.. 2022. 9. 2.

[SITE] 웹사이트 - 이미지 텍스트 유형01 ImageTextType01 웹페이지 실습을 위한 이미지/텍스트 유형을 실습해보겠습니다! 이번 이미지/텍스트 유형은 이미지와 텍스트 영역이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 이미지/텍스트 타입으로 각 주제와 영역에 맞게 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수.. 2022. 9. 2.

[SITE] 웹사이트 - 헤더 유형01 HeaderType01 웹페이지 실습을 위한 헤더 타입 유형을 실습해보겠습니다! 헤더 타입은 보통 가장 위에 위치하며 로고와 메뉴 로그인 버튼 등의 구성 요소를 가지고 있습니다!! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 헤더 유형이기 때문에 크기에 맞게 프레임을 조정하여 맞춰줍니다. 메뉴는 꼭 메인 영역에 위치하도록 합니다! 특히 글자 간 간격과 정렬을 잘 지켜줍시다! 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 큰 덩어리부터 차근차근 구조를 짜는 것이 중요.. 2022. 9. 2.

[JAVASCRIPT] 요소의 크기 및 위치를 표현하는 속성, 메서드 자바스크립트 : 요소 크기 및 위치 속성과 메서드 이번 시간에는 자바스크립트의 요소의 위치 및 크기를 표현하는 속성과 메서드들을 알아보겠습니다.😇 다음의 표를 통해 알아봅시다. #01. 요소의 속성 및 메서드 요소 크기 속성 설명 element.clientWidth 요소의 가로 값 (패딩 / 보더 / 마진 미포함) element.clientHeight 요소의 세로 값 (패딩 / 보더 / 마진 미포함) element.clientTop 요소의 Y축 값 (부모기준) element.clientLeft 요소의 X축 값 (부모 기준) element.offsetWidth 요소의 가로 값 (보더 / 패딩 포함) element.offsetTop 요소의 Y축 값 (문서 기준) element.offsetLeft 요소의 X축.. 2022. 9. 1.

[SITE] 웹사이트 - 텍스트유형03 TextType03 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 지난 유형들에 비해 조금 더 심화 버전입니다...! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 🫠 🫠 레이아웃 그리드 및 안내선을 이용하여 레이아웃 디자인을 완성합니다! 이젠 익숙해진 이미지스프라이트 기능을 위해 프레임을 추가하여 프로필 아이콘을 60px / 별점 아이콘 102px 씩 배치시켰습니다. 꼭 간격을 잘 맞춰주세요~! 😇 ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가장 중요합니다.(웹표준 준수 필수!) • 웹표준과 웹 접근성, 호환성을 놓치지 않도록 합니다. • 공통 선택자와 각각의 .. 2022. 9. 1.

[SITE] 웹사이트 - 텍스트유형02 TextType02 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 😆 이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다! 지난 텍스트 유형01과 똑같이 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가.. 2022. 9. 1.

[JQUERY] 탐색 선택자 Jquery : 탐색 선택자 이번 시간에는 자바스크립트의 jquery 탐색 선택자에 대해 알아보겠습니다.😆 #1. jquery 탐색 선택자 다음은 제이쿼리의 탐색 선택자를 정리해놓은 것입니다! 함께 탐색 선택자 종류를 알아볼까요?! 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parent("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 .. 2022. 8. 31.

[JQUERY] 필터 선택자 Jquery : 필터 선택자 이번 시간에는 자바스크립트의 jquery 필터 선택자에 대해 알아보겠습니다.😆 #1. jquery 기본 필터 선택자 필터 선택자는 선택자에 : (클론)이 붙은 선택자를 의미합니다. 다음의 표를 보며 필터 선택자의 종류를 알아봅시다! 선택자 종류 설명 :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 요소를 선택합니다. **in.. 2022. 8. 31.

이전 1 2 3 4 5 6 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바