공부 기록일지📚

BEM 정의) The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. class 이름을 "status-bar__column" 으로 길게 작성한 이유는 css로 볼 때 이 칼럼이 어떤 것의 칼럼인지 헷갈리기 때문에 그렇다. column은 자주 쓰이기 때문에 단순히 column으로만 써놓으면 헷갈린다. "status-bar__column" 부모__자식 관계가 어떻게 돼있는 지 보임 이렇게 클래스명을 지정하는 규칙을 BEM(Block Element Modifier)이라고 한다. 참고 사이트 :https://css-tricks.com/..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Media query 는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. (나의 웹사이트를 보고있는 사용자의 스크린 사이즈) 미디어쿼리는 우리가 조건을 추가할 수 있는 방법이다. 코드의 조건을 적는 것이지요 만일 이 조건이 true(참)이라면 {} 중괄호 안의 CSS를 실행하라는 조건을 말해주는 것입니다. 미디어 쿼리도 중괄호로 여닫지만 그 안에 element에 CSS를 적용시켜야 합니다. (중괄호 안에 중괄호) 미디어 쿼리는 " and "를 써서 연결됩니다. ※참고: (min-device-width) 와 (max-device-width)는 오직 핸드폰에만 적용된다. 데스크톱은 이해할 수 없겠죠? 그래서 아래의 코드는 (max-width: 600px)이런식으로 준 것입니다. *tip: ..

Q.마우스를 위에 올리거나(:hover), trasition없이 애니메이션을 어떻게 만들까? 애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다. 애니메이션 작성법(기본): @keyframes + 애니메이션명 e.g.) @keyframes superHotCoinFlip animation을 작성하는 방법에는 2가지 방법이 있다. ▶1번째 방법- @keyframes 애니메이션명 { from { transform: 속성값 } to { transform: 속성값 } } 효과를 줄 selector { animation: 애니메이션명 + 지속시간 + 효과 +( infinite ) } *infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음 계속 실행되..