HTML, CSS/HTML(38)
-
[HTML] 수정 관련 요소 - del, ins
▶ delete의 약어. 문장의 내용이 있고 특정한 부분이 제거되었을 경우, 실제로 제거해버린 상태로 노출시키는 것이 아니라 원래 해당 내용이 존재했으나 현재는 제거되었다는 걸 나타내기 위해 사용. 삭제(혹은 변경)된 텍스트의 범위를 지정. 기존에 작성되어 있었으나 현재는 유효한 정보가 아닌 경우. 속성 - cite : 변경을 설명하는 리소스의 URI을 명시. 특정한 정보가 사라진 이유나 변경사항을 설명하는 정보의 주소를 입력. - datetime : 변경이 일어난 유효한 날짜, 변경사항이 실질적으로 언제 일어난 것인지를 명시. Inline level 요소. ▶ insert의 약어. 기존에는 없었지만 현재로서는 추가된 내용이라는 걸 드러내기 위해 사용. 새로 추가(혹은 변경)된 텍스트의 범위를 지정. 속..
2020.08.23 -
[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. 사용할 수 있는 방..
2020.08.22 -
[HTML] 인라인 텍스트(2) - strong, i, dfn, cite, q, u
▶ Strong Importance의 약어. 의미의 중요성을 나타내기 위해 사용. 강조가 아닌 의미가 실제로 문맥상에서 중요하게 사용하는 부분을 나타냄. - 문맥상에서 해당 텍스트/문장이 의미적으로 중요한 부분이라는 표시. 글자가 두껍게(Bold) 표시됨. - 와 은 의미적으로는 다르지만 화면상에는 동일하게 표시됨. - 두 태그를 함께 사용하는 경우 CSS를 통해 두꺼운 글체를 사용하지 않는다거나 다른 색을 주는 등 사용자가 혼용하지 않도록 작성하는 것이 필요. Inline level 요소. ▶ , 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용. - 의 경우에도 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용(이전 글 참조). - 가 일반 텍스트 내에서의 구분인 것에 비해 는 평범한 글자와의..
2020.08.22 -
[HTML] 인라인 텍스트(1) - a, abbr, b, mark, em
▶ anchor의 약어. 기본적으로 현재 문서에서 링크를 걸어 외부 문서로 내보내는 경우에 사용. 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정함. 속성 - download : 해당 요소가 resource를 다운로드하는 용도로 사용됨을 의미. boolean 값. 페이지를 넘기는 것이 아니라 파일을 다운받는다는 것을 명시해서 브라우저에 힌트를 제공하는 용도로 사용. - href : 링크 URL 값을 넣음. 필수처럼 사용하나 HTML5부터 생략할 수 있도록 변경됨. 생략은 가능하지만 생략 시 링크로서의 기능은 상실하게 됨. - hreflang : href language. 이동하게 될 특정한 경로의 언어를 설정. - re..
2020.08.22 -
[HTML] 문자 콘텐츠(2) - p, hr, pre, blockquote
▶ paragraph의 약어, 하나의 문단을 설정할 때 사용. 일반적으로 정보통신 보조기기 등은 다음 문단()으로 넘어갈 수 있는 단축키를 제공함. - 정보통신 보조기기를 통한 웹 접근성을 올려주므로 많이 사용됨. Block level 요소. - '마르고 닳도록' 이후 코드상에서는 Enter를 입력했으나 실제 출력된 화면에서는 띄어쓰기가 입력됨. - 태그를 이용해 줄바꿈을 해주지 않으면 코드상에서 입력된 엔터는 모두 브라우저에서 줄바꿈이 되지 않고 띄어쓰기로 인식되어 출력됨. - 줄바꿈할 수 있는 태그로 을 이용. ▶ Horizontal Rule의 약어. (주제에 의한) 문단의 분리를 위해 사용하며 수평선을 만들어줌. 을 수평선을 만들어내기 위한 용도로만 사용해서는 안 됨. - 대부분 표현적인 관점에서 ..
2020.08.22 -
[HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd
▶ , , 각 항목()의 정렬된 목록()이나 정렬되지 않은 목록()을 설정. 목록을 구성하는 태그로 + 또는 + 가 한 세트를 이룸. - : Ordered List. 순서가 있어야 하는 목록. - : Unordered List. 순서가 필요하지 않은 목록. - : List Item. 목록 안에 있는 각각의 항목. 과 은 자식으로 만 포함 가능. 반드시 를 포함해 세트로 사용해야 함. 는 단독으로 사용될 수 없음. 이나 에 자식 요소로 포함되어 있어야 함. 정렬된 목록()의 항목 순서는 중요도를 의미할 수 있어 중요도 표시에 활용 가능. 과 은 Block level 요소. 의 경우 display: list-item;. Block level 요소에 소속된 개념. - , 이 block 요소기 때문에 그 안에 ..
2020.08.22 -
[HTML] Contents 구분(3) - nav, address, div
▶ navigation의 약어, 다른 페이지에 대한 링크를 제공하는 영역. 내의 메뉴, home, about, contact us, 목차, 색인 등을 설정. - 반드시 header 내에 있어야 하는 것은 아님. 특정한 페이지에서 외부로 나가는 링크를 그룹화 하여 연결할 때 를 통해 묶어 줄 수 있음. - 예) 메뉴는 해당 페이지로 이동하는 역할을 함. 이때 전체 묶음을 를 통해 만들어낼 수 있음. - 메뉴를 묶을 경우 보통 사용. 안에는 , 이 삽입되어 사용되는 경우가 많음. - 목록 세트를 로 묶어 사용. - 이 부분이 navigation 역할을 하는 영역이라고 설정하는 것. Block level 요소 ※ , , , , , , 등 영역을 설정하는 태그들은 모두 Block level 요소에 해당함. ▶ ..
2020.08.21 -
[HTML] Contents 구분(2) - main, article, section, aside
▶ 문서 내부의 핵심적인 Contents를 지칭할 때 사용. - 내의 주요 Contents를 나타냄. 주요 Contents 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대한 부연, 또는 직접적으로 연관된 Contents로 이루어짐. - 예로 블로그에서 사이드, 광고, footer 등의 부분을 제외하고 핵심 포스트 부분이 main에 해당. 은 hidden 속성이 사용된 것을 제외하고 문서당 하나만 존재해야 함. Internet Explorer에서 지원하지 않음. Block level 요소. ▶ 독립적으로 구분되거나 재사용 가능한 영역을 설정. , , 태그는 문서의 헤더, 푸터, 메인(핵심)을 지정해 범위를 설정은 매거진, 뉴스 기사, 블로그 등에 사용됨. 일반적으로 ~를 포함하여 식별. 작성일자..
2020.08.21