text-indent활용법 / a태그여백없애기 / alt와 title의 차이

의미있는 이미지를 백그라운드 이미지로 등록했을 경우 html에 이미지설명을 넣어줘야한다

화면엔 보이지않되 html상에 텍스트를 남겨두기 위한 방법

text-indent: -9999px

 

a태그 사이에 생기는 빈 여백을 없애는 방법

기본적으로 인라인요소들은 좌우배치될때 좌우기본간격이 있음 

해당 간격이 margin:0px으로 수정안됨 

-> 해결방법 

1)html에디터에서 태그줄바꿈없이 쓰기 

2)부모요소에 font-size:0을 적용

 

웹표준성을 위해 추가해줘야하는 속성

alt = 이미지 설명 글

title = 마우스 올렸을 때 뜨는 글

 

아이콘 설정시 아이콘마다 가지는 width 값이 다르기 때문에 가운에 위치하지않을 수 있음

-> 아이콘을 한번 더 감싸주어 text-align:center; 를 적용해 준다.

(단순히 보여지는 것만 생각하고 padding-left값을 다르게 적용하면 되지않나 생각했는데 여러개의 아이콘을 설정해야한다고 생각해보면 하나하나 설정하는게 엄청 큰 일이라는 걸 깨달았다. 항상 여러개의 작업을 해야한다는 가정하에 한 번에 적용할 수 있는 방법을 찾아보자.)

 

css 파일 분류해주기

reset.css

common.css 공통된 부분

- @import 'reset.css'; 리셋css 파일 연결해주기