[ 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.
[ Python ] OOP(6): 상속

[ Python ] OOP(6): 상속

#1 상속이란?부모클래스가 자식 클래스에게 속성을 넘겨주는 것이다. 새로운 클래스를 만들 때 기존의 클래스가 가진 속성들을 그대로 사용할 수 있다. 기존의 클래스를 부모클래스, 새로운 클래스는 자식클래스이다. 상위클래스와 하위클래스라고도 한다.#2 상속 문법자식 클래스 정의하기새로운 클래스를 정의할 때 기존 클래스를 상속받을 수 있다. 새로운 클래스(자식 클래스)의 이름 옆에 부모 클래스의 이름을 기재한다.# 부모클래스class SuperClass: def method_super(self): print("Super method")# 자식클래스: 괄호로 상속받을 클래스 이름 추가class SubClass(SuperClass): pass자식 객체 사용하기자식 객체를 생성하면 자신의 메..

  • format_list_bulleted 프로그래밍 언어/Python
  • · 2024. 9. 8.
[Python] OOP(5): 연산자 오버로딩

[Python] OOP(5): 연산자 오버로딩

#1 연산자 오버라이딩init처럼 클래스를 만들 때 정해진 기능을 할 수 있도록 미리 정해진 특별한 메서드들이 있다. 연산자들도 내부적으로는 특별한 메서드로 구현되어 있다. 기본자료형처럼 객체에 연산자를 사용하고 싶으면 특별한 이름을 가진 메서드들을 만들면 된다.x = int(1)y = int(3)a = x + y#a = x.__add__(y)print(a) 벡터 자료형이다. 사용자정의 자료형이기 때문에 벡터 간에 덧셈 연산이 정의되어 있지 않다.class Vector2D: def __init__(self, x, y): self.x = x self.y = yv1 = Vector2D(1, 2)v2 = Vector2D(3, 4)v3 = v1 + v2 # ???아래와 같이 연산자..

  • format_list_bulleted 프로그래밍 언어/Python
  • · 2024. 9. 8.
[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.
[CSS] Transition: 요소에 애니메이션 효과 입히기

[CSS] Transition: 요소에 애니메이션 효과 입히기

#1 transition이란?transition은 요소가 현 상태에서 다른 상태로 전환할 때 동적효과를 부여하는 속성이다. #2 문법요소의 현재 상태와 후 상태를 정의한 후에 transition 속성을 통해 전환효과를 가하려는 속성들을 지정한다. a { color: wheat; background-color: tomato; ... transition: color background-color ease-in-out 1s; } a:hover { color: tomato; background-color: wheat; }#3..

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