HTML - 3

- Web bowsr
브라우저 종류: Google, Chrome, Edge, Whale, Safari
코딩, 웹 사이트 만들때: 크롬을 기준으로 해야함

실무자의 시선
크로스 부라우징의 고충: 크롬에서 잘 돌아간다고 안심 X
                                        사파리나 파이어폭스에서 레이아웃이 깨지지 않는지 확인 해야함. 
                                        특히 모바일 환경에서의 사파리 대응은 프론트엔드 개발자의 숙명임


- IDE and Web editor
IDE 뭐 쓰냐? 프론트엔드는 VS Code만 쓰기 때문에 이상한 답변할시 바보
프론트엔드라면 VS Code: 리엑트나 뷰를 다룬다면 방대한 확장 프로그램 생태계 덕분에 VS Code가 압도적으로 편리함

-Chrome Developer Tools
크롬 실행 > F12 or Ctrl + Shift + I or 마우스: 우클릭 후 '검사'

Elements(요소): HTML 구조와 CSS 스타일은 실시간으로 확인하고 수정
Console(콘솔): 자바스크립트 로그를 확인하고, 코드를 직접 입력해 실행해 볼 수 있음

- HTML structure and comment
주석: 코드를 설명하거나 특정 부분을 실행되지 않게 만들 때 사용
역할 분담: 글자를 굵게 만들거나 색을 입히는 것은 HTML 태그(Ex: <font>, <b>)가 아닌 CSS에서 처리해야 함

Semantic tag
시맨틱 태그란: 브라우저와 개발자에게 의미를 명확히 설명해 주는 태그

<nav>: 내비게이션, 다른 페이지로 이동하는 링크들의 집합
<main>: 문서의 독소적인 핵심 콘텐츠를 담는 영역. (페이지당 한 번만 사용)
<section>: 문서 내에서 논리적으로 연관된 내용을 묶는 독립적인 구역
<article>: 블로그 포스트나 뉴스 기사처럼 그 자체로 독립적으로 떼어내어 배포할 수 있는 완전한 글을 의미
<aside>: 양 옆에 뜨는 광고 or 맨위로 탭같은 것을 의미
<footer>: 페이지 하단에 위치하며 저작권 정보, 연락처 등을 나타냄

웹 접근성 향상: 시각 장애인이 사용하는 스크린 리더 프로그램이 각 영역의 의미를 사용자에게 명확히 읽어줄 수 있음

의미가 없는 구역: 단순히 디자인을 위해 공간을 띄우거나 요소를 감싸야 할 때는 여전히 <div>를 쓰는 것이 정석
Section vs Article: 이 둘을 구분하는 것이 처음엔 어렵지만,

                              "이 부분만 떼어내서 다른 사이트에 붙여도 말이 되는가?"를 생각하면 쉬움,

                               말이 된다면 article, 연관된 묶음이면 section

 

- HTML and Semantic tag 

 <div id="container">

        <header>

            <div id="logo">

                <a href="#">

                    <h1>Dream Jeju<h1>

                </a>

            </div>

            <nav>

                <ul id="topMenu">

                    <li><a href="#">단체 여행</a></li>

                    <li><a href="#">맞춤 여행</a></li>

                    <li><a href="#">갤러리</a></li>

                    <li><a href="#">문의하기</a></li>

                </ul>

            </nav>

           

        </header>

        <main class="contents">

            <section id="headling">

                <h2>몸과 마음이 치유되는 섬</h2>

                <div class="detail">

                    <img src="images/healing.jpg">

                    <b><p>쉼(Healing)의 공간으로 안내합니다</p></b>

                    <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>

                </div>

                <div class="schedule">

                    <h3>상세 일정</h3>

                    <ul>

                        <li>여행 기간 : 2박 3일</li>

                        <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>

                    </ul>

                </div>

            </section>

            <section id="activity">

                <h2>다양한 액티비티가 기다리는 섬</h2>

                <div class="detail">

                    <img src="images/activity.jpg">

                    <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다</p></b>

                    <p>둘러보기만 하는 여행을 하셨나요?</p>

                    <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>

                </div>

            </section>

        </main>

        <footer>

            <section id="bottomMenu">

                <ul>

                    <li><a href="#">회사 소개</a></li>

                    <li><a href="#">개인정보처리방침</a></li>

                    <li><a href="#">여행약관</a></li>

                    <li><a href="#">사이트맵</a></li>

                </ul>

            </section>

        </footer>

    </div>

 

Show Preview

-Multimedia tag and property
<video>: 비디오를 넣을때 사용하는 태그
<src>: 파일 경로 설정
<controls>: 재생, 일시정지, 볼륨 등 컨드롤 바를 표시함 (가장 많이 쓰임) _ 없으면 아무것도 안뜸 주의 해야함
<autoplay>: 페이지가 로드되면 자동으로 재생됨 (대부분 <muted>와 함께 쓰임)
<loop>: 영상이 끝나면 처음부터 다시 재생함
<poster>: 영상이 로딩 중이거나 재생 전일 때 보여주는 썸네일

<audio>: 웹 페이지에 음악이나 음성 파일을 삽입할 때 사용
<src>: 파일 경로 설정
<controls>:  재생, 일시정지, 볼륨 등 컨드롤 바를 표시함 (가장 많이 쓰임) _ 없으면 아무것도 안뜸 주의 해야함
<muted>: 소리를 끈 상태로 재생
<preload>: 페이지를 열 때 파일을 미리 다운할지 정함

VS Code 단축키
편집 및 이동
Shift + Alt + ↓ or ↑: 줄 복사
Alt + ↓ or ↑: 줄 이동
Ctrl + Shift + K: 줄 삭제
Shift + Alt + F: 코드 정렬

탐색 및 검색
Ctrl + P: 파일명으로 파일 열기
Ctrl + Shift + O: 기호/ 함수로 이동
Ctrl + Shift + F: 모든 파일에서 검색
Ctrl + D: 일치하는 단어 다중 선택

개발 효율 및 뷰 조절
Ctrl + (Backtick): 터미널 열기/ 닫기
Ctrl + B: 사이드 바 열기/ 닫기
Ctrl + \: 화면 분할
Ctrl + /: 주석 처리

TIP
단축키 외우면 좋음 아니면 내 손에 맞게 커스터마이징 하는게 중요
마우스 쓰지 않고 작업해보기 (작업속도 올라감) 
Ctrl + K를 누른 뒤 바로 Ctrl + S: 단축키 설정 진입
'Settings Sync': 확장 프로그램 활용

 

Show Preview로 볼때 로딩만 되었지만

크롬으로 킬땐 잘 보임