본문 바로가기

반응형

프론트엔드 입문 가이드

(12)
[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. 계기 안녕하세요 개발자고고입니다. 그동안은 필요한 부분만 선택적으로 골라 학습하고 프로젝트에 적용하는 방식으로 개발을 공부했습니다. 하지만 수많은 정보가 뒤엉켜 있는 느낌이 들어 처음부터 다시 정리해보고자 [프론트엔드 개발 가이드]를 작성하게 되었습니다. 사실 저를 위한 가이드라고 할 수 있지요. 성격상 순서대로, 스텝 바이 스텝으로 공부하는 것을 좋아하는데, 개발은 "여기서부터 여기까지 공부하면 된다"가 없어 처음에는 방황을 많이 했습니다. 하지만 그 과정에서 비효율적인 것은 있었을지 몰라도 불필요한 것은 없었다고 생각합니다. 오히려 다양한 시행착오들이 시야를 넓혀주었다고 생각합니다. 아직 제대로 된 실무를 경험했다고 할 수 없는 학생 신분이지만, 그러기에 더 왕초보들의 마음을 잘 이해할 수 있는..

반응형