[HTML & CSS] 선택자 힘 / ul과 li 태그 / 디자인삼성 탑바 제작(3)

[css선택자 힘]

<section>
    <div class="color-box"></div>
</section>

 

[1순위] : 선택자로 선택된 클래스 선택자 (section > .color-box)

[2순위] : 혼자있는 클래스 선택자 (.color-box)

[3순위] : 선택자로 선택된 태그 (section > div)

[4순위] : 혼자있는 태그 (div)

 

[공통 특징]

• 같은 순위끼리는 가장 아래쪽에 있는 식이 실행된다.
• 순위의 순번이 낮을 수록 제일 후순위로 밀려 실행된다.
• 라이브러리는 2순위인 혼자있는 클래스 선택자로 되어있고, 커스텀을 하기 위해선 1순위인 선택자로 선택된 클래스 선택자로 지정하여 커스텀해야 한다.
• 라이브러리는 개발자 모드(F12)에서 관찰할 때 클래스 선택자로 지정되어 있기 때문에 1순위로 만들기 위해 상위 엘리먼트를 포함한 선택자를 지정해야한다. 

See the Pen css선택자 힘 by psm817 (@psm817) on CodePen.

 

 

[목록과 리스트태그 (ul & li)]

• ul과 li태그는 각각 목록과 리스트를 나타내는 태그이다.
• 간단히 예를 들면 ul은 하나의 카테고리를 의미하고 li은 해당 카테고리의 아이템이다. (과일이 ul이라면 딸기, 포도 등등이 li이 될 수 있다.)

 

[ul과 li 태그의 특징]

• ul 태그없이 li 태그를 사용할 수 없다. 
• 반대로, li 태그없이 ul 태그도 사용할 수 없다.
• ul 태그 자식으로는 li 태그만 사용할 수 있다.
• li 태그 안에는 어떤 태그가 들어와도 상관없다.
• li 태그 안에는 너무 큰 구조를 넣지 않는다. 간단한 a태그가 들어오는 경우가 많고, 2차메뉴 구조는 예외로 생각하면 좋다.
• 기본적으로 ul 태그에 margin 과 padding이 커스텀 되어있다.
• 기본적으로 li 태그에 list-style이라는 속성(앞 쪽에 동그라미 아이콘)이 커스텀 되어있다.
• a태그의 color와 text-decoration 속성을 표준화하는 것 처럼 ul, li 태그 역시 노멀라이즈(표준화)작업이 필요하다.

ul. li 태그의 기본 커스텀

[ul, li 노멀라이즈]

body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

 

See the Pen 목록과 리스트태그(ul, li) by psm817 (@psm817) on CodePen.

 

 

[디자인삼성 탑바 제작 (~ing)]

[메뉴 리스트 생성]

• ul과 li 태그를 이용하여 매뉴 탑바를 생성하고 속성을 지정한다.
• nav 태그 아래에 젠코딩을 이용하여 ul과 li를 생성한다.
• 젠코딩 방법 : ul>li*4.a[href="#"]{텍스트} (텍스트는 젠코딩 후 수정이 필요)
• ul과 li의 노멀라이즈까지 마친 후 태그를 가운데 정렬하기 위해서 ul 태그에 display: flex;와 align-items: center;와 height: 100%와 text-align: center를 지정한다.
• li 태그에서는 굳이 고정 px를 지정하지 않고 4개의 메뉴를 같은 너비로 설정하기 위해 flex-grow: 1을 지정해주고, 남는 공간에 관계없이 커스텀하기 위해 flex-basis: 0;도 함께 지정한다.
• ul 태그에서 height: 100%를 지정해주지 않으면 세로 정렬(align-items)이 적용되지 않는다.
• 그 이유는 모든 태그의 높이는 auto일 때, 0이기 때문에 ul 태그에 따로 높이를 지정하지 않으면 ul과 li 태그의 높이가 같아져서 가운데 정렬을 할 수 없게 된다.
• 따라서 nav 태그는 이미 높이 70px를 100% 상속받고 있는 상태이고, nav 태그의 높이를 ul 태그가 100%로 새로 작성하면 li 태그보다 높이가 커지기 때문에 가운데 정렬이 가능하다.

탑바 메뉴 추가 (html)

ul, li, a 태그의 표준화 (css)

left-box의 속성값 (css)

완성된 left-box의 로고 이미지와 메뉴

 

 

[복습]

See the Pen 19일차 복습 by psm817 (@psm817) on CodePen.