1%

[코딩]Day03_목록 태그(List) 태그, 링크태그

신씨드 2023. 2. 2. 17:36
  • 태그 작성시 시작과 끝 태그를 미리 만들어 넣고 안에 내용 작서 시작!!!!

  • 목록 태그(List) 태그 (대체로 styple시트로 대체 됨)
  1. 순서 있는 리스트(Ordered List)

<ol></ol>

-type 속성: disc(기본), square, circle

--> list-style-type: circle; /* 스타일로 표현시 */

2.순서없는 리스트(Ordered List)

<ul></ul>

-type: 1(기본), i, I, A, a

--> list-style-type: i;

-구조

<ul>

<li>리스트1</li>

<li>리스트2</li>

</ul>

  • 동일한 내용 작성시 복붙 추천!! (복붙을 해야 에러가 줄어듬)
  • 동일한 구조의 태그 쓸때 아래처럼 하면 자동 작성됨

하위관계

[주메뉴,하위리스트 작성]

 

(주메뉴-서브메뉴 구조)


[아키텍쳐]

  • 정보 구조화 작업
  • 태그가 기본적으로가지고 있는 마진 없애기

[*링크 태그]

:하이퍼텍스트를 만듬

<a>~</a>

-->하이퍼텍스트 역할을 하는건 텍스트, 이미지, 동영상

  • 1.다른 문서로 연결

- href속성: 연결하는 역할

-target속성: 창을 여는 방식(새로운 창으로 문서를 열 때의 값은_blank)

ex)

<a href="url 또는 파일이 저장된 위치 설정">하이퍼텍스트</a>

  • 무조건 ul 안에는 li만 들어갈 수 있음
  • li블럭요소 안에 a태그 인라인 요소
  • 문서 링크 주의사항: 링크된 문서의 이름에 공백사용 불가

<a href="오늘의 할일.html"> (X)

  • 2.같은 문서내의 특정위치로 연결

<a href="#앵커이름">~</a>: 연결

<div id="앵커이름">: 특정위치 지정

<a href="#a"> a로 연결</a>

<div id="a">

<div id="b">