💡 학습한 내용
오늘은 배웠던 태그로 실습활동을 하였다.
✔️ 생소한 부분 정리 및 태그 정리
*<ul>은 동일한 형태(동급)를 나열할 때 사용
*<ul> 안에는 <li>
*<div>는 임의 공간
*비슷한 성격을 가진 애들끼리 묶어서 <div>처리를 한다.
*실무팁 +https://placeholder.com/를 사용함으로서 원하는 사진의 사이즈를 미리 기입할 수 있다.<footer>를 사용함으로써 채팅방의 하단을 설계
<nav> nav 태그는 네비게이션을 표현할 때 사용하는 태그로 시맨틱 태그 종류 중 하나이다.
시맨틱 태그 : 콘텐츠의 표시가 변경되는 것이 아닌 의미를 부여하는 태그
참고링크 : https://jeongchul.tistory.com/462
시맨틱 태그는 해당 영역의 의미.
이런 요소를 사용하게 되면 구글의 검색봇 등이
해당 영역의 의미를 더 이해하게 되고 이런 점은 사이트의 SEO를 올리고 검색 결과시에 더 잘 노출시키게 된다.<div>안에 <div>사용 가능
*코딩설계를 할 때 큰쪽으로 먼저 설계를 하고 조금씩 영역을 나눠서 만든다.
*실력을 늘리기 위해서는 각 종 사이트에 들어가 '검사'를 클릭한 다음 눈에 익히는 것이 중요하다.
*도면설계 노하우 :왼쪽 - 오른쪽 순서
* 주석 단축기 : ctrl + /
[배운 태그 정리]
> <input>은 타입의 어떤 속성값을 작성하느냐에 따라 형태가 다라진다.
> <checkbox/ radio> 사용시의 주의
> <textarea>를 사용시 장문의 정보를 서버에 전달 할 수 있다.
> 선택옵션 사용 시 <select> , <option>
> 화면에 테이블 정보 입력시 <table>
상단의 항목 : <thead> <tr>
주요정보 : <tbody>
하단 : <tfoot>
> 공간을 만들 때 사용되는 태그 : <header> <nav> <main **role**(explorer 에서 지원되지 않으므로 role과 같이 입력)>
> 각각의 섹션구역을 설정시 : <section> / 섹션의 타이틀 정보가 있어야 함으로 <h> 삽입필수
> 신문정보를 담아내는 구역 <article> /그 구역을 대표 하는 타이틀 정보 필수 <h>
> 본문과 관계성이 떨어지는 정보 입력 시 <aside>
> 최하단 정보를 기입시 <footer>
> 임의의 구역 <div>
>** inline/ block **
Inline : 줄바꿈형성 x , 공간형성 x, 상하배치작업 x
Block : 줄바꿈형성 o, 공간형성 o, 상하배치작업 o❌ 학습한 내용 중 어려웠던 점
태그가 어느 상황에 사용되는 지에 대해서는 이해가 되었다. 하지만 실습을 통해 기입을 할 때 아직 타이핑의 속도가 너무 느리다. 아직 태그를 기입하는 것이 익숙하지 않아서 그런 것 같다.
강사님의 것을 보지 않고 스스로 입력하는 부분에서는 많이 부족한 것 같다.
⭕️ 해결방법
이러한 부분에서는 반복학습이 제일 중요한 것같다.
강의를 다 듣고 난 후에 반복학습을 해야 할 것 같다. 태그의 사용과 익숙해지는 것이 제일 중요할 것 같다.
🙋♀️ 학습소감
초반에는 알고 있던 태그들이 나와서 익숙했었는데 모르던 태그들이 나오기 시작했을 때는 이해하기 보다는 진도 따라가기에만 급급했던 것 같다. 복습을 열심히 해야겠다.
