A sentimental robot

태그는 사용자의 입력을 표현한다. 태그는 컴퓨터 시스템의 출력을 표현한다. 태그는 단편적인 컴퓨터 코드를 정의한다. 세 태그 모두 브라우저에서 monospace font로 보여준다. 태그는 변수를 정의한다. 수학적 표현이나 프로그래밍 코드에서의 변수를 표현하고 싶을때 쓸 것 같다.... (솔직히 이 태그 안쓰일듯)

반응형 웹을 만들기 위한 기초 다기지! 크기를 퍼센트로? 이미지의 너비를 100%로 준다면 이미지는 유연하게 된다. 뷰포트의 너비까지 맞춘다는 뜻. 그렇게 때문에 이미지가 원래의 크기보다 더 커질 수도 있다는 점을 주의해야 한다. 대신에 max-width를 100%로 주면 이미지 너비를 최대100%로 잡겠다라는 뜻. 이미지가 원래의 크기보다는 커질 일이 없다. 폰트 사이즈 단위로 vw (viewport width) 폰트 사이즈가 뷰포트의 너비에 따라 움직인다. 1vm는 뷰포트 너비의 1%, 뷰포트의 너비가 50cm라면 1vm은 0.5cm가 된다. 미디어 쿼리 미디어 쿼리를 사용하면 다양한 브라우저 사이즈에 따라 다른 스타일을 적용할 수 있다. 뷰포트의 너비가 800픽셀 이하일때는 각 요소의 너비가 100..

웹 페이지를 구성할 때 요소들에게 자신이 태어난 이유에 걸맞는 역할을 부여해야 한다. (semantic) 이 얼마나 존재론적인가! HTML태그들도 다 태어난 이유가 있다고! 말이 semantic이지 별거 없다. 그냥 헤더 태그는 문서의 헤더 역할을 하려고 탄생했으니까 문서의 헤더를 정의해야 할때는 헤더 태그를 써라, 이거다. 태그 문서의 맨 윗부분에 위치한다. 웹 사이트의 이름, 글로벌 링크 - 로그인, 회원가입, 언어 선택 등 웹 사이트의 어떤 페이지에서도 사용할 수 있는 링크를 포함한다. 태그나 태그의 제목으로도 사용한다. 태그는 navigation bar 즉 ,링크들의 리스트를 담는 컨테이너를 정의한다. 페이지의 메뉴를 표현한다. 태그를 사용한다. 태그는 페이지 내용의 구조와 흐름을 만든다. 페이지..

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 속성 셀이 하나 이상의 열/행을 차..