4/22 - 웹2 (4강)

4/22 - 4강

 

마켓컬리 상단바 (flex)2 

[리스트 태그 ul,li]

[목록과 리스트]
ul은 목록역할, li는 리스트 역할
제목은 제목태그(h태그)를 추가적으로 작성 해줘야 한다.

[주의사항]
ul태그 안에는 li태그만 사용할 수 있다. li태그 안에는 모든 태그를 사용할 수 있다. 때문에 너무 큰 구조에 ul,li를 활용하는 것은 코딩할때 헷갈릴 수 있다. (div로 짜고 작은 구조를 ul,li 활용)
2. ul,li태그는 독단적으로 사용할 수 없다. ul과 li태그는 서로가 없으면 쓸 수 없다.(웹 표준에 어긋나는 코드이다.)
네비태그, 아이콘 정도에만 써주는 것을 추천한다. 큰 구조에서 사용시 불편함.

[개발자 모드]
1. 미리보기 화면에서 원하는 태그에 우클릭 - 검사를 누르면 css 정보를 확인할 수 있다.
2. 개발자모드 왼쪽 상단에 점선 화살표 아이콘을 클릭하고 미리보기 화면 태그에 마우스를 올리면 팝업창에 간단한 css 정보를 확인할 수 있다.
3. 개발자모드 css 파일에서는 기본적으로 들어있는 코드와 내가 작성한 코드를 따로 확인할 수 있다.
index.html - 24ae1963... -> 내가 작성한 코드
user agent stylesheet -> 기본적으로 들어있는 코드

[ul, li, body 노멀라이즈]
body와 ul에 기본적으로 여백값이 들어있기 때문에 margin: 0; padding: 0;이라는 코드로 한번에 노멀라이즈 진행
li는 추가적으로 함께 노멀라이즈 하기 위해 같이 선택 후 list-style: none;(동그라미 형태 삭제)라는 코드로 노멀라이즈 진행

[활용예시]
1. 네비바
네비게이션바(목록)
- 메뉴 리스트1(리스트)
- 메뉴 리스트2(리스트)
- 메뉴 리스트3(리스트)

2. 아이콘
아이콘박스(목록)
- 아이콘 리스트1(리스트)
- 아이콘 리스트2(리스트)
- 아이콘 리스트3(리스트)

3. 상품리스트(상품목록x)
상품리스트(목록)
- 이미지 리스트(리스트)
- 버튼 리스트(리스트)
- 제목 리스트(리스트)
- 본문 리스트(리스트)

ul태그 안에는 li외 다른 태그가 들어올 수 없기 때문에 제목 태그(h태그)를 바깥쪽에 작성한다.

 

 

[제목태그]

[h태그 특징]
1. 기본적으로 상하마진을 가지고 있다.
2.h1~h6 순서대로 작성해야한다.
ex)예시1.틀린형태
<h1></h1>
<h3></h3>

예시2.틀린형태
<h1></h1>
<h1></h1>
<h2></h2>
h1은 html문서 내에서 딱 한번만 사용할 수 있다.

**로고 이미지나 코드는 h1태그안에 작성한다. 가장 상단에 첫번째로 들어오는 의미있는 구조이기 때문이다.

 

 

[nav태그]

<nav>

          <!-- ul>li*4>a[href="#"]{list-$} -->

          <!-- 목록>리스트4개[임의링크]{텍스트} -->

          <ul>

            <li>

              <a href="#">list-1</a>

              <!-- a태그 - 연결 -->

            </li>

            <li><a href="#">list-2</a></li>

            <li><a href="#">list-3</a></li>

            <li><a href="#">list-4</a></li>

          </ul>

        </nav>

ul : 목록
li : 리스트
a : 연결(페이지) 
href="#" : 아직 페이지 생성이 안되었을때 임시로 #를 달아준다.

a태그 노멀라이즈 : 텍스트 기본 컬러로 변경, 밑줄 제거 
[코드] : a {  color: inherit;  text-decoration: none;}

body, ul여백 제거 & li 리스트스타일 제거
[코드] : body, ul, li {  margin: 0; padding: 0;  list-style: none; }