그럼에도 불구하고

오늘은 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열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

오늘은 브레이크 포인트를 이용하여 반응형 페이지를 만들어보자 웹을 만들 때는 웹을 이용하는 기기의 사이즈에 맞춰서 웹사이트를 배치해야 한다. 장비( 스크린: 모니터, 프린트, 빔프로젝트,. 스크린리더기)등의 가로 사이즈에 맞춰서 웹사이트를 배치해야한다. 즉, 브레이크 포인트를 사용하여 모니터 가로 너비 기준을 잡아야 한다. [ 브레이크 포인트 사용 방법 ] HTML 삽입 미리보기할 수 없는 소스 @media screen and (max-width:1200px){ } 위와 같이 사용하면 되는데 max-width의 부분이 사이트의 크기를 나타내며 min-width와 같이 최소에 초점을 맞춰 사용할 수 있다. 혹은, @mediascreen and (min-width:760px) and (max-width:11..

여러 가지 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..

css에서 opacity와 transition-duration 속성을 이용해보자 code inner opacity는 투명도를 의미한다. 0: 보이지 않음 1: 보임 위의 코드에서는 inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. .box:hover .inner.box { opacity: 1; } . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다. transition-duration: 1s;: 애니메이션이 실행되는 시간을 1초로 지정한다.

CSS에서 flex-direction 기능을 사용해보자. flex-direction: row item1 item2 item3 item4 item5 flex-direction: row-reverse item1 item2 item3 item4 item5 flex-direction: column item1 item2 item3 item4 item5 flex-direction:column-reverse item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-start item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-end item1 item2 item3 item4 item5 flex-dire..