[항해일지] D+1, 웹개발종합 1주차

23.06.01 - D+1, 웹개발종합 1주차 기록

기록양식
1. 배운내용
2. 핵심내용
3. 스스로 시도해본 것들(응용&검색)
4. 해결
5. 알게 된 점
6. 헷갈리거나 실수한 점

1. TAGS.HTML

기본적인 명령어 공부

2. 강의 내용 : div / p / u1 & li / h1~h6 / span / hr / a / a href /
   

   3. 강의 외 : span 추가 명령어 / a 와 id 를 활용한 북마크 생성 기능 / ul > ol의 차이

3-1. 글자색 외에 변경할 수 있는 요소는 무엇이 있을까?
⌨입력

1.글자색 변환
<span style="color:red;">글자</span>
2.밑줄치기
<span style="text-decoration:underline;">글자</span>
3.폰트크기 변환
<span style="font-size:20px;">글자</span>

📟출력
1.글자
2.글자
3.글자

5. 표현하고자 하는 명령어를 구글링해서 적용한다.

   ---

3-2. <a>의 기능을 사용해서 목차의 글씨를 누르면 밑으로 이동이 가능한가?
⌨입력

<h2>목차</h2>
<u1>
    <li><a href="#section1">첫 번째 섹션</a></li>
    <li><a href="#section2">두 번째 섹션</a></li>
    <li><a href="#section3">세 번째 섹션</a></li>
</u1>    
    
<h2 id="section1">첫 번째 섹션</h2>
<p>첫 번째 섹션의 내용입니다.</p>

<h2 id="section2">두 번째 섹션</h2>
<p>두 번째 섹션의 내용입니다.</p>

<h2 id="section3">세 번째 섹션</h2>
<p>세 번째 섹션의 내용입니다.</p>
   

📟출력

목차

첫 번째 섹션

두 번째 섹션

세 번째 섹션

첫 번째 섹션

첫 번째 섹션의 내용입니다.

두 번째 섹션

두 번째 섹션의 내용입니다.

세 번째 섹션

세 번째 섹션의 내용입니다.

5. 목차를 누르면 해당 'h2' 태그로 이동. <#아이디> = <id=아이디>

---

3-3. u1 과 비슷한 다른 명령어는 ol
⌨입력

 <ol>목차
      <li>첫 번째 섹션</li>
      <li>두 번재 섹션</li>
 </ol>
   

📟출력

목차
1. 첫 번째 섹션
2. 두 번재 섹션

5. ol은 목차 앞에 숫자가 붙는다.

---