본문 바로가기

전체 글

 (147)
Typography & SR only Typography typography란 활자를 읽기 쉬울 뿐만 아니라 보기 좋게 표기하기 위한 기술과 예술을 말한다. html에서 활자란 텍스트로 된 정보를 가리킨다. Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces(design), point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space b..
Float & Pseudo Element Float 먼저 float은 "떠다닌다"는 의미로, 이 속성을 적용한 요소는 부모 요소로 부터 floating 된다. 만약 float:left 라고 적용했다면, 부모 요소로 부터 완전히 벗어난 뒤, 해당 요소를 가능한 범위에서 가장 왼쪽에 배치한다. 이를 이용하면 여러 block 요소들을 한 줄에 가로로 배치할 수 있다. 하지만 layout을 완전히 망가뜨리기 때문에 지금은 잘 사용되지 않고, 오래 전에 작성된 코드를 유지 보수하기 위해 배운다. float 속성을 적용하면 생기는 일 부모 요소로 부터 floating된 자식 요소는 더이상 자식 요소로 취급 되지 않기 때문에, 남은 형제 요소들이 빈 자리를 채우게 된다. block 요소의 경우, height은 따로 지정하지 않으면, 자식 요소들의 heigh..
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..

티스토리툴바