◎ <li> 태그

▶ UL OL DL 의 각 리스트들을 li 로 표시한다


◎ <ul> 태그

▶ 비순서형 목록 Unordered List

▶ <li> 요소 마다 블릿이 제공됨 ( 블릿 : 특수문자)

▶ 연속으로 나열된 콘텐츠를 표현

▶ 순서가 정해져있지않아 홈페이지 대메뉴 또는 소메뉴 등이 적합하다.

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

<ul> 과 <li> 사이에는 그어떤 문자도 태그도 올수가 없다. 와도 표현이 안된다 (ul 과 li 는 1set)

<li> 와 </li> 사이에만 사용할수 있고 li 와 li 사이에는 사용할수 없다.

<li>와 </li> 사이엔 다른 <ul> 이 올수도 있다.

ex)

<ul> <li> <ul> <li>자유게시판1</li> <li>자유게시판2</li> <li>자유게시판3</li> </ul> </li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>

<ul> <li>자유게시판</li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>




◎ <ol> 태그

▶ 순서형 목록 Ordered List

▶ <li> 요소 마다 숫자 블릿이 제공됨

▶ 순위 또는 연속된 숫자의 리스트를 표현

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

ol태그도 ul태그와 마찬가지로 ol과 li 사이에 다른태그는 올수없다.

또한 li태그 안에 또 ol과 ul 등의 리스트를 표현할수있다.

<ol> <li>대마도여행</li> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>



<ol> <li>대마도여행</li> <ol> <li>1일차 비행기타기</li> <li>2일차 배타기</li> </ol> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>



◎ 정의형 목록 태그

▶ <dl> 정의형 목록 지정 ( Defines a description List.)

▶ <dt> 용어 정의 (Defines Terms/names)

▶ <dd> 지정 정의 설명 (Describes each Term)

낱말 등 특정 단어를 정의할때 사용하는 요소 (국어사전 등)

제목 + 내용 형태로 범용적으로 사용하곤 한다.

▼ CSS 특징

dt는 있는그대로 나타나고 dd는 들여쓰기로 나타난다.

반드시 순서대로 표시 dl > dt > dd 무조건 3가지가 다 나타나야한다.

각 서로다른 태그 사이에는 ul ol 과 마찬가지로 다른태그를 넣을수는 없다.

<dl> <dt></dt> <dd>=월드 와이드 (Web)</dd> <dd>[명사]Web</dd> <dt></dt> <dd>=월드 와이드 (Web)</dd> <dd>[명사]Web</dd> </dl> //dt 두번 사용도 가능






◎ 테이블요소

▼ caption 표의제목

기본값이 표의 바깥 위에서 가운데 정렬 (표의크기에서)

<table> <caption>표의 제목</caption> </table>

summary 표의요약글

시각장애인 전용 속성

브라우저에 시각적으로 표현되지는 않음

표의양이 얼마인지 가늠도안되고 양이 방대하니 요약글을 먼저 듣고 넘길지 아님들을지 선택할수잇게 요약글을 넣어주는거다

<table summary="요약"> <caption>표의 제목</caption> </table>

<colgroup>,<col> 열의 그룹

<caption> 요소 다음에 위치함

첫번째 <col>요소는 표의 좌측 첫 번째 셀부터 적용됨

가로사이즈 (width)만 지정가능

<table> <colgroup> <col width="200px"> <col width="20%"> </colgroup> </table>

테이블 그룹 (thead , tfoot , tbody)

표는 유동적인 사이트로 관리하기위해서 (반응형)

그래서 표는 px보다 %로 입력해주는게 좋다

테이블의 행의그룹 thead -> tfoot -> tbody 순으로 제공

모든 행의 그룹을 제공하지 않아도 된다. - 콘텐츠의 구성에 따라 유동적으로 달라진다.

<thead> 에는 제목셀인 <th>만 제공할 수 있다.

<tfoot> <tbody> 에는 제목셀 <th>,내용셀 <td> 을 복합적으로 제공할수있다.

<table> <thead> <tr> <th>수강생 </th> <tr> </thead> <tfoot> <tr> <th>합계</th> <td>10</td> </tr> </tfoot> <tbody> <tr> <td>10</td> </tr> </tbody> </table>

tr , th , td

tr (table row = 행)

th (table header cell 제목셀)

기본 css : 가운데정렬 , 굵은글씨 , 세로 가운데 정렬

td (table data cell)

기본 css : 좌측정렬 , 세로 가운데 정렬 , 기본글씨


◎ rowspan , colspan

rowspan

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공



colspan (column 의 약자)

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공




◎ enctype 속성

<form>태그의 속성인 method, action, enctype 등은 입력받은 데이터를 어떻게 처리할 것인지 세부적으로 설정하는 데 사용된다. method는 전송 방식, action은 전송 목적지, enctype은 전송되는 데이터 형식을 설정한다.

▼ 내용

enctype 속성은 다음 세가지의 값으로 지정될 수 있다.

1. application/www-form-urlencoded

디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. 폼데이터는 서버로 전송되기 전에 URL-Encode 된다.

2. multipart/form-data

파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다. 그렇게 하지 않으면 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다. 그리고 이떄 메소드는 post값으로 지정해줘야 한다

3. text/plain

이 형식은 인코딩을 하지 않은 문자 상태로 전송한다.

request에 들어있는 데이터

<form action="/videos/upload" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="videoFile" required="" accept="video/*"> <input type="text" placeholder="Title" name="title" required=""> <textarea name="description" placeholder="Description" required=""> </textarea> <input type="submit" value="Upload Video"> </form> /////////////////////////////////////////////////////////////////////////////////// //form 객체에 들어있는 데이터 enctype="multipart/form-data 아래는 NODE.JS로 객체확인 request.body = { title: 'abcd', description: 'efgh' }; request.file = { fieldname: 'videoFile', originalname: 'sidetoside.mp4', encoding: '7bit', mimetype: 'video/mp4', destination: 'videos/', filename: '1e8e29d1aa9431881308d7df174b4171', path: 'videos\\1e8e29d1aa9431881308d7df174b4171', size: 18667990 } /////////////////////////////////////////////////////////////////////////////////// // enctype="multipart/form-data 이 없을시 request.body = { videoFile: 'sorrynotsorry.mp4', title: 'abcda', description: 'efegfg' } request.file = undefined;

위 처럼 enctype가 있으면 type=file 인 input은 file의 대한 데이터를 request에 담는다.

enctype가 없으면 request에 file의 경로와 이름만 전송되고 file의 대한 데이터는 전송되지 않는다.





◎Entity Code

특수문자를 특별한 코드로 표현

HTML의 문법도 특수문자와 동등하게 제공될경우 오류를 방지할 수 있음

nbsp: non-breaking space (스페이스바 1번 빈칸) lt : less than ( < ) gt : greater than ( > ) middot : Middle dot ( ) amp : ampersand ( & ) quot : QUotation( " ) //따옴표는 없고 오로지 쌍따옴표만 된다. &npsp; 는 띄어쓰기 역활을 한다 html에 코드에 띄어쓰기 한칸은 표시가되나 그이상은 무시가되는데 그럴경우 이 entity코드를 써주면 좋다 <br> 줄바꿈태크 엔터같은역활
<..>&여 철수가 말했다. "아 힘들어~" ---------------Entity Code----------------------- &lt;&middot;&middot;&gt;<br>&amp;<br> 철수가 말했다. &quot; 아 힘들어~ &quot;




◎ <IMG> 태그

<img src="twitterlogo.jpg" alt="트위터">

▼ 내용이 없는 경우는 빈 대체 텍스트 제공 (alt 속성 이용)

alt의 대체 텍스트를 넣을경우 이미지를 있는그대로 표현할수 있는 텍스트를 넣는게 좋다. 예를들어 트위터 로고 img 파일을 너놓고 alt 속성에 새라고 넣으면 이건 잘못된 예시다. 이유는 시각장애인들의 접근성을 위해서이다.

<img src="연혁도.jpg" alt='수자원공사이력' longdesc='text.html' >

▼ 아래처럼 이미지내용이 길거나 복잡한 경우는 longdesc, 대체 콘텐츠 등으로 추가정보 제공

연혁도 같은 img파일의 텍스트가잇는 것 같은경우엔 longdesc='long.html' 같은걸 써서 텍스트를 따로남깁니다.

또한 다른방법으로는 보통 연혁도같은경우 ol li 태그등을 이용하여 텍스트로 표현해주는데 따로 html을 만드는게아니라 이미지 바로밑에 텍스트를 넣어준다 그리고 텍스트의 스타일을 position:absolute: left:-5000% 를 사용하여 넣어준다 이유는 일반사용자는 그림을보고 이해하지만 시각장애인들은 웹페이지를 대신 읽어주는 기계를 사용해서 듣기때문이다. 이미지파일은 못읽고 대체텍스트alt나 그밑에 숨긴텍스트를 읽어서 들려주기때문이다. 간혹 display none으로 하는경우도 있는데 이경우 시각장애인의 장비가 읽어주지 못하는 경우가생긴다. 그래서 position으로 위와같이 작성하는게 좋다



▼ longdescription 확인방법. (마우스 우측버튼 > 설명보기)


◎ <a> 태그

▼ <a> = Anchor (닻)

▼ href = Hypertext Reference

▼ 페이지와 페이지를 연결하는 link

▼ target 속성으로 페이지 열리는 방식 제공 (_blank 라는 속성을 넣어주면 새창열림)

<a href="url" target="_blank"> 텍스트 ></a>

▼ 다른 도메인 연결시 http:// 까지 제공해야함

▼ 파란색 텍스트에 밑줄로 기본제공됨

▼ href의 여러가지 이벤트 #을 주게되면 그뒤에 나오는 id값을 찾아서 스크롤이 이동된다.

1. <a href=""> 링크값에 내용이 없을경우</a> 2. <a href="#">#만 제공하는 경우 </a> 3. <a href="#content">내부링크를 제공하는 경우 </a> 4. <a href="#a">없는 아이디를 넣는경우 </a> 1: 내용이 없을경우 IE의 경우는 내컴퓨터가 열림 , Chrome 는 아무 변화없음 2: #만 제공하는경우엔 scroll이 맨위로 가게됩니다 3: #content는 #뒤에 이름을 써줄경우 내부링크로 작동되어 태그의 id='content' 인 태그를 찾아서 scroll 이 이동됩니다. 4: #a #뒤에 없는 id를 넣을경우 현재 scroll 고정, 현재scroll에서 새창이나 다른 이벤트를 줄경우 사용 #none를 쓰는사람도있는대 #a 로 쓰는게 바람직하다




+ Recent posts