2022-10-25 [새싹 프론트엔드] 목록태그

강의 내용

• 목록태그 list
• 리스트 꾸미기
• 내비게이션 바

 

- 순서가 있는 리스트(ordered list)

<ol></ol>

 

- 순거가 없는 리스트(unordered list)

<ul></ul>

 

- 정의 리스트(definition list)

<dl></dl>

---

리스트 꾸미기

마커란? li옆에 있는 작은 점

ul, li의 범위

padding-left 가 기본적으로 들어가 있다.

 

---

내비게이션 바

• 우리가 흔히 사용하는 웹 사이트의 메뉴
• 주로 HTML의 링크 태그 <a> 를 사용하여 생성

수평 메뉴 만들기

1. display: inline-block을 준다.

2. float 속성을 사용한다.

 

display: inline-block;

장점

1. 부모가 자식의 높이를 인식한다.

2. 사용하기쉽다.

 

단점

1. 자식간의 여백이 발생해서 정교한 디자인엔 어울리지 않는다.

2. 계산값을 잘못주면 레이아웃이 탈락한다.

display: inline-block 요소사이에 여백발생

여백이 발생하는이유는 코드사이에 "엔터" 때문이다 엔터를 지우고 코드를 한 줄 로 작성하면 여백이 사라지지만

권장하지않는다.

 

위의 엔터 때문에 여백이 발생함

float: left; 

장점 

1. 자식간의 여백이 발생하지않는다.

 

단점

1. 부모가 자식의 높이값을 인지하지못한다 (clear-fix쓰면 극복가능)

2. 자식의 높이가 들쑥 날쑥하지않고 정확할때만 사용

3. 부모의 높이를 정확하게 알고있을때 사용

 

---

 

ul,ol > li > a 태그에 링크를 연결할 경우 a는 inline요소이기 때문에 아래 화면에서 보여지는 것처럼

본인자리에만 딱 맞춰 링크가 걸린다. 이때 li의 영역을 맞춰 a링크를 걸고 싶을땐

display: block;를 사용하면 된다.

아래의 두 이미지로 비교해보자

a의 영역이 늘어남을 확인할 수 있다.

해당 링크영역의 크기를 늘리고 싶을때는

아래처럼 <a> 태그에 직접적으로 w,h 와 수직정렬인 line-height, 수평정렬인 text-align을  써준다.

 

       a {
        display: block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
       }

 

 

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  2주차 블로그 포스팅