전체보기

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 문서 내용에 코딩하는 것은 노동력 낭비가 될 것입니다. 이처럼 문서의 일부 내용을 가져오는 것이 아니라 하나의 틀을 만들고 그 틀안에 웹문서..

img 태그는 image 약자로 사진, 그림등 이미지 파일을 불러 올때 사용합니다.이미지 태그는 전용 속성을 가지고 있습니다.개발자 도구로 확인해 보면 Styles 탭에는 기본 정보가 없습니다. Computed로 확인해 보면 인라인 속성이며 세로 크기와 가로 크기를 가지고 있습니다. 인라인 속성이지만 가로세로가 auto로 표시되지 않고 수치가 존재하는 이유는 이미지 자체가 가로세로 크기를 가지고 있기 때문입니다. src 속성src 속성은 값으로 이미지의 경로(위치, 주소)를 지정합니다. 여기서 절대경로와 상대경로하는 개념이 등장하는데요윈도우즈 탐색기를 생각하시면 이해가 쉽습니다.가령 내가 사진을 찍고 내컴퓨터의 D드라이브에 내사진 이라는 폴더를 만들고 사진 파일을 저장 했다면 위와 같이 윈도우즈 탐색기에..

p 태그는 paragraph의 약자로 단락, 문단을 의미합니다.즉 웹 문서에서 하나의 단락을 나타낼때 사용하는 태그 입니다.개발자 도구로 확인해 보면 위와 같이 기본 사이즈는 블럭속성에 상하 margin을 1em 씩 가지고 있으며 font-size는 역시 부모요소에서 상속 받고 있습니다.p 태그를 간혹 한줄 태그로 생각하고 사용하기도 하는데 그렇게 사용하시게 되면 오히려 코딩이 지저분하게 되고 쓸데없는 태그을 잔뜩 추가하게 되는 실수 입니다. 문단, 단락 구성으로 사용하시는게 맞는 표현이며 줄바꿈이 필요하다면 br태그를 사용하시는게 좋습니다. br 태그는 break의 약자로 줄바꿈시 사용합니다.개발자 도구로 확인해 보시면 Styles 부분에는 아무것도 나오지 않습니다. Computed로 확인해 보시면br..

h1, h2, h3, h4, h5, h6 태그는 문서나 특정 영역의 제목을 정의할 때 사용하는 태그입니다.가장 주요한 제목은 h1을 사용하며 하부로 2번째 제목을 사용할 경우 h2, 그 하부로 또다른 제목이 필요하다면 h3을 사용합니다. 보통의 문서에는 그렇게 하부에 하부에 하부에... 로 들어갈 필요가 없기때문에 대부분은 h1, h2 정도에서 마무리가 되며 h3은 간혹 있을까 말까하는 정도 입니다.개발자 도구로 h1~h6의 기본적인 사이즈 확인해 보면h1 = block, margin top bottom 0.67em, font-size: 2em, font-weight:boldh2 = block, margin top bottom 0.83em, font-size: 1.5em, font-weight:boldh..