본문 바로가기

WEB/HTML&CSS13

[CSS] animation : 모션 만들기 animation - 미리 지정해둔 설정 값에 따라 자동으로 실행되는 모션 만들기 - 저번에 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다. 이번 절에서는 animation과 @keyframes라는 속성을 통해 사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 미리 설정했던 모션을 호출하는 방식으로 동작합니다. 필수 구문 정리 @keyframes 모션이름 { 0% { 모션 시작점의 CSS 설정 } 100% { 모션 끝점의 CSS 설정 } } an.. 2023. 2. 8.
[CSS] transition : 전환 효과 transition - CSS 속성의 변화 값을 일정한 시간 동안 모션으로 전환 효과 주기 - 기존의 웹 환경에서 플래시를 사용하지 않고 모션 효과를 주기 위해서는 복잡한 JavaScript의 코드를 일일이 작성해야 했습니다. 그러나 CSS3의 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 효과가 탁월합니다. 이번에는 CSS3의 꽃이라고 할 수 있는 transition, 즉 전환 효과에 대해 알아봅시다. 필수 구문 정리 transition : 속성명 전환시간 가속도 설정 지연시간; ✨키포인트! transition은 보토 가상 선택자 :hover를 이용해 마우스 오버 시 변경된 CSS 형태로의 전환 효과를 전환합니다. 결과 화면 해당 에 마우스 오버 시 시계 방향.. 2023. 2. 8.
[HTML5] <video>태그 HTML5의 태그 - 외부 플러그인 없이 순수 웹 표준 기술만으로 동영상 콘텐츠 삽입 가능 - 기존 웹 문서에 동영상을 삽입하기 위해서는 윈도우 미디어 플레이어나 플래시 같은 외부 플러그인을 통해서만 가능했습니다. 하지만 HTML5로 넘어오면서 순수 웹 표준 기술만으로도 원하는 동영상을 손쉽게 삽입 가능할 뿐만 아니라 CSS로 해당 콘텐츠를 변형할 수도 있게 되었습니다. 필수 구문 정리 태그의 속성들 video 태그 속성설명 preload 해당 동영상을 재생 전 미리 불러오기 autoplay 비디오를 자동 재생 loop 비디오를 무한 반복 controls 비디오의 컨트롤 패널을 생성 결과 화면 코드 코드 해설 기본적으로 태그는 인라인 요소이기 때문에 블록 요소로 변경한 뒤 넓이 값과 마진 값을 성정합니다.. 2023. 2. 5.
[HTML] 띄어쓰기 3종류와 간격 확인하기. (&nbsp | &ensp | &emsp) 띄어쓰기 테스트입니다. | |☜nbsp테스트| |☜ensp테스트| |☜emsp테스트 세로로 보는 띄어쓰기 3종류 : & nbsp,& ensp,& emsp | |☜nbsp테스트 | |☜ensp테스트 | |☜emsp테스트 html파일 코드 띄어쓰기 테스트입니다. | |☜nbsp테스트| |☜ensp테스트| |☜emsp테스트 세로로 보는 띄어쓰기 3종류 : & nbsp, & ensp, & emsp | |☜nbsp테스트 | |☜ensp테스트 | |☜emsp테스트 2023. 1. 9.
[CSS] 동그라미 만들기 동그라미 만들기 태그 만든 후, css, sass, scss파일에서 작업. width: 10rem; height: 10rem; border-radius: 50%; 1.너비값, 높이값 지정해준 후 2.border-radius : 50% ; 2023. 1. 4.
[HTML] HTML 웹사이트를 분석하는 꿀팁 (유투브 드림코딩 필기) https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=RDCMUC_4u-bXaba7yrRz_6x6kb_w&index=5 [18:46] 웹사이트들은 커다란 박스로 구성이 되어있고 그 박스안에서도 작은단위의 박스들로 쪼개어 질 수 있다. 중요한 이유 웹 사이트들을 바라볼 때 이처럼 작은 단위들로 나눌 수 있어야 나중에 CSS 스타일링을 할 때 조금 더 Structure 있게 스타일링을 할 수 있고 나중에 중,고급으로 가서 React 라는 프레임워크를 사용할 때 하나의 커다란 컴포넌트로 정의해서 사용하면 퍼포먼스가 굉장히 좋지 않다. 따라서 React를 사용할 때도 최고로 작은 단위로 쪼개어서 , 작은 단위부터 구현하는 것이 중요하기 때문에, 사이트를 박스 단위로 나누어서 구.. 2023. 1. 4.
[CSS] 기본셀렉터 완전 정리 ( 유투브 드림코딩 필기) https://www.youtube.com/watch?v=gGebK7lWnCk CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript CSS : Cascading Style Sheet ● cascade : 작은 폭포, 폭포처럼 떨어지는 물, (정보통신) 종속, 연속, 직렬 ㄴ Cascading : 정의된, 세부적인 정의가 있다면 그것을 쓰고, 정의된 것이 없다면 다음으로 지정된 것을 사용하는 것을 의미한다. ● Style Sheet : 스타일을 잘 정리한 문서 한 장 1. 의미, 정의 2. 선택자 3. 스타일링 4. 헷갈리는 컨셉 5. CSS의 꽃 : Flex box 웹사이트를 스타일링할 때 크게 3가지로 나누어서 꾸밀 수 있는데.. 2023. 1. 4.
[CSS] 미디어 쿼리 디바이스별 해상도 분기점, 반응형 웹 만들기. Responsive Web Design 1. 먼저 반응형웹을 적용하기 위해서는 HTML head 부분에 meta viewport를 설정해주어야 한다. # 반응형 웹 디자인 패블릿, 태블릿, 데스크탑, 게임콘솔, 티비, 웨어러블 기기 등등 정말 다양한 화면 크기가 있습니다. 화면 크기는 언제나 변하기 때문에 사이트는 어떤 화면 크기에도 언제나 적응 가능하도록 설계되어야 합니다. 미디어 쿼리(@media)는 장치에 따라 각기 다른 레이아웃을 만들거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹 페이지를 작성할 때 사용합니다. 부트스트랩은 CSS 미디어 쿼리를 사용해 반응형으로 휴대폰에서부터 태블릿, 데스크탑까지 적용되는 사이트를 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크입니다. 적절한 렌더링과 확대/축.. 2023. 1. 4.
[CSS] 2023올해의 색상예측, 나무위키_헥스코드, checkbox색변경☞리액트적용 My 취향) Todo 원하는 색상 헥스코드에서 몇 개 찝어놓기☑️완료! 요즘 눈길이 가는 색상 2개 : 자주색, 베이지 2023년 올해의 컬러 예상 글 https://heypop.kr/n/45759/ 한 해를 물들일 색 ‘2023 올해의 컬러’ 1 heypop.kr 음? 왜때문에 맞췄지ㅋㅋㅋㅋ 블로그 짤랑이 때문에 요새 자주색이 좋아지고 있었는데 야호 자주색,,, '비바 마젠타'라고 한다. #BB2649 +덧) 이외로, 라즈베리 블러쉬도 올해의 색상이다. 나무위키, 헥스코드 https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C 헥스 코드 - 나무위키 이 문서에 수록된 색상과 헥스 코드보다 더 많은 정보를 얻고자 한다면 다음 링크에서 확인이 가능하다. .. 2022. 12. 30.
728x90
반응형

티스토리툴바