코드 줄바꿈하기

앞으로는 정리 시간이 생각보다 너무 오래걸려서 정리할 필요가 없는 자잘한 것들은 생략하거나 간략하게 정리하려고 한다.

CSS까지 넣어서 코드를 작성하면 코드가 너무 길어져 가독성을 위해 줄바꿈을 해야하는데, 시작 태그와 HTML 콘텐츠의 사이에서 줄바꿈을 한다.

<h1 style="font-family: sans-serif; text-align: center; color: red">sol's challenge for Friday, May 6th</h1>

이렇게 길어서 보기 힘든 코드를

<h1 style="font-family: sans-serif; text-align: center; color: red">
  sol's challenge for Friday, May 6th
</h1>

다음과 같이 가독성있게 바꿀 수 있다.

또한 HTML콘텐츠 내에서 줄 바꿈을 하더라도 웹페이지에서는 아무런 변화가 없다.

<h1 style="font-family: sans-serif; text-align: center; color: red">
  sol's challenge for Friday, May 6th
</h1>
<p style="font-family: sans-serif; text-align: center; color: #c94949">
  Learn about the basics of web development - sepcifically dive into HTML & CSS.

  hi
</p>

물론 몇 가지 예외도 존재한다고 한다.

HTML element는 paragraph element이기 때문에 텍스트의 모든 단락에 대한 개별 단락 element가 있어야 한다. 그러므로 의미론적인 관점에서 옳게 새로운 단락을 생성하고 싶다면 새로이 <p>태그를 추가하자.

• 줄바꿈을 더 잘 도와주는 툴이 있는데

1. visual studio code의 보기 -> 확장 -> 검색창에 prettier검색
2. prettier – code formatter 설치 후 설정에서 디폴트 포맷을 prettier로 바꾸기

shift + alt + f를 누르면 자동으로 줄바꿈을 해주고, HTML element 중간에서 들여쓰기가 된 경우 이를 바르게 고쳐준다.