WeniVooks

수업 전 알아 두기

1. 웹브라우저: Chrome

수업에서 사용하는 웹 브라우저는 Chrome 입니다. Chrome은 가장 많은 사용자 를 보유하고 있으며, 개발자 도구 가 가장 잘 되어 있습니다. 개발자 도구를 통해 웹 페이지의 HTML, CSS, JavaScript를 확인하고 수정할 수 있습니다.

1.1 확장 프로그램

1. HeadingsMap

   브라우저에서 제목 태그들을 모아놓고 목차처럼 볼 수 있게 해주는 확장프로그램 입니다.

   HeadingsMap

2. OpenWAX

   웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구입니다.

   OpenWAX

2. 폴더 및 파일 이름 규칙

• 파일 이름을 작성할 때는 공백 없이 영문 소문자를 사용 합니다.

  • 영어 소문자를 사용하는 이유는 컴퓨터와 웹서버가 영문 대소문자를 구분하기 때문입니다. 소문자로 일관되게 작성하면 오류를 줄일 수 있습니다. 다음으로, 공백을 사용하지 않아야 합니다. 브라우저, 웹서버, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않기 때문에 오류가 발생할 수 있습니다.

• 언더바(_) 대신 하이픈(-)을 사용하는 것이 좋습니다.

  • 구글 검색 엔진은 하이픈을 단어 구분자로 인식하기 때문입니다. 예를 들어, lion_resting_on_the_road.png 대신 lion-resting-on-the-road.png와 같이 작성하는 것이 좋습니다.

3. 파일구조 및 파일 경로

상대경로

• 현재 열린 파일을 기준으로 상대적인 경로를 의미합니다.

• ./: 현재 폴더

• ../: 상위 폴더

• ./폴더명/: 하위 폴더

• index.html 기준으로 style.css 파일은 ./css/style.css / /css/style.css

• style.css 기준으로 logo.png 파일은 ../images/logo.png

절대경로

• http://, https://로 시작하는 도메인 네임이 포함된 인터넷상의 유일한 절대적인 경로(URL)를 의미합니다.

4. 개발자도구

개발자 도구는 웹 페이지의 HTML, CSS, JavaScript를 확인하고 수정할 수 있는 도구입니다. Chrome에서는 F12 키를 눌러 개발자 도구를 열 수 있습니다. 개발자 도구를 통해 웹 페이지의 요소를 확인하고 수정할 수 있으며, 네트워크, 콘솔, 소스, 성능 등 다양한 탭을 통해 웹 페이지의 동작을 확인할 수 있습니다.

참고할 자료

• 위니브에서 정리한 무료 강의가 있으니 아래 강의를 확인해주세요.