본문 바로가기

728x90

HTML

(39)

[HTML] 멀티미디어(1) - img ▶ 이미지를 삽입하는 데 사용. 의 속성 속성 내용 및 설명 값 src - source의 약어. - 필수 속성. - 이미지의 경로, URL을 명시. URL alt - alternative의 약어. - 필수 속성. - 이미지가 제대로 출력되지 못할 경우 출력될 이미지의 대체 텍스트를 지정. width - 이미지의 가로 너비를 지정. height - 이미지의 세로 너비를 지정. srcset - 브라우저에 제시할 이미지 URL과 원본 크기의 목록을 정의. w, x sizes - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의. 의 크기 - 의 사이즈를 지정할 때 width든 height든 하나만 입력하면 이미지의 비율을 그대로 유지한 채 줄일 수 있음. - 이미지의 크기를 조절하는 용도로 사용..

[HTML] 수정 관련 요소 - del, ins ▶ delete의 약어. 문장의 내용이 있고 특정한 부분이 제거되었을 경우, 실제로 제거해버린 상태로 노출시키는 것이 아니라 원래 해당 내용이 존재했으나 현재는 제거되었다는 걸 나타내기 위해 사용. 삭제(혹은 변경)된 텍스트의 범위를 지정. 기존에 작성되어 있었으나 현재는 유효한 정보가 아닌 경우. 속성 - cite : 변경을 설명하는 리소스의 URI을 명시. 특정한 정보가 사라진 이유나 변경사항을 설명하는 정보의 주소를 입력. - datetime : 변경이 일어난 유효한 날짜, 변경사항이 실질적으로 언제 일어난 것인지를 명시. Inline level 요소. ▶ insert의 약어. 기존에는 없었지만 현재로서는 추가된 내용이라는 걸 드러내기 위해 사용. 새로 추가(혹은 변경)된 텍스트의 범위를 지정. 속..

[HTML] 인라인 텍스트(3) - code, kbd, sup/sub, time, span, br ▶ Inline Code의 약어. 컴퓨터 코드 범위를 설정. 고정폭 글꼴 계열(Monospace, 가로 사이즈가 동일한 글꼴 계열)로 표시됨. Inline level 요소. ▶ Keyboard Input의 약어. 텍스트 입력 장치(키보드)를 통한 사용자의 입력을 나타내는 텍스트 범위를 설정. Inline level 요소. ▶ , Superscripted text, Subscripted text. 위 첨자()와 아래 첨자()를 설정. Inline level 요소. ▶ 날짜나 시간을 나타내기 위한 목적으로 사용. 정확한 시간이 어떻게 되는지 유효한 날짜 문자로 나타내기 위함. 속성 - datetime : 유효한 날짜와 문자를 지정. Date 값. 자주 사용되는 형식은 YYYY-MM-DD. 사용할 수 있는 방..

[HTML] 인라인 텍스트(2) - strong, i, dfn, cite, q, u ▶ Strong Importance의 약어. 의미의 중요성을 나타내기 위해 사용. 강조가 아닌 의미가 실제로 문맥상에서 중요하게 사용하는 부분을 나타냄. - 문맥상에서 해당 텍스트/문장이 의미적으로 중요한 부분이라는 표시. 글자가 두껍게(Bold) 표시됨. - 와 은 의미적으로는 다르지만 화면상에는 동일하게 표시됨. - 두 태그를 함께 사용하는 경우 CSS를 통해 두꺼운 글체를 사용하지 않는다거나 다른 색을 주는 등 사용자가 혼용하지 않도록 작성하는 것이 필요. Inline level 요소. ▶ , 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용. - 의 경우에도 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용(이전 글 참조). - 가 일반 텍스트 내에서의 구분인 것에 비해 는 평범한 글자와의..

[HTML] 인라인 텍스트(1) - a, abbr, b, mark, em ▶ anchor의 약어. 기본적으로 현재 문서에서 링크를 걸어 외부 문서로 내보내는 경우에 사용. 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정함. 속성 - download : 해당 요소가 resource를 다운로드하는 용도로 사용됨을 의미. boolean 값. 페이지를 넘기는 것이 아니라 파일을 다운받는다는 것을 명시해서 브라우저에 힌트를 제공하는 용도로 사용. - href : 링크 URL 값을 넣음. 필수처럼 사용하나 HTML5부터 생략할 수 있도록 변경됨. 생략은 가능하지만 생략 시 링크로서의 기능은 상실하게 됨. - hreflang : href language. 이동하게 될 특정한 경로의 언어를 설정. - re..

[HTML] 문자 콘텐츠(2) - p, hr, pre, blockquote ▶ paragraph의 약어, 하나의 문단을 설정할 때 사용. 일반적으로 정보통신 보조기기 등은 다음 문단()으로 넘어갈 수 있는 단축키를 제공함. - 정보통신 보조기기를 통한 웹 접근성을 올려주므로 많이 사용됨. Block level 요소. - '마르고 닳도록' 이후 코드상에서는 Enter를 입력했으나 실제 출력된 화면에서는 띄어쓰기가 입력됨. - 태그를 이용해 줄바꿈을 해주지 않으면 코드상에서 입력된 엔터는 모두 브라우저에서 줄바꿈이 되지 않고 띄어쓰기로 인식되어 출력됨. - 줄바꿈할 수 있는 태그로 을 이용. ▶ Horizontal Rule의 약어. (주제에 의한) 문단의 분리를 위해 사용하며 수평선을 만들어줌. 을 수평선을 만들어내기 위한 용도로만 사용해서는 안 됨. - 대부분 표현적인 관점에서 ..

[HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd ▶ , , 각 항목()의 정렬된 목록()이나 정렬되지 않은 목록()을 설정. 목록을 구성하는 태그로 + 또는 + 가 한 세트를 이룸. - : Ordered List. 순서가 있어야 하는 목록. - : Unordered List. 순서가 필요하지 않은 목록. - : List Item. 목록 안에 있는 각각의 항목. 과 은 자식으로 만 포함 가능. 반드시 를 포함해 세트로 사용해야 함. 는 단독으로 사용될 수 없음. 이나 에 자식 요소로 포함되어 있어야 함. 정렬된 목록()의 항목 순서는 중요도를 의미할 수 있어 중요도 표시에 활용 가능. 과 은 Block level 요소. 의 경우 display: list-item;. Block level 요소에 소속된 개념. - , 이 block 요소기 때문에 그 안에 ..

[HTML] Contents 구분(3) - nav, address, div ▶ navigation의 약어, 다른 페이지에 대한 링크를 제공하는 영역. 내의 메뉴, home, about, contact us, 목차, 색인 등을 설정. - 반드시 header 내에 있어야 하는 것은 아님. 특정한 페이지에서 외부로 나가는 링크를 그룹화 하여 연결할 때 를 통해 묶어 줄 수 있음. - 예) 메뉴는 해당 페이지로 이동하는 역할을 함. 이때 전체 묶음을 를 통해 만들어낼 수 있음. - 메뉴를 묶을 경우 보통 사용. 안에는 , 이 삽입되어 사용되는 경우가 많음. - 목록 세트를 로 묶어 사용. - 이 부분이 navigation 역할을 하는 영역이라고 설정하는 것. Block level 요소 ※ , , , , , , 등 영역을 설정하는 태그들은 모두 Block level 요소에 해당함. ▶ ..

이전 1 2 3 4 5 다음

728x90

티스토리툴바