웹퍼블리싱 참고사항1

1. 자식 태그에서 float: left 했다면 그 태그 위의 부모태그에서 overflow: hidden 을 적어두자.

 

<ul style="overflow:hidden;">

     <li style="float:left;">1111</li>

     <li style="float:right;">2222</li>

</ul>

<div>333</div>

 

상기 소스상에서 overflow: hidden; 을 안쓰면 소스 중 제일 하단 333 태그 부분이 정상적으로 제일 하단부에 원하는 위치상 나오지 않는다.  이와 같은 효과를 얻기 위해서 clear:both; 로 float 기능을 제거 할 수도 있다.

 

2. img 태그는 기본이 inline-block 이다. 그런데,  display:block 으로 주면 빈공간 없이 이미지를 꽉 채울수 있다.

 

3. a태그를 display:block 하면 a태그내 글자 부분만 링크가 잡히는게 아니라 그 글자부분을 포함하는 빈공간도 링크가 나타난다.

 

4. 반응형에 자주 쓰이는 글씨 줄임말 표시

 

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;