page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

7일차 - 제목 및 메뉴 사용되는 태그(h, ul, ol, li)

1. h 태그

• 큰 제목, 타이틀 같은 태그는 h 태그를 사용한다.

  • 텍스트 내용은 p, span 사용
  • p는 긴 내용 span 은 짧은 내용

  

2. 목차를 만들 수 있는 태그 (ul, ol, li)

• 목차를 만들 때 사용하지만 목차 만들 때도 사용
• 메뉴를 만들 때는 ul ol 태그 와 자식으로 li 태그를 사용한다.
  • ul>li
    • ul : 리스트가 없는
    • li : list item의 의미, 안에 내용 적기
    • 번호가 아닌 점으로 표시
    • ul 을 사용할 때 무조건 지켜야하는 법칙이 있음
      • ul 밑에는 무조건 li 만 써야함
      • div 등 태그 쓰면 안댐
      • 자식 태그인 li 안에는 div 태그 등 자유롭게 사용 가능
  • ol>li
    • 사용 법은 위와 동일
    • ol은 순서(번호)가 있음
    • 보통 사용할 때는 번호가 없어도 되기 때문에 ul 을 더 많이 사용
• ul, ol, li 노멀라이즈
  • 노멀라이즈 할 때 공통 되는 것을 고려하여 최종 형태로 씀
  • h 시리즈에도 노멀라이즈를 한다
    • h 시리즈에 기본 여백이 있기 때문
    • 하지만 어느 정도 여백은 있음

ul, ol 차이점

ul il 노멀라이즈

노멀라이즈 최종 형태

3. 많이 쓰이는 정상적인 html 쓰는 방법

• 지금까지 배운 div section 등으로만 코드를 짜도 무방하지만 알아보기도 힘들고 나중에 태그만 보고 어디에 쓰인건지 모르기 때문에 많이 쓰이는 의미가 있는 태그를 사용한다.

• 그리고 class 지정을 태그별로 다 달아도 좋지 않기 때문에 보통 최상위 부모에 남겨 놓고 나머지는 그 자식태그로 보통 입력하여 사용한다.

• 그 예시로 웹사이트를 보면 제일 위에 있는 메뉴를 header 라는 태그로 사용하고, 제일 밑에 있는 태그를 footer 라는 태그로 사용한다.

• 그리고 class 를 넣을 때에는 그 태그만 변경할 때 사용할 수 있는 클래스와 전체적으로 변경할 수 있는 클래스 등 복수로 지정하면 변경하기 편하다.

  

• 시멘틱 태그 - 의미가 있는 태그 (참고 링크)

  • 이렇게 각 지정하여 사용하는 의미가 있는 태그를 시멘틱 태그라고 한다.
  • 시멘트 태그를 사용하여 누가 봐도 의미와 사용된 곳을 알 수 있게 작성하면 좋다.
  • section에는 id 를 달아주는 경우도 있다.

※ 참고사항

• cursor:pointer; → 마우스를 올렸을 때 커서 모양 바꿔줌

  • mdn 에 커서 모양 검색해보면 다양하게 있음