강좌 및 설정/HTML 기본강좌

이전 레이아웃 시멘틱 태그에서 다루어야 했지만 한가지 빠진 시멘틱 태그가 있습니다. 바로 article 태그 입니다. article을 다루지 않고 따로 이렇게 하나의 강좌로 뺀 이유는 중요해서가 아니고, section 태그와 잘 구분이 안돼기 때문입니다. 지금까지의 강좌를 쭉 봐오신 분들이라면 이상하게 겹치는 태그들이 존재한다는 것을 느끼셨을 겁니다. b태그와 strong 태그, em 태그와 i 태그, section과 div등.. 혹시나 왜지? 라고 생각해 보셨을까요? 눈으로 보기엔 차이가 없는데... 사실 지금까지 알려드린 html 태그는 html 5를 기준으로 설명 드렸습니다. 지금은 대부분 html 5를 사용하기 때문입니다. 5라는 숫자에 의문이 생기지 않나요? 네 맞습니다. 4도 3도 있었습니다...

웹사이트에서 레이아웃(layout)이란 단순하게 화면 구성(구조)을 뜻합니다. 어떤 웹사이트는 매우 현란하고 멋있게 구성이 되어 있으며 어떤 웹사이트는 아주 단순하게 구성되어 있어보이지만 사실 대부분의 웹사이트는 구조만 놓고 보자면 전혀 다양하지 않습니다. 대부분은 비슷한 구조로 되었있죠 집을 지을때를 생각 보겠습니다. 먼저 어디를 방으로 할지 어디를 화장실로 할지 어디를 창으로 할지 등 구조를 결정한뒤 뼈대를 만들고 내부를 만들고 그뒤에 최종적으로 도배와 장판을 진행합니다. 웹사이트도 이것과 비슷해서 먼저 구조를 결정하고 만든후 상세 디자인 작업을 진행하게 됩니다. 흔히 볼수 있는 웹사이트 레이아웃은 이러한 구조 입니다. 상단에 웹사이트명이 있으며 그아래로 컨텐츠를 연결할 메뉴들이 구성 되고 좌측 영역..

div는 division의 약자로 분할하다는 뜻이 있습니다. 이전에 단락태그 p처럼 사용할 수 있습니다. 단락 태그는 문장에 단락을 의미하는 반면 div태그는 단락의 의미가 없고 단순하게 영역을 나누는 역할을 합니다. 위와 같이 이문열 삼국지 소개 하는 문장에서 단락 태그 p로 영역을 나누었다면 전혀 다른 책을 소개하는 박경리 토지 부터는 단락 태그 p로 의미를 부여하는 것은 필요치 않습니다. 이렇게 이문열 삼국지와 박경리 토지의 영역을 의미 없이 독립적으로 나누는 역할을 하는 것이 div 태그입니다. 개발자도구로 기본사이즈를 보면 역시 블럭속성 입니다. 이문열 삼국지 1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운『이문열 삼국지』가 출간 30여 년 만에 새롭게 출간된다. 나관중 판본을..

entity는 독립체, 개체, 미지·미정의 것 이라는 의미가 있네요 다시 html tag의 기본 사용법을 떠올려 보겠습니다. 내용 글자를 제외하고 기호를 보면 " 기호들은 태그 안에서 사용되고 있습니다. 그런데 이 기호들을 태그가 아닌 문자로 사용하고 싶을 수도 있습니다. 그럴 경우 html 문서는 의도치 않게 에러를 발생하고 어느 위치부터 마구 깨져 버리는 현상이 발생될 수 있습니다. 왜냐하면 바로 위의 기호들은 태그를 나타내야 되기 때문입니다. html문서는 태그를 가지고 화면을 모니터로 출력하는데 < 를 문자로 표현하면 거기서 부터 브라우저는 태그로 간주하고 처리하려하고 실제로는 태그가 아닌 문자가 들어오기 때문에 오류가 발생 되는 것입니다. 이렇게 웹문서에서 이미 사용하기 위해 다른 사용을 금지한..

지금 소개할 태그들은 모두 글자를 꾸미는 역할을 하는 태그들입니다. 기본 태그의 사용법만 알고 있으면 어렵지 않게 사용할실 수 있으나 그 의미만은 반드시 기억하시기 바랍니다. 눈으로 보기에는 차이가 없는 것들이 있으니 의미를 잘 이해하시고 적절한 태그를 사용하는 것이 좋겠습니다. 글자를 위한 태그들이니 display 속성은 모두 inline 입니다. 중요한 text를 강조. bold(굵게). 목적없이 단순이 글자를 굵게 만들기 위해 사용. emphasized(강조). 구어체 강조 또는 strong으로 강조된 문장안에서 다시 강조시 사용 italic(기울임체). 전문용어, 관용구 등 강조가 아닌 단순 기울임을 위해 사용 insert(삽입). 밑줄을 만들고 빈칸에 글자를 삽입했다는 의미 underline(밑..

scope는 범위, 살피다 라는 의미가 있네요 scope를 사용하는 이유는 웹접근성을 위해 표의 특정 칸에 대한 정보를 제공하기 위함이지만 간혹 table 두번째 강좌에서 언급한 col태그를 사용하지 않았을 경우 scope 속성으로 지정된 요소들을 디자인 할 수도 있습니다. 대부분의 스크린리더기는 기본적으로 각 칸을 좌에서 우로 한줄씩 읽어나갑니다. 쿠팡 → 1000원 → 100원 → 500원 → 옥션 → 110원.... 이렇게 읽어 나갑니다. 그리고 th가 존재하는 표의 경우는 th를 읽어주고 칸을 읽어 오기는 스크린 리더기도 있습니다. 구분 → 모니터 → 키보드 → 책상 → 쿠팡 → 모니터 1000원 → 키보드 100원 ... 스크린리더기도 많은 종류가 있으며 스크린리더기처럼 보조로 사용되는 프로그램..

col, colgroup 태그는 css로 표를 디자인할때 매우 중요한 요소 입니다. 그런데 css를 모르는 상태에서 확인이 안되기 때문에 이해하기가 어렵습니다. 이번 강좌는 그런 이유로 간략하게 소개만 하고 css에서 다시 다루도록 하겠습니다. col 태그 col 은 column의 약자로 열을 합니다. 보통은 thead 위에서 사용되고 해당 열의 속성을 지정할 때 사용합니다. 구분 모니터 키보드 책상 쿠팡 1000원 100원 500원 옥션 1100원 90원 450원 tr 태그를 다시 생각해 보시면 td 태그를 자식요소로 가지고 있습니다. html 태그는 기본적으로 부모요소에서 자식요소로 대부분의 스타일이 상속되니 tr 태그의 폰트 크기, 색상, 배경색등의 스타일도 td로 상속 될것입니다. 그렇다는 것은 ..

table 태그는 표를 만들 때 사용합니다.한글과 ms 워드 등을 사용해 보셨다면 표를 만들어 보신 경험이 있으실 겁니다.  바로 그러한 표를 만드는 녀석입니다. 사실 table 태그는 상당히 복잡한 구조입니다. 하드코딩을 하시는 분들도 table은 대부분 위지윅 에디터를 사용해 만들고 붙여 넣기 하는 방법으로 많이 사용합니다. 너무 많은 태그들이 반복적으로 나오기 때문이죠. 복잡하다기보다 귀찮은 존재라고 하는 게 맞겠습니다. table 또한 구조상 그 하부로 thead, tbody, tr, th, td 태그를 기본적으로 사용하며 그 외에도 tfoot, caption, colgroup, col 등 여러 가지를 사용합니다. 살짝 길어질 거라는 불길한 예감이 드네요 사용법 이번주 식단 ..

목록 태그는 말 그대로 목록, 목차 등을 나타낼때 사용합니다. 목록 태그는 대표적으로 ul, ol 이 있습니다. 구조상 단독으로 사용되지 않으며 반듯이 li 태그와 함께 사용됩니다. ul 태그 ul 태그는 unordered list의 약자로 순서가 없는 목록을 의미합니다. 제목 태그 h1~h6와 폰트의 크기 em 단락 태그 p, 줄바꿈 태그 br 이미지 태그 img, 절대경로 상대경로 프레임 태그 iframe 위와 같이 쓰이며 ul 태그 안으로 li 태그를 p 태그 처럼 사용합니다. 목록 처음에 리스트 마크라고 해서 기본적으로 ● 표시가 붙는 것이 특징 입니다. 이 리스트 마크는 css를 통해 변경 가능합니다. 기본사이즈는 block 이고 바같쪽 상하 여백으로 1em(한글자 크기)씩 잡고 있으며 마크표시..

a 태그의 전용 속성에는 target 이 있습니다. target은 a 태그로 연결된 페이지가 어느 창에서 연결될지 결정하는 속성입니다. target 속성값 설명 _self 현재 창에서 href 속성 값으로 이동 됩니다. _blank 새창에서 href 속성 값으로 이동 됩니다. _parent 부모창에서 href 속성 값으로 이동 됩니다. _top 최상위 창에서 href 속성 값으로 이동 됩니다. 다음 소스를 보겠습니다. a 태그 a 태그는 태그 내용 클릭시 연결된 다른 페이지(내용)로 이동 시킬때 사용합니다. 이문열 삼국지 이문열 삼국지 _self 이문열 삼국지 _blank 4번 라인은 이전 강좌에서 소개한 a 태그 기본 사용법입니다. 5번 라인은 taget="_self" 가 추가 되었습니다. 클릭해 보면..

드리어 a 태그 입니다. 처음 html 접하시는 분들께 호기심 유발을 위해 a 태그를 먼저 소개하기도 합니다. 그만큼 재밌고 신기한 녀석 입니다. html 라는 말 자체가 어쩌면 a 태그 자체를 설명한다고도 할 수 있을 겁니다. Mark Up 우선 사용 a 태그 사용법을 익히기 전에 mark up에 대해 설명을 좀 해볼까 합니다. 마크업이란 사용한 태그 요소에 어떠한 표시(마크)를 해두는 겁니다. 이렇게 표시를 해두는 이유는 특정 태그요소에 의미를 부여하기 위함이기도 하고 css나 자바스크립트에서 마크를 해둔 요소의 색상 및 크기등을 디자인하거나 동작하게 하기 위함입니다. 당장 이해가 어렵다면 나중에 다른 작업을 하기위해 표시해 두었다고 생각하시면 됩니다. 마크업 작업은 css 강좌에서 지겹게 할 예정입..

iframe 태그는 나중에 다루려고 했으나 다음 강좌인 링크 태그 a를 설명하기 위해 다소 어렵게 생각하실 수 있지만 지금 알려 드리려고 합니다. 프레임의 사전적 의미는 틀, 액자, 틀에 넣다 라는 의미를 가지고 있습니다. 토론회등에 보면 프레임을 씌우려 한다라고도 많이 하지요. 사진 액자를 생각하면 쉽습니다. iframe 은 현재의 웹문서에 다르 웹문서 자체를 포함시킬 때 사용합니다. 가령 a.html 이라는 문서를 만들었는데 b.html 이라는 문서를 작성하다보디 a.html 문서 내용이 다시 나오게 해야 했습니다. 이 경우 a.html 문서를 다시 b.html 문서 내용에 코딩하는 것은 노동력 낭비가 될 것입니다. 이처럼 문서의 일부 내용을 가져오는 것이 아니라 하나의 틀을 만들고 그 틀안에 웹문서..