Share
Sign In

하정 Heather Lee | 성장중독자

Personal Development Nerd
Everything I learn, think and growEverything I learn, think and grow
#생산성 #HCI #UX
비전공자의 걸음마 코딩 공부
[HTML] 처음 시작하는 HTML - Day 1
첫 HTML 이번에 멋쟁이사자처럼 연대 지부에서 프론트엔드 트랙으로 활동하면서, 처음으로 HTML을 다루어 보았다. 나처럼 이제 막 개발을 시작해 보는 사람이 있을까 하여 내 경험을 남긴다. 우선 이번 과제의 목표는 예시 웹사이트를 직접 html로 만들어 보는 것이었는데, 제공된 강의가 있었지만 나는 강의를 듣지 않고 책과 웹사이트를 활용하여 스스로 작업 해 보았다. 첫 개발 시 참고한 자료 가장 많이 참고한 자료는 아래 웹사이트로, HTML에 대한 모든 내용이 담겨 있다고 해도 과언이 아니다 참고한 책은 HTML&CSS 마스터북 이라는 책으로, 앞부분의 HTML 기초 부분만 참고했다. 추천 받은 책은 Do it! 시리즈의 HTML+CSS+자바스크립트 책이었다. 나는 이 책을 참고하지는 않았다. HTML이란? HTML은 웹페이지에 들어갈 내용과 구조를 정의하는 역할을 하는 가장 기본적인 언어이다. 웹페이지는 텍스트, 이미지, 비디오 등 다양한 콘텐츠로 구성되고 HTML은 이런 콘텐츠들의 의미와 구조를 브라우저에게 알려주는 역할을 한다. HTML은 태그를 사용하여 콘텐츠를 표시합니다. 태그 사이에 내용을 넣어 해당 내용의 구조와 의미, 파일명 등을 설정할 수 있다. HTML만으로는 웹페이지의 스타일(색상, 폰트 등)을 지정할 수 없기 때문에 CSS와 함께 사용되며, 동적인 기능을 추가하기 위해서는 JavaScript도 사용된다. 태그(Tag)와 속성 HTML에서 태그는 콘텐츠의 의미와 성격을 나타내는 기호로, <tag> 컨텐츠 </tag> 형식으로 활용한다. 경우에 따라 시작과 끝을 구분할 필요가 없어 한 개만 사용하는 태그도 존재하고 이를 '단일 태그'라고 칭한다. 속성은 태그 내에 작성하며 컨텐츠의 부가적인 기능을 정의할 수 있는데, 필수는 아니다. 태그명과 속성 정의는 공백(space)으로 구분하며, “” (큰따옴표)를 사용하여 나타낸다. 위의 코드는 img라는 단일 태그를 활용하였고, 태그 내에 src, alt, width, height라는 속성을 활용하였다. HTML의 기본 구조 HTML은 head와 body의 기본적인 구조를 갖고 있다. Head 웹사이트에 표시되지는 않지만 웹에 대한 정보를 담고 있음. 페이지의 <title>, CSS 링크(HTML 콘텐츠에 CSS 스타일을 입히려는 경우), 사용자 지정 파비콘 링크, 그리고 다른 메타데이터(예: 저자, 문서를 설명하는 중요한 키워드 등)가 포함됨. Body 웹사이트에 표시되는(보이는) 내용을 다룸. 하나의 html 문서에는 한 개의 <body>만 존재함. 다음에는 기본적인 태그에 대해서 살펴보도록 하겠다. +) HTML 태그나 문법 관련한 웹사이트 추천: https://html-lang.org/
Heather_Lee
Thought dump
HCI/UX
툴 아카이브
생산성 덕후의 기록
SEO Study
Copyright© All Rights Reserved.