전체 글
![[IT 이야기] 손쉽게 정복하는 HTML - <input> 사용법과 대표 요소](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FsJj9W%2FbtrM7DDXdCM%2FAAAAAAAAAAAAAAAAAAAAAFTgO4Cm8LhR_ESa0tP-sCJV4lmeFX5vLUYnHf4lQxef%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DFI9KtLme8haT7zozy1v5nte1S4Y%253D)
[IT 이야기] 손쉽게 정복하는 HTML - <input> 사용법과 대표 요소
HTML 태그 하면서 정말 많은 태그들이 있어 헷갈리고 어려우시죠? 사실 처음 공부할 때 HTML 쉬운 줄 알았더니, 너무 많은 태그들이 있어 포기하고 싶었던 적도 있었기에 그 마음 이해 갑니다. 그래서 저는 제가 헷갈렸던 태그들을 정리해가면서, 웹 페이지를 만드는 데 한발짝 더 다가섰습니다. 이 글을 끝까지 읽으신다면, input 태그에 대해서 어느정도 가닥이 잡히게 될 것입니다. 오늘은 input 태그의 대표적인 요소 5가지와 어떤 식으로 사용하는지에 대해서 살펴보도록 하겠습니다. 1. input 태그 사용법 일단 input 태그가 무엇인지 알아볼까요? 여러분이 한눈에 어떤 결과가 나오는지 확인할 수 있도록 레펠을 사용해서 input 태그 사용법에 대해서 보여드리겠습니다. input 태그는 쉽게 말하..
![[IT 이야기] 혼자서도 파악할 수 있는 HTML <HEAD>구조](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FqjGHy%2FbtrM1eY3aXA%2FAAAAAAAAAAAAAAAAAAAAADyWzFIiY9DP7zv63OjRjgXjofK31sERW3WrBXqWIlOp%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DfKcfxbIN5zRl7Vl%252FT11yOsCi7mM%253D)
![[IT 이야기] CSS에도 이벤트가 있다면?!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcA00LO%2FbtrMDpybgxq%2FAAAAAAAAAAAAAAAAAAAAADu9a_ZPJ7gu1u8451P9PrLzBZ5cvYYKIJDa4UH3SxOr%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Ds74MLen7OZY4ojnOEWErQtvSyKs%253D)
[IT 이야기] CSS에도 이벤트가 있다면?!
CSS 선택자 중 특별한 선택자 :hover 안녕하세요. NPC 라미입니다. 오늘은 CSS 선택자 중 특별한 선택자인 hover에 대해서 알아보고자 합니다. 여러분들이 웹 사이트에서도 자주 쓰는 선택자일텐데요. 처음에 HTML과 CSS를 배우면서 뭔지 모르게 내 페이지가 왜이렇게 밋밋할까?하는 생각이 들었습니다. 처음 만든 제 페이지는 정확한 이유는 모르겠지만(그 당시에는), 정적이라는 느낌을 많이 받았습니다. 1. hover 선택자 왜일까요? 바로 제가 처음 만들었던 홈페이지에는 :hover 선택자를 주지 않았기때문입니다. 그렇다면 이 hover가 뭐길래 웹 페이지에서 자주 쓰고, 웹 페이지를 좀 더 동적으로 만드는지 궁금하시죠? 이 hover는 mouse over라고 생각하시면 됩니다. 즉, 우리가 ..
![[IT 이야기] CSS로 여백도 만들고, 메뉴도 만들어요!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FRLTnY%2FbtrMdNurhBl%2FAAAAAAAAAAAAAAAAAAAAAJLkHPPUDylaPauPZw9-MJPO4Z3GQogsdRQUgZyH5E6z%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DNuqqgiDCp%252BkVyfD9fCNSWJfuwRw%253D)
[IT 이야기] CSS로 여백도 만들고, 메뉴도 만들어요!
안녕하세요! NPC 라미입니다. 오늘은 CSS로 웹 페이지상에 여백도 주고, 메뉴도 만들어 보겠습니다! 이제 정말로 웹페이지 만드는 데 한 발짝 더 다가서는 것 같지 않나요? 저는 이 메뉴 만드는 법을 배우면서 너무 신났었는데, 여러분도 저와 같았으면 좋겠습니다. HTML로 웹페이지를 만들다보면 가끔 내가 봤던 웹페이지랑은 너무 다르다는 느낌이 들 때가 있습니다. 저는 처음에 정말 당황했었거든요. 글자 사이도 너무 빽빽하고, 요소들 간에 여백이 없어서 어떻게 해야 하는지 고민했었습니다. 이 때는 padding과 margin을 사용하면 됩니다. Padding 먼저 padding에 대해서 알아보겠습니다. 패딩이라고 하니까 굉장히 친숙한 느낌이 들죠? 이 패딩은 요소 내에 여백을 만들어 주는 역할을 합니다. ..
![[IT 이야기] CSS 어떻게 사용하는 지 궁금하다면?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FoW1sC%2FbtrL83DYpOf%2FAAAAAAAAAAAAAAAAAAAAAF3EUFP7tBS6JkY0Im4aRh-sQ_mjkX9krLwNUwrvk4Qo%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DWj08qOYXfas2Yb5llUkcKgf3StM%253D)
[IT 이야기] CSS 어떻게 사용하는 지 궁금하다면?
안녕하세요! NPC 라미입니다. 앞서 HTML과 CSS가 어떤 역할을 하는지에 대해서 알아봤는데요. 그렇다면 이 CSS를 실제로 어떻게 사용하는지 궁금하지 않으세요? CSS는 HTML과 함께 웹 페이지를 구성하는 필수 요소 중 하나로 웹 페이지의 기본으로 알고 계시는 게 좋습니다 일단 CSS는 웹페이지의 인테리어를 담당한다고 이야기드렸는데요. 그렇다면 이 HTML과 CSS는 서로 어떻게 연결을 하는 걸까요? replit 홈페이지를 통해서 알아보도록 하겠습니다. 로그인을 하시고 create 버튼을 누르면 아래와 같은 화면이 생성됩니다. 여기에서 우리가 사용할 언어는 HTML, CSS, JS(자바 스크립트)이기 때문에 해당 템플릿을 선택해주고 Create Repl 버튼을 눌러주시면 됩니다. 만약 다른 언어로..