본문 바로가기

이미지3

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

자바스크립트 슬라이드 효과 : 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 : 비트맵 방식과 벡터 방식 비트맵 방식과 벡터 방식 오늘은 비트맵 방식과 벡터 방식의 차이에 대하여 알아보겠습니다. 그 전에, 픽셀(Pixel)이라는 개념을 알아야 합니다. 픽셀이란? 픽셀이란 Picture(그림) + Element(원소)의 합성어로서, 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. BMP, GIF, JPEG, PNG가 픽셀을 사용하는 대표적인 포맷으로, 이를 '비트맵 이미지'라고 합니다. 비트맵 방식이란? 비트맵 방식은 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 달리 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터에 비하여 정교한 이미지 표현이 가능합니다. 픽셀의 수가 많아질수록 화질은 뛰어나지만, 용량 또한 커지게 됩니다. 또한, 비트맵 이미지는 크기를 확대하거나.. 2022. 8. 9.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바