그럼에도 불구하고

요소의 밝기와 채도를 조절해 보자 [ 요소 밝기 조절하기 ] ● 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 ● 포커스 상태 효과를 주고 싶을 때 밝기 조절은 CSS의 filter 속성에 brightness() 메서드를 사용하여, brightness(100%)가 기본 상태다. 인수가 100% 보다 크면 밝아지고 작으면 어두워진다 CSS Transitions와 Web Animations API의 샘플을 확인해 보자 ※ CSS Transitions를 사용한 샘플 HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 클릭 전 클릭 후 ※ Web Animations API를 이용한 샘플 참고 :) https..

Accordion을 만들어보자 accordion.html HTML 삽입 미리보기할 수 없는 소스 accodion.css HTML 삽입 미리보기할 수 없는 소스 accordion.js HTML 삽입 미리보기할 수 없는 소스 arrow_black.svg ※ 화살표 아이콘의 경우 이 소스 코드를 그대로 사용해도 되고, 다른 걸 사용해도 무방합니다 :) HTML 삽입 미리보기할 수 없는 소스 REF: https://stickode.tistory.com/504

input type="file"에 대해 알아보자 code 이미지 미리보기 1. type을 file로 할 경우 파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 ) 파일을 선택해서 넣으면 파일 이름을 보여준다. 2. type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다. 3. accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다. 위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다. 이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다. 4. accept 속성은 image뿐만 아니라..

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

여러 가지 shadow를 이용해보자 HTML HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

가로 / 세로 메뉴바를 만들어보자 [ 가로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 가로 상단 메뉴바 (모든 메뉴 나오게) ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 세로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스

mask를 이용하여 로고를 만들어보자 test.html WE MAKE YOUR MORE ATTRACTIVE .mask { width: 1000px; height: 500px; background-color: pink; font-size: 100px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; position: relative; left: 50px; top: 50px; } ＊ mask라는 이름을 가진 div 클래스의 기본설정 .mask > p { position: absolute; left: 10px; bottom: 0; overflow: hidden; height: 0px; width: 1000px; animation:..

애니메이션을 반복하는 코드를 짜 보자 test.html bgcolor: red -> blue -> orange -> pink tofrom: orange -> green 결과 HTML 삽입 미리보기할 수 없는 소스

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..

transform-origin을 사용해보자 transform-origin이란? 왜곡의 중심점을 의미한다. 어떤 애니메이션을 주었을 때 그 애니메이션의 중심을 잡아주는 역할을 한다. ※ transform-origin 위치 보는 기준 left / top center / top right / top left / center center / center right / center left / bottom center / bottom right / bottom test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 결과 HTML 삽입 미리보기할 수 없는 소스

여러가지 transform을 이용해보자 test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 결과 HTML 삽입 미리보기할 수 없는 소스

여러 가지 transition을 사용해보자 code box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box01 : 기존 width 200px의 두배인 400px만큼 채워짐 box02 : span의 지정색인 pink가 빠지고 darkcyan 색이 보임 box03 : box color -> black / font color -> white로 변경 box04 : height 10px만큼 채워짐 box05 : width 60px만큼 채워짐 box06 : 애니메이션 지연시간 2초 줌 box07 : 좌측 상단부터 우측 하단까지 채워짐 box08 : width 100%를 기준으로 채워짐 box09 : he..