닫기
이전 다음

NOTICE

새로움을 향한 설.레.임

before, after

페이지 정보

작성자 홈피사랑 작성일14-07-11 15:08 조회2,167회 댓글0건

본문

 



css작성시 많이 사용하는 것들입니다.



 



before : 주어진 엘리먼트 앞에 내용을 넣을수 있습니다.



after : 주어진 엘리먼트 뒤에 내용을 넣을수 있습니다.



 



특히 after는 상당히 유용하게 사용됩니다.



아래는 after를 사용 했을때, 안했을때 예제 입니다.



after를 사용해서 float:left를 해제 시키는 역할을 했다고 보시면 됩니다.

 

 

 

 



ex) after를 사용한 경우 



  

list에 after를 사용 했을경우 높이가 해당영역 만큼 잡혀서 의도한 대로 p 가 아래 배치가 됩니다.

>

>
01.jpg

01.jpg





ex) after를 사용하지 않은  경우

 

  

list에 after를 사용 하지 않을경우 ul.list 시작점이 p 영역이 되버립니다.

>02.jpg

 



 

02.jpg
예제링크

http://hompylove.com/2014/test/01.html





>>



 



>>
>
>>
>>>>>>>>>>>>>>>>

댓글목록

등록된 댓글이 없습니다.

홈피사랑 제공서비스

  • 홈피사랑 홈페이지제작 1.웹표준, 크로스브라우징 지원

    웹표준, 크로스브라우징 지원

    IE, 크롬, 사파리,파이어폭스 등 어떤 브라우저에서도 동일하게 홈페이지가 보여질 수 있도록 제작됩니다.

  • 홈피사랑 홈페이지제작 2.호스팅/도메인 1년 무상지원

    호스팅/도메인 1년 무상지원

    기본형 호스팅,도메인 1년 무상지원

  • 홈피사랑 홈페이지제작 3.원본파일제공

    원본파일제공

    추후 수정 및 유지관리가 용이하도록 제작완료 후 홈페이지 소스를 제공합니다.

  • 홈피사랑 홈페이지제작 4.검색등록 무료지원

    검색등록 무료지원

    네이버,다음 사이트 및 지역검색 등록 지원 및 노출 키워드제안(협의후)