라미의 컴퓨피디아

HTML 태그 하면서 정말 많은 태그들이 있어 헷갈리고 어려우시죠? 사실 처음 공부할 때 HTML 쉬운 줄 알았더니, 너무 많은 태그들이 있어 포기하고 싶었던 적도 있었기에 그 마음 이해 갑니다. 그래서 저는 제가 헷갈렸던 태그들을 정리해가면서, 웹 페이지를 만드는 데 한발짝 더 다가섰습니다. 이 글을 끝까지 읽으신다면, input 태그에 대해서 어느정도 가닥이 잡히게 될 것입니다. 오늘은 input 태그의 대표적인 요소 5가지와 어떤 식으로 사용하는지에 대해서 살펴보도록 하겠습니다. 1. input 태그 사용법 일단 input 태그가 무엇인지 알아볼까요? 여러분이 한눈에 어떤 결과가 나오는지 확인할 수 있도록 레펠을 사용해서 input 태그 사용법에 대해서 보여드리겠습니다. input 태그는 쉽게 말하..

CSS 선택자 중 특별한 선택자 :hover 안녕하세요. NPC 라미입니다. 오늘은 CSS 선택자 중 특별한 선택자인 hover에 대해서 알아보고자 합니다. 여러분들이 웹 사이트에서도 자주 쓰는 선택자일텐데요. 처음에 HTML과 CSS를 배우면서 뭔지 모르게 내 페이지가 왜이렇게 밋밋할까?하는 생각이 들었습니다. 처음 만든 제 페이지는 정확한 이유는 모르겠지만(그 당시에는), 정적이라는 느낌을 많이 받았습니다. 1. hover 선택자 왜일까요? 바로 제가 처음 만들었던 홈페이지에는 :hover 선택자를 주지 않았기때문입니다. 그렇다면 이 hover가 뭐길래 웹 페이지에서 자주 쓰고, 웹 페이지를 좀 더 동적으로 만드는지 궁금하시죠? 이 hover는 mouse over라고 생각하시면 됩니다. 즉, 우리가 ..

안녕하세요! NPC 라미입니다. 오늘은 CSS로 웹 페이지상에 여백도 주고, 메뉴도 만들어 보겠습니다! 이제 정말로 웹페이지 만드는 데 한 발짝 더 다가서는 것 같지 않나요? 저는 이 메뉴 만드는 법을 배우면서 너무 신났었는데, 여러분도 저와 같았으면 좋겠습니다. HTML로 웹페이지를 만들다보면 가끔 내가 봤던 웹페이지랑은 너무 다르다는 느낌이 들 때가 있습니다. 저는 처음에 정말 당황했었거든요. 글자 사이도 너무 빽빽하고, 요소들 간에 여백이 없어서 어떻게 해야 하는지 고민했었습니다. 이 때는 padding과 margin을 사용하면 됩니다. Padding 먼저 padding에 대해서 알아보겠습니다. 패딩이라고 하니까 굉장히 친숙한 느낌이 들죠? 이 패딩은 요소 내에 여백을 만들어 주는 역할을 합니다. ..

안녕하세요! NPC 라미입니다. 오늘은 HTML의 필수 태그에 대해서 배워보겠습니다. 앞서서 이야기드렸던 것처럼 HTML은 홈페이지를 구성하고 있는 필수적인 뼈대 역할을 하고 있습니다. HTML의 구조를 보면 일단 와 로 이루어져 있습니다. 저희가 이번에 알아볼 태그들은 다 아래 적용됩니다. 그리고 쌍을 이루며 사용되는 태그는 그 태그가 끝날 때 로 태그의 끝을 알립니다. div 태그 일단 가장 흔하게 쓰이는 태그는 입니다. div는 divide로 생각하시면 됩니다. 로 태그를 작성하게 됩니다. 일반적으로 HTML 태그는 우리가 여러 줄에 걸쳐 적어도 별도의 태그를 주지 않으면 가로 한 줄에 표시되게 됩니다. 만약 내용을 분리하고 싶다 하면 이 div 태그를 사용하면 됩니다. 만약에 이 div가 없었다면..