🔍<a> 태그

책갈피 기능
#으로 시작하며 해당하는 페이지 내에서 원하는 위치로 이동한다.

✍️예시

<a href="#user">[사용자]</a>
<a href="#phonebook">[전화번호]</a>
<h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1>

<i id = "user">홍길동의 내용들 입니다</i>
<br><a href="#top">[TOP]</a>
<h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1>

<i id = "phonebook">홍길동의 연락처 입니다</i>
<br><a href="#top">[TOP]</a>

값으로 id를 부여해서 사용한다.

[사용자]를 클릭하면 아래쪽 사용자 위치로 이동한다.('홍길동의 내용들입니다'로 이동)
[top]을 클릭하면 문서의 상단인 위쪽으로 이동

---

🔍<div> 태그

글씨가 없는 영역까지 모두 포함한 전체 영역을 차지하고 부분 영역을 두고 디자인 요소를 추가하고 싶다면 css를 이용해야한다.

✍️예시

<div style="background-color: #888;">안녕하세요</div>
<div style="background-color: #7878;">만나서 반갑습니다</div>
<div style="background-color: #4321;">그래요~알겠습니다</div>

✍️예시

width로 사이즈 조정하기

<div style="background-color: #888; width:50%;">안녕하세요</div>
<div style="background-color: #7878; width:50%;">만나서 반갑습니다</div>
<div style="background-color: #1991;">그래요~알겠습니다</div>

---

🔍<float> 태그

해당하는 위치에 그대로 띄운다. 아래쪽을 기준으로 자기자신이 어디로 움직일지 위치를 지정한다.

✍️예시

<div style="background-color: #888; width:50%; float:right;">안녕하세요</div>

글씨가 오른쪽으로 이동한 것을 볼 수 있다.

✍️예시

<div style="background-color: #888; width:50%; float:left;">안녕하세요</div>
<div style="background-color: #7878; width:50%;float:left;">만나서 반갑습니다</div>

왼쪽을 기준으로 갈거면 밑에도 써줘야 위의 것을 기준으로 왼쪽으로 갈건지, 오른쪽인지 결정할 수 있다.

✍️예시

<div style="background-color: #888; width:50%; float:right;">안녕하세요</div>
<div style="background-color: #7878; width:50%;float:left;">만나서 반갑습니다</div>
<div style="background-color: #1991;">그래요~알겠습니다</div>

---

📍고정 사이즈 지정하기📍

화면크기가 늘거나 줄어도 사이즈를 고정할 수 있는데 div로 묶어서 기본틀,영역을 만든다.

✍️예시

style을 사용해 전체 사이즈 1180px 안에서 동작하고, margin으로 가운데 정렬을 한다.

<div style="width:1180px;  margin:0 auto">     


<div style="background-color: #888; width:50%; float:right;">안녕하세요</div>
<div style="background-color: #7878; width:50%;float:left;">만나서 반갑습니다</div>
<div style="background-color: #1991;">그래요~알겠습니다</div>

</div>