본문 바로가기

UIUX Web Standard/COA Lab's HTML

semantic tag 시맨틱 요소는 브라우저와 개발자 모두에게 각 영역에 태그로 그 의미를 부여한다. 비의미론적 태그 : , - 내용에 대해 아무 의미가 없는 공간만 분할해 주는 태그이다. 의미론적 태그 : , , - 내용을 명확하게 정의한다. 시맨틱 태그는 태그 자체가 보여주는 기능은 없지만, 영역에 대한 의미를 명확하게 정의하는 태그로서, 블록요소이며, 아래와 같은 태그가 있다. 태그 설명 article 게시물, 기사, 컨텐츠내용을 정의 aside 좌우측에 들어갈 컨텐츠를 정의 details 상세설명을 정의 figcaption figure의 설명을 정의 figure 특별한 이미지, 도표, 사진 등 시각적 요소를 정의 header 상단에 로고, 제목요소 등의 내용을 작성 footer, address, header는 자식요소.. 더보기
entity와 Emoji (엔티티와 이모티콘) 엔티티(entity) 문자는 예약어라고도 하며, 웹브라우저에서 예약된 문자를 표시하기 위해 사용한다. ※ 예를 들어 ..보다 작음의 기호로 ( 더보기
form 요소 HTML 양식은 검색, 로그인, 회원가입 등에서 사용자 입력을 수집하는 데 사용하며, 사용자 입력은 처리를 위해 서버로 전송된다. ※ form, fieldset 요소 태그명 설명 인라인 | 블록 form 입력값을 처리하는 프로그램으로 전송할 때 사용하는 태그 블록 action 속성을 갖는다. 서버에 전달할 값을 처리하는 프로그램 주소를 지정한다. method 속성을 갖는다. 어떤 방식으로 전달할지를 정의하며, get방식 : 검색 등 비보안 데이터를 위해 사용(method="get") post방식 : 중요정보 보안 데이터를 위해 사용(method="post") fieldset > legend 입력양식을 그룹화 할 때 사용하는 태그, 자식요소로 legend를 포함한다. 블록 팁 : 양식 데이터에 민감한 정보.. 더보기
기본태그연습 기본태그 설명 인라인 | 블록 br break line 줄 바꿈 태그 블록 p paragraph 문단 태그 블록 h headline text 제목태그 , 진하고, 크기가 크다. 블록 hr horizontal line 수평선 태그 블록 ol>li ordered list 순서가 있는 목록 태그이고 li(list)는 자식태그 블록 ul>li unordered list 순서가 없는 목록 태그이고 li(list)는 자식태그 블록 dl>dt+dd description list 정의목록, 자식으로 dt와 dd를 사용 블록 span 공간분할 인라인 div 공간분학 블록 img 이미지태그 필수속성 : src(이미지경로)와, alt(대체텍스트) 인라인(인라인블록) 오늘은 웹표준 배우는 첫번째 날입니다. 오늘은 웹표준 배우.. 더보기
텍스트 요소 모두 인라인요소에 해당함 텍스트 요소 인라인 | 블록 em 강조텍스트, 기울임체 인라인 strong 강조텍스트, 굵은체 인라인 mark 부분강조, 노란색표시 인라인 b 굵은체 인라인 small 작은글씨 인라인 sub 아래첨자 텍스트 인라인 sup 위첨자 텍스트 인라인 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. COPYRIGHT © All rights reserved. 물의 화학식은 H 2O입니다. 100m 2 ※ strong은 중요한 택스트를 정의하기 위한 태그이며, b는 의미는 없고, 단순히 텍스트를 굵게 표현하는 태그이다. 더보기
a태그와 table태그 연습 세상 겁날 것이 없어 보이는 Friends City의 시크한 고양이 네오. 지금의 모습과는 다르게 지우고 싶은 어릴 적 기억들을 가지고 있습니다. 머리 때문에 항상 자신감 없는 학창시절을 보낸 네오. 어느 날 패션 잡지를 통해 알게 된 가발의 세계에 빠져 자신만의 가발을 만들게 되고 트렌드를 선도하게 됩니다. 이후 자신감으로 무장한 네오는 다양한 친구들을 만나게 되고 자는 순간까지도 가발을 내려놓지 않습니다. 오랫동안 네오의 모습을 지켜봐 왔던 프로도의 끊임없는 애정 공세를 지금까지도 받고 있지만, 쉽사리 마음을 주지 않습니다. 항상 주변을 맴도는 프로도를 귀찮아 하면서도 내심 그런 프로도의 모습을 귀여워 하는 네오는 오늘도 프로도의 이벤트를 기대하며 외출 준비를 합니다. 카카오프렌즈 스토리 컬러링 북 .. 더보기
table tag table 태그를 사용하여 데이터를 행과 열로 정렬할수 있다. table태그의 자식요소 table 테이블을 정의 tr 테이블 안의 행을 정의, row th 테이블 안에서 제목셀을 정의, header cell td 테이블 안의 열을 정의, cell caption 테이블 캡션(설명)을 정의 테이블 위 가운데 정렬됨 colgroup 테이블 내에서 한개 이상의 열을 그룹화 함 각 셀의 전체 스타일을 컬럼에 스타일을 적용하는 대신 반복 유용함 모든 및 요소 앞에 배치 col 열의 속성을 각각 정의 colgroup의 자식요소로 배치 thead 테이블 안에서 헤더 영역을 그룹화 함 tbody 테이블 안에서 컨텐츠 영역을 그룹화 함 tfoot 테이블 안에서 푸터영역을 그룹화 함 ※ 기본 테이블은 table의 자식요소로.. 더보기
a tag 링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지간에 클릭 할 수 있습니다. syntax link text Visit Naver! 속성 attribute href 절대경로 www.naver.com/ 상대경로 sub.html 문서내 이동 #content #만 작성한 경우 문서의 최상단으로 이동 javascript:; 를 작성하면 최상단 이동을 막을 수 있다. 메일주소 링크 mailto:aaa@naver.com target _self 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니다. _blank 새 창 또는 탭에서 문서를 엽니다. _parent 상위 프레임에서 문서를 엽니다. _top 창 전체에 문서를 엽니다. ※ target="_blank"로 작성하면, 스크린 리더에.. 더보기

티스토리툴바