캡션(caption)과 태그 캡션(caption)의 뜻, 캡션이란 = '사진이나 삽화(기사에 삽입되는 이미지) 등에 붙이는 설명'을 말한다. 1. 태그 HTML에서 태그는 테이블의 캡션(caption, 테이블 혹은 사진 등에 붙는 설명)을 정의한다. 요소는 오직 하나의 요소를 명시할 수 있다 요소는 항상 요소 바로 다음에 위치해야 한다. th = table header, tr = table row, td=table data 캡션 태그 및 테이블 태그 사용 사례 caption & table 가계부 월별 소비액 11월 100만원 12월 2백만원 브라우저 출력 내용 1-2. 캡션의 css 기본 값 기본적으로 테이블 캡션은 표(테이블) 바로 위에 가운데 정렬된다. 그러나, CSS의 text-align을 사용하여..

HTML 이미지 태그 사용 방법 1. HTML 태그와 필수 속성, src, alt 이미지 태그는 HTML 문서의 외관을 꾸미는 용도로 사용하는 태그이다. 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다. 그러나 이미는 웹 페이지에 삽입되지 않는다. 이미지는 웹 페이지에 링크될 뿐이다. 링크는 반드시 경로를 수반한다. 그리고 img태그에는 경로(src), 즉 속성 src는 필수 속성이다. 통사론 위 태그에서 속성 src는 소스(source)의 약자이며 이미지의 위치(경로)를 지정한다. 다시 말하면 이미지의 위치(경로)를 링크하는 것이다. 2. img 태그는 빈 태그이다. 태그는 속성만 포함한다. 속성만 포함한다는 말은 닫는 ..

HTML-G의 HTML 정리 옵션(HTML Cleaning Options) (그림 1) HTML 정리 옵션(HTML Cleaning Options) (그림 2) HTML 청소 옵션(HTML Cleaning) HTML 청소 옵션(HTML Cleaning Options) 선택 방법은 2가지이다. 1. 위 그림의 왼쪽 체크 옵션 선택 2. 위 그림의 오른쪽 삼각형 아이콘 실행 (1) Check the options you want to perform when you press the main Clean button (2) execute them one by one with the triangle icons. 1. 인라인 스타일(Inline styles) 청소(cleaner) style="..."의 모든 항목을..

1. 태그란? preformatted text(pre=앞, 미리, formattded=구조화된 텍스트) (앞글 참조) 시(詩, poet) 또는 형식화된 문단, 행간 혹은 연간 형식을 원래대로 유지해야 할 필요가 있을 때: → 일일이 태그를 사용할 순 없다. 그러나 알고 보면 , 등을 사용하지 않고도 행과 연의 형식을 원래 모양 그대로 브라우저 창으로 표현할 수 있는 기능이 HTML에 있다. =그것이 태그이다. 그러나 태그를 사용한 문단에는 다음 두 가지의 경우가 발생한다. 1) 짧은 행들로 이루어진 경우 심중(心中)에 남아있는 말 한마디는 끝끝내 마저하지 못하였구나. 사랑하던 그 사람이여! 사랑하던 그 사람이여! 위 문단은 아래 그림처럼 브라우저창에 원래 형식으로 줄 바꿈 된다. 2) 긴 문단이 있는 경..

1. 문단 관련 태그들 1) = paragraph(단락)의 약자. 나는 문단입니다. 열린 태그에서 닫힌 태그까지가 한 문단입니다. = 항상 새 줄에서 시작된다 = 블록(block) 요소(element) (블록과 인라인에 대해서는 이후 글에서 따로 정리) 2) 태그 = break(휴식)의 약자. 나는 줄바꿈 태그입니다. 빈 태그로 닫힌 태그가 없습니다. 태그 = 태그 입력 다음부터 줄 바꿈이 된다= 인라인(inline) 요소 (인라인, 블록 요소에 대해서는 이후 글에서 따로 정리) 은 빈 태그이며 닫는 태그가 없다= 닫는 태그 없이 로 끝나면 된다 (※그러나 XHTML에서는 로 닫는 기호를 쓴다) (2-1) 의 줄 간격과 의 줄 간격 차이 의 1줄 간격= 의 2줄 간격( = ) 3) 태그=horizonta..

HTML 들여 쓰기 원칙 1) 포함관계 코드 블록은 2칸 들여 쓴다. (예시 1) 공백 두개 위와 동일 이하 동문 (예시 2) 이름 설명 A 이름 A 설명 2) 논리관계 코드 블록은 들여 쓰지 않는다. 그 대신 가로 빈 줄 하나 추가한다. 코드 블록은 들여쓰기 하지 않는다 heading2 heading1이하만 1칸 띄우고 heading2이하 문단 부터는 띄우지 않는다. 3) 등호 주위에는 빈칸을 넣지 않는다. 4) CSS의 긴 속성과 속성 값은 한 쌍씩 줄 바꿈을 한다. body { background-color: DodgerBlue; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; } 선택자 뒤에 한 칸 ..

1. 주석이란 무엇인가? 메모. 2. 주석(comment, 메모)은 왜 달아야 하나? 코드가 길어지거나 좀 복잡해지거나 했을 때도 컴퓨터는 그것을 순식간에 알아본다. 그러나 인간은 문제가 있다. 헷갈리고 골치 아프고 시간이 걸리는 인류를 위해 배려하는 것이 주석이다. 컴퓨터(브라우저)가 보기에 너무나 사소한 말들, 컴퓨터는 그 말들을 그냥 외면하거나 못 본 체 눈감아준다. 코딩 인류 간에 전할 말이 있을 때, 혹은 수정자를 위해 메모해 둘 일이 있을 때 유용한 기능 주석은 브라우저에 표시되지 않는다. 3. 주석 다는 법 구문: (아래 코드 입력창 영역 2군데처럼) 시작은!(느낌표가) 있지만 끝은 없다. This is nonsense Lorem ipsum dolor sit amet, consectetur ..

Lorem ipsum이란 무엇일까? 포토샵, 일러스트레이트, 웹사이트, 템플릿, 출판물, HTML 편집창, 워드 프로그램 등에서 텍스트(T) 키를 누르는 순간 자동으로 삽입되는 더미 텍스트, "Lorem ipsum dolor sit amet......"이 있다. 이 문구는 어디에서 왔는가? 1) 그 문구는 로마의 정치인 키케로(영문 발음: 시세로 Cicero)에게서 시작되었다. Lorem ipsum 문구의 내용: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 그 내용은 "고통 자체를 사랑하고 추구하고 갖고 싶어 하는 사람은 없습니다. 왜냐하면 고통은 고통스럽기 때문입니다" 키케로..

1. meta란 무엇인가? meta의 뜻: 초월의, 본질적인, 그 이면의 meta-physics : 형이상학 = physics(자연학) 너머의 것: 영적인 세계, 정신적인 세계 칸트의 물자체(Das Ding an sich) : meta-physics : 알 수 없는 것. Metaphora: 메타포 : 은유 서양에서는 눈에 보이지 않는 세계를 meta라 한다. HTML의 meta-data는 눈에 보이지 않는 세계이다. head 부분( 사이)에 위치하지만 그 누구의 눈에도 보이지 않는다. 세계 모든 웹페이지에는 오직 부분만이 보인다. 영역에는 '글에 대한 정보'가 아닌 (한 차원 초월한) '문서의 대한 정보'를 담고 있다. 비평에 대한 비평(비평의 비평)을 'meta 비평'이라고 하듯이 속의 정보를 '문서에..

1. 시맨틱 코드 참고할 글 : 2021.04.09 - [코딩/HTML] - 시맨틱 태그(semantic tag) 꼭 써야 할까? 시맨틱(semantic) 태그란 그 이름 자체만으로 브라우저나 길 잃은 사람들, 지구 상의 원주민, 개발자, 수정자들에게 의미를 전달할 수 있는 태그다. 시맨틱 태그가 아닌 , 등은 그 이름만 들어서는 그 내용이 무엇인지 알 수 없다. 그러나, 시맨틱 태그는 =두목, =내비게이션, =그림, 이렇게 이름만 척, 들어도 어림짐작할 수 있다는 게 대단한 장점이라 아니할 수 없다. 2. 많이 쓰는 코드들 1) 말 그대로 머리말 영역으로 문서 또는 섹션의 헤더를 나타낸다. 하나의 문서 안에 여러 개 태그가 올 수 있다. 즉 헤더란 문서 전체의 헤더일 수도 있고, 특정 영역(섹션)의 헤..