무아지경

display:table / display:table-cell 을 이용한 가로/세로 가운데 정렬 123456789 .display_table { display:table; width:200px; height:200px; border:2px solid #6d82f3;} .display_table_cell { display:table-cell; text-align:center; vertical-align:middle; } 가운데 정렬Colored by Color Scriptercs 가운데 전체를 감싸고 있는 div에 display:table;를 입력하고 가운데 정렬 하려는 div에 display:table-cell; vertical-align:middle;를 입력하면 된다. display:table / di..

display:table / display:table-cell 속성 display:table : 다른 요소를 table태그 속성으로 바꿔주는 역할 display:table-cell : 다른 요소를 tr, td 속성으로 바꿔주는 역할 table표 안에 있는 것처럼 바꿔서 쉽게 정렬 할 수 있게 할때 쓰인다. td에서 정렬은 text-align:center; vertical-align:middle; 으로 간단하게 가로/세로 정렬이 가능하다.

inline-block 요소와 block요소 배치(?) 웹표준에서 inline요소 안에 block요소가 들어가면 안된다. 단... a > div는 html5에서 표준으로 인정된다.

a태그의 href="" 코딩을 하다보면 수많은 a링크를 쓰게 된다. 이때 href="" 안에 아무것도 넣지 않게 되면 링크를 클릭 할때마다 페이지 상단으로 화면이 이동하게 된다. 이때 사용 하는것이 #none 혹은 javascript:void(0) 이다. #none / javascript:void(0)을 사용 하면 a태그의 페이지 변환/페이지 이동 기능을 무효화 시킨다고 한다. 그동안 #none를 써왔다. 아직까지는 문제된 적이 없는것 같다. 웹접근성 검사할때 문제가 됬던 적이 있었던것 같은데 아직 확실치 않아서 둘 중 무엇을 써야 하는지는 좀더 알아 봐야 할 것 같다.

첫번째 방법 - 기본형식 : window.open([URL],[name],[option],[replace]) - [URL] : 새 창의 url주소. 만약 지정하지 않으면 빈 창이 뜸 - [name] : 새창의 이름을 입력하거나 target 속성을 명시할 수 있다. - target 속성은 "_blank", "_parent", "_self", "top"이 있고 "_blank"가 default임. - [option] : 새창에 대한 특성, ","로 구분해서 나열함 width=pixels the width of the window. Min. Balue is 100 height=pixels the height of the window. min. value is 100 top=pixels The top positi..

유튜브 동영상 반응형 HTML + CSS 1234567891011121314151617 body { margin:0; padding:0; } .videoWrap { width:100%; max-width:100%; height:auto; } .videoWrap .videoArea { margin:0 auto; width:100%; max-width:640px; height:auto; } .videoWrap .videoArea { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .videoWrap .videoArea iframe, .videoWrap .videoArea object, .vid..

border-radius - 네모난 박스의 테두리를 둥글게 하는 기능 - 단위는 px, %를 사용할 수 있다. - 원을 만들때는 정사각형의 박스를 코딩하고(width, height:값일 동일) border-radius:50%; 를 사용한다. - border-radius: OOpx OOpx OOpx OOpx; (왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 순..) 으로 사용하여 원하는 코너만 둥글게 표현 가능하다. - 직접 원하는 코너를 지정 하는 방법도 있다. 1div { width:300px; height: 300px; background:#a9ddf2; margin:50px; border-top-left-radius: 60px; border-bottom-right-radius: 60px; }cs 1div { ..

버튼 디자인 유형들.... 12버튼이름cs- input 요소와 차이점은 내용을 가질수 있다는점 - button 요소는 텍스트뿐만 아니라 이미지 요소를 자식으로 포함할 수 있다. , 차이 과 은 기능적으로 동일하다. 하지만 button태그에 type속성을 넣지 않으면 submit 기능을 수행한다. 버튼 자체를 submit 용도록 사용한다면 문제가 안되지만 스크립트 동작을 원할 경우 type="button" 써주는 것을 추천한다. *button의 속성값 - type="submit" 전송기능 - type="reset" 내용을 초기화 - type="button" 기능구현에 많이 사용, 자바스크립트 실행을 목적으로 한다. 요소 URI를 ‘연결‘하기 위한 버튼으로서 형식으로 마크업 a태그에 스타일을 줘서 버튼 형식..