설설한 세상

웹페이지를 이용하다 보면 그 페이지 안에서만 활동하는 것보다 다른 페이지를 넘나드는 경우가 더 많습니다. 검색 엔진이라는 것이 그 사실을 기반해서 만든 것이기도 하지 않나 싶습니다. 특정 페이지끼리 연결해주는 역할을 하는 것이 앵커 태그입니다. 닻을 내린다는 의미인지 '닻'을 의미하는 anchor의 첫 자를 따와서 태그가 되었습니다. 링크 건다고 말하기도 하는데 다른 웹페이지로 이어질 수 있도록 기능하게 됩니다. 밑줄에 파란색으로 보이고 누르면 다른 링크로 이동하는 하이퍼링크로 알고 계실 겁니다. 그 기능을 웹페이지에서 수행하는 것이 앵커 태그인 것입니다. 제가 다음으로 하이퍼링크를 만들어보았습니다. 클릭하기 전에는 밑줄에 파란색입니다. 그리고 클릭한 이후에는 파란색이 바랜 것처럼 보라색에 밑줄이 됩니다..

목록(리스트)을 나타내는 태그를 알아보려고 합니다. 태그 list의 앞에 두 글자를 따온 태그를 통해서 목록의 각 항목을 표현할 수가 있습니다. 목록임을 알리기라도 하는 마냥 각 항목마다 왼쪽에 점이 생겼습니다. 겉으로 보기에는 태그만으로도 목록을 작성하는데 큰 문제가 없습니다. 하지만, 단독으로는 쓰이지 않습니다. 상위에 태그나 태그가 쓰이고 그 속에 태그가 위치하게 됩니다. 마치 부모 자식 같다고 해서 태그, 태그는 부모 태그라고 부르고 태그는 자식 태그라고 부릅니다. 태그, 태그 그렇다면 상위에 부모처럼 있는 태그와 태그의 차이는 무엇인지 알아보겠습니다. 태그는 ordered list의 약어이고 태그는 unordered list의 약어로 만들어졌습니다. 즉, 순서의 유무가 다른 것입니다. 태그는 각..

태그를 조금 더 보기 앞서 인라인레벨과 블록레벨이라는 개념을 소개하려고 합니다. 블록레벨(block-level) 요소는 항상 개행과 함께 새로운 줄을 형성합니다. 입력한 공간 외에 블록을 만들어 한 줄을 차지한다고 볼 수 있습니다. 때문에 블록레벨 요소는 따로 입력해주지 않는 한 탭의 최대 너비(full width)를 갖습니다. 인라인레벨 요소(inline-level)는 반대로 새로운 줄을 만들지 않고 너비 또한 필요한 만큼으로만 형성됩니다. 블록레벨은 새로운 블록을 형성하는 느낌이고 인라인레벨은 말 그대로 진행되고 있던 줄 안에서 이루어진다는 것입니다. 태그를 통한 예제로 이해하는 게 더 쉬울 듯합니다. 참고로 전번에 본 태그도 대표적인 블록레벨 요소 중에 하나입니다. * 컨테이너 태그 (, ) 태그 ..

글쓰기를 기본모드에서 HTML모드로 바꾸면 위와 같이 보입니다. 태그가 거의 모든 행에 적용되어 있다는 것을 볼 수가 있습니다. 태그 태그는 paragraph의 p를 따와서 단락·문단을 나타내는 태그입니다. 단락을 나타내다 보니까 자동으로 개행을 해주기도 합니다. HTML 문서는 기본적으로 태그를 통하지 않고서는 행갈이가 불가능합니다. 공백 또한 최대 한 칸밖에 인정이 되지 않습니다. 때문에 개행을 하기 위해서는 태그를 통해야 하는데, 단순한 개행 외에 문단이라는 의미를 부여하기 위해서 태그를 사용하는 것입니다. 행갈이가 되고 자동으로 위아래로 공백을 넣어주고 있습니다. 위의 예에서 third paaragraph를 포함하는 태그는 없어도 화면 상으로 차이가 없습니다. 다만, 문단이라는 의미를 부여하기 위..

앞으로 태그에 대해서 면밀하게 볼 텐데 텍스트를 꾸미고 강조하는 수식 태그에 대해서 간단하게 먼저 보려고 합니다. 사실 꾸미는 역할은 태그에서 CSS로 많이 넘어가고 있기 때문에 없어지는 태그들도 많고 존재하더라도 좀처럼 잘 쓰지 않는 것으로 알고 있기는 합니다. 하지만 태그를 통해서 실제로 웹에서 어떻게 구현이 되는지 그 시발점에서 한번 보는 것은 나쁘지 않다는 생각에 소개를 합니다. 전체적으로 소개하고자 하는 태그에 대해서 나열해보았습니다. 10번째 줄의 middle은 태그와 태그와 글자크기를 비교할 수 있도록 넣어보았습니다. 굵게 ( 태그, 태그) 일반적으로 bold체라고 부르기도 하는 '굵게'에 대한 태그입니다. 위에서 보면 태그와 태그는 화면의 결과로는 동일하게 보입니다. 태그는 bold의 약자..

전번에 href 속성은 URL을 지정하는 것이고 target 속성은 지정된 URL이나 파일을 여는 방식에 대한 것입니다. 예컨대 [target="_blank"]이면 새로운 탭(blank)에 URL이나 파일에 대한 창을 띄우게 됩니다. 이 두 가지 속성은 태그 다루면서 더 볼 것입니다. 그래서 태그 내에서 태그를 통해서 기본값을 설정해두면 태그 내 링크들에 적용이 됩니다. 글쓰기 적용이 된다 함은 하이퍼링크가 적용된 '글쓰기'를 눌렀을 때 "/글쓰기"로 가는 게 아니라 "URL/글쓰기"로 가게 되는 것입니다. target은 _blank이기 때문에 새로운 탭으로 말입니다. 앞서 병렬 식으로 풀어나간다고 말한 것이 이것입니다. 태그 내 모든 링크에 대해서 기본 URL이 앞에 붙고 target도 따로 지정하지 ..

왼쪽은 티스토리 글쓰기 화면의 소스 창이고 오른쪽은 네이버 메인 화면의 소스 창입니다. 두 가지 화면만 가지고 일반화시키려면 오류가 있겠지만 공통적으로 보이는 것을 추려보겠습니다. ... ... 한 줄씩 보겠습니다. - -> document type, 즉 문서의 종류가 html이라고 알려주는 역할입니다. 최상단에 위치하여 어떤 언어로 작성되었는지 브라우저에게 선언하는 것입니다. 예컨대 번역기를 돌리려고 해도 어떤 언어인지 입력해야 하는 것처럼 말입니다. 다만 은 선언일 뿐 태그는 아닙니다. 덧붙여 DOCTYPE은 소문자로 적어도 무방합니다. - ... -> 먼저 이 브라우저에게 문서의 종류가 html이라고 선언했다면 태그는 이 html 문서가 어떤 방식으로 쓰였는지에 대해 추가로 이야기해주는 느낌입니다...

태그 먼저 태그를 예로 태그에 대해서 알아보도록 하겠습니다. 태그 HTML 문서에서 대부분의 요소는 위와 마찬가지로 시작 태그()와 종료 태그()로 작성이 되고 그 사이에 내용이 들어갑니다. 여기서 종료 태그는 꺾쇠() 안쪽 앞부분에 슬래시(/) 기호를 넣어줍니다. 시작 태그는 여는 태그라고도 하고 종료 태그는 닫는 태그라고 부르기도 합니다. 그래서 대개 '시작태그-내용-종료태그' 순으로 배치되는 각각의 요소들은 태그의 종류에 따라 다른 쓰임과 의미를 갖게 됩니다. 여기서 쓰임은 디자인적인 기능을 말할 수도 있고 링크를 걸어 다른 페이지와 연결해주는 등 다양한 역할을 말합니다. 의미는 겉으로 드러나는 것과 별개로 내적으로 가지게 되는 값들을 말합니다. 빈 태그 덧붙여서 태그 중에는 종료 태그가 없는 태그..

티스토리 블로그를 운영하다 보면 아무래도 HTML이라는 마크업 언어에 대해 한번쯤 관심을 가지게 되지 않나 싶습니다. 근데 꼭 티스토리가 아니더라도 일반적인 웹 페이지의 소스를 통해 이미 HTML이라는 언어를 본 적은 있을 것입니다. 실수로 F12키가 눌러지면 나오기도 하니까 말입니다. 위 캡처 화면처럼 F12키를 누르면 정신없는 창이 생깁니다. html이라고 몇 군데 써져있는 것이 눈에 띕니다. 티스토리 글쓰기창은 직접 HTML 문서 상태로 수정할 수가 있게 되어있습니다. 그래서 블로그 운영에 도움이 되는 부분들 때문도 있지만, 매일 같이 보는 데스크톱 화면인데 어떤 것들이 그것을 이루고 있었는지 한번 보는 것도 재미있을 것 같아서 HTML을 포함한 웹언어를 조금 공부해보려고 합니다. 보통 보면 HTM..