본문 바로가기

CSS16

CSS 애니메이션 7. 치즈처럼 늘어나는 육면체 See the Pen amine by Youcodein (@youCodein) on CodePen. 2022. 9. 22.

CSS 애니메이션 6. 통통 튀는 글자 See the Pen Untitled by Youcodein (@youCodein) on CodePen. 2022. 9. 22.

CSS 애니메이션 5. 마우스 오버 애니메이션 See the Pen MouseHoverEffect by Youcodein (@youCodein) on CodePen. 2022. 9. 21.

CSS 애니메이션 4 - 웨이브 애니메이션 See the Pen Untitled by Youcodein (@youCodein) on CodePen. 2022. 9. 21.

애니메이션 3 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 CSS 소스 * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width:100vw; height:100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper:nth-of-type(2) {animat.. 2022. 9. 2.

애니메이션2 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 > CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .loading .circle2.. 2022. 8. 30.

애니메이션1 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 CSS 소스 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink) } .box { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opacity: 0.2.. 2022. 8. 30.

요소 숨기기 CSS에서 요소를 숨기는 방법 CSS에서 요소를 숨기는 방법에 대해 알아보겠습니다. display: none; 이 속성을 적용하면 요소가 완전히 사라집니다. 요소가 없는 걸로 되기 때문에 접근성이 아예 없습니다. 존재하지 않는 요소이기때문에 공간 또한 차지하지 않습니다. visibility: hidden; 요소가 보이지 않지만 요소가 있었던 높이값만큼 공간이 남아있습니다. 이 경우 요소가 존재하지만 보이지만 않게 한 것입니다. 요소가 남아있기때문에 접근성은 유지할 수 있지만 불필요한 공간이 생겨버립니다. width: 0; height: 0; 특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식입니다. transform: scale(0); 시각적으로 엘리먼트를 감추지만, 빈 공간이 남습니다. 그러나 스크.. 2022. 8. 26.

색 표현 색상 표현 방법 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, G.. 2022. 8. 24.

CSS 단위 표현 단위의 고찰 CSS는 길이를 표현하는 몇가지 다른 단위가 있습니다. 오늘은 이 단위의 종류들을 알아보고자 합니다. 1.숫자와 단위 사이에는 공백을 쓸 수 없습니다. 2. 0은 단위 생략이 가능합니다. 3. 일부 CSS 속성의 경우 음수 길이가 허용됩니다. 절대 길이 단위 다음은 모두 절대 길이 단위입니다. 고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하는데는 복잡하다는 단점이 있습니다. 주로 픽셀 값을 사용합니다. 단위 이름 다음과 동일함 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54.. 2022. 8. 23.

이미지 표현 이미지 표현 이번에는 사이트에서 이미지를 표현하는 방법 / 이미지 스프라이트 기법/ ir 효과에 대해 알아보겠습니다. 이미지 표현 방법 -html의 경우 1.img 태그로 표현합니다.(의미가 있을 때, 없으면 이 사이트인지 모를 때) 2.alt 태그는 대체 문자를 표현합니다. -css의 경우 1.background 속성으로 표현(의미가 없을 때_장식용) 2.대체 문자는 필요하지 않습니다. 이미지 백그라운드 css로 속성을 주고 이미지를 넣는 방식입니다. background : url('이미지주소'); background-image : url('이미지주소'); 이미지 스프라이트 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다.. 2022. 8. 22.

Scss로 강아지 만들기 Scss Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어입니다. 예시 Pug와 Scss를 이용하여 강아지를 만들어봅시다. Pug와 Scss소스는 codepen을 참조해주세요. HTML 소스(Pug변환) CSS 소스 (Scss변환) body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #FFE16E; width: 100%; height: 100%; margin: 0; pa.. 2022. 8. 18.

Scss Scss Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어입니다. 사용 이유 작업이 크고 고도화 될수록 CSS를 사용할 때 불편함이 생깁니다. 이에 SCSS와 Sass는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와줍니다. 또한 Sass는 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 다음과 같은 추가 기능과 유용한 도구들을 제공합니다. CSS와 비교하였을 때 Scss는 1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현 가능. 2. .. 2022. 8. 18.

미디어 쿼리 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어 쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 1. 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 또한 다음 트로이 (http://troy.labs.daum.net/) 에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수도 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6, 7, 8 375 667 iPhone 6, 7, 8 plus 414 736 iPhone 5 32.. 2022. 8. 16.

CSS 기본 규칙 기본 규칙 CSS를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 CSS를 공부하세요! CSS란 CSS는 Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 1. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 우리를 기쁘게 하는 것들. 2. 외부 스타일시트 스타일 속성들을.. 2022. 8. 15.

01. 비트맵과 벡터 디지털 이미지(Digital Images) 디지털 이미지(Digital Image) 또는 "이미지"라고 불리는 용어는 디지털 카메라를 이용하여 현실세계의 사물을 촬영하거나 스캐너를 이용하여 사진이나 그림을 디지털 형태로 받아들인 것을 말합니다. 이미지를 디지털화 하는 방식은 크게 비트맵 방식과 벡터 방식으로 나뉩니다. Pixel 픽셀이란 Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. 이 점 하나에 해당 색의 정보(빨간색, 녹색, 파란색, 투명도 등)가 담겨져 있으며, 이는 곧 그림의 용량과 직결됩니다. 비트맵(Bitmap) 방식 비트맵 방식은 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된.. 2022. 8. 10.

이전 1 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바