정보모음/WEB

웹표준

kurokuma 2013. 2. 17. 03:58

리스트

<ul>부모태그 아래로 <li>태그를 사용

줄바뀜 문제로 하나의 인라인 문구를 구분지어보일수 있도록 사용

순서가 있는 리스트(ordered lists) <ol>태그

블록레벨 對 인라인 : HTML엘리먼트는 블록레벨인라인으로 구분

블록레벨 엘리먼트는 줄을 바꿔 각각 독립된 줄에 표시하는 반면, 인라인 엘리먼트는 다른 인라인 엘리먼트와 같은 줄에 표시

블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함 할 수 있는 반면, 인라인 엘리먼트는 블록레벨 엘리먼트를 포함 할 수 없습니다

※블록레벨 엘리먼트 : <div>,<h1>~<h6>,<form> 등

※인라인 엘리먼트 : <span>,<strong>,<em>,<q> 등

블릿모양 표시

 블릿모양 숨기기

<ul>

<li>소개하고픈 링크</li>

<li>즐겨읽는 책</li>

<li>좋아하는 영화</li>

<li>함께듣는 음악</li>

</ul> 

 .css   

 ul{

  list-style-image :none; >>블릿 감추기

  padding-left:0;  >>들여쓰기 하지 않기

 }

 il{

  background : url(a.gif) no-repeat 0 50%; >> 이미지를 반복하지 않고 왼쪽에서 0px만큼 위에서 50%위치에 위치하게 하라

 padding-left : 17%;

 }

       <ul>

<li>소개하고픈 링크</li>

<li>즐겨읽는 책</li>

<li>좋아하는 영화</li>

<li>함께듣는 음악</li>

</ul>