Programming/HTML 8

<HTML5> 8강 blockquote/q 태그, abbr/acronym 태그, del/ins 태그, sup/sub 태그, address태그

, 태그 - 블럭단위의 긴 인용문은 태그를, 인라인 단위의 짧은 인용문은 태그를 사용한다 - cite 속성에는 인용한 웹사이트의 URL 주소를 기재. - title 속성에는 접근성을 위해 글에대한 제목/상세 설명을 기재 를사용하면 티스토리에서는 이렇게 나타낸다 , 태그 abbr => 축약어 한글자씩 읽는다 acronym => 두문자어 약어를 그대로 발음한다. , 태그 - 인라인 요소 - 문서에 추가된 내용이나 삭제된 내용을 명시할 때 사용한다. ex1) 를 사용하면 텍스트 하단에 밑줄이 그어진다. ex2)을 사용하면 텍스트 중간에 밑줄이 그어진다 , 태그 - 수학 공식에 사용되는 수식이나 원소기호를 나타낼 때 사용하는 윗첨자와(sup) 아랫첨자 (sub ) ex) H2O, 22 태그 - 블럭요소 - 사용..

Programming/HTML 2020.06.09

<HTML5> 7강 img 태그 / <map> 태그

태그 - image 의 약자 - 이미지를 처리하는 태그이다. - inline 요소 (하위계층) - 시작태그로만 구성되어있다.(닫는태그가 없다.) - width height 값으로 사이즈를 조정할 수 있다. - alt 값은 그래픽 정보를 접할 수 없는 사람들을 위한 텍스트 정보로 사진에 대한 설명을 기재한다.(의미없는 사진은 x) - padding 속성을 갖을 수 없다 img태그 속성 - src="이미지 경로/파일명.확장자" (source) - alt="텍스트정보" (접근성-리더기가 읽는다) ex) css속성을 사용한 배경이미지 처리 - background:url(이미지의경로) 위치 rpeat값 (repeat/no-repeat/repeat-x/repeat-y) - top/bottom/left/right/c..

Programming/HTML 2020.06.08

<HTML5> 6강 dl, dt, dd 정의형 목록태그

- definition lists 의 약자 - block level element 이다. 태그의 직계 자손은 , 만 올 수 있다. - 키워드와 설명으로 구성되는 정의형 목록의 범위를 생성한다. - 용어 설명에 적합한 태그이다. - definition term의 약자 - 목록의 제목을 나타낸다. - 요소는 inline요소만 사용 가능하다. - 태그안에서만 사용될뿐 - 는 여러개가 와도 상관이 없다. - definition description의 약자 - 를 설명하는 태그이다. - , 순서는 상관없다. 계층으로 보면 dt = dd - 블럭요소 인라인요소 모두 갖을 수 있다. - default 값으로 40px 들여쓰기가 되어 있다. - 태그안에서만 사용된다. - 태그와 같은 성질을 가지고 있다 . , 태그와 ..

Programming/HTML 2020.06.05

<HTML5> 5강 ul, ol, li 목록태그

태그 - unorder list 약자 - 순번이 없는 목록태그 - 인라인 요소이다. - 순번대신 불릿을 가지고 있다. - CSS 속성에 따라 다양한 형태의 불릿을 표시할 수 있다. (list-style: circle ,disc, square) - 실무에서는 불릿이 불편하여 잘 사용하지 않고 (ul{list-style : none}) 필요할때는 다른 기법으로 사용한다 (img, background) - 태그의 직계 자식은 태그만 사용할 수 있다. - 리스트, 네비게이션 메뉴, 캐러셀 등 연관된 콘텐츠가 반복적으로 나열되어 있을 때 자주 사용된다. 태그 - order list 약자 - 순번이 있는 목록태그 - 인라인 요소이다. - CSS 속성에 따라 1,2,3 abc등 여러 기호로 표시할 수 있다. (lis..

Programming/HTML 2020.06.02

<HTML5> 4강 a 하이퍼링크 태그

태그 - Anchor 의 약자. 정박지, 닻의 뜻을 가지고 있다. - 웹페이지와 웹페이지를 연결하는 하이퍼 링크. 태그중의 가장 중요한 태그라고 볼 수 있다. - 스크린 리더기에서 표현해주는 태그이다. - 요소는 인라인요소지만 블럭요소의 부모가 될수 있다. - 글자색상(#00f,보라색), underline 기본구조를 가지고 있다. - 포커스를 받을 수 있는 태그 - color속성은 상속되지 않는다 태그의 속성 href - Hypertext Reference 의 약자 - 연결할 주소를 지정해놓으면 클릭시 지정된 페이지로 이동한다. ex1) href="url" => 입력된 도메인 주소로 이동한다. ex2) href="파일명.확장자" => zip문서는 다운로드 받아진다. ex4) href="#아이디명..

Programming/HTML 2020.06.01

<HTML5> 3강 strong, (b) 강한강조태그, em (i) 약한강조태그

(strong태그를 적용했습니다.) - 힘, 강조의 뜻 - 글씨를 굵게 표시 - 스크린 리더기에서 strong태그를 사용한 부분을 강조하여 읽어준다. (b 태그와의 차이점) - 보통 해당 태그에 직접 사용한다. (b태그를 적용했습니다.) - bold의 약자 - 글씨를 굵게 표시 - 스크린 리더기에서 b태그는 강조하여 읽지 않는다 (strong 태그와의 차이점) - 해당 태그에 직접 적용하기보다 css속성중 font-weight : bold를 사용하여 표현한다. - 접근성문제로 사용하지 않는다 (em태그를 적용했습니다.) - emphasize - 텍스트를 기울여서 표시해준다. - 스크린 리더기에서 em태그를 사용한 부분을 강조하여 읽어준다. (i 태그와의 차이점) - 보통 해당 태그에 직접 사용한다. (i..

Programming/HTML 2020.05.31

<HTML5> 2강 p 단락태그, div 박스태그, span강조태그

태그 - 단락 paragraph의 약자 - block-level Element를 가진다. - 기본 16px를 가진다. - 제목 아래 본문 내용을 나타낼 때 사용되는 태그 - 한줄 이상의 문장을 넣을때 사용되는 태그. - 한줄 상하 여백을 가진다. 태그 - 나누다 division 의 약자. - block-level Element를 가지며 모든 블럭 요소를 담을 수 있다. - display:block 속성이 default로 되어있어 줄바꿈이 자동으로 된다. - 빈 박스 형태로 영역을 구분짓는 레이아웃으로 주로 사용된다. - 중첩이 가능하다. 태그 - span 태그는 기간 폭 너비의 뜻을 가짐 - inline-level Element요소를 가진다 . - 기본 스타일이 없고, css를 사용하여 내용안의 특정 부..

Programming/HTML 2020.05.30

<HTML5> 1강 h1 헤딩태그

- 헤딩태그는 ~ 6단계가 존재 h1태그입니다. h2태그입니다. h3태그입니다. h4태그입니다. h5태그입니다. h6태그입니다. - 헤딩태그는 블럭 요소를 가진다. - 헤딩 태그는 bold체가 기본 적용되어 있다. - font-size는 상속되지 않는다. - 헤딩태그는 웹 페이지의 제목, 목차를 나타내는 곳에 사용한다. - 웹페이지를 대표하는 로고는 h1태그를 사용한다. - 헤딩태그는 웹접근성에서 가장 중요한 태그이기 때문에 계층에 맞게 순서대로 사용해야 한다. * 헤딩 태그는 브라우저의 최상위 검색 대상이기 때문에 정확한 정보를 기재해야 웹 접근성에서 유리합니다. * 를 사용하고 로 바로 넘어가면 웹 표준성에 어긋나기 때문에 순서대로 사용해야 합니다. * html5에서0 시멘틱 태그가 생김으로써 h1태..

Programming/HTML 2020.05.30