목록HTML (6)

minTech

[HTML] 시맨틱 태그 (Semantic Tag)

Sematic Tag란 의미를 가지는 태그 시맨틱 태그는 왜 생겼을까? 웹 페이지의 레이아웃을 만들 때 태그를 이용하여 만들어주었다. 하지만 복잡한 웹페이지를 만들다보면 태그가 자연스럽게 많이 생기게 될 것이다. 결국 이 태그는 무엇을 가리키는 태그인지 이해하기 어려워질 것이다. 이러한 문제를 해결하기 위해 HTML5은 시맨틱 태그를 도입하였다. 쉽게 말해 시맨틱 태그는 이러한 여러 들에 의미를 부여한 것이다. 태그들의 이름들만 봐도 레이아웃의 어느 부분을 가리키는 태그인지 쉽게 알 수 있다. 시맨틱 태그의 종류 태그 설명 페이지나 섹션의 도입부 또는 소개 정보를 나타냄 네비게이션 표현을 위한 태그로써, 링크 목록을 포함됨 페이지의 주요 컨텐츠가 포함됨. 페이지 당 한 번만 사용되어야 함 해당 페이지에서..
HTML 2024. 1. 5. 20:40
[생활코딩]HTML 수업(3)

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. 1. 웹 개발자 도구 웹 브라우저란 웹 서버에 설치되어있는 HTML을 받아 화면에 표시해주는 장치이다. 만약에 랴는 태그를 사용한다면 WB(Web Browser)는 태그를 만날 시 src 속성 값의 파일을 웹 서버에 들어가 몰래 다운 받고 화면 띄운다. 2. Mobile 지원
HTML 2023. 9. 12. 14:22
[생활코딩] HTML수업 (2)

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. Form은 선택하는 것들, 사용자가 입력한 것을 전송할 때 사용하는 것들이다. 오늘 이러한 form을 어떻게 작성하는지에 대해서 정리해보았다. 1. Form의 기본 정보를 입력받기 위해서는 이라는 태그를 사용한다. input의 type 속성에 따라서 각각의 형태가 달라진다. (1) type = "text" : 사용자가 정보를 입력할 수 있는 text box를 만들어준다. (2) type = "password" : 작성한 text 가 보이지 않도록 한다. (3) type = "input" : 서버로 데이터를 전송하는 버튼이다. input을 통해 사용자가 작성한 데이터는 태그를 사용하여 action의 속성에 전달 받을 사이트 주소를 넣어줌으로써 ..
HTML 2023. 8. 31. 17:24
(생활코딩) HTML수업 (1)

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. 생활코딩의 HTML 수업을 들어가기 위해서 HTML에 대한 얕고 넓은 지식에 대한 정보를 담은 생활코딩 WEB1의 강의를 모두 듣는 것을 추천한다고 해서 수강한 후, 본격적으로 'HTML 수업' 이라는 강의 수강을 시작하였다 수강을 시작하고 초반 몇 개의 강의들은 WEB1의 강의 내용과 비슷해서 몇 개는 따로 메모하지 않고 보고만 지나갔다. 이전 강의에서 조금 배우고 시작하니 이해가 더욱 순조로웠고, 복습하는 느낌이 들었다. 블로그에는 비슷한 내용이 겹치는 것은 제외하고 이 밖에 새롭게 알게 된 내용만 정리해서 적어보려고 한다. 1. 메모장을 이용해서 웹페이지에 넣고 싶은 문장을 적은 후에 'a.html' 이라고 저장하는 실습을 진행하였다. ..
HTML 2023. 8. 25. 16:20
(생활코딩) WEB1. HTML과 Internet(2)

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. [HTML 통계에 기반한 학습] 강의 내용에서 모든 웹사이트들이 평균적으로 무슨 태그를 얼마나 사용하는 지에 대한 통계를 내 사이트를 보여주었다. 결과적으로 웹사이트들 대부분은 25~26개의 태그를 가지고 만들어진다고 한다. 이 사실을 알고 굉장히 신기했다. 생각해보면 애플리케이션을 만드는 프로젝트를 했을 때도 많은 속성 값을 이용하지 않았던 것 같다. front-end에서 중요한 것은 모든 태그들을 다 외우는 것이 아니라 '이 태그들을 가지고 어떻게 효율적으로 웹페이지를 만들 수 있을까' 에 대해서 극단적으로 생각하는 것이라고 생각이 들었다. [HTML의 기본 문법] 1. 의 경우 다음 줄로 넘어가는 태그이다. 이 태그의 경우 시각적인 의미..
HTML 2023. 8. 24. 11:16
(생활코딩) WEB1. HTML과 Internet(1)

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. [HTML에 들어가기에 앞서] HTML의 문법에 대한 본격적인 내용에 앞서 HTML의 정의와 장점에 대해서 간단하게 설명하였다. HTML(Hyper Text Markup Language) : 문서와 문서가 링크로 이루어져 있으며(Hyper Text), 태그로 이루어진(Markup) 언어(Language) HTML의 장점 1. 쉬움 2. 중요함 [HTML 수업을 시작하기 위한 준비물] 1. 웹 브라우저 (Web Browser) 2. 코드 편집기 - VS Code를 사용할 예정이다. 3. 이번 수업의 목표 : 내가 가고 싶은 여행지(동남아, 일본 등)를 공유하는 웹 사이트를 만들고 싶다. 이번 수업을 들으면서 정해진 루트를 그대로 따라하기보다는 ..
HTML 2023. 8. 22. 17:18
이전 Prev 1 Next 다음