지금까지 필자의 글을 읽은 사람이 있을지 모르겠지만 일부는 가로로 길쭉한 코드를 보며 가독성이 떨어진다는 생각을 했을지도 모른다.
그래서 준비한 가독성 높여주는 장치와 기능들, 구조화까지 알아볼 예정이다!
지금까지 우리는 HTML코딩을 할 때 <태그> 콘텐츠 <태그> 의 형태로 코드를 작성했다.
짧은 코드라면 전혀 문제없지만, 코드가 길어진다면 가독성이 떨어질 수 있는 작성방식이다.
그래서 긴 코딩을 위해 구조를 살짝 바꿔주겠다.
<h1 style="font-family: sans-serif; text-align: center; color:rgb(255, 251, 0)">
Sia Challenge for Sunday, November 13th
</h1>
<p>
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>저번 시간에 썼던 코드를 그대로 가져와서 구조만 바꿔주었다.
눈치 빠른 독자는 어떤 부분이 변했는지 알아차렸을 것이다.
더욱 가독성을 높이기 위해서 코드의 작성방식을
<태그 시작>
큰 텐츠
<태그 끝>
의 형태로 바꿔주었다.
띄어쓰기만 더해줬을 뿐인데 훨씬 코드를 읽기 수월해졌다.
하지만 일일이 띄어쓰기를 눌러주고 들여 쓰기를 하는 것은 귀찮을 수 있다.
그래서 필자는 코드의 정렬을 도와주는 비주얼 스튜디오 코드의 소프트웨어를 하나 추천하려 한다.
비주얼 스튜디오의 좌측을 보면 아래쪽에 사각형들이 보이는데 그걸 클릭해주면 다른 프로그램들을 추가해줄 수 있다.
prettier을 검색해서 우측에 보이는 것을 다운로드해주자.
다운로드가 끝났다면 설정을 살짝 변경해줄 것이다.
비주얼 스튜디오 좌측 상단에 File -> Preferences -> Setting 순으로 들어가 주자
Setting 창이 켜졌다면
검색창에 default fomatter를 검색해준다.
그리고 Pritter으로 바꿔준다
이까지 설정을 마쳤다면 이제부터는 편안하게 코딩을 할 수 있다!
이제 다시 코드로 돌아가 보자.
또 필자가 임의로 코드를 더 추가 헤서 작성해보겠다.
<h1 style="font-family: sans-serif; text-align: center; color:rgb(255, 251, 0)">
Sia Challenge for Sunday, November 13th
</h1>
<p style="font-family: sans-serif; text-align: center; color:rgb(255, 251, 0)">
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p style="font-family: sans-serif; text-align: center; color:rgb(255, 251, 0)">I will acheve this goal by diving into more learning resources.</p>본문을 하나 추가해주고 각 태그에 모두 CSS를 추가하였다.
보기만 해도 화가 날 정도로 지저분한 코드이다.
하지만 화내지 말기를 바란다!
Shift + Alt + F를 눌러준다면 아까 설치한 프로그램이 알아서 예쁘게 코드를 정리해준다!
<h1
style="font-family: sans-serif; text-align: center; color: rgb(255, 251, 0)"
>
Sia Challenge for Sunday, November 13th
</h1>
<p style="font-family: sans-serif; text-align: center; color: rgb(255, 251, 0)">
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p style="font-family: sans-serif; text-align: center; color: rgb(255, 251, 0)">
I will acheve this goal by diving into more learning resources.
</p>훨씬 보기 수월해졌다.
정리를 마쳤지만 여전히 눈에 거슬리는 게 보일 것이다.
바로 똑같은 CSS 코드가 3번이나 작성되었다는 것인데, 앞으로 있을 코딩은 몇십 몇백 줄짜리 코딩을 하는데 모든 CSS를 일일이 복사 붙여 넣기를 할 수는 없을 것이다.
이를 해결하는 방법은 바로 글로벌 CSS 작성이다.
아마 C 계열의 언어를 공부한 사람은 감이 올 것이다.
코드 가장 바깥쪽에서 이 코드 전체에 동일하게 쓸 CSS 코드를 지정해주는 역할을 한다.
통일시킬 CSS코드를 코드의 가장 앞에서 <style> </style> 태그 사이에 CSS코드를 입력해주면 된다.
바로 예시를 보여주겠다.
<style>
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>
<h1
style="font-family: sans-serif; text-align: center; color: rgb(255, 251, 0)"
>
Sia Challenge for Sunday, November 13th
</h1>
<p>
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>I will acheve this goal by diving into more learning resources.</p>갑자기 늘어난 코드에 당황하지 말고 천천히 코드를 들여다보자.
<style>
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>코드가 추가되고 p태그의 CSS 코드가 사라진 것을 확인할 수 있다.
이는 앞으로 있을 모든 p태그의 디자인을 <style> 태그 안에 있는 CSS 코드로 하겠다는 걸 나타낸다.
기본 형태는
<style>
태그 이름 {
CSS 코드 1;
CSS 코드 2;
}
</style>
의 모양을 가진다.
그렇다면 제목인 h1의 CSS 코드도 글로벌 CSS 코드로 바꿔주자.
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(255, 251, 0);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>
<h1>Sia Challenge for Sunday, November 13th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>I will acheve this goal by diving into more learning resources.</p>훨씬 보기 깔끔해진 것을 알 수 있다.
이제 코드를 보기 좋게 작성하였으니 이 코드의 구조에 대해서 설명하겠다.
위 코드를 실행시켜보면 <style>을 기준으로 아래 있는 코드는 눈에 보이지만 위쪽의 CSS 코드는 딱히 나타나지 않는다.
이 두 코드의 차이가 생기는데 이를 각각 시각적 콘텐츠, 메타데이터라는 이름을 가진다.
시각적 콘텐츠는 말 그대로 브라우저 실행 시 눈에 보이는 콘텐츠들을 말하며
메타데이터는 브라우저에서 보이지는 않지만 보이지 않는 곳에서 작동하는 데이터를 말한다.
HTML은 위와 같이 크게 두 부류로 나눌 수 있는데.
여기서 한층 더 구조화를 시키면 머리와 몸통으로 나눌 수 있다
머리 : 메타데이터
몸통 : 시각적 콘텐츠
코드 형식으로 보여주자면
<html>
<head>
메타데이터
</head>
<body>
시각적 콘텐츠
</body>
</html>
의 형태를 가진다.
위의 형태를 가지고 코드를 더욱 구조화시켜보겠다.
<html>
<head>
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(255, 251, 0);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>
</head>
<body>
<h1>Sia Challenge for Sunday, November 13th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>I will acheve this goal by diving into more learning resources.</p>
</body>
</html>훨씬 더 구조화된 코드를 볼 수 있다.
지금까지 코드 내용을 바꾸지 않고 구조화시키는 작업만 했는데도 훨씬 깔끔하고 가독성이 높아졌다.
이런 구조화를 굳이 해야 하냐는 의문이 들겠지만 코드가 몇백 줄씩 된다면 지저분한 코드는 디버깅할 때의 수고가 어마 무시할 것이다.
우리 모두 코드를 구조화시키는 습관을 기르자!
'100일만에 개발자 되기!' 카테고리의 다른 글
| 4일차(1) : 내가 만든 사이트에 이름을 붙이자! (0) | 2022.11.17 |
|---|---|
| 3일차 (3) : 하이퍼링크 달기 (2) | 2022.11.13 |
| 3일차 (1) : 텍스트 컬러를 내 마음대로! (0) | 2022.11.13 |
| 2일차 (2) HTML의 태그와 CSS. (2) | 2022.11.12 |
| 2일차 (1) (0) | 2022.11.12 |