웹개발/css 검색 결과
7 개의 검색 결과가 있습니다.
웹개발/css

스크롤 해도 고정되는 배너 CSS

.fixedBanner { position: fixed; top: 40%; /*창 상단에서부터의 거리*/ right: 0px; /*창 우측에서부터의 거리*/ width: 100px; /*너비 지정*/ height: 100px; /*높이 지정*/ z-index: 999; /*요소 중 가장 앞쪽으로 배치*/ }

2021. 8. 25. 12:02
웹개발/css

CSS 깜빡이는 blink 애니메이션 & 바운스 bounce 애니메이션

.blinkClass { -webkit-animation: blink .3s infinite alternate; -moz-animation: blink .3s infinite alternate; animation: blink .3s infinite alternate; } @-webkit-keyframes blink { 0% {color: #0e4bef; border-color: #0e4bef;} 100% {color: #a9a9a9; border-color: #a9a9a9;} } @-moz-keyframes blink { 0% {color: #0e4bef; border-color: #0e4bef;} 100% {color: #a9a9a9; border-color: #a9a9a9;} } @keyframes ..

2021. 7. 30. 10:54
웹개발/css

CSS BEM의 10가지 일반적 문제와 해결 방법 1

BEM이 유용하다는 것은 알겠지만 막상 적용하려 하니 어려운 게 한두 가지가 아니다. 그래서 검색을 좀 해봤는데 좋은 글이 영어로 있어 번역을 해두려 한다. 번역기 돌려서 조금 다듬는 정도지만 원문: Battling BEM CSS: 10 Common Problems And How To Avoid Them 1. 자손 선택자의 경우 어떻게 해야 하나요? 두 수준으로 중첩된 요소를 참조해야 할 때 자손 선택자를 사용할 것입니다. 이 녀석들은 내 인생의 골칫거리이고, 나는 자손선택자의 오용이 사람들로 하여금 BEM에 즉시 혐오감을 갖게 하는 이유 중 하나라고 확신합니다. 예를 들어보죠. Title text here Lorem ipsum dolor sit amet, consectetur Adipiscing eli..

2021. 7. 16. 07:40
웹개발/css

CSS 속성 나열 순서

신속한 작업을 위해, 다른 사람들과의 공유를 위해 적용하면 좋은 CSS 속성의 순서이다. *Mozilla 기준 display list-style position float clear width, height padding, margin border, background color, font text-decoration text-align, vertical-align white-space other text content 밖에서 안쪽으로의 흐름

2021. 7. 14. 16:18
웹개발/css

CSS 방법론 BEM

예전에 코딩에 대해 아무것도 모르던 시절, 지금도 모른다는 게 함정 카멜표기법과 파스칼표기법에 대해 듣고서 '우와' 했었다. 그리고 이후부터는 카멜표기법을 사용했었다. BEM이 필요한 이유 그런데 여러 페이지를 코딩해보면서 자꾸 중복되는 듯 서로 다른 클래스로 인해 '클래스명 짓기 너무 힘들다'라는 생각이 들 때 쯤, 검색을 통해 CSS 방법론과 그중 하나인 BEM에 대해 알게 되었다. 진짜 얼마나 모르고 맨땅에 헤딩을 하고 있었는지... BEM이란? Block(블록)-Element(요소)-Modifier(변경자)의 줄임말. 이 세 가지를 이용해 클래스명을 짓는다. 블록(Block): 재사용할 수 있는 독립적인 가장 바깥쪽 덩어리. 예를 들면 검색창 블록. 요소(Element): 블록을 구성하는 하위 성..

2021. 7. 14. 11:38
웹개발/css

CSS 파일 구분

CSS는 파일을 구분해서 관리한다. 너무 당연한 이야기지만 이제야 알았다 이래서 막 배우는 게 문제야 보통 많이 쓰이는 파일은 다음과 같다. reset.css : HTML 기본 속성값을 초기화 common.css : 웹사이트 기본 설정값. 글꼴, 배경, 제목, 네비게이션바, 테이블, 버튼 등 layout.css : 웹사이트의 레이아웃 main.css : 메인 board.css : 게시판용 세상에 쉬운 일은 없다. 내가 쉽게 하면 쉬운 일이 되는 거고, 어렵게 하면 어려운 일이 되는 거지... 모든 일을 어렵게 하는 장인이 되고 싶다.

2021. 7. 14. 11:12