클로리셔 작은 공간

[ Infinite Scroll Banner Animation ] - Js 없이 CSS로만 롤링 스크롤 배너 만들기 - 이번에 작업하면서 배너가 무한 자동 스크롤 되는 작업이 들어왔다. CSS로 keyframes로 animation 만들면 되겠지 싶어서 뚝딱 뚝딱 만들었다. 보기 쉽도록 무지개 색상별의 박스 상자를 무한 자동 스크롤 되도록 만들어보앗다. [ HTML ] red orange yellow green blue navy violet [ SCSS ] .container{ position: relative; display: flex; align-items: center; margin: 80px auto; width: 1000px; height: 150px; overflow: hidden; backg..

처음 CSS 작성할때는 여러줄로 정렬해서 쓰는 방법이 편했는데.. 사이트 스케일이 커지면서 오히려 한줄로 정렬 방법이 가독성이 좋아서 한줄로 작성하는 법이 익숙해졌다. 근데 가끔 CSS 수정하고 저장하면 갑자기 자동으로 여러줄로 정렬이 된적이 있다... 플러그인 prettier 확장프로그램이 문제인가 싶어서 옵션을 끄면서 알아보았는데 해결이 되지않았다. 알고보니 VS Code 비주얼스튜디오 프로그램 설정 옵션에서 수정해야하는걸 알게 되었다. :: 저장 시 자동 줄 정렬 끄기 1. 파일 -> 기본 설정 -> 설정으로 들어간다. 2. formatOnSave를 입력한다. 3. Format On Save 옵션 체크를 해제하면 더 이상 저장할 때 자동으로 정렬이 되지 않는다. 모두 잘 해결되셨길 바래요

1. 애니메이션 효과 01 라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음. 예시) HTML S C R O L L CSS .scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; } .scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;} .scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;} .scroll_block .liner::before { cont..

1. 텍스트 쉐도우 [text-shadow] 그림자 효과 만들기 예시) HTML The western spiral arm The western spiral arm The western spiral arm The western spiral arm CSS p{ font-size: 30px; color: #333;} .txt_shadow1{text-shadow: 3px 3px;} /* 같은색상, 레이어드 효과 */ .txt_shadow2{text-shadow: 13px 8px #aaa;} /* 가로, 세로 , 색상 */ .txt_shadow3{text-shadow: 3px 3px 2px pink;} /* 가로, 세로, 블러 */ .txt_shadow4{text-shadow: 2px 3px 0px #ff8a00..

List 작업할때 필요한 태그 중 몇가지가 있는데 대표적으로는 순서가 없는 태그 과 순서가 있는 태그 두가지가 있다. 1. 목록 리스트 태그 간혹 ul 목록을 만들다보면 가운데 정렬해야할 때 있는데 정렬하는 방법을 알아보자. 1) text-align: center; 속성을 이용한 가운데 정렬 list_011 list_022222222 list_033333 ul { text-align: center; border: 1px solid #aaa} ul li{ margin: 4px 0; background-color: #a1d8d9;} 이 방법은 목록 자체가 아니라 목록 안의 내용만 가운데 정렬 해야할 때 사용한다. 2) width 값을 정해서 목록 요소 자체를 가운데 정렬하기 ul { ..

CSS selector 개념 잡기 CSS(Cascading Style Sheets)는 HTML 요소의 스타일(design / layout)을 정의해요. 이때 필요하게 되는 것이 Selector 입니다.. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 1. 기본 셀럭터 선택 CSS Hello World! This paragraph is styled with CSS. - - result - - Hello World! This paragragh is styled with CSS. 2. 태그 셀렉터 Heading paragraph 1 paragraph 2 paragraph 3 - - result - - Heading paragraph 1 paragra..

1. SVG 이용해서 사각형 태그 그리기 x 와 y 는 사각형의 왼쪽 위쪽 위치를 정의 ( X축 150픽셀에서 사각형 만들어라./ Y축 100픽셀에서 사각형 만들어라.) width: 가로 픽셀 넓이 height: 세로 픽셀 길이 2. SVG 이용해서 모서리 둥근 사각형 태그 그리기 rx와 ry는 사각형 모서리의 둥글기를 정의합니다.

cx와 cy 속성은 원의 중심의 x와 y 좌표를 정의합니다. cx와 cy를 생략한다면 기본 (0,0)로 설정됩니다. r은 원의 반지름을 정의합니다. cx와 cy는 타원 중심의 좌표를 정의 (타원의 중심축 X,Y 좌표) rx는 수평 반지름을 정의 (타원의 넓이) ry는 수직 반지름을 정의 (타원의 높이)

1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; flex-direction:row; } main div { width: 50px; height: 50px; } flex-direction 속성의 부모 요소에 display:flex; 설정 되어 있어야 합니다. 그리고 flex-direction 속성 기능을 기재하지 않으면 기본값은 row 이므로 즉, 가로로 정렬 됩니다. row : 가로로 정렬 row-reverse : 가로로 오른쪽에서부터 정렬 column : 세로로 정렬 column-reverse : 세로로 밑에서부터 정렬 initi..