DOM(Domain Object Model) : 부모 자식 관계
'뼈대'를 기준으로 화면을 구성
Tag란?
<tag명 속성1="속성값1" 속성2="속성값2">
구조를 사용할 때 사용하는 태그
1) <div> : 네모 박스를 만들어 뼈대를 구성하는 태그. 줄바꿈이 포함된다
<!DOCTYPE html>
<head> </head>
<body>
<div">
<div style="border: 1px solid black">1</div>
<div>2</div>
<span>3</span>
</div>
</body>
div는 그 영역이 속한 네모 박스를 관리한다.
2) <span> : span은 내용물 만큼만 관리. 줄바꿈이 포함되지 않는다.
3) <table> : 표를 만듦
- <tr> : 행을 표시
- <td> : 열을 표시
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
하나의 행 태그 (tr) 마다 td가 위치해 있음
페이지 구성 태그
1) a 태그
<a href="https://www.naver.com">네이버로 이동</a>2) img 태그
<img src = "dog.jpeg">이미지를 출력하는 태그이다.
상대경로 : 현재 파일의 위치를 기준으로 불러오는 파일의 위치를 정한다. -> 공유에 적합함
절대경로 : root부터 시작해서 파일의 경로 자체를 적어서 불러온다.
3) <input>
type 속성이 무조건 포함됨.
입력할 수 있는 폼이 생성됨
<span>아이디</span><input type="text"><br>
<span>비밀번호</span><input type="text"><br>
<input type = "button" value="로그인">
4) <br>
개행의 역할을 하는 태그
5) <p>
글씨를 쓸수 있게 하는 태그(내용)
순서를 나타내는 태그
1) <li>
2) <ul> (unordered list)
3) <ol> (ordered list)
<li ><span>리스트</span>
<ul>
1
</ul>
<ul>2</ul>
<ul>3</ul>
</li>
SEO(Search Engine Optimization)
뼈대 구성을 확인한 후 검색 엔진이 해당 게시물의 노출 여부를 판단한다.
div -> h -> p 순서로 뼈대를 구성하여 작성할 것
Sementic 헤더 : div로 구분 지을 때 가장 중요한 부분
<header></header>
<main></main>
<nav></nav>
<section></section>
<article></article>
<footer></footer>다음과 같이 구성되어 있어야 SEO에 적합하다.
--> DOM, SEO를 지켜서 파일을 작성하는 방법을 배워보기
<div>
<img src="naver.JPG" />
</div>
<div>
<input type="text" name="id" /><br />
<input type="text" name="password" /><br />
<input type="button" value="로그인" />
</div>
<div>
<span>로그인 상태 유지</span>
<span>IP 보안 OFF</span>
</div>
<div>
<h1>회원가입</h1>
</div>
<div>
<table>
<tr>
<td>이름</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="text" /></td>
<td><input type = "button" value = "확인"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name = "gender" />남자
<input type="radio" name = "gender" />여자
</td>
</tr>
<tr>
<td>생년월일</td>
<td>
<input type="text" name = "year"/>년
<select name = "month">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select>월
<input type = "text" name = "day">일</td>
</tr>
</table>
<div>
<input type = "button" value = "가입">
</div>
DOM 구조(근거 있는 코드 짜기), SEO 신경써서 코드 설계하기
과제
- 목표를 정하기(ex 안드로이드 개발용 컴퓨터, 롤 전용 컴퓨터, 베가스 전용 영상 편집 컴퓨터)
- 7개의 부품 포함시키기(CPU, 메인보드, RAM, 그래픽카드, 보조메모리, 파워서플라이, 케이스)
- 해당 컴퓨터의 견적을 63만원 이내로 맞추기
- 홈페이지에 제시되어 있는 40시간 지키고 오기
'Framework > Front-end' 카테고리의 다른 글
| StageUs 2주차 CSS (0) | 2021.07.17 |
|---|---|
| 크레이지 아케이드 게임용 PC 견적 (0) | 2021.07.17 |
| React Native 4주차 강의 요약 (0) | 2021.01.27 |
| React Native 3주차 강의 요약 (0) | 2021.01.27 |
| React Native 2주차 강의 요약 (0) | 2021.01.27 |
