Study/HTML (10) 썸네일형 리스트형 Sectioning Elements content sectioning elements | MDN 전체 웹 페이지의 구조를 만들어 나갈 때, 페이지를 이루고 있는 요소를 하나 하나씩 나누기 보다는, 서로 관련 있는 요소들을 묶어 전체적인 틀을 잡는 것, 즉 구획으로 나누는 것이 중요하다. 태그도 구획을 나누는 태그이긴 하지만, 그 구획이 어떤 의미를 갖지는 못한다. 이 때 사용할 수 있는 것이 sectioning 태그이고, section, article, nav, aside 4가지로 나누어 볼 수 있다. ??? 이 네가지 태그에는 heading 태그를 자식요소로 반드시 포함해야 한다. 1. section 독립적인 구획을 나타내는 태그로, generic한 편이지만 div를 사용하는 것보다는 훨씬 낫다. title 2. article | 기사 .. Head html 기본 구조 DTD | Document Type Declaration 브라우저에게 html의 형식이 가장 최신 웹 표준인 "html 5" 임을 알리는 태그로 로 작성한다. meta meta 태그를 작성할 때에는 반드시 name과 content 속성의 값을 지정해 주어야 한다. name에는 meta data의 종류를, content에는 그에 해당하는 값을 작성한다. viewport는 화면 사이즈, 즉 웹 사이트를 이용하고 있는 디바이스의 화면 사이즈를 말한다. meta 태그에 viewport가 없으면, css에서 작성한 반응형 디자인이 아무런 소용이 없다. 이 외에도 다양한 meta data를 입력할 수 있다. +) meta 데이터의 title과 description은 SEO에 도움이 된다. htm.. Text | abbreviation, pre-formatted, code etc abbr | abbreviation(줄임말) 줄임말을 감싸는 태그로, title 속성과 함께 사용된다. 태그로 감싼 텍스트에 마우스를 hover하면, title에 입력한 값을 보여준다. My favorite song from her 7th album is DBATC. address 연락처 정보(지도상의 주소, URL, 이메일 주소, 전화번호 등)를 나타낼 때 사용하는 태그이다. Jurassic 티스토리 블로그 pre | preformatted text 형식(포맷)이 미리 정해져 있는 텍스트라는 뜻으로, 이 태그 내부에 작성된 형식(indentation, line break...) 그대로 화면에 표기할 수 있다. HTML CSS { white-space } pre 태그는 줄바꿈이 안되어 있는 텍스트를 wr.. Media | Image, Audio, Video Image 웹 사이트에 이미지를 넣고 싶을 때 사용하는 태그이다. src와 alt는 필수로 포함되어야 하는 속성 값이다. src는 사용할 이미지의 경로를 지정한다. alt( alternative text )는 네트워크의 연결 상태가 좋지 않아서 이미지를 받아오는 데 실패했을 때 또는 screen reader를 이용하는 사용자를 위해 이미지를 대체해서 보여줄 수 있는 텍스트이다. 중요하지 않은 이미지의 alt는 alt=""로 나타낼 수 있다. img 태그로 할당하지 않아도 될 만큼 중요하지 않은 이미지(정보로서 중요하지 않은 이미지)의 경우에는, 다음과 같이 img 태그를 주석 처리 한 뒤에, no-image 속성을 할당하는 방법으로 작성할 수도 있다. Audio image 태그와 마찬가지로, 반드시 sr.. Table table 동일한 key에 대한 여러 개의 value가 반복적으로 나타날 때, 즉 행과 열을 이용해서 데이터를 나타내고 싶을 때 table 태그를 이용할 수 있다. th와 td의 길이는 반드시 같아야 한다. tr | table row, 하나의 줄을 나타낸다. th | table header scope 속성을 줄 수 있는데, col(월, 화, 수, 목, 금) 또는 row(1교시, 2교시...) 값을 갖는다. td | table data thead | 브라우저에게 더 명확하게 "이 부분부터 테이블의 헤더임" 이라고 알릴 수 있다. tbody | 브라우저에게 더 명확하게 "이 부분부터 테이블의 데이터임" 이라고 알릴 수 있다. tfoot | 테이블의 마지막 데이터(ex.총계)를 나타낼 때 쓸 수 있다. id .. Form 일반적으로 html의 는 웹 사이트가 사용자에게 "정보의 의미"를 전달할 수 있게 해준다. 이와 달리 form은 웹 사이트가 사용자로부터 정보, 즉 input을 받고싶을 때 사용하는 태그이다. Attribute 반드시 태그에 포함되어야 하는 속성 값으로는 action과 method가 있다. 사용자로 부터 받아들인 input을 어디에 저장할 것인지를 action 속성의 값으로 지정하는데, API 주소가 이에 해당한다. method는 HTTP method로 GET과 POST 중 하나를 사용한다. +) html form 태그의 method 속성값 Form의 자식 요소 | Field 1. input type = text input type="text" | 사용자에게 input을 받는 가장 일반적인 방법으로, t.. List ol 어떤 정보를 관련있는 목록의 형태로 보여주고 싶을 때 list와 관련된 태그인 ul, ol, li를 사용할 수 있다. ol과 ul 태그의 direct 자식 요소로는 li 태그 를 사용하는 것이 웹 표준이다. ordered list는 순서가 중요한 아이템들을 하나의 목록으로 감싸 주는 태그이다. 첫번째 아이템 두번째 아이템 세번째 아이템 ul un-ordered list는 순서가 바뀌어도 상관없는 아이템들을 하나의 목록으로 감싼다. 순서가 중요하지 않은 아이템 dl 단어를 정의할 때, 또는 key-value 형태로 정보를 제공하고 싶을 때 dl, dt, dd, dfn을 사용할 수 있다. dl 태그의 direct 자식 요소로는 dt, dd, div를 사용한다. Common uses for this el.. HyperText Anchor | link 웹 사이트에 링크 정보를 포함하고 싶을 때 anchor 태그를 이용한다. anchor 태그를 클릭하면, 현재 웹 사이트에서 다른 웹 사이트로 이동하거나, 현재 웹 사이트에서 내가 보고 있지 않은 다른 화면으로 이동할 수 있다. Attribute href anchor 태그에는 반드시 포함되어야 할 href라는 attribute이 있다. href는 hypertext refrence(주소값)의 약어이다. Click Me 해당하는 url로 이동 현재 웹 사이트에서 해당하는 id를 가지고 있는 요소로 이동 해당하는 주소에 메일을 쓸 수 있는 창으로 이동 모바일에서 해당하는 전화번호로 call을 할 수 있는 창으로 이동 target 새로운 탭을 열어서, 해당하는 주소로 이동 aria-lab.. 이전 1 2 다음
