[디자이너 부트캠프]47일차 디자이너를 위한 HTML(1. 기본문법과 주요태그)
[디자이너 부트캠프]47일차 디자이너를 위한 HTML(1. 기본문법과 주요태그)
디자인은 인간의 문제를 해결하는 학문이다.
- 리차드 부캐넌
강의 노트
1) HTML이란?
1. HTML
- Hyper Text Markup Language
- HTML은 웹 페이지를 만들 때 사용하는 마크업 언어, 태그를 사용하여 문서나 데이터의 구조를 명시한다.
- 텍스트, 이미지 등을 특정한 방식으로 표시
- 요소 : 시작 태그(opening tag), 글자, 내용, 종료 태그(closing tag)
- 각 요소들은 시작 태그 안에 위치하며 스타일, id부터 class까지 다룬다.
2. HTML을 사용한 웹페이지 구축
- HTML은 웹페이지를 보기 좋게 꾸미거나 상호작용이 가능하게 만들기 어려움
- CSS와 자바스크립트라는 보조 기술을 사용하여 웹페이지를 더 예쁘게 만들 수 있다.
3. HTML의 역할
- 웹사이트에서 여러 요소들이 어떤 순서, 어떤 관계로 존재해야 하는지 정리
ex)
- 텍스트 == <p>
- 제목 == <h1>~<h6>
- 이미지 == <img>
- 링크 == <a>
4. 디자이너는 왜 HTML을 알아야 하는가?
| ✅ 구조 설계 능력 향상 | 뼈대 중심의 UI 설계 가능 |
| ✅ 협업 효율 증가 | 개발자와 빠르고 정확한 커뮤니케이션 |
| ✅ 실무 경쟁력 상승 | 디자이너로서 더 넓은 영역 이해 가능 |
2) HTML 기본문법과 주요태그
1. html 문서의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<!-- 여기에 화면에 보이는 내용이 들어감 -->
</body>
</html>
<!DOCTYPE html>
: “이 문서는 HTML5 문서다”라고 브라우저에게 알려주는 선언, 웹사이트의 가장 첫 줄을 차지.
<html lang="ko">
: HTML의 시작과 끝을 나타내는 태그 "ko"는 이 문서가 한국어 페이지라는 걸 의미
<head>
: 눈에 보이지 않는 정보들(문서 제목, 인코딩, 외부 CSS 등)을 설정하는 공간
<body>
: 실제로 화면에 보이는 모든 내용. 텍스트, 이미지, 버튼, 링크 등 웹페이지에 표시되는 콘텐츠는 전부 여기서 작성
2. 주요 태그 소개
: 태그들은 모두 “< >” 꺽쇠 괄호로 감싸서 사용하며, 대부분은 여는 태그와 닫는 태그가 세트
🏷️ <h1> ~ <h6> == 제목(Head)
- <h1>이 가장 큰 제목, <h6>이 가장 작은 제목
- 웹페이지에서 제목이나 섹션 타이틀을 표현할 때 사용
- 웹접근성과 SEO(검색 최적화)에서 중요하게 여겨지는 태그
<h1>오늘의 뉴스</h1>
<h2>정치</h2>
<h3>대통령 인터뷰</h3>
🏷️ <p> == 문단(Paragraph)
- 일반적인 텍스트 문장을 담는다
<p>이곳은 디자이너를 위한 HTML 수업입니다.</p>
🏷️ <a> == 링크(anchor)
- 다른 페이지로 이동하거나 외부 사이트로 연결할 때 사용
- href 속성은 링크의 주소를 넣는 곳
- target="_blank"를 추가하면 새 창으로 열린다
<a href="https://naver.com">네이버로 가기</a>
🏷️ <img> == 이미지 삽입
- 이미지를 보여줄 때 사용
- src는 이미지 경로, alt는 대체 텍스트(이미지가 안 뜰 때 표시됨)
<img src="cat.jpg" alt="귀여운 고양이">
🏷️ <ul> / <li> == 리스트 만들기
- 여러 개의 항목을 나열할 때 사용
- <ul>: 순서없는 리스트(점으로 표시)
- <ol>: 순서있는 리스트(번호로 표시)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
🏷️ <div> == 구역 나누기
- 시각적인 구역을 나누거나, CSS로 스타일을 적용할 때 사용
- 기본적으로 아무 의미도 없고, 레이아웃을 나누는 용도로 많이 사용
<div>
<h2>나의 소개</h2>
<p>저는 UX 디자이너입니다.</p>
</div>
3. 속성(attribute)
- 태그에 추가 정보를 줄 때 사용
- 속성명="값" 형식
<a href="https://google.com" target="_blank">구글로 이동</a>
<img src="profile.jpg" alt="내 사진">
| 속성 | 설명 |
| href | 링크 주소 |
| src | 이미지 파일 경로 |
| alt | 이미지가 안 보일 때 대체 텍스트 |
| target="_blank" | 새 창으로 열기 |
| class | CSS에서 그룹 스타일링할 때 사용 |
| id | 특정 요소 하나에 고유한 이름 부여 |
여러가지 코드를 참고할 수 있는 페이지 공유하면서 강의노트는 여기까지 하겠다!!
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
오늘의 과제
HTML을 활용한 간단한 웹구조 디자인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let me introduce my self:)</title>
<h1>Hello, my name is GIMMA</h1>
<p>I'm UX/UI Designer and i persue clear, intuitive design. I'm steel learning, growing.</p>
<img src="색 베리에이션.jpg" alt="내 사진" width="500" srcset="">
<h2>Interests</h2>
<ul>
<li>wep/app Designe</li>
<li>Writing</li>
<li>Learnign sth New</li>
</ul>
<p><a href="https://blog.naver.com/na_mohaji_"target="_blank">Visit GIMMA's BLOG</a></p>
</head>
<body>
</body>
</html>
재밌다.... 진짜 재밌다....
왜 재밌지....