슈거

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 태그실제 브라우저에서 나타나는 내용들이 들어가는 태그

  Read More
• [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...

  Read More
• [HTML] 텍스트 관련 태그 모음

  HTML & CSS 2018. 12. 4. 15:31

  의미 없는 bold체 중요한 의미의 bold체 의미 없는 italic체 강조하는 italic체 small text 지정 형광펜 표시 취소선 표시 추가된 text 지정 아래 쓰인 text 위에 쓰인 text 본문에 쓰이는 text인용문을 지정하는 q태그, 큰 따옴표로 감싼다 수평줄(빈요소)

  Read More
• [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..

  Read More
• [CSS] select 박스 화살표 지우기

  HTML & CSS 2018. 11. 21. 17:50

  .remove_select_arr { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; &::-ms-expand { display: none; } &:focus { outline: none; } }

  Read More
• [CSS] input placeholder color

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

  Read More
• [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; } }

  Read More
• [CSS] counter 사용

  HTML & CSS 2018. 11. 21. 16:15

  .owl-dots { counter-reset: dots; .owl-dot { &:before { counter-increment: dots; content: counter(dots); } //01 02 ... 09 10 &:nth-child(-n+9):before { content: "0" counter(dots); } } }

  Read More