UpWrite

링크를 만드는 태그 태그 (MDN) :: 다른 문서 혹은 문서 내의 다른 부분 혹은 그 외의 주소(URL)로 이동하는 연결점을 만드는 태그. :: 텍스트 혹은 의 두가지 형태로 사용된다. :: 방문 주소를 나타내는 href 속성은 필수로 있어야 한다. :: 링크가 걸린 텍스트는 밑줄이 쳐진 색있는 텍스트로 표현된다. :: 링크를 방문하기 전에는 파란색, 클릭 중이면 빨간색, 방문 후에는 빨간색으로 표시된다. 태그와 관련된 주요 속성 :::: href 속성 -- 이동할 주소(URL)를 나타내는 속성. -- 값으로는 HTTP 기반 URL이 가장 많이 사용되지만, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다. ---- URL 스킴이란 FTP, mailto, rtsp 등 URL의 맨 앞에서 URL의 ..

이미지를 표시하는 태그 태그 (MDN) :: HTML 문서에서 이미지를 표시할 때 사용되는 태그. :: 닫는 태그는 사용하지 않는다. :: 이미지 주소를 나타내는 src 속성은 필수로 있어야 한다. img 태그의 주요 속성 :::: src 속성 -- 표시할 이미지의 주소(URI)를 나타내기 위해서 사용되는 속성. -- 값으로 내 컴퓨터에 있는 파일 경로나 웹 이미지 링크 주소를 사용할 수 있다. ---- 내 컴퓨터에 있는 파일을 웹에 보여주려면 이미지 파일도 서버에 같은 경로로 올라가 있어야 한다. ---- 웹 상의 이미지를 사용할 경우 경로를 '참조'하는 방식이기 때문에 원본 경로의 이미지 상태에 종속된다. :::: alt 속성 -- 이미지를 표시할 수 없을 때 이미지를 설명하는 대체 텍스트를 삽입하기..

표를 만드는 태그 태그 (MDN) :: 표의 시작과 끝을 나타내는 태그. :: 기본 스타일에서는 테두리가 표시되지 않는다. 태그 (MDN) :: 표의 제목을 나타낸다. :: 태그의 첫번째 자식이어야 한다. :: 표의 상단에 가운데 정렬로 표시된다. 태그 (MDN) :: 표의 행(row: 가로줄)을 나타내는 태그. :: 태그 안에 사용한다. 태그 (MDN) :: 표에서 제목셀의 역할을 하는 셀 한칸을 나타내는 태그. :: 전역 속성인 id 속성을 사용해서 id를 지정해두면 headers 속성으로 관련된 셀임을 나타낼 수 있다. :: abbr 속성을 사용하여 화면엔 표시되지 않지만 접근성에 도움을 주는 셀 내용에 대한 간략한 설명을 추가할 수 있다. :: scope 속성을 사용하여 화면엔 표시되지 않지만 이..

목록을 만드는 태그 :: 목록을 만드는 태그는 기본적으로 블록 속성을 갖는다. 태그 (MDN) :: 순서가 상관없는 목록을 만들때 사용하는 태그. :: 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙는다. :: HTML5에서는 이 불릿을 수정할 때 css의 list-style-type 속성을 사용할 것을 추천하고 있다. 태그 (MDN) :: 순서가 중요한 목록을 만들때 사용하는 태그. :: 항목 앞에 마커로 아라비아 숫자나 로마숫자, 영어가 붙는다. :: 이 카운터는 css의 list-style-type 속성으로 수정할 수 있다. :: 하지만 기술적, 법률적 문서에서는 HTML 태그 속성이 중요하므로 type 속성으로 바꿀 수 있다. :: type 속성은 1(숫자, 기본값), i(로마숫자 소..

텍스트 관련 태그 인라인 속성 ::태그의 디자인은 CSS로 바꿀 수 있으므로 태그의 '의미론적' 역할에 더 주목해야한다. 태그 (MDN) :: 중대하거나 긴급한 내용임을 나타내는 태그 :: 화면에는 굵은 텍스트(bold체)로 표시된다. -- 웹 접근성 도구는 strong 태그를 만나면 그 부분이 강조되었다고 알려준다고 하는데 도구에 따라 다른듯하다.. :: 태그를 겹쳐서 사용하는 것으로 더 강조할 수도 있다. (그렇다고 더 굵게 표시되지는 않는다.) 태그 (MDN) :: 텍스트를 굵게(bold체) 표시하는 태그. :: 현재는 그저 텍스트를 꾸미기 위해서 태그를 사용하는 것은 추천하지 않는다. :: 텍스트를 꾸미는 것이 목적이라면 css의 font-weight 속성을 쓰는 것이 추천된다. :: 태그에 대한..

HTML 텍스트 관련 태그 블록 속성을 가진 태그 태그의 디자인은 CSS로 바꿀 수 있으므로 태그의 '의미론적' 역할에 더 주목해야한다. ~ (MDN) :: 제목을 나타낼 때 사용하는 태그 :: 숫자가 작을수록 글씨 크기가 커진다. (MDN) :: 문단을 나타낼 때 사용하는 태그. :: p태그 내부 텍스트에 줄바꿈이 사용될 경우 띄어쓰기 하나로 표현된다. :: 텍스트의 길이가 텍스트가 담긴 박스 너비보다 길면 그 때 자동으로 줄바꿈이 된다. (MDN) :: 주로 긴 인용문을 나타낼 때 사용하는 태그. :: 사용시 내부 내용에 들여쓰기가 적용된다. :: cite 태그를 이용해 인용문의 출처를 표시할 수 있다. -- 들여쓰기를 사용하고 싶지 않은 짧은 인용문은 태그를 이용하면 된다. (MDN) :: 미리 서..

HTML 텍스트 관련 태그 블록(block) 속성과 인라인(inline) 속성 :: 태그의 자손으로 배치되어 브라우저 내에 표시되는 태그들은 두가지 display 속성 중 하나를 갖는다. :: 블록(block) 속성을 갖는 태그들은 내용 표시 후 줄바꿈이 된다. :: 인라인(inline) 속성을 갖는 태그들은 내용 표시 후 줄바꿈이 되지 않는다. See the Pen block by lypi (@Lypi) on CodePen. See the Pen blogging by lypi (@Lypi) on CodePen. 더보기 썸네일용

HTML 문서의 기본 구조 See the Pen basic-structure by lypi (@Lypi) on CodePen. 여기가 바로 본문이다. (MDN) :: 이 문서가 html(=html5) 문법이 적용된 문서임을 알려줌. HTML 태그에 포함되지는 않는다. :: 문서의 최상위에 위치해야한다. (MDN) :: 이하의 모든 태그는 태그의 자손이어여야 한다. (=내부에 있어야 한다.) :: 즉 모든 HTML 태그의 최상위 부모 요소여야 한다. (MDN) :: 태그 내부의 내용이 어떤 나라의 어떤 언어로 작성되었는지를 나타내는 속성. :: "언어코드-나라코드"의 값을 갖는다. :: 거의 html 태그에 사용하지만 전역 속성이므로 다른 태그에도 사용할 수 있다. (MDN) :: 웹 브라우저가 알아야 할..