동해둘리의 IT Study

css 를 이용하여 배경색을 변경하는 코드입니다. 10초의 간격을 두고 검은색에서 붉은색으로 천천히 변경되기를 반복하게 됩니다. @keyframes 으로 animateBackground 라는 변수에 애니메이션에 대한 설정을 하게 되는데요 0%는 시작, 50%는 중간, 100%는 애니메이션의 끝을 나타냅니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 .background-animation { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; background-color: #000; animation..

IT공부방/HTML5, CSS 2023. 6. 15. 10:10

css를 이용해서 테이블을 꾸밀때, PC, 모바일, 테블릿 상관없이 폭이 조정되고, 홀수 라인과 짝수 라인을 구별하도록 배경색을 설정하고, 마우스 오버시에 해당 라인을 특정시켜주는 기본코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 table { width: 100%; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px; text-align: left; b..

IT공부방/HTML5, CSS 2023. 6. 14. 12:35

CSS 애니메이션 하늘을 나는 새 javascript나 jquery를 이용하지 않고 CSS 만으로 애니메이션을 만들 수 있습니다. 위에 있는 새는, 움직이는gif(gif animation)로 만들어 본 것인데요, 요즘 흔히 말하는 움짤이죠. 귀엽게 하늘을 나는 새를 CSS 만으로 만들어 보겠습니다. 먼저, CSS 기본적인 애니메이션은 지난번에 포스팅한 아래 글을 참고하시기 바랍니다. 새 이미지의 크기에 맞게 394x293px 크기의 DIV 를 만듭니다. 1 2 3 4 5 6 7 8 9 10 div { width:394px; height:293px; animation-name: bird; animation-duration: 0.5s; animation-timing-function: linear; anima..

IT공부방/HTML5, CSS 2020. 2. 18. 06:19

CSS 애니메이션 따라하기.... ^^ Javascript 나 플래시를 사용하지 않고도 CSS를 이용하여 애니메이션 효과를 만들어 낼 수 있습니다. 먼저, 어떻게 동작하는지 살펴보시지요. 아래 링크를 클릭하시면 데모를 보실 수 있습니다 http://meriqueen-woolmark.com/03_doolyit_image/animation.html http://meriqueen-woolmark.com/03_doolyit_image/animation.html meriqueen-woolmark.com 애니메이션에 사용된 고양이 이미지도 함께 첨부합니다. 1. 고양이 이미지 넣기 좌우로 왔다갔다 하는 고양이를 만들기 위해서, 먼저 DIV 태그 안에 고양이 이미지를 넣어놓습니다 1 2 3 Colored by Col..

IT공부방/HTML5, CSS 2020. 2. 17. 01:52

CSS 를 이용하여 DIV의 테두리를 위와같이 둥글게 만들고 싶을때 어떻게 하는지 설명하겠습니다. 브라우저가 Mozilla 계열이냐 비Mozilla 계열이냐에 따라 다르게 코딩하기 때문에두가지 경우를 전부 CSS에 설정해 주는것이 좋습니다. 2 18.3.5 미린 111-1111 한미정 (010-111-1111) 입구방 허니콤 (모세그린) 변경추가 40,000원 주문함 안방창 3D길이 130으로 수정 아래와 같이 하면, 상하좌위 모든 테두리가 둥글게 됩니다. -moz-border-radius: 10px; -webkit-border-radius: 10px; 각각 설정하려면 아래와 같이 사용하면 됩니다. -moz-border-radius-topleft : 10px; //좌상단 모서리-moz-border-rad..

IT공부방/HTML5, CSS 2018. 3. 26. 23:17

DIV 태그를 사용할때, DIV 태그 내의 엘리먼트를 가운데 정렬하는 방법입니다. 안녕하세요 위와 같이 margin:0 auto; 속성을 세팅하게되면, 자신을 둘러싸고 있는 DIV 엘리먼트의 중간에 정렬이 됩니다.

IT공부방/HTML5, CSS 2016. 9. 15. 10:47

CSS 를 이용하여 폰트를 설정할 때에, 폰트명이 혼동되는 경우가 있는데요 예를 들어서 아래와 같은 폰트일 경우, 공백이 있는지 없는지 혼동될 때가 있습니다. font-family:Times New Roman; font-family:TimesNewRoman; 아래 링크를 클릭하여 확인해 보면, 웹상에서 바로 확인하여 코드를 복사해서 사용할 수 있습니다... http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-family

IT공부방/HTML5, CSS 2016. 9. 8. 12:45

Javascript 와 CSS 를 이용하여 만든 PopUp 창 띄우는 에제입니다. Javascript 와 CSS 를 이용하여 PopUp창을 띄우는 예제입니다 팝업내에 표시되는 내용입니다 본 포스팅은 아래 포스팅을 참고했습니다. http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

IT공부방/jQuery, ajax, java 2016. 8. 25. 16:07

1. CSS 의 z-Index This is a heading 위와 같이 코딩되어 있을경우, 태그의 내용이 태그 위에 올라가 보이게 된다. 왜냐하면 img 태그의 z-index CSS속성을 -1 로 세팅했기 때문이다. 2. Javascript 의 z-index document.getElementById("img1").style.zIndex = "1"; zIndex 는 위와같이 DOM 엘리먼트의 속성이다. CSS 와는 다소 다르다. 아래 링크 참조 http://www.w3schools.com/jsref/prop_style_zindex.asp

IT공부방/HTML5, CSS 2016. 8. 2. 12:15

1. word-break 출처 : http://itrooms.tistory.com/190 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 keep-all : 단어 단위로 줄넘김을 해준다.break-all : 한 글자 단위로 줄넘김을 해준다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 2. float , clear 속성 출처 : http://mainia.tistory.com/3119 float 을 이용하여 배치를 할때, 컨테이너 안에 float 이 적용된 태그가 있을 경우, 그 태그의 높이값이 반영이 안되기 때문에, 다음에 오는 태그가 컨테이..

IT공부방/HTML5, CSS 2016. 7. 21. 17:40

CSS 의 transform 은 객체의 모양을 변형/이동/회전 등을 할 수 있는 속성으로서,javascript 를 이용하지 않고도 CSS 만으로 개체의 변형/이동/회전을 구현할 수 있다. 다만, 표준이 아니기 때문에 호환성을 위해서는 밴더프리픽스 (webkit, moz, ms ) 를 붙여주어각각 정의를 해주어야 다른 브라우저에서도 동작하게 된다. 프리픽스별 벤더구분은 아래와 같다. -webkit-transform // 크롬, 사파리-moz-transform // 파이어폭스-ms-transform // 익스플로러-o-transform // 오페라 위치이동의 경우 아래와 같이 정의하면 된다. -webkit-transform : translate(50px,50px); -moz-transform : transl..

IT공부방/HTML5, CSS 2016. 7. 21. 13:09

태그끼리의 위치는 inline 과 block, none, inline-block 등의 4가지로 분류할 수 있는데,DIV 태그같은 경우는 block 의 특성을 ,SPAN 태그같은 경우는 inline 의 특성을 가지게 된다. CSS 의 display 속성은 이러한 원래의 특성을 변경할 때 사용된다. 아래 포스팅에 상세히 설명되어 있다.http://mainia.tistory.com/3295 또한, display 속성은 위 4가지 이외에도 많은데.... 아래와 같이 16가지나 된다. 출처 : http://dev.epiloum.net/834 inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header..

IT공부방/HTML5, CSS 2016. 7. 21. 12:35

overflow 속성은 설정된 DIV 의 영역을, 내용물이 많아서 빠져나오는 경우 옵션값이다. - 1. visible 은 기본값이며, 빠져나온채로 그냥 보여준다- 2. hidden 은 빠져나온 걸 감춘다- 3. scroll 은 빠져나올 경우 무조건 스크롤바가 생기게 한다. - 4. auto 는 빠져나오는 경우에만 스크롤바가 생기게 한다. 1. overflow:visible 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세 2. overflow:hidden 동해물과 백두산이 마르고 닳도록 하느님..

IT공부방/HTML5, CSS 2016. 7. 20. 12:40

CSS 코드를 보면, 아스테리크 * , 또는 마침표 . 와 # 등의 특수기호가 보이는데각각이 CSS가 적용될 대상을 지정하는 선택자이다 보통 선택자는 아래와 같이, 선택자 이름과 선언구간 두가지로 분류된다. 선택자 선언구간 body {font-size:10px; color:red; text-align:center} 선택자는 여러가지 방식으로 지정할 수 있는데 다음과 같다. 1. 태그선택자 : 특정한 태그에 CSS 를 적용할 때 사용한다. h2 { color : blue; text-align : left; } 동해둘리의 IT Story 2. 클래스 선택자 : 클래스하나를 정의한 후에, 원하는 어떤 태그에도 적용할 수 있다. 선택자 선언구간 .DefaultFont {font-size:10px; color:r..

IT공부방/HTML5, CSS 2016. 7. 20. 11:42