<ul>태그

- unorder list 약자

- 순번이 없는 목록태그

- 인라인 요소이다.

- 순번대신 불릿을 가지고 있다.

- CSS 속성에 따라 다양한 형태의 불릿을 표시할 수 있다.  (list-style: circle ,disc, square)

- 실무에서는 불릿이 불편하여 잘 사용하지 않고 (ul{list-style : none})  필요할때는 다른 기법으로 사용한다 (img, background)

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

- 리스트, 네비게이션 메뉴, 캐러셀 등 연관된 콘텐츠가 반복적으로 나열되어 있을 때 자주 사용된다.

<ol>태그

- order list 약자

- 순번이 있는 목록태그

- 인라인 요소이다.

- CSS 속성에 따라 1,2,3 abc등 여러 기호로 표시할 수 있다.  (list-style: lower-romanm, upper-roman... )

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

- 검색어순위 등에 사용된다. ul태그에 비해 상대적으로 사용 빈도가 적다.

<li>태그

- 항목을 나열할 때 사용한다. (독립적으로 쓰이지 않고, ul, ol태그와 함께 사용된다.

- 들여쓰기가 되어 있다.

 -<li>요소는 <div>를 제외한 모든 블럭요소를 자식으로 사용할 수 있다

- <ul>,<ol>자식인 <li>태그 안에 또 <ul><ol>태그를 중첩할 수 있다.

   ex1) ul > li > ul    ex2) ol > li > ol

정리

목록태그는 계층 수단의 표현으로 사용된다.

순서가 필요한 목록은 ul, 필요없는 경우는 ol 태그를 사용한다. 대부분 ul태그를 사용한다.

실무에서는 불릿과 들여쓰기의 기본 형태를 잘 사용하지 않고 css에서 none을 default 값을 적용하여 사용한다.

<a>태그

- Anchor 의 약자. 정박지, 닻의 뜻을 가지고 있다.

- 웹페이지와 웹페이지를 연결하는 하이퍼 링크. 태그중의 가장 중요한 태그라고 볼 수 있다.

- 스크린 리더기에서 표현해주는 태그이다.

- <a>요소는 인라인요소지만 블럭요소의 부모가 될수 있다.

- 글자색상(#00f,보라색),  underline 기본구조를 가지고 있다.

- 포커스를 받을 수 있는 태그

- color속성은 상속되지 않는다

< a> 태그의 속성

href

- Hypertext Reference 의 약자

- 연결할 주소를 지정해놓으면 클릭시 지정된 페이지로 이동한다.

ex1) href="url"   => 입력된 도메인 주소로 이동한다.

ex2) href="파일명.확장자" => zip문서는 다운로드 받아진다.

ex4) href="#아이디명"  => 아이디명으로 점프된다.

ex4) href="#"  => '#'은 임시링크로 쓰인다 (오류방지)

title

- title="텍스트"

- a태그에 걸린 핵심 내용을 기재하는 곳이다.

- title 속성에 텍스트를 쓰고 마우스를 올려놓으면 툴팁에 타이틀 내용이 나온다. 나온다,

- 스크린 리더기에서 title에 쓰여진 텍스트를 읽어준다.

target

- a태그 클릭시 어떻게 반응할지를 결정하는 속성으로 self, blank, top, parent 4가지 값을 가진다.

    _self - 현재 페이지에서 해당페이지로 이동된다.

    _blank - 현재페이지를 유지하고 새창에서 해당페이지를 띄운다.

    _top - 최상위 창에서 해당페이지를 띄운다

    _parent - 새로운 탭에서 해당페이지로 띄운다.

- 지정하지 않으면 _self가 기본값으로 기존 브라우져에서 열린다.

rel (추후 자세히 설명)

href를 설명해주는 속성. 검색 엔진이 링크에 대한 자세한 정보를 얻게 해주는 데 도움을 준다.

필수로 써야할 값은 아니며 단독으로 쓰일 수 없다. <link>, <area> 등의 다른 태그에서도 쓰인다.

https://blog.naver.com/codms614/221668041568

<strong>

(strong태그를 적용했습니다.)

- 힘, 강조의 뜻

- 글씨를 굵게 표시

- 스크린 리더기에서 strong태그를 사용한 부분을 강조하여 읽어준다. (b 태그와의 차이점)

- 보통 해당 태그에 직접 사용한다.

<b>

(b태그를 적용했습니다.)

- bold의 약자

- 글씨를 굵게 표시

- 스크린 리더기에서 b태그는 강조하여 읽지 않는다 (strong 태그와의 차이점)

- 해당 태그에 직접 적용하기보다 css속성중 font-weight : bold를 사용하여 표현한다.

- 접근성문제로 사용하지 않는다

<em>

(em태그를 적용했습니다.)

- emphasize 

- 텍스트를 기울여서 표시해준다.

- 스크린 리더기에서 em태그를 사용한 부분을 강조하여 읽어준다. (i 태그와의 차이점)

- 보통 해당 태그에 직접 사용한다.

<i>

(i 태그를 적용했습니다.)

- italic의 약자

- 텍스트를 기울여서 표시해준다.

- 스크린 리더기에서 i태그는 강조하여 읽지 않는다. (em 태그와의 차이점)

- 해당 태그에 직접 적용하기보다 css속성중 font-style : italic를 사용하여 표현한다.

- 접근성문제로 사용하지 않는다.

정리

* strong태그와 b태그, em태그와 i태그. 비슷해 보이지만  웹접근성에서 바라보면 매우 큰차이를 가지고 있습니다.

strong태그와 em태그는 이것이 중요하다고 스크린 리더기에서 강조해주는 개념적인 측면으로 접근이 되며 접근이 되며,

b태그와 i태그는 디자인적으로만 강조되어 표현됩니다

* 스크린 리더기는 시각장애인, 인지장애인, 노인등을 위한 것으로 소리로써 웹페이지를 인도해주어 접근성을 가지게 합니다.

프로그래밍의 기본은 웹접근성을 준수하여 만드는 것입니다.

<p> 태그

- 단락 paragraph의 약자

- block-level Element를 가진다.

- 기본 16px를 가진다.

- 제목 아래 본문 내용을 나타낼 때 사용되는 태그

- 한줄 이상의 문장을 넣을때 사용되는 태그.

- 한줄 상하 여백을 가진다.

<div> 태그

- 나누다 division 의 약자.

- block-level Element를 가지며 모든 블럭 요소를 담을 수 있다.

- display:block 속성이 default로 되어있어 줄바꿈이 자동으로 된다.

- 빈 박스 형태로 영역을 구분짓는 레이아웃으로 주로 사용된다.

- 중첩이 가능하다.

<span> 태그

- span 태그는 기간 폭 너비의 뜻을 가짐

- inline-level Element요소를 가진다 .

- 기본 스타일이 없고, css를 사용하여 내용안의 특정 부분을 강조하거나 제어하기 위해서 사용된다.

- 헤딩태그는 <h1>~<h6> 6단계가 존재

h1태그입니다.

h2태그입니다.

h3태그입니다.

h4태그입니다.

h5태그입니다.

h6태그입니다.

- 헤딩태그는 블럭 요소를 가진다.

- 헤딩 태그는 bold체가 기본 적용되어 있다.

- font-size는 상속되지 않는다.

- 헤딩태그는 웹 페이지의 제목, 목차를 나타내는 곳에 사용한다.

- 웹페이지를 대표하는 로고는 h1태그를 사용한다.

- 헤딩태그는 웹접근성에서 가장 중요한 태그이기 때문에 계층에 맞게 순서대로 사용해야 한다.

   * 헤딩 태그는 브라우저의 최상위 검색 대상이기 때문에 정확한 정보를 기재해야 웹 접근성에서 유리합니다.

   * <h3>를 사용하고 <h5>로 바로 넘어가면 웹 표준성에 어긋나기 때문에 순서대로 사용해야 합니다.

   * html5에서0 시멘틱 태그가 생김으로써 h1태그를 여러번 사용해도 상관없지만 무엇이 맞다, 더 좋다는것은 의견이 분분한것 같습니다.

     핵심은 헤딩태그는 책의 목차와 같은 역할을 하기때문에 구분을 명확하게 잘 지어주어야 한다는 것입니다.