[ CSS ] Advanced CSS - Transition, Transformation, Animation, MediaQuery

[ CSS ] Advanced CSS - Transition, Transformation, Animation, MediaQuery

Transition요소의 상태 변화에 따른 스타일 변경에 애니메이션 효과를 부여한 것이다.Click me시작점에 transition 속성을 부여한다. 도착점에 변경하고자 하는 속성들을 값을 바꿔서 넣는다.button { padding: 20px; border-radius: 20px; background-color: tomato; color: beige; transition: background-color 1s ease-in, border-radius 0.5s ease-in-out;}button:hover { background-color: beige; color: tomato; border-radius: 5px;}여러 속성들을 다른 애니메이션 효과를 줄 수 있다..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 11. 2.
[ CSS ] 기초 CSS 정리

[ CSS ] 기초 CSS 정리

HTML에 CSS 적용하기inline을 하거나 CSS 파일을 링크 태그를 통해 참조한다. CSS SelectorSelector(선택자)를 통해 태그를 지정한다. 태그의 이름, 클래스 이름, id 이름 등을 selector로 사용할 수 있다. 태그이름은 이름 그대로 사용한다. 클래스 이름은 앞에 (.)을 붙여서 사용한다. 아이디 이름은 앞에 (#)을 붙여서 사용한다.h1 {}.myClass {}#myId {}선택자로 태그를 지정을 했으면 중괄호 내부에 속성(property)를 부여한다. 속성은 속성 이름과 속성값으로 구성된다. 필요한 속성은 검색을 통해서 확인한다.h1 { font-color : tomato;}예에서 속성은 font-color : tomato; 이다.CSS 코드의 우선순위동일한 태그에..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 11. 2.
[ HTML ] form, input, label 태그

[ HTML ] form, input, label 태그

#1 form 태그란? The HTML element represents a document section containing interactive controls for submitting information.form 태그는 사용자로부터 필요한 데이터를 입력받기 위한 인터페이스 등을 구성요소로 갖는 태그이다. input태그를 form 태그 안에서 자주 사용한다.#2 input 태그란? The HTML element is used to create interactive controls for web-based forms in order to accept data from the user.input 태그는 form태그에서 사용자로부터 데이터를 받기 위해 사용하는 태그다.#3 input 태그 공통 속성..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 9. 13.
[ HTML ] BEM: Block Element Modifier

[ HTML ] BEM: Block Element Modifier

#1 BEM이란?HTML과 CSS 클래스명을 위한 명명법이다. Block Element Modifier의 약자다. HTML 태그만을 보고도 어떤 스타일을 적용할 수 있는지 알 수 있다.#2 문법/* Block component */.btn {}/* Element that depends upon the block */ .btn__price {}/* Modifier that changes the style of the block */.btn--orange {} .btn--big {}#3 예제 No Service 18:43 11% 상태표시바 안에 여러 태..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 9. 9.
[CSS] animation

[CSS] animation

#1 Animation이란?The animation shorthand CSS property applies an animation between styles.animation은 스타일 간에 애니메이션 효과를 부여한다.  도지코인에 애니메이션 효과를 부여했다. 수수수수퍼노바#2 문법애니메이션 속성을 정의하려면 애니메이션 이름을 정하고 @keyframes과 함께 써야 한다.@keyframes CoinFlip { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); ..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 9. 8.
[CSS] transformation: 요소변환

[CSS] transformation: 요소변환

#1 transform이란?The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.요소를 회전, 기울임, 평행이동, 비율변화를 하는 속성이다. CSS의 좌표를 수정한다.#2 특징특정 요소에 transform 속성을 부여해도 다른 박스 요소들에게 영향을 주지 않는다. 즉, 요소에 transform 속성을 부여하면 별도의 레이어에 있는 것처럼 행동한다. 도지코인에 transform 속성을 부여했다. 마우스를 대면 상태 변화가 일어나는데도 옆의 수수수수퍼노바는 아무런 영향이 없다.참고: border-..

  • format_list_bulleted 프로그래밍 언어/HTML, CSS
  • · 2024. 9. 8.