본문 바로가기

반응형

프론트엔드 입문 가이드/HTML 기초

(8)
[HTML 기초] 7. HTML 태그 총정리 페이지 만들기 지금까지 살펴본 태그들을 이용해 "HTML 태그 총정리" 웹 사이트 하나 만들어보겠습니다. 1. 파일 생성 우선 파일을 만들어두고 시작하겠습니다. vscode 좌측 창에서 아래 사진의 빨간 부분을 눌러 5개의 파일을 생성해주세요. index.html: 홈 페이지 text.html: 텍스트 태그 소개 페이지 multi.html: 멀티미디어 태그 소개 페이지 table.html: 표 태그 소개 페이지 form.html: 폼 태그 소개 페이지 2. 홈 페이지 구현 index.html 파일에 들어가 !+tab을 눌러 html 구조를 불러오세요. 그리고 body 부분을 아래와 같이 작성합니다. 를 이용해 메뉴들을 리스트 화하고, 각 메뉴를 클릭하면 해당 페이지 넘어가도록 를 사용했습니다. 홈 페이지에서는 이 웹 ..
[HTML 기초] 6. HTML 태그 - div와 span & 구획 관련 시멘틱 태그 1. div와 span 와 태그는 다른 태그들을 감싸는 컨테이너 태그로, 자체의 의미는 없습니다. 의미도 없는 태그를 왜 쓰는가? 레이아웃을 설정하거나 CSS작업을 하는데 용이하기 때문에 사용합니다. 우선 둘의 차이점을 먼저 알아보고 각각을 어떻게 사용하는지 예시를 살펴보겠습니다. 차이점 div와 span은 태그의 너비가 차지하는 부분에 있어 차이가 있습니다. : 브라우저의 한 줄을 모두 차지 (블록 컨테이너) : 컨테이너의 크기만큼만 차지 (인라인 컨테이너) 여기서 block과 inline의 개념이 등장하는데 이는 다음 글에서 자세히 다루겠습니다. 지금은 직관적으로 브라우저 상에서 보여지는 부분이 어떻게 다른지 확인해봅시다. 두 태그를 각각 화면에 출력해보면, 차지하는 부분이 다음과 같습니다(편의 상 ..
[HTML 기초] 5. HTML 태그 - 폼 관련 태그(button, input, textarea, select, option, label, form) 1. 폼 관련 태그 사용자의 입력을 받아 제출할 수 있는 양식을 폼이라고 하고, 이러한 동작을 수행하는 태그들을 알아보겠습니다. 한 사이트에서 로그인할 때를 생각해보세요. 이때 아이디와 비밀번호를 입력하고 로그인 버튼을 누르는 과정이 사용자의 입력을 받아 해당 사이트의 서버로 제출하는 것입니다. 버튼 - button 속성 name: 버튼의 이름. 제출 시 value와 데이터를 구성함 type: submit, reset, button 중 하나 선택. 제출용이 아니라면 button으로 지정하는 것이 좋음 버튼 입력 - input 사용자의 데이터를 받을 수 있는 입력 창으로, type 속성을 이용해 꽤 많은 기능을 구현할 수 있음. 속성 참고: https://developer.mozilla.org/ko/doc..
[HTML 기초] 4. HTML 태그 - 멀티미디어, 표 관련 태그 (img, video, audio, table, thead, tbody, tr, th, td, caption) 1. 멀티미디어 관련 태그 이미지와 비디오 태그를 보면, 열린 태그와 닫힌 태그 두 개로 이루어지지 않고 하나의 태그로 이루어진 것을 볼 수 있습니다. 이렇게 하나의 태그만 가지고도 사용할 수 있는 것들이 있습니다. 주로 열린 태그와 닫힌 태그 사이에 아무런 내용이 없을 경우 하나의 태그로 해결합니다. 이미지 - image 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#%ED%8A%B9%EC%84%B1 src : 이미지의 경로 지정 (필수) alt : 이미지에 대한 설명, 이미지를 표시할 수 없는 경우 보여지는 값 (선택) 비디오 - video 속성 참고: https://developer.mozilla.org/ko/docs/Web/H..
[HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a) 1. 태그의 구조 기본적인 태그의 구조는 아래와 같습니다. 앞부분을 열린 태그(Opening tag), 뒷부분을 닫힌 태그(Closing tag)가 하고 그 사이에 내용이 들어갑니다. 열린 태그 안에 속성(Attribute) 값이 들어가는데 이를 활용해 태그를 효율적으로 활용할 수 있습니다. 열린 태그와 닫힌 태그, 그 사이의 내용을 모두 포함한 것을 요소(Element)라고 합니다. 참고) 요소를 구성하는 태그 사실 위의 그림은 요소의 구조라고 하는 것이 정확합니다. 요소는 웹 페이지를 구성하는 것으로, 요소를 구성하는 것 중 하나가 태그인 것이지요. 하지만 여기서는 태그를 사용하는 방식을 이해하기 위해 태그의 구조라고 소개했습니다. 요소에 대한 구체적인 내용이 궁금하다면 여기를 참고하세요. 2. 기초..
[HTML 기초] 2. 환경 세팅 & HTML 구조 (feat. vscode 사용 꿀팁) 1. 환경 세팅 HTML 문서를 작성하기 위해서는 전용 편집기가 필요합니다. 웹 개발을 할 때 주로 사용하는 에디터는 vscode라는 것으로, 여기에서 다운로드할 수 있습니다. Extensions(확장 플러그인) 추천 vscode를 다운받은 상태 그대로 사용하는 것보다 Extensions를 활용해 내 입맛에 맞게 커스텀해서 사용하면 효율적으로 코딩을 할 수 있습니다. vscode를 열었을 때 왼쪽 사이드 바의 가장 아래쪽 아이콘을 클릭하면 플러그인을 검색하는 창이 나올 것입니다. 여기에 원하는 플러그인을 검색해서 설치하시면 됩니다. 굉장히 많은 플러그인이 있으니 개발을 하면서 나에게 맞는 환경을 구성해보는 재미도 쏠쏠합니다! 우선 가장 유용하다고 생각하는 두 가지를 추천합니다. (절대 후회 안 함) Pr..
[HTML 기초] 1. HTML이란? 1. HTML이란? HTML은 웹 브라우저가 이해하는 문서를 작성하는 언어입니다. 한국인이 이해하는 문서를 작성하는 언어가 한국어이듯, 브라우저가 이해하는 언어를 HTML이라 하는 것입니다. 브라우저는 뭔데? 브라우저란 인터넷에 접속하기 위한 프로그램을 말하며, 크롬, 사파리, 오페라, 익스플로러, 파이어폭스, 엣지와 같은 것입니다. (익스플로어는..RIP..) 우리가 HTML을 통해 브라우저가 이해하는 문서(=HTML 문서)를 작성하면, 브라우저는 HTML 문서를 보고 웹 페이지를 구성합니다(=우리에게 보여줍니다). 즉, HTML을 알면 누구나 웹 페이지를 만들 수 있습니다! 2. Hypertext Markup Language 이제 HTML의 커다란 의미는 알았습니다. 인터넷 접속할 때 필요한 프로그램..
[HTML 기초] 0. 소개 1. 계기 안녕하세요 개발자고고입니다. 그동안은 필요한 부분만 선택적으로 골라 학습하고 프로젝트에 적용하는 방식으로 개발을 공부했습니다. 하지만 수많은 정보가 뒤엉켜 있는 느낌이 들어 처음부터 다시 정리해보고자 [프론트엔드 개발 가이드]를 작성하게 되었습니다. 사실 저를 위한 가이드라고 할 수 있지요. 성격상 순서대로, 스텝 바이 스텝으로 공부하는 것을 좋아하는데, 개발은 "여기서부터 여기까지 공부하면 된다"가 없어 처음에는 방황을 많이 했습니다. 하지만 그 과정에서 비효율적인 것은 있었을지 몰라도 불필요한 것은 없었다고 생각합니다. 오히려 다양한 시행착오들이 시야를 넓혀주었다고 생각합니다. 아직 제대로 된 실무를 경험했다고 할 수 없는 학생 신분이지만, 그러기에 더 왕초보들의 마음을 잘 이해할 수 있는..

반응형