생활코딩 - <Web> 8~9 : 통계적 사고, head태그, h1태그, h2태그, strong태그, 줄바꿈 태그 배워보기, br태그와 p태그 +CSS

YUKI_GO·2022년 7월 11일
0

생활코딩 <Web> 공부

목록 보기
3/13
post-thumbnail

생활코딩 복습 8~9강.


8) 통계 (통계에 기반한 학습)


통계를 기반으로 해서 공부하는 방법에 대해서 배워보자.

HTML에는 현재 최신 버전에서 약 150개 이상의 태그가 존재한다.
우리는 150개의 태그를 다 외워야 할까? - NO

혁명적 변화로 인해서 우리가 태그가 뭔지에 대해서 알고 있다면,
사실 모든 태그를 알고 있는 것과 다름없다.
검색이라는 엔진을 통해 우리는 1분도 안되서 찾을 수 있기 때문이다.

그럼에도 불구하고 태그를 하나도 모르고 있다면 우리는 매우 불편할 것이다.
어떤 태그들은 어느정도 지식이 있어야 이해 할 수 있는 것들도 있다.

이번 학습내용은, 기본적으로 밑천으로서 가지고 있을 만한
태그가 무엇인가를 스스로 판단할 수 있게 하기 위한 것이라고 보면 된다.

구글에서는 전 세계에 있는 수많은 웹 페이지를 분석한다.
그 중에서 중요한 통계들을 공개한 적이 있었는데,
아쉽게도 지금은 사라졌으나
이 정보를 기반으로 해서 내용을 보기 좋게 정리정돈한 사이트가 있다.

https://www.advancedwebranking.com/html/

이라는 사이트인데,

사이트의 내용을 보면
전 세계에 있는 수 많은 웹 페이지들이
몇가지 종류의 태그로 이루어져 있는지 통계로 보여주고 있다.

통계에 따르면 약 25~26개 정도의 태그를
가지고 있는 웹페이지가 가장 많다고 나와있다.

우리는 현재까지 < strong > , < u > , < h1 > 등의 태그를 알고 있다.
여기서 h1h1~h6 총 6개까지의 태그가 있기 때문에
8개의 태그를 알고 있는 셈이다.

웹이 세상에 처음 태어났을때는 태그가 18개 정도만 있었다.
우리는 이미 충분히 많이 알고 있다고도 볼 수 있겠다.

위의 그래프는, 여러 태그들이 웹페이지에서 사용되는 랭킹을 보여주는데

이 중에서 1등은 head 태그이다.
우리는 수업의 어떤 방향성 때문에 아직 head 태그를 배우지 않았으나 뒤에서 차차 배울 예정이다.

또 우리가 알고 있는 태그에는 55.8%의 비율로 h1, h2 태그도 보인다.

다음으로 strong 태그도 아래에 있다.

이번수업에서 우리는 통계적으로 가장 많이 쓰는 태그의 빈도수를 이렇게 그래프로 확인할 수 있었다.


9) 줄바꿈 (줄바꿈 : br vs p)


이번 9강에서는 인기 있는 2가지 태그에 대해 배울 것이다.

이 두 태그는 서로 경쟁 관계에 있는데
우리는 어떤 경쟁 관계에 있는가를 통해서,
정보로서 웹이라는 관점에 대해서
생각해보는 계기가 될 수 있다.

또, CSS 라는 기술이 깜짝 출연할 예정이다.
CSS를 배우는 수업은 아니지만 CSS를 지배하는 혁명적인 규칙을 접해보는 시간도 가지도록 한다.

저번 시간까지 진행하던 웹페이지를 보면,
페이지에 보충 내용이 좀더 들어가야 할 것 같음을 느끼고

내용을 추가한 뒤 왼쪽의 웹 페이지를 새로고침 한다.

그런데 결과가 나타나는 왼쪽화면에서는 내용부분이 어딘가 답답하게 느껴진다.
이유는 내용과 내용을 구분하는 단락이 없어서이다.

오른쪽 코드에디터 프로그램에는 분명히 줄바꿈이 되어 있음에도 불구하고,
페이지에는 반영되지 않았다.

검색엔진을 통해 위 추천검색어를 검색해보자.

html new line tag
" 새로운 라인의 태그 " 라는 뜻인데,

검색을 통해 찾아보니, 이 뜻의 태그는 < br > 이라고 나와있다.

오른쪽 코드편집 화면에서 내용 중간에 < br > 이라고 입력하고,

줄바꿈은 의미가 없기 때문에 없애버리고 글을 이어준다.
그런 뒤에 새로고침을 눌렀을 때

왼쪽의 웹사이트 페이지에서
br 태그의 앞 뒤 문단으로 문장의 줄바꿈 한줄이 아래로 떨어진 것을 확인할 수 있다.

br 태그를 연속해서 두번 입력하게 되면 줄바꿈이 한번 더 생기면서 단락이 생긴 것 처럼 만들어지게 되고

br 태그를 세번 연속해서 쓰게 되면
좀 더 여백이 강조된 단락을 표현할 수 있게 된다.

상당히 자주 쓰는 태그로,
단락을 쉽게 표현할 때 < br > 태그를 이용하면 되는데

이 br 태그는 특징적인 부분이 하나 있다.

우리가 지금까지 배웠던 태그들 중 한 예로
< h1 > 태그는 어디서부터 ~ 어디까지가 < h1 > 이다 라는 것을 설명하기 위해서
열리는 태그닫히는 태그가 쌍으로 존재했다.
하지만 < br > 태그는 단지 줄바꿈이라고 하는
시각적인 의미만을 가지고 있기 때문에
무언가를 감쌀 필요가 없다.

그래서 < br > 태그는 닫히는 태그를 쓰지 않는다.

그런데 이 < br > 태그 말고도
HTML을 만든 사람들이,
단락을 표현할 때 쓰라고 어떤 특정한 태그를 따로 만들어뒀는데

이 태그를 우리가 직접 찾아보기 위해

검색엔진에 " html paragraph tag " 라고 검색한다.

여기서 " paragraph " 는 단락 을 뜻한다.

검색하니 < p > 라는 태그를 찾을 수 있었다.

< p > 태그는 paragraph 의 첫번째 앞글자를 땄다.

< p > 태그를 사용하기 앞서 기존의 < br > 태그를 모두 지워준다.

< p > 태그는 < br > 태그와는 다르게
어디서부터 어디까지가 한 단락 인지
표현할 수가 있기 때문에
열리는 태그닫히는 태그가 존재한다.

오른쪽 코드 편집화면에서
첫 단락과 두번째 단락으로 나눌 앞부분에
열리는 태그 < p >끝부분에 닫히는 태그 < / p > 를 입력해준다.

2개의 < p > 태그와 2개의 단락으로 나누어 준 뒤 저장 후 왼쪽의 웹페이지에서 새로고침을 해보자.

결과는 아까 < br > 태그를 썼을 때와 별반 다르지 않은 것을 볼 수 있다.

하지만 사용한 태그는 분명히 다르고,
이 각각의 태그 중에 이 맥락에서는 < p > 태그를 쓰는것이 더 좋은 결정이 될 수 있다.

< p > 태그는 이 웹페이지를 좀 더 정보로서
가치 있게 만들어 주는데

구체적으로 설명하자면

< br > 태그는 단지 줄바꿈 일 뿐인데
< p > 태그는 우리가 선택한 저 만큼이 단락 " 이다 " 라는 것을
의미론적으로 표현해 줄 수 있기 때문이다.

< br > 태그와 < p > 태그의 비교

< p > 태그에는 단점이 있다
< br > 태그는 줄바꿈을 많이 하고 싶을 때, 이 태그를 여러번 많이 사용하면 되지만
< p > 태그는 정해진 여백 만큼이 벌어지게 되 있어서 시각적으로는 자유도가 떨어진다.

하지만 이 경우 CSS 라는 기술이 있는데
CSS에서는 태그와 태그 사이의 여백을 나타내는 코드가 있다.

태그 < p > 앞에 style="margin-top:45px;" 를 입력하고 새로고침을 하면
왼쪽 웹페이지의 원하는 단락의 윗부분에 여백이 생기게된다.

여백은 CSS라는 코드를 이용하면 이와같이 더 섬세한 조절이 가능하다.

우리는 기본적인 < p > 태그와 < br > 태그를 보통 이용하게 될 것이지만,
더 정교한 작업이 필요할 경우에는 CSS 코드를 이용하는 것이 상황에 따라 사용되는 경우도 많다.

profile
개발자의 길을 공부합니다.

0개의 댓글