본문 바로가기

Java Programming/HTML5+CSS3

[CSS3] media query 펌 : http://nuli.navercorp.com/blog/42284 미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다. 하지만 실제로 많이 사용되지 않았는데, 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문입니다. CSS3에는 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 합니다. 적용방법미디어 쿼리를 적용하는 방법은 크게 3가지가 있습니다.(1) 마크업에서 CSS파일 분기하기 스타일시트 파일을 분리하여 특정 조건에 부합할 경우 CSS파일을 로딩할.. 더보기
[HTML] 테이블 만들기 펌 : http://cbkim.wkhc.ac.kr/htmlbox/hmf10.html#top ... 테이블의 시작과 끝을 알리는 태그입니다. 이 태그에서 테이블 선의 두께, 선의 색깔, 테이블의 배경색이나 이미지 등을 변경할 수 있는 속성을 지정할 수 있습니다.Align="left", "right", "center"표의 정렬 상태를 지정합니다.Background="이미지 파일명"표의 배경을 이미지로 지정합니다.Bgcolor="색상명"표의 배경을 색으로 지정합니다.Border="숫자(픽셀)"표의 테두리선의 두께를 지정합니다. 0으로 설정하면 테두리선이 보이지 않습니다.Bordercolor="색상명"표 테두리선의 색을 지정합니다.Cellpadding="숫자(픽셀)"셀 경계와 셀 안의 내용 사이의 간격을 지정합.. 더보기
Input readonly 속성 펌 : http://jmnote.com기초 예제 (속성) 변경불가 변경가능 예제: http://jmnote.com/html5/input_readonly.php자바스크립트로 제어 변경불가 변경가능 myform.country.readOnly = true; 예제: http://jmnote.com/html5/input_readonly2.php참고 자료http://www.w3schools.com/tags/att_input_readonly.asp 더보기
[CSS]display:block 와 inline 1. div와 span div는 어케 돌아가는가 1 div는 어케 돌아가는가 2 div는 어케 돌아가는가 3 => 웹브라우저 에서는 아래와 같이 표시된다. div는 어케 돌아가는가 1 div는 어케 돌아가는가 2 div는 어케 돌아가는가 3 span 은... 1 span 은... 2/span> span 은... 3/span> => 웹브라우저 에서는 아래와 같이 표시된다. span 은... 1span 은... 2pan 은... 3 div와 span의 가장 큰 차이는 줄 바꿈 여부이다. div가 줄바꿈되는 이유는 css display속성 기본값이 block이고, span이 줄바꿈되지 않는 이유는 css display속성 기본값이 inline이기 때문이다. 이 두 설정을 반대로 해보자. div{display:.. 더보기