오늘은 ul 태그의 활용에 대해서 공부한것을 블로그에 올릴려고 합니다.
앞으로 html에서 글을 올릴때는 공부한걸
공개하는 방식으로? 정보가 필요하신 분들을 위할겸
저도 복습도 되고 해서, 이런식으로 글을 올리려고 생각을 하고 있습니다.
그럼 ul 태그는 어떤식으로 활용을 하는지 알아볼 텐데,
사실 코딩에는 정답이 없기 때문에 무엇을 자기가 어떻게 활용하던
전혀 상관은 없습니다. 단지 '이런식으로도 쓴다 라는것을' 쓰는 느낌으로 하겠습니다.
ul태그
1. ul태그는 block 이다.
block 태그에는 div , hn 태그 등이 있습니다.
block이 무엇이냐면, 넓이를 설정하지 않아도 화면을 가득 채우는 태그입니다.
그리고 빈공간은 마진 (margin)이 채우고 있습니다.
ex) 태그에 글자를 넣어서 글을 작성했는데
그 문장 말고도 문장을 포함한 행은 전부 태그안에 속해 있습니다.
2. ul태그의 문자 앞에 점을 없애는법
간단합니다.
ul css 즉 스타일에서
list-style:none; 이라고 적어주면 리스트 스타일이 아니게 되는 것이기 때문에
자연스레 앞의 점들이 없어진다.
3. ul태그의 안의 li태그를 이용해서 활용 하는법
ul을 자주 이용을 하게 되는데, 이는 li때문이기도 합니다.
우리가 코드를 쓸때 <ul>
<li>
</ul> 이런식으로 안에 항상<li>를 넣게 되는데.
항상 리스트 형식으로만 사용하는게 아니라,
li태그에 float:left;를 주어서 그냥 차례대로 쭈욱 정렬 시킬수가 있습니다.
<ul>안에 <li>를 넣어서 여러가지 항목을 입했습니다.
물론 css에서 list-style:none을 해두었습니다
그리고 아래와같이 앞에 점이 없이 list형식으로 나열된것을 볼 수가 있습니다.
이번에는 아래와 같이 li의 css에서 float:left를 주었습니다.
그럼 아래와 같이 list형식이 아니라
좌에서 우로 쭉 순서대로 정렬이 되는 모습을 볼 수가 있습니다.
이 성질 때문에 ul이 자주 이용이 되는것 같습니다.
여기까지 르쉐였습니다.
댓글