딴따라 개발자 데일리

메타태그(Meta Tag)란 웹 페이지내에서 HTML에 대한 메타데이터(Meta Data)를 제공하는 역할을 합니다. 여기서 메타데이터(Meta Data)란 해당 데이터에 대한 정보를 제공합니다. 따라서 메타태그(Meta Tag)를 정확히 이해하기 위해서는 메타 데이터(Meta Data)에 대한 이해가 선행적으로 이루어져야 합니다. 오늘은 메타태그와 메타데이터에 대한 개념을 이해하고 실제로 어떻게 사용되지는 알아보려 합니다. ◇ 메타태그(Meta Tag)와 메타데이터(Meta Data) 1) 메타데이터(MetaData)- 메타데이터(MetaData)란 한마디로 '데이터에 대한 정보' 또는 '데이터에 대한 데이터'로 표현할 수 있습니다. 하지만 메타데이터(MetaData)를 '데이터에 대한 데이터'로 표현..

웹 브라우저를 이용하다보면 사이트마다 주소탭에 사이트를 상징하는 심볼마크를 가지고 있다. 티스토리의 경우 주황생 원형에 'T'가 들어가져 있고 이러한 마크를 '파비콘(Favicon)'이라 부른다. 필자는 이전 포스팅에서 파비콘의 정의와 이미지파일을 파비콘 확장자인 Ico파일로 변환하는 방법에 관해 자세히 소개한적이 있고 이헤대해 궁금한 점은 해당포스팅을 참고하길 바랍니다.(바로가기>>>) 오늘은 파비콘을 실제 웹사이트에 적용하는 방법에 대해 소개하려고합니다. 웹 프로그래밍을 공부하는 분이라면 웹 사이트 제작시 반드시 이용하게되며 웹 개발을하지 않더라도 티스토리 블로그를 운영하는 블로거분들에게도 블로그 관리와 관련된 유용하게 사용하실 수 있습니다.◇ 즐겨찾기/주소 탭 아이콘 적용하기 - 파비콘 적용을 통한..

오늘 소개할 내용은 HTML를 활용한 이미지 띄우기 이다. 본론부터 바로 말하자면 이미지 태그는 다음과 같다. 일반적으로 HTML은 항상 시작과 끝이 있다. 예를들어 로 닫아주는 것이 일반적이다. 하지만 오늘 소개하는 이미지 태그의 경우는 '단독태그'이므로 와 같이 끝을 가지고 있지 않다. 하지만 맨 마지막에 /처리를 해줌으로써 태그를 마무리한다. src 명령어의 경우는 이미지의 주소를 입력하여 준다. 일반적으로 파일의 위치를 태그걸어 주어도 되고, 이미지의 URL주소를 입력하여 주어도 된다.(단, URL주소가 아닌 파일의 위치를 태그걸어줄 경우는 경로를 정확히 입력하여 주어야 한다.) alt명령어의 경우는 이미지에 대한 설명을 표시하여 주는데 생략하는 경우도 많다. 또한 이미지 태그에 직접적으로 가로 ..

오늘 소개할 것은 HTML & CSS를 활용한 메뉴 만들기 이다. 앞서 언급한 바가 있는 리스트 태크를 활용할 예정이다. 나또한 이제 막 HTML과 CSS를 공부하기 시작하였고, 내가 공부한 것을 많은 이들과 공유하기 위하여 글을 게재하는 것이니 혹시 잘못된 부분이 있으면 바로 알려주면 수정하겠습니다. 기본적으로 HTML은 정적인 페이지를 구현하고 이에 CSS를 활용하여 스타일 효과를 준다. 그래서 일반적으로 HTML을 이용하여 기본 틀을 잡고 CSS를 활용하여 꾸며주게 된다. 이번 시간에 해볼 메뉴는 세로가 아닌 가로로 출력되는 메뉴이다. 세로로 출련되는 메뉴의 경우는 리스트 태그를 활용하고, 이를 CSS로 꾸며주기만 하면 되기때문에 간단하다. 가로로 출력되는 메뉴의 경우는 리스트 태그를 살짝 변형 시..

오늘 공부할 부분은 HTML의 리스트만들기와 하이퍼링크 이다. 일반적으로 대부분의 웹사이트에서 메뉴를 구성함에 있어 리스트를 사용한다. 또한 메뉴를 클릭하였을 경우, 새로운 페이지로 이동하는 기능 즉 하이퍼링크와 유사한 기능으로 첨부파일을 내려 받는 기능 또한 하이퍼링크의 일종이다. 리스트 만들기는 크게 두가지로 나뉜다. 번호가 존재하는 리스트 형태인 과 번호가 존재하지 않는 형태인 이다. 즉접 코드를 보면 이해하기 편하다. 리스트 만들기 번호가 없는 리스트 네이버 다음 번호가 있는 리스트 네이버 다음 위의 코드에서 ~부분이 번호가 없는 리스트를 생성하고, ~은 번호가 있는 리스트를 생성한다. 각각의 리스트 항목은 를 활용하여 리스트를 생성해 주면된다. 다음으로 하이퍼링크이다. 하이퍼링크의 태그는 이다...

티스토리를 운영하는 블로거나 기타 많은 사람들이 전공이 아닌 취미로 html과 css를 공부하는 것 같다. 나또한 프로그래밍을 공부하고 있지만, 웹 프로그래밍은 전공이 아닌 서브의 개념으로 공부를 시작했던 것 같다. 오늘은 HTML의 태그 중 하나인 H태그에 대해 공부해보고자 한다. H태그의 경우 글의 제목 혹은 강조하고 싶은 내용 등에 주로 쓰이는 태그이다. [h태그의 종류] - 총 6가지로 다음과 같다. ① ② ③ ④ ⑤ ⑥ 앞서 언급했듯이 html의 경우 항상 닫아주는 태그를 사용해야 하고, 이는 h태그에서도 마찬가지로 닫아주는 태그 /를 사용하여 닫아 준다. h1~6까지 있는데 숫자의 크기가 클수록 글자의 크기는 작은 글씨체로 출력이 된다. 예) 다음은 텍스트의 스타일을 변경할 수 있는 스타일 태..

웹앱 개발 프로젝트를 진행하게 되면서 급하게 배워야할 것들이 많아 졌다. 그중 하나가 HTML이다. 그외에도 javascript, CSS, PHP, 폰갭 등 공부해야할 것들이 산더미처럼 생겼지만, 막상 공부를 해보니 서로가 연관된 것들이 많아 차근차근 공부해나가면 될 것 같다. 개인적인 생각으로 웹개발을 기획중이면 HTML, javascript, css, php순으로 공부를 하면 도움이 될 것 같다. 본론으로 들어가서 오늘은 HTML의 기본 구조에 대해서 소개해보고자 한다. 기본 구조는 다음과 같다. HTML은 각태그의 이 시작되고 으로 끝난다. 태그가 열리면 닫아주어야 한다. (모두가 그런 것은 아니고 예외적인 부분도 있다.) 나 과 같은 단독 태그를 제외하고는 모두 의 방법을 따라 줘야 된다. 단독 ..