프론트앤드 개발자가 되기 위에 가장 기본스탭인 HTML과 CSS의 핵심 개념, 구문, 구조에 대해 이해하기, 웹에 대해 이해를 목적으로
새로운 한주를 시작했다. 개발자가 지녀야 할 역량으로 프로그래밍 언어, 문제해결 능력, 커뮤니케이션 및 협업 등 다양한 게 있다. 현재 이 강의를 통해서
프로그래밍언어와 문제해결능력, 협업 등을 키워야 겠다.
HTML, CSS, JS
- HTML : 웹 문서 뼈대를 보여주는 정해진 약속
- CSS : 뼈대를 꾸며주는 것
- JS : 사용자의 액션이다.
이 3가지 작동 순서는
- 사용자 웹페이지 방문으로 시작
- Web Brower 시작
- 웹 문서 읽기
- DOM 생성
- HTML을 객체 형태로 변환
- Javascript로 접근 가능
- 페이지 로딩완료
- CSS 적용화면 최종 표시
HTML이란?
Hyper Text Markup Language, 웹 페이지를 만드는 데 사용되는 마크업 언어이며 텍스트, 이미지, 비디오 등과 같은 콘텐츠로 구성하고 구조화할 수 있으며 이를 통해 웹 페이지를 디자인하고 브라우저에 표시할 수 있다. 웹 개발의 기초 중 하나이며 css, js와 함께 사용된다.
HTML5 기본 요소
HTML5 기본 구조
HTML5 시맨틱 태그
HTML 기본 요소
| 요소 | 의미 | 예시 |
| tag(태그) | '<' '>'로 둘러쌓인 문자열 | <title>HTML</title> |
| content(내용) | 태그로 둘러싸인 문자열 | <title>HTML</title> |
| element(엘리먼트) | 태그와 내용을 포함한 전체 문자열, html 문서의 기본구성 단위 | <title>HTML</title> |
| attribute(속성) | 엘리먼트의 상세한 표현 설정 사항을 지시. 시작태그 안에 사용 | <title color="black">HTML</title> |
| value(속성값) | 속성에 명령(값)을 준다 | <title color="black">HTML</title> |
HTML 기본 구조
<!DOCTYPE html> <!-- 웹문서의 유형 지정 -->
<html lang="en"> <!-- HTML파일임을 정의, 웹 문서의 시작과 끝에 위치 -->
<head>
<!--
head : 메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹의 정보 담당
title, meta, link, style, script 태그로 구성
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
meta : 홈페이지의 설명, 대표이미지, 대표 키워드 등을 입력하는 태그,
홈페이지 주소를 어딘가에 공우할때 나오는 설명글과 이미지에 해당
-->
<title>Document</title> <!-- 홈페이지 제목 -->
</head>
<body> <!-- 홈페이지에서 실제로 보여지는 공간, 본문의 내용을 담는 공간 -->
</body>
</html>
HTML5 Semantic tag(시맨틱 태그)
사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그, 시맨틱 태그가 나오기 전 <div> 태그로 하나하나 위치와 범위를 정하고 class로 태그 이름을 줘서 구분했다.
시맨틱 태그 종류
| 항목 | 정의 |
| header | 페이지의 머리글, 제목, 로고, 메뉴, 검색관련, 유틸, 작성자이 이름 등등으로 구성 |
| nav | 페이지의 내비게이션 영역. (사이트 내, 외부로 이동) 메뉴, 목차, 색인 등등 |
| main | 메인 컨텐츠 영역. 문서 내에서 반드시 한 번만 사용 ( 다른 header, footer, nav, article, section aside의 하위로 작성할 수 없다.) |
| section | 본문의 여러 내용(article)을 포함하는 부분을 의미 |
| article | 본문의 주 내용이 들어가는 부분을 의미 |
| aside | 간접 콘텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미 |
| footer | 하단 바닥글을 의미, 주로 들어가는 정보는 회사정보, 저작권, 연락처 등 |
왜 시맨틱 태그를 용도에 맞게 사용해야 하는가?
태그들의 규칙을 잘 지킨다면 웹 접근성을 높이고 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능하도록 도울 수 있다. 또한 추후 업데이트 및 수정할 때 코드 수정이 쉬워진다.
- 웹 페이지의 구조와 의미를 명확
- 가독성이 향상
- 가독성이 높은 코드는 유지보수가 용이하며, 코드 수정이나 업데이트 작업 시에도 문제발생확률 낮음
- 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능할 수 있게 된다.
- 크로스 브라우징 이슈(각 브라우저에서 웹 페이지가 다르게 보이는 문제)를 최소화
HTML5 기본 태그 및 실습 코드
html 태그는 태그마다 고유한 속성이 있는데 그중 크게 인라인,블럭 이렇게 나눌 수 있다고 생각한다. Display 속성으로 block은 해당 태그가 특정 부분의 가로를 전체 차지함을 뜻하며, inline은 자기 자신의 크기만큼만 차지한다.
제목 <h1> ~ <h6>
<h1> ~ <h6>까지 있고, 숫자가 높아질수록 폰트 크기가 작아지며 본문 내용에서 최상위 제목은 로고이며 <h1>은 로고에 사용한다.
리스트 <ul>, <ol>
리스트를 나타내는 태그에는 <ul>, <ol>로 구성되어있다.
<h1>장바구니 목록</h1>
<!--
순서가 없는 list, 순서가 없기에 기본스타일로 처리
-->
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul><h1>장바구니 목록</h1>
<!--
순서가 있는 list. type=""으로 지정가능하며, default 값은 숫자
-->
<ol>
<li>1단계</li>
<li>2단계</li>
<li>3단계</li>
</ol>
테이블 <table>
<table>
<thead>
<th>과일</th>
<th>수량</th>
</thead>
<tr>
<td>사과</td>
<td>10</td>
</tr>
<tr>
<td>바나나</td>
<td>5</td>
</tr>
<tr>
<td>딸기</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">딸기</td>
</tr>
</table>
링크 <a>
Anchor - 웹 체이지나 외부 사이트 연결
<a href="http://udemy.com" target="_blank">Visit Udemy</a>
<!-- target: _blank = 새로운창 / _self = 현재 창 -->
<a href="tel:010-0000-0000" >전화걸기</a>
<a href="mailto:link@gmail.com?Subject=Hello again">메일보내기</a>
<a href="원하는_주소" download>download 속성예제</a>
<a id="#특정위치">id값을 지정함으로써 id값을 지닌 구역으로 이동</a>
<!-- title="툴팁" 마우스를 올렸을 때 나오는 설명 -->
폼 <form>
<form> 태그는 사용자로부터 입력을 받을 수 있는 html 입력 폼(form)을 정의할 때 사용
<button>
<fieldset>
<input>
<label>
<option>
<optgroup>
<select>
<textarea>
<form>
<label for="name">이름 : </label>
<input type="text" id="name" name="name" required><br/><br/>
<label for="email">이메일 : </label>
<input type="email" id="email" name="email" required><br/><br/>
<label for="password">비밀번호 : </label>
<input type="password" id="password" name="password" required><br/><br/>
<input type="submit" value="가입하기">
</form>식별자(identifier) id, class
id는 하나의 요소에 대한 고유한 식별자를 지정
class는 하나 이상의 요소에 대해 같은 식별자를 지정
느낀 점
가장 기본적인 html 구조를 짜면서 웹페이지 만드는데 엄청난 에너지를 쏟았던 옛 기억이 났다. 시맨틱 태그 말고 그냥 div태그로 마음대로 짰었는데 아무래도 유지보수나 공유하는 과정 그리고 웹페이지를 불러오는 과정은 다 약속되어 있는 것이니 명확하게 하기 위해서는 약속된 태그로 잘 짜야겠다고 생각했다.
* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'10주완성 프로젝트 캠프' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 리액트 (0) | 2023.06.22 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - CSS (0) | 2023.06.20 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획3 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 2일차 - 서비스기획2 (0) | 2023.06.08 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 1일차 - 오리엔테이션 및 플랫폼이란? (2) | 2023.06.06 |
프론트앤드 개발자가 되기 위에 가장 기본스탭인 HTML과 CSS의 핵심 개념, 구문, 구조에 대해 이해하기, 웹에 대해 이해를 목적으로
새로운 한주를 시작했다. 개발자가 지녀야 할 역량으로 프로그래밍 언어, 문제해결 능력, 커뮤니케이션 및 협업 등 다양한 게 있다. 현재 이 강의를 통해서
프로그래밍언어와 문제해결능력, 협업 등을 키워야 겠다.
HTML, CSS, JS
- HTML : 웹 문서 뼈대를 보여주는 정해진 약속
- CSS : 뼈대를 꾸며주는 것
- JS : 사용자의 액션이다.
이 3가지 작동 순서는
- 사용자 웹페이지 방문으로 시작
- Web Brower 시작
- 웹 문서 읽기
- DOM 생성
- HTML을 객체 형태로 변환
- Javascript로 접근 가능
- 페이지 로딩완료
- CSS 적용화면 최종 표시
HTML이란?
Hyper Text Markup Language, 웹 페이지를 만드는 데 사용되는 마크업 언어이며 텍스트, 이미지, 비디오 등과 같은 콘텐츠로 구성하고 구조화할 수 있으며 이를 통해 웹 페이지를 디자인하고 브라우저에 표시할 수 있다. 웹 개발의 기초 중 하나이며 css, js와 함께 사용된다.
HTML5 기본 요소
HTML5 기본 구조
HTML5 시맨틱 태그
HTML 기본 요소
| 요소 | 의미 | 예시 |
| tag(태그) | '<' '>'로 둘러쌓인 문자열 | <title>HTML</title> |
| content(내용) | 태그로 둘러싸인 문자열 | <title>HTML</title> |
| element(엘리먼트) | 태그와 내용을 포함한 전체 문자열, html 문서의 기본구성 단위 | <title>HTML</title> |
| attribute(속성) | 엘리먼트의 상세한 표현 설정 사항을 지시. 시작태그 안에 사용 | <title color="black">HTML</title> |
| value(속성값) | 속성에 명령(값)을 준다 | <title color="black">HTML</title> |
HTML 기본 구조
<!DOCTYPE html> <!-- 웹문서의 유형 지정 -->
<html lang="en"> <!-- HTML파일임을 정의, 웹 문서의 시작과 끝에 위치 -->
<head>
<!--
head : 메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹의 정보 담당
title, meta, link, style, script 태그로 구성
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
meta : 홈페이지의 설명, 대표이미지, 대표 키워드 등을 입력하는 태그,
홈페이지 주소를 어딘가에 공우할때 나오는 설명글과 이미지에 해당
-->
<title>Document</title> <!-- 홈페이지 제목 -->
</head>
<body> <!-- 홈페이지에서 실제로 보여지는 공간, 본문의 내용을 담는 공간 -->
</body>
</html>
HTML5 Semantic tag(시맨틱 태그)
사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그, 시맨틱 태그가 나오기 전 <div> 태그로 하나하나 위치와 범위를 정하고 class로 태그 이름을 줘서 구분했다.
시맨틱 태그 종류
| 항목 | 정의 |
| header | 페이지의 머리글, 제목, 로고, 메뉴, 검색관련, 유틸, 작성자이 이름 등등으로 구성 |
| nav | 페이지의 내비게이션 영역. (사이트 내, 외부로 이동) 메뉴, 목차, 색인 등등 |
| main | 메인 컨텐츠 영역. 문서 내에서 반드시 한 번만 사용 ( 다른 header, footer, nav, article, section aside의 하위로 작성할 수 없다.) |
| section | 본문의 여러 내용(article)을 포함하는 부분을 의미 |
| article | 본문의 주 내용이 들어가는 부분을 의미 |
| aside | 간접 콘텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미 |
| footer | 하단 바닥글을 의미, 주로 들어가는 정보는 회사정보, 저작권, 연락처 등 |
왜 시맨틱 태그를 용도에 맞게 사용해야 하는가?
태그들의 규칙을 잘 지킨다면 웹 접근성을 높이고 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능하도록 도울 수 있다. 또한 추후 업데이트 및 수정할 때 코드 수정이 쉬워진다.
- 웹 페이지의 구조와 의미를 명확
- 가독성이 향상
- 가독성이 높은 코드는 유지보수가 용이하며, 코드 수정이나 업데이트 작업 시에도 문제발생확률 낮음
- 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능할 수 있게 된다.
- 크로스 브라우징 이슈(각 브라우저에서 웹 페이지가 다르게 보이는 문제)를 최소화
HTML5 기본 태그 및 실습 코드
html 태그는 태그마다 고유한 속성이 있는데 그중 크게 인라인,블럭 이렇게 나눌 수 있다고 생각한다. Display 속성으로 block은 해당 태그가 특정 부분의 가로를 전체 차지함을 뜻하며, inline은 자기 자신의 크기만큼만 차지한다.
제목 <h1> ~ <h6>
<h1> ~ <h6>까지 있고, 숫자가 높아질수록 폰트 크기가 작아지며 본문 내용에서 최상위 제목은 로고이며 <h1>은 로고에 사용한다.
리스트 <ul>, <ol>
리스트를 나타내는 태그에는 <ul>, <ol>로 구성되어있다.
<h1>장바구니 목록</h1>
<!--
순서가 없는 list, 순서가 없기에 기본스타일로 처리
-->
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul><h1>장바구니 목록</h1>
<!--
순서가 있는 list. type=""으로 지정가능하며, default 값은 숫자
-->
<ol>
<li>1단계</li>
<li>2단계</li>
<li>3단계</li>
</ol>
테이블 <table>
<table>
<thead>
<th>과일</th>
<th>수량</th>
</thead>
<tr>
<td>사과</td>
<td>10</td>
</tr>
<tr>
<td>바나나</td>
<td>5</td>
</tr>
<tr>
<td>딸기</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">딸기</td>
</tr>
</table>
링크 <a>
Anchor - 웹 체이지나 외부 사이트 연결
<a href="http://udemy.com" target="_blank">Visit Udemy</a>
<!-- target: _blank = 새로운창 / _self = 현재 창 -->
<a href="tel:010-0000-0000" >전화걸기</a>
<a href="mailto:link@gmail.com?Subject=Hello again">메일보내기</a>
<a href="원하는_주소" download>download 속성예제</a>
<a id="#특정위치">id값을 지정함으로써 id값을 지닌 구역으로 이동</a>
<!-- title="툴팁" 마우스를 올렸을 때 나오는 설명 -->
폼 <form>
<form> 태그는 사용자로부터 입력을 받을 수 있는 html 입력 폼(form)을 정의할 때 사용
<button>
<fieldset>
<input>
<label>
<option>
<optgroup>
<select>
<textarea>
<form>
<label for="name">이름 : </label>
<input type="text" id="name" name="name" required><br/><br/>
<label for="email">이메일 : </label>
<input type="email" id="email" name="email" required><br/><br/>
<label for="password">비밀번호 : </label>
<input type="password" id="password" name="password" required><br/><br/>
<input type="submit" value="가입하기">
</form>식별자(identifier) id, class
id는 하나의 요소에 대한 고유한 식별자를 지정
class는 하나 이상의 요소에 대해 같은 식별자를 지정
느낀 점
가장 기본적인 html 구조를 짜면서 웹페이지 만드는데 엄청난 에너지를 쏟았던 옛 기억이 났다. 시맨틱 태그 말고 그냥 div태그로 마음대로 짰었는데 아무래도 유지보수나 공유하는 과정 그리고 웹페이지를 불러오는 과정은 다 약속되어 있는 것이니 명확하게 하기 위해서는 약속된 태그로 잘 짜야겠다고 생각했다.
* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'10주완성 프로젝트 캠프' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 리액트 (0) | 2023.06.22 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - CSS (0) | 2023.06.20 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획3 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 2일차 - 서비스기획2 (0) | 2023.06.08 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 1일차 - 오리엔테이션 및 플랫폼이란? (2) | 2023.06.06 |
