A sentimental robot

iframe은 웹페이지 안에 또다른 웹페이지를 넣고 싶을 때 사용한다. iframe은 기본적으로 테두리를 그린다. iframe의 name 속성을 정의하면 링크를 걸 수 있는 타켓이 될 수 있다.

클래스 속성은 같은 클래스명을 가지고 있는 요소에 일괄적인 스타일을 적용하고 싶을 때 쓰이는 속성이다. 클래스명은 대소문자를 구분한다. (case-sensitive) 클래스명은 한 개 이상을 가질 수 있다. 각 클래스명은 공백으로 구분된다. 아이디는 클래스와 다르게 html 문서에서 고유한 값을 지녀야 한다. 아이디 값은 대소문자를 구분한다. 아이디 값은 한 개만 가질 수 있으며 공백을 포함하지 않는다. 아이디는 북마크의 지표로도 사용된다.

모든 html 요소는 기본적인 배치 값이 존재한다. 배치 값은 크게 block과 inline으로 나뉜다. Block level element block 수준 요소는 새로운 라인에서 배치되며 가능한 한 최대 너비를 차지한다. 대표적인 block 요소로는 - 등 이 있다. Inline element inline 요소는 새로운 라인에 배치되지 않고 자신을 표현할 때 필요한 너비만 차지한다. 대표적인 inline요소로는 popular element div 요소는 보통 다른 html 요소들은 감싸기 위한 용도로 쓰인다. span 요소는 보통 문자열을 감싸기 위한 용도로 쓰인다. 부분적인 문자열에 특정 스타일을 입힐 때도 자주 쓰인다.

순서가 없는, 정렬이 필요없는 리스트는 태그를 사용한다. (acronym for unordered list) 순서가 있는 리스트는 태그를 사용한다. 두 태그의 자식으로서 정렬될 각 리스트 아이템은 태그이다. 태그 속성 list-style-type 속성은 리스트 아이템 마크 스타일을 정의한다. 마트 스타일은 기본적으로 검정색으로 채워진 원(disc)이다. disc 외에도 circle(채워지지 않은 원), square, none 이라는 값이 있다. 태그 속성 type 속성은 리스트 아이템 마크 타입을 정한다. 기본적으로 숫자인데, 다른 값으로는 A ,a , I , i 가 있다. start 속성은 리스트가 시작할 값을 정의한다. 태그 각 용어에 대한 설명을 나열하는 리스트이다. 태그의 자식으로는 태그와 태그가..

border-collapse 속성 테이블 전체의 테두리와 각 셀의 테두리가 겹쳐 의도치 않은 두 개의 테두리가 생길 때 쓰이는 유용한 속성인 border-collapse, 값을 collapse를 해두면 테두리 겹침 현상을 해결할 수 있다. table, th, td { border: 1px solid black; border-collapse: collapse; } border-spacing 속성 셀 사이에 여백을 주고 싶을 때 사용하는 속성이다. 테이블의 테두리가 겹쳐져 있다면 (has collapsed border) 적용되지 않는다. border-spacing 속성은 테이블에 적용한다. table { border-spacing: 5px; } colspan,rowspan 속성 셀이 하나 이상의 열/행을 차..

웹 페이지에 이미지를 넣고 싶을 때는 이미지 태그를 이용하면 된다. 이미지 태그는 비어있으며 속성 값만을 포함한다. 그렇기 때문에 태그를 닫지 않는다. 이미지 태그의 속성에는 ... src : 이미지의 경로를 명시한다. 보통 이미지들은 따로 폴더를 만들어서 저장해 놓고 그 경로를 참조한다. alt : 느린 인터넷 연결, src 속성 에러, screen reader 사용자, 이미지 찾기 실패 등의 이유로 인해 이미지가 보여지지 않을 때 나오는 대체 문구 이다. style / width / height :속성들을 이용해 이미지의 크기를 조절한다. 하지만 HTML5는 style 속성을 사용하길 권장한다. style 속성은 가장 우선순위가 높기 때문에 스타일 시트에서도 이미지 크기를 중복으로 조절하게 되는 상황..

Link HTML 문서에서 링크는 a 태그를 활용한다. a 태그의 href 속성를 통해 링크를 걸 페이지 주소를 명시한다. url link의 상태와 CSS 속성 a:link 방문하기 전 a:visited 방문한 후 a:active 링크를 클릭한 순간 target 속성 링크된 페이지를 어디에 보여줄지를 결정한다. target 속성의 값에는 _blank : 새로운 페이지 혹은 새로운 탭에 문서를 보여준다. _self : 같은 페이지에 _ parent : 상위 프레임에 _top : 같은 페이지에 다시 로드된다. 링크는 북마크로 활용될 수 있다. 북마크를 사용하면 긴 페이지 상에서 보고싶은 특정한 부분으로 넘어갈 수 있다. here! jump to here! 링크를 걸 때 외부 경로에 대해 잘 알아두어야 한다...

기초 태그부터 정리해보자. HTML5 문서임을 선언한다. html 페이지의 최상위 요소 (root element) 문서에 대한 메타 데이터를 포함한다. 메타 데이터란 html문서에 대한 정보를 말한다. 문서의 제목, 스타일, 링크, 스크립트, 문자 인코등 같은 정보를 일컫는다. 메타 데이터는 보여지지않는다. 와 사이에 위치한다. 메타 요소는 문자 인코딩(character set), 문서 설명, 검색 엔진에 노출될 키워드, 문서의 저자 등을 정의한다. 브라우저, 검색엔진, 웹 서비스에서 메타 데이터를 사용한다. 문자 인코딩을 정의 웹 페이지에 대한 설명 검색엔진에서 노출될 키워드 문서가 30초 마다 새로 고침 된다! 이런 대박기능이? 여기서 끝이 아니다! HTML5에서 도입된 viewport가 있었으니! ..