리베하얀님 HTML4, CSS1,2, 전체 초기화 CSS파일 정리

리베하얀님 HTML4, CSS1,2, 전체 초기화 CSS파일 정리

• 리베하얀님 css 초기화 강의[https://www.youtube.com/watch?v=aSWxSkxOvGw]

• 화면의 폰트 적용

  @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css)

• 주로 이야기하는 font-size는 본문내용

  body,div,d1,h1...{font-size:16px}

• vertical-align은 인라인 블록 등을 포함한 모든 인라인 요소를 수직정렬 하기 위함

• 전체적으로 수직 정렬하기 위해서 사용

  select, input, img, button {vertical-align:middle;}

• ul과 ol 앞에 숫자가 넣어지는 걸 초기화하기 위해 사용

  ul, ol {list-style-type:none;}

• 화면에는 보이면 안되지만 코드상으로 처리해야할 것을 화면 밖으로 뺀다

  .hide, legend, hr, caption span {position:absolute; left:-3000%;}

• em, address는 기본 이텔릭이여서 초기화

  em, address {font-style:normal;}

• table 가로,세로 100% 넣어야한다

• border-collapse:collapse;는 1px선과 1px선이 만나면 2px이 되는걸 한개 선으로 보여지도록 만드는 작업

• border-spacing는 선의 너비. 본래는 선이 | | < 이런식으로 보여서 | < 이렇게 보이도록 초기화

  table {border-collapse:collapse; border-spacing:0; width:100%}

• 링크 색 초기화, 밑줄 안나오도록 수정

  a {color:#666; text-decoration:none;}
  a:focus,
  a:hover {text-decoration:none;}

• 선을 없애줌

• img에 선을 없애는 이유는 특정 부라우저에서 링크일 경우 선이 생기기 때문

  fieldset, img, button {border:0;}

• 엣지 쓰다보면 inputbox에 x표시가 생김 그것 없애줌

  input[type=text]::ms-clear {display: none;}

• select 공통 디자인

  select {padding: 0 0 0 5px; height:38px; border:1px solid #e3e3e3;}

• form 요소 공통 디자인

  textarea,
  input[type="file"],
  input[type="password"],
  input[type="text"] {text-indent:4px; border:1px solid #ccc;}

• select hight:38px 높이가 IE8에서 다르게 나타나서 사용

  select {height:30px \OIE8;} /*IE8 전용*/

• 모든 폼요소에 초점이 와있을 때 선을 더 잘 표현

  select:focus, textarea:focus,
  input[type="password"]:focus,
  input[type="file"]:focus,
  input[type="text"]:focus { border:1px solid #555;}