무아지경

텍스트 숨기기 작업을 하다 보면 버튼이나 a링크에 텍스트가 보이자 않아야 하는 경우 또는 에서 을 숨겨야 하는 경우.. 등등의 이유로 텍스트를 숨겨야 하는 경우가 있다. 이럴때 무조건 안보이기만 한다면 간단히 display:none 혹은 visibility:hidden 으로 숨기면 된다. 하지만 문제는 웹 접근성이다. 웹 접근성을 지키면서 텍스트를 숨겨야 하는게 문제가 된다. 에서 의 경우 화면에서는 보이지 않아야 하지만 스크린 리더는 읽을 수 있어야 한다. display:none 혹은 visibility:hidden 으로 숨기면 스크린 리더가 해당 내용을 읽을 수 없기 때문에 사용 해서는 안된다. 이외에도 font-size:0; / line-height:0; / width:0px; height:0px ..

onclick 으로 페이지 이동시키기 a링크를 이용해 페이지를 이동시킨일이 많았는데 작업하다보니 a링크가 아닌 버튼을 사용했을 때 페이지 링크를 연결 시켜야 할때가 생겼다. onclick 이용하면 간단히 해결된다. 1cs

가운데 정렬 하면 가장 많이 생각 나는것이 text-align:center 혹은 margin:0 auto; 이다. 둘다 가로 가운데 정렬 할때 가장 많이 사용하는 것들이다. 그런데 세로 가운데 정렬 하려면 어떻게 해야 할까?? 폭풍 검색후 몇가지 방법을 찾아냈다. display:table 을 이용한 가운데 정렬 - 이전에 쓴글을 참고하자. - 이방법을 실제로 적용해 보니 편한 방법이긴 display 속성을 건들여야 하는 방법이어서 제약이 많을 것 같다. 실제로 적용 해봤는데 마크업이 단순한 경우에는 편리한데 복잡한 마크업으로 페이지를 만들었을 경우에는 안되는 경우가 많은 것 같다. position을 이용한 가운데 정렬_Type 01 1div { position:absolute; top:0; bottom:..

text-transform text-transform 는 대문자 또는 소만자로 바꾸는 속성이다. - none : 입력된 그대로 출력 - capitalize : 단어의 첫번째 글자만 대문자로 변경 - uppercase : 모든 글자를 대문자로 변경 - lowercase : 모든 글자를 소문자로 변경 - initial : 기본값으로 설정 - inherit : 부모 요소의 속성을 상속 받음 font-variant font-variant 는 대문자를 소문자 크기의 대문자로 바꿀 수 있다. - normal : 소문자를 작은 대문자로 변경하지 않음 - small-caps : 소문자를 작은 대문자로 변경 - initial : 기본값으로 설정 - inherit : 부모 요소의 속성을 상속 받음 둘 속성 모두 한글에서는..

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; 으로 간단하게 가로/세로 정렬이 가능하다.

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..