[chap.5]html 가독성 좋게 만들기
지금까지는 웹페이지를 위한 tool들을 배웠다면
오늘은 웹페이지에는 나타나지 않지만,
읽기쉽게, 깔끔하게 코드 작성하는 방법을 배워볼 것이다.
1. whitespace and indentation.
Programmers use two tools to visualize the relationship between elements
: whitespace and indentation.
1.1 whitespace
The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow.
위의 작성된 두 코드 모두 웹에는 똑같이 렌더링된다. 하지만 developrer 입장에선 하단의 코드가 훨씬 읽기 수월하다.
1.2 indentation
W3C(World Wide Web Consortium) is responsible for maintaining the style standards of HTML.
At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code.
paragraph1 과 div는 body에 수속되어 있으므로 스페이스 2번.
paragragh 2는 div에 수속되어 있으므로 거기서 또 스페이스 2번
2. comment
comment는 웹에는 보여지지 않는 참고노트이다. 바로 예시를 들면
위와같이 <!-- A --> 의 형태로 구성된다.
이는 각종 메모 혹은, 테스트 코드를 작성했을 때 등 다양한 방법으로 활용된다.
여기까지 또 한 챕터가 끝이 났다! 이번챕터(어제오늘)은 전반적으로 html 파일이 어떻게 작성되는지 그 순서와 각 태그의 목적을 알아봤다. 내 머릿속에 데이터가 하나둘 모이는 거 같아 그 재미가 쏠쏠하다 ㅎㅎ
챕터2 요약
- The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
- The <html> element will contain all of your HTML code.
- Information about the web page, like the title, belongs within the <head> of the page.
- You can add a title to your web page by using the <title> element, inside of the head.
- A webpage’s title appears in a browser’s tab.
- Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.
- You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
- Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
- Indentation also helps make code easier to read. It makes parent-child relationships visible.
- Comments are written in HTML using the following syntax: <!-- comment -->.