2주차를 시작하는 마음
이제 2주차가 시작되었다. 강의를 시작하면서 강사님께서 각자의 페이스를 지키는 것이 중요하다고 하셨다. 나도 지난 5개월 간의 부트캠프를 해보면서 나와의 약속을 하루하루 지켜나가는 것도 힘들다는 것을 알기 때문에 본격적으로 오프라인을 시작하기 전에 '나만의 페이스를 지키자'라고 다짐한다. 나의 속도를 잃지 말고 묵묵히 걸어서 꼭 끝까지 프로젝트를 끝내고 꾸준히 CS 지식과 코딩테스트를 스스로 하는 습관을 들이고 싶다.
개발자에게 중요한 것은 프로그래밍 언어랑 기술만이 아니다. 개발자를 모르는 지인을 만나면 보통 개발자는 내향적이지 않냐고 물어보지만, 생각보다 개발자는 문제 해결 능력과 커뮤니케이션, 협업 능력이 중요하다. 의사소통이 안되는 경우에 많은 비용과 시간이 낭비될 수 있기 때문에 어떤 문제가 발생하든 솔직하게 문제점을 분석하고 팀원에게 전달해야한다. 그러므로 이번 팀프로젝트에서도 항상 많이 고민하면서 우리 팀에게 지금 효율적인 것이 무엇일지에 대해 분석하고 즉각적으로 나의 생각을 전달할 것이다. 이것이 내가 팀을 위해서 불편해도 꼭 해야하는 행동임을 항상 잊지말자.
HTML이란?
Hyper Text Markup Language의 약자로, 웹 페이지를 구성하는 데 사용되는 마크업 언어를 의미한다. 웹 문서의 뼈대로 비유되며, 웹 요소를 보여주는 정해진 약속이라고 할 수 있다. 한편 CSS는 뼈대를 꾸며주는 스타일로, JS는 몸의 액션을 넣어주는 행동으로 비유된다.
HTML5의 기본 요소
| 요소 | 의미 | 예시 |
| 태그(tag) | '<'와 '>'로 둘러싸인 문자열 | <title>제목</title> |
| 내용(content) | 태그로 둘러싸인 문자열 | <title>제목</title> |
| 엘리먼트(element) | 태그와 내용을 포함한 전체 문자열 HTML의 기본 구성 단위 |
<title>제목</title> |
| 속성(attribute) | 엘리먼트의 상세한 표현 설정 사항을 지시 시작 태그 '<'안에 사용 |
<title color='black'>제목</title> |
| 속성값(value) | 속성에 부여하는 값 | <title color='black'>제목</title> |
HTML5의 기본 구조
| 항목 | 정의 |
| <!DOCTYPE html> | 웹문서의 유형 지정 본 문서가 HTML5라는 것을 명시 |
| <html> | html 파일임을 정의하고, 웹문서의 시작과 끝에 위치 |
| <head> | 메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹의 정보를 담당. title, meta, link, style, script 태그로 구성 |
| <meta> | 홈페이지의 설명, 대표 이미지, 대표 키워드 등을 입력하는 태그 홈페이지 주소를 어딘가에 공유할 때 나오는 설명 글과 이미지에 해당 - 다양한 종류의 메타데이터를 지정. 주로 문자 인코딩, 뷰포트 설정, 키워드 등을 포함. - SEO를 위해서도 많이 사용 예) <meta charset='UTF-8'> : 문서의 문자 인코딩을 UTF-8로 지정 |
| <title> | 홈페이지 제목을 정의 |
| <body> | 홈페이지에서 실제로 보여지는 공간 본문의 내용을 담는 공간 |
| <script> | 자바스크립트 코드를 문서에 포함하거나 외부 자바스크립트 파일을 연결한다. |
HTML5 - 시맨틱 태그
사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그. 시맨틱 태그로 SEO를 최적화할 수 있다.
태그들의 규칙을 잘 지키면 웹 접근성을 높이고 웹페이지에 일반적인 방법으로 접근할 수 없는 사람(ex. 장애인)들도 원활한 소통이 가능하도록 도울 수 있다. 추후 업데이트 및 코드 수정을 할 때에도 용이하다.
다시 말해서 HTML 태그들을 올바르게 사용해야 하는 이유는 웹 표준을 준수하기 위해서이다.
HTML5 - 기본 태그
display가 inline이냐 block이냐에 따른 차이점은 css를 구성할 때에도 매우 중요하기 때문에 기억해야한다.
| display: block | 해당 태그가 가로 부분의 전체를 차지한다. |
| display: inline |
HTML - id와 class
두 가지 모두 태그 식별자로 사용된다.
id는 단일 요소의 식별에 사용되고, class는 여러 요소의 그룹화 및 스타일링에 사용된다.
첫 번째 실습 - HTML 만들어보기
<!DOCTYPE html>
<html lang="en">
<head>
<title>내 첫 HTML 페이지</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>프론트엔드 개발자 꿈나무, 주디입니다!</p>
<p>고양이를 아주 사랑합니다.</p>
<span>취미: 고양이와 놀기</span>
<p>MBTI는 <span>ENTP</span>이면서 <span>ISFJ</span>입니다.</p>
</body>
</html>- span 태그는 inline 요소로 강조하고자 하는 글자를 표시하기 위하여 사용된다.
- span 태그와 p태그의 차이점: span 태그는 inline 요소이지만, p 태그는 block 요소로 단락을 나눌 때 사용하기 용이하다.
두 번째 실습 - HTML 기본 구현하기
<!DOCTYPE html>
<meta >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
<style>
div {
border: 1px solid black;
}
p {
margin: 10px 0;
font-weight: 600;
}
</style>
</head>
<body>
<p>1. HTML 제목은 <h1> ~ <h6> 태그로 정의됩니다.</h2>
<p><h1>은 가장 중요한 제목을 <h6>은 가장 중요하지 않은 제목을 정의합니다.</p>
<div>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</div>
<p>2. 단락은 <p>태그로 정의됩니다.</p>
<div>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</div>
<p>3. 링크는 <a>태그로 정의됩니다.</p>
<div>
<a href="http://naver.com">This is naver link</a>
</div>
</body>
</html>- 좌측 꺽쇠와 우측 꺽쇠 html에 출력하기
| < | 좌측 꺽쇠 '<' |
| > | 우측 꺽쇠 '>' |
세 번째 실습 - 장바구니 목록 만들기
<h2>장바구니 목록</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
<table>
<thead>
<tr>
<th>과일</th>
<th>수량</th>
</tr>
</thead>
<tbody>
<tr>
<td>딸기</td>
<td>3</td>
</tr>
<tr>
<td>바나나</td>
<td>5</td>
</tr>
<tr>
<td>사과</td>
<td>10</td>
</tr>
</tbody>
</table>- 테이블을 만들기 위해서는 <table> 태그가 필요하다.
- <table> 태그 안의 <thead>와 <tbody>로 테이블 머리와 몸통이 구분된다.
네 번째 실습 - form 만들기
<form>
<label for="forName">이름:</label>
<input type="text" id="forName" /> <br />
<label for="forName">이메일:</label>
<input type="email" id="forName" required /> <br />
<label for="forName">비밀번호:</label>
<input type="password" id="forName" required /> <br />
<button type="submit">가입하기</button>
</form>- input은 label 태그를 사용하여 id로 연결이 가능하다.
- required와 같은 태그 내 유효성 검사 기능으로 직접 유효성 검사가 가능하다.
- type에는 password, text, email 등 다양한 타입이 존재하며, 이 타입에 따라서 입력되는 값이 다르게 출력된다.
다섯 번째 실습 - CSS
<h2 style="background-color: blue">Hello World</h2>
<p style="background-color: red">Lorem ipsum...</p>
<h2 style="color: red">Hello World</h2>
<p style="color: blue">Lorem ipsum...</p>
<p style="color: green">Lorem ipsum...</p>
<h1 style="border: 2px solid tomato">Hello World</h1>
<h1 style="border: 2px solid dodgerblue">Hello World</h1>
<h1 style="border: 2px solid violet">Hello World</h1>
<h1 style="background-color: rgba(255, 99, 71, 0.8)">Hello</h1>
<h1 style="background-color: hsla(9, 100%, 64%, 0.8)">Hello</h1>- style은 태그 내에 직접 입력할 수도 있고, head 안에 style 태그를 사용하여 적용시킬 수 있다.
- 색깔은 rgba로 투명도로 적용할 수 있다.
- hsla는 hsla(색조, 채도, 명도, 투명도)로 색상을 표현하는 방식이다.
여섯 번째 실습 - 시맨틱 태그를 사용하여 페이지 완성하기
- 웹사이트의 기본 구조를 시맨틱 태그로 구조화한 실습.
일곱 번째 실습 - 자기소개 페이지 만들기
조건
- 시맨틱 태그 사용하기
- 우리가 배운 HTML 태그 10개 이상 사용하기(dl, dt, dd 태그 포함)
- 나에 대해여 최소 10개 이상 작성하기 ex. MBTI, 취미, 특기, 이상형, 취업하고자 하는 회사 등
여덟 번째 실습 - 웅진씽크빅과 웅진 IT 홈페이지 html 분석하기
시맨틱 태그를 사용해야 하는 이유
- 가독성이 더 좋아서 태그 분석에 용이하다.
- 재사용성과 유지보수가 비교적 더 편하다.
- 다른 개발자들의 소스코드 분석을 효율적으로 도울 수 있다.
- 검색엔진 최적화에 더 유리하다. (예: 구글에 '웅진'을 검색할 시에 시맨틱 태그를 사용한 웅진IT가 상단에 노출된다.)
아홉 번째 실습 - form을 이용하여 검색결과 보내기
<!DOCTYPE html>
<html lang="en">
<head>
<title>여기어때 검색하기</title>
</head>
<body>
<h1>현재 가고 싶은 여행지는?</h1>
<form
method="get"
action="https://www.goodchoice.kr/product/result"
target="_self"
>
<input placeholder="장소 입력" name="keyword" id="keyword" type="text" />
<button type="submit">검색하기</button>
</form>
</body>
</html>- form의 method에는 여러 기능이 있다. get은 그 중에서 input에서 전달 받은 값을 보내는 method 방식이다. 이것은 button 타입이 submit이기 때문에 전달이 가능한 것이다.
출처 및 참고자료:
1. HTML / form / 데이터를 전달하는 양식 만들기, https://www.codingfactory.net/11576
HTML / form / 데이터를 전달하는 양식 만들기
form은 데이터를 입력 받고 전송할 때 사용하는 태그이다. 문법 <form method='xxx' action='yyy'> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력한다. action : 값을 전달할 페이지를 입력한다.
www.codingfactory.net
2. [유데미x스나이퍼팩토리] 프론트엔드 강의 교안 (1일차).pdf
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'외부활동 > 유데미X스나이퍼팩토리' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 10일차 - react 기본 개념 css 활용 (0) | 2023.06.14 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱(html만) (0) | 2023.06.13 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 아이디어 스케치 과정 과제 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 6일차 - 1주차 회고 (0) | 2023.06.10 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - Git&GitHub 강의, 아이디어 스케치 강의 후기 (2) | 2023.06.09 |
