ps.공부는 하는데 생각보다 사용할려니 맘대로 안된다.한번 디자인 엎어봐야지.
1.글씨 크기를 내마음대로
-<body>에 px로 박아 놓지 말고 %로 유동적으로 변하게 하자.
- 핵을 이용하여 구 웹브라우저(익스플로어5 )에 대비하자.
2.자유롭게 크기가 조절되는 내비게이션 메뉴바
장점
-이미지기반으로 내비게이션을 만들면 시력이 나쁜사람에게 안보임
-리스트 등 단순한 코드는 접근성이 좋음
-텍스트기반은 쉽게 수정가능
-리스트에 float를 이용하여 네이게이션바를 만들자
-float이 지정된 박스에는 반드시 너비값을 명시적으로 지정해야한다.
3.자유자재로 높낮이가 조절되는 행만들기
-특정영역내의 양쪽사이드가 필요할때 리스트를 이용한 띄우기 시용.
-이미지를 위 아래만 만들어 글이 틀어지지않게 확장성 고려
4.나만의 float 활용방법
-정의 리스트를 이용한 활용(참고 , 확인)
-float로 띄울시 문제점 해결관련
요약:float가 지정되있는 엘리먼트를 포함하고 있는 박스도float를 사용하면 이박스가
포함하고 있는 엘리먼트 크기에 맞게 박스의길이도 늘어남.
관련사이트
:Containing Floats
본문테스트 내의 float지정 이미지 해제방법
구조적 마크업을 수정하지 않는 float 해제방법
-더블 마진 버그
5.깨지지 않는 상자만들기
-넓이가 정해진경우 그냥 한쪽만 길게 만듬.
-넓이가 정해지지 않은경우 왼쪽만 하나 세로로 길게 만들고, 오른쪽은 세로 가로 길게 만든다
-포지션닝하고 길이는 통상 길게 만듬.
6.이미지나 CSS없이도 볼수있게
-그냥 배경색은 항상 배경이미지 색상과 같으색으로 저장
그러면 이미지가 안보여도 배경색으로 교체해서 그나마 다행.
7.쉽게변환할수 있는 테이블만들기
-의미있는 element을 사용하다
-scope속성 사용하기:스크린리더가 좀더편하게 읽을수 있음(row,col)
-caption 사용하기
-셀간격에 여백없애기 : border-collapse:collapse;
-display:block; :링크에 지정하게 되면 링크하는영역이 한라인으로 되어 한칸이 밀림.
관련사이트
