인터넷에서 절대 빠질 수 없는 요소는 미디어죠. 미디어는 영상, 음악, 사진 등 여러가지 유형들이 있습니다. 웹 페이지를 통해 내가 만든 영상이나 음악을 보여줄 수 있다면 나만의 자산이 되고 자릿세 없이 전세계인들에게 공유할 수 있다는 이점이 있습니다. 이번 포스팅에서는 어떻게 미디어를 출력할 수 있는지 알아보도록 하겠습니다. 미디어 태그 01. 이미지 태그 이미지 태그는 사실 이전 포스팅에서 언급한 적이 있었습니다. 2021.10.16 - [나만의 웹사이트 만들기/HTML 정복하기] - [02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자! [02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자! 어떤 바보라도 컴퓨터를 사용할 수 있다. 그래서 많은 사람들이 컴퓨터를 사용한다. (Ted Nel..

폼태그란 웹 페이지에서의 입력 양식을 말합니다. 우리가 평소 로그인할 때 아이디와 패스워드를 기입하는 용도로 쓰이죠. 사용자가 기입한 정보를 백엔드서버로 전송해주는 역할을 합니다. 다양한 폼태그들을 사진과 함께 어떻게 사용되는지 확인해봅시다! 폼태그 01. 폼태그 속성 폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. name: 폼의 이름을 지정합니다. action: 폼 데이터가 전송되는 백엔드 url을 지정합니다. method: 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST) target: action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다. a..

목록으로 분류하고 정리하는 일은 컴퓨터 안뿐만 아니라 펜으로 종이 위에 적어두기도 하죠. 그만큼 중요하고 많이 쓰이는 작성법이라고 할 수 있습니다. 이번 시간은 목록태그를 어떻게 구현할 수 있는지 간단명료하게 정리해두었습니다. 태그의 종류와 응용법만 잘 외워두면 쉽게 배울 수 있다고 생각합니다. 목록태그 01. 목록태그 종류 먼저 목록태그에는 어떤 것들이 있고 어떤 기능을 하는지 알아보도록 합시다. 종류 기능 ul 기본적인 목록 태그 (부모태그) ol 숫자 목록 태그 (부모태그) li ul과 ol의 자식태그 dl 정의형 태그 (부모태그) dt 정의하고 싶은 제목 dd 제목에 대한 설명 태그 사실 이렇게만 봐서는 대체 무슨 태그인지 감이 안잡힙니다. 직접 VScode를 켜고 어떻게 활용되는지 확인해보시는걸..

어떤 바보라도 컴퓨터를 사용할 수 있다. 그래서 많은 사람들이 컴퓨터를 사용한다. (Ted Nelson, HTML을 만든 사회 과학자) 개념 정리 TAG 태그 태그는 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게 분류한 규칙입니다. 내용 이처럼 여는 태그와 닫는 태그로 구성되어 있습니다. 닫는 태그는 슬래시(/)를 넣어서 구분합니다. 부모 태그 & 자식 태그 웹 문서를 구조적으로 분류하기 위해 부모태그 안에 자식 태그를 넣어서 정리해줍니다. 부모태그 밑에 자식태그를 들여쓰기하기 위해서는 TAB을 눌러주면 됩니다. 여기에선 과 이 부모태그고 그 안에 들여쓰기한 나머지 태그들은 자식태그입니다. HTML의 기본 구조 2021.10.14 - [나만의 웹사이트 만들기/VScode] - [01] ..

비전공자로서 혹은 디자이너로서 코딩을 해내기란 쉽지 않을 것이라 예상할 것입니다. 처음 "Hello world"를 썼을 때만 기억이 나는 사람들이 많을거라 생각합니다. 코딩을 제대로 공부하지 않아 그럴 수도 있지만 누구라도 처음 컴퓨터 언어 즉, 컴퓨터의 세계를 알게 되었을 때 느끼는 새로움이란 잊지 못해서일 겁니다. 어떤 개발자 분은 자신의 인생이 컴퓨터 언어를 알기 전과 후로 나뉜다고 합니다. 저 또한 그랬고 지금부터 꾸준히 컴퓨터의 세계를 보여드리고자 합니다. 디자이너 입장이라 눈에 보이는 결과물을 중시하기 때문에 웹페이지를 만드는 과정을 하나씩 남기겠습니다. 단순 기록용이지만 독자들에게 도움이 될 수 있었으면 좋겠습니다. 참고로 제가 코딩을 배우고 참고한 서적은 "Do it! 인터랙티브 웹 페이지..