본문 바로가기

프로그램/HTML_CSS15

IE에서 HTML5 렌더링 문제 해결해 주는 HTML5Shiv IE 9 이전의 구 버전은 HTML5의 새로운 블럭 요소인 article, aside, hgroup, header, footer, figure, figcaption, nav, section 을 인식하지 못한다. 이런 경우 아래 코드를 태그에 삽입하면 이 문제를 해결할 수 있다. 위 코드는 Remy Sharp 라는 개발자가 만든 코드라고 합니다. 참조 : 행복한 워드프레스 개발자 포럼 PLAN & MAKE 2015. 3. 10.
[CSS3] box-shadow 를 이용해서 박스 테두리에 그림자 효과를 주자 가로세로 400px 의 한얀색 박스를 만든 후에 테두리에 투명도가 0.8인 검은색 그림자 효과를 준다. box-show : x축, y축, 그림자 두께, 그림자 색상, [그림자 방향] 그림자 방향에 값이 없으면 그림자는 바깥쪽으로 향한다. 안쪽으로 향하게 하고 싶으면 inset 을 추가한다. 그림자 효과를 안쪽으로 표현하고 싶으면 색상 뒤에 inset 을 추가해 준다. box-shadow:0 5px 20px rgba(0, 0, 0, 0.8) inset; * 지원 브라우저 크롬4+, 파이어폭스4+, 사파리3.1+, IE9+, 오페라10.5+, 안드로이드2.1+, iOS 3.2+ 2014. 3. 30.
[CSS3] border-radius 를 이용해서 박스 모서리를 둥글게 만들자 바탕색이 회색인 가로세로 400px 짜리 레이어를 만들고 4곳의 모서리를 둥글게 나타내는 소스이다. border-radius 의 값이 클수록 원형에 가까워 진다. //박스를 구성하는 내용 표시 * 지원 브라우저크롬6+, 파이어폭스4+, 사파리5+, IE9+, 오페라10.5+, 안드로이드2.1+, iOS 3.1+ 2014. 3. 24.
[CSS] 텍스트 박스에서 디폴트 입력언어 설정 자동변경 (한/영 전환가) style=”ime-mode:auto“ 영문모드 (한글사용불가능) style=”ime-mode:disabled” 영문모드 (한/영 전환가) style=”ime-mode:inactive” 한글모드 (한/영 전환가) style=”ime-mode:active“ 한글모드 (한/영 전환가) style=”ime-mode:deactivated“ 2014. 3. 17.
[CSS] 레이어의 기본 위치 설정 CSS의 position 속성을 이용하면 레이어의 위치 설정이 가능하다. position 속성의 값은 4가지 중 하나를 설정할 수 있다. static : 기본값으로 HTML문서의 일반적인 내용물의 흐름을 말한다. top, left 지정이 가능하다. absolute : 자신의 상위 레이어 안에서 top, left, right, bottom 등의 절대적인 위치를 지정할 수 있다. relative : HTML 문서 안에서의 일반적인 흐름을 말한다. top, left 지정이 가능하다. fixed : scroll이 일어나도 항상 지정된 위치에 있는다. IE6에서는 적용되지 않는다. 2014. 3. 10.
[CSS] 레이어 속성 레이어는 HTML상에서 기존의 요소와는 독립적으로 원하는 위치에 글이나 그림을 위치 시킬 수 있도록 해준다. 태그의 position 속성값을 absolute 로 설정을 하면 해당 태그를 레이어로서 사용이 가능하다. 속성 설명 left 브라우저 좌측경계로부터의 거리 top 브라우저 상단경계로부터의 거리 width 레이어의 폭 height 레이어의 높이 background-color 레이어의 배경색을 설정한다. 색이름이나 RGB색상코드가 가능하다. background-image 레이어의 배경이미지를 설정한다. #이름{position:absolute; background-image:url(back.gif);} visibility 레이어를 보여줄 것인지 또는 감출 것인지를 설정한다. hidden : 레이어를 감.. 2014. 3. 9.
[CSS] 레이어 정렬속성 HTML 문서상의 레이어는 float, clear 속성을 통해서 정렬할 수 있다. float : 레이어를 현재의 위치에서 좌측 또는 우측에 배치한다. 선택자 { float: 위치} none : 기본값 left : 현재 엘리먼트를 좌측에 배치하고 다음에 오는 요소를 우측에 배치 right : 현재 엘리먼트를 우측에 배치하고 다음에 오는 요소를 좌측에 배치 clear : float 속성이 사용된 엘리먼트의 정렬값을 다음 요소에 영향을 주지 않도록 한다. 선택자 { clear: 해제방향 } none : 기본값 left : float속성값이 left로 적용된 경우에 이를 해제 right : float속성갑싱 right로 적용된 경우에 이를 해제 both : float속성값 모두 해제 2014. 3. 8.

티스토리툴바