HTML & CSS
-
[HTML] 문서의 기본 구조HTML & CSS 2019. 3. 15. 14:56
HTML 문서 구조 HTML Hello, HTML 1. DTD 선언문서 타입을 정의하는 문구, 선언문에 따라 브라우저 렌더링 모드가 정해진다.반드시 문서 최상단에 위치, 태그보다 위에 선언돼야 한다.2. html 태그 lang 속성검색엔진이나 브라우저가 어떤 언어로 작성되었는지 알 수 있게 나타내는 속성3. head 태그브라우저에 표시되지 않는 문서의 기본정보 설정(meta, title ..)이나 외부 스타일 시트, JS 파일을 연결한다.4. body 태그실제 브라우저에서 나타나는 내용들이 들어가는 태그
-
[CSS] font-face 설정 (브라우저 호환성 고려)HTML & CSS 2018. 12. 12. 17:21
EOT(Embedded Open Type) : IE8 이하 버전은 .eot 파일만 인식oft(OpenType)/ttf(TrueType) : 웹과 문서 파일에서도 사용 가능. 대부분 브라우저에서 사용 가능 (Chrome 4+, Firefox 3.5, Opera 10+, Safari 3-5, Android, iOS 에서 지원)WOFF(Web Open Font Format) : TrueType이나 OpenType 서체를 압축한 것 (Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+, FF Mobile(Gecko) 5, Opera Mobile11 에서 지원)SVG(Scalable Vector Graphic) : (Chrome, Opera, Safari, Opera Mobile 10...
-
[CSS] 테이블 tbody 에 스크롤 부여HTML & CSS 2018. 11. 21. 17:53
// 테이블 tbody 에 스크롤 부여 .add-scroll { border-collapse: collapse; width: 100%; thead { float: left; width: 100%; tr { width: 100%; th { width: 150px !important; } } } tbody { overflow-y: auto; overflow-x: hidden; float: left; width: 100%; max-height: 500px; tr { display: table; width: 100%; td { width: 100px; } } } tfoot { float: left; width: 100%; tr { width: 100%; td { width: 150px !important; bo..
-
[CSS] input placeholder colorHTML & CSS 2018. 11. 21. 17:49
input { padding: 0.78571429em 2.1em 0.78571429em 1em; border-radius: 0.28571429rem; &.input_error { background-color: rgba(221, 78, 90, 0.1); } &::placeholder { color: #f5747f; opacity: 1; /* Firefox */ } &:-ms-input-placeholder { color: #f5747f; /* Internet Explorer 10-11 */ } &::-ms-input-placeholder { color: #c6c6c6 !important; /* Microsoft Edge */ } &::-webkit-input-placeholder { color: #f57..
-
[CSS] 레이어 중앙 정렬 (ie7 ~)HTML & CSS 2018. 11. 21. 17:24
// 레이어 배경 .layer_popup { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.2); // 중앙 배치되는 내용 .content { display: inline-block; vertical-align: middle; } // 중앙으로 받쳐주는 가상 요소 &:after { display: inline-block; content: ''; width: 0; height: 100%; vertical-align: middle; } }