728x90

CSS37

사이트 만들기 ⭐️ site 만들기 ⭐️ 결과보기 ☛ 원본 소스 보기 2022. 9. 14.

텍스트 효과 애니메이션 ⭐️ 애니메이션 효과 : 텍스트 효과 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 눈에 띄는 텍스트 효과 만들기 [1] 박스 만들기 svg 태그를 만들어 줍니다. oranssy [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. @font-face {.. 2022. 9. 8.

걸어가자 ⭐️ 애니메이션 효과 : 걸어가자 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. gif 에서 이미지 가져오기 [1] 박스 만들기 포토샵으로 gif 파일을 하나씩 이어붙입니다. 가로로 긴 ~ 이미지 파일이 만들어집니다. 03. html 작성 [1] 박스 만들기 포토샵으로 gif.. 2022. 9. 8.

CSS animation ⭐️ CSS 애니메이션 ⭐️ 01. animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animati.. 2022. 9. 8.

SVG animation SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C (World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, el.. 2022. 9. 8.

푸터 유형 (1) ⭐️ 푸터 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 슬라이드 영역 슬라이드 유형 01 슬라이드 유형 02 이미지 영역 이미지 유형 01 이미지 유형 02 이미지/텍스트 유형 01 이미지/텍스트 유형 02 텍스트 유형 01 컨텐츠 영역 카드 유형 01 카드 유형 02 카드 유형 03 푸터 영역 푸터 메뉴 유형 01 푸터 컨텍트.. 2022. 9. 6.

배너 유형 (1) ⭐️ 배너 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 배너 영역 조명 디자인 더 다양한 조명 디자인을 살펴보세요 http://www.youtube.com 배너 유형 01 02. style(css) 설정하기 : /* bannerType */ .banner__inner { background-image: url(../site01/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background.. 2022. 9. 6.

슬라이드 유형 (1) ⭐️ 슬라이드 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 슬라이드 영역 DEVELOPER Way to Go 너무 무리하지 말아요! 지금도 잘하고 있어요 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 02. style(css) 설정하기 : /* slideType */ .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { /* h.. 2022. 9. 6.

애니메이션 효과 _ 무한대 공 ⭐️ 애니메이션 효과 : 무한대로 튀는 공 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 무한대 모양으로 튀는 공 [1] 박스 만들기 div 안에 div 가 있는 구조를 5개 만들어 줍니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. * { b.. 2022. 9. 5.

헤더 유형 (1) ⭐️ 헤더 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; /* 폰트 지정 */ font-weight: 400; /* 폰트 두께 설정 */ } /* reset */ * { margin: 0; /* 기본 브라우저의 빈 공간 없애기 */ paddin.. 2022. 9. 2.

이미지 텍스트 유형 (1) ⭐️ 이미지 텍스트 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹 디자이너, 웹 퍼블리셔, 프론트 앤드 개발자를 위한 유용한 사이트 입니다. 튜토리얼 사이트 래퍼런스 사이트 웹 폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'Nex.. 2022. 9. 2.

텍스트 유형 (3) ⭐️ 텍스트 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 사용 후기 바디워시를 사용하신 분들의 후기를 참고해보세요! 아토피가 심한 피부라, 늘 많은 것을 따져보며 구매하는데요. 제품이 천연 성분이라는 것과, 자극이 거의 없다는 리뷰 보고 구매해봤어요. 제형은 엄청 물 같이 묽고, 인위적이지 않은 향에 저자극 맞습니다..! 큰 기대하지 않고 구매했는데 상당히 만족스러워요 ^*^ 다만 타월 사용하지 않고 손으로 문지르 sumi*** 22.08.31 ⭐️⭐️⭐️⭐️⚝ 자세히 보기 세안제와 바디제품을 더 순한 제품으로 바꿔야겠다 하면서 찾아보다가 발견했어요. 주문한 샴푸가 아직 안 와서 - 올인원이라길.. 2022. 9. 1.

텍스트 유형 (2) ⭐️ 텍스트 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 두번째 텍스트 유형 입니다. 텍스트 유형 02 휴대폰 연락하기 아이콘 설명서 휴대폰으로 연락하기 위한 아이콘에 대해 알아봅시다. 아이콘 모양을 기억해주세요! 연락처 보기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을 통화하기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을 메세지 보내기 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을.. 2022. 9. 1.

텍스트 유형 (1) ⭐️ 텍스트 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : 텍스트 유형 01 음악 플레이어 아이콘 설명서 라이브러리 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 앨범 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 아티스트 아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다. 더보기 반복 듣기 아이콘을 누르면 화면이 바뀝니다... 2022. 9. 1.

애니메이션 빙글빙글 ⭐️ 애니메이션 효과 : 빙글빙글 점 둘 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 점 두 개가 빙글 도는 효과 만들기 [1] 박스 만들기 div 안에 span 으로 점 두 개를 만들어 줍니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. b.. 2022. 8. 29.

애니메이션 박스 ⭐️ 애니메이션 효과 : 통통 튀는 박스 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 통통 튀는 박스 만들기 [1] 박스 만들기 상자 하나만 만들어주면 됩니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. body { height: 100vh;.. 2022. 8. 29.

blind 효과 (요소를 안 보이게) ⭐️ blind 효과 : 요소를 안 보이게 하는 방법 ⭐️ # 예제 원본 See the Pen blind(origin) by oranssy (@oranssy) on CodePen. 01. display: none; (애니메이션 X , 영역X) # 1) See the Pen blind(dn) by oranssy (@oranssy) on CodePen. 02. opacity: 0; (애니메이션 O , 영역O) # 2) See the Pen blind(opacity) by oranssy (@oranssy) on CodePen. 03. visibility: hidden; (애니메이션 X , 영역X) # 3) See the Pen blind() by oranssy (@oranssy) on CodePen. 04. .. 2022. 8. 26.

일러스트 디자인 (꽃병) 2022. 8. 24.

CSS 크기 단위 ⭐️ CSS 값의 단위 ⭐️ 01. CSS 값이란? CSS에 사용되는 모든 속성에는 해당 속성에 허용되는 값이 있습니다. # CSS 값의 예 div { width : 100px; 속성(너비) : 값(100px) height : 300px; 속성(높이) : 값(100px) } 02. CSS 값의 단위 CSS에서 사용할 수 있는 숫자 데이터 형식은 정수, 10진수(소수점), 단위가 붙어있는 숫자, 숫자 퍼센트(%) 가 있습니다. 속성에 대한 정확한 값을 기술하기 위해, 단위를 사용합니다. [1] 절대 단위와 상대 단위 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 입니다. 여기서 px은 절대값이고 em과 %는 상대값 입니다. 단위 설명 px (픽셀) 화소 1개 크기의 단위 : 절대 단위 ☛ 요소.. 2022. 8. 24.

CSS 색상 표현 (색상명 / HEX / RGB / HSL / RGBA / HSLA / opacity) ⭐️ CSS 색상 표현 방법 ⭐️ 01. CSS에서의 색상 표현 CSS에서의 색상은 글자색, 배경색, 테두리색 등 다양한 곳에 적용됩니다. # 기본 표현식 ☛ 태그 이름 { 색상을 적용할 속성 : 색상 값; } See the Pen color (1) by oranssy (@oranssy) on CodePen. ___ 참고하기 ___ `1 color 속성 : 글자색 설정 `2 background 속성 : 배경색 설정 02. 색상 값의 표현 방법 색상 값을 표현하는 7가지의 방법이 있습니다. 상황에 따라 적절히 사용해주면 내용의 가독성이 좋아집니다. [1] 색상명 해당 색상을 의미하는 고유 명사를 색상 값으로 사용합니다. 등록된 색상명은 140개 정도로, 아래의 주소에서 확인할 수 있습니다. ☛ 등록된 색상.. 2022. 8. 24.

이전 1 2 다음

728x90

깜냥깜냥🐾코딩 혜윰

CSS37

티스토리툴바