생활코딩 | WEB1 - 9.줄바꿈 : br vs p
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 HTML강의 청각장애인을 위한 자막
이번 시간에는 인기있는 태그 두 가지를 살펴볼 거에요
이 두 대 그네 서로 경쟁 관계에 있는 데요 어떤 경쟁관계 있는가 를통해서 정보로써 웹 이라는 관점에 대해서 생각해보는 계기가 되었으면
좋겠습니다 또 css 라는 기술도 깜짝 출연을 할 겁니다
우리 수업은 css 를 배우는 수업 은 아니지만 이 css 를 지배한
혁명적인 규 책을 여러분들이 접해볼 수 있는 게 기회가 될겁니다
자 시작해 보죠
자 지금 우리가 만든 웹 페이지를 이렇게 보니까 여러분 인데요
딱 봤을때 내용이 너무 적은거 에요 그래서 여기에다가 보충 설명을 좀 더
볼까요
자 이렇게 내용을 추가해 봤습니다
그리고 리로드를 해볼게요 짜잔
자 어때요 좀 답답하죠 왜요 달라졌기 때문입니다
우리가 추가한 내용을 보면은 여기 보시는 것처럼 이렇게 간격이 떨어져
있는데 우리는 코드에서 분명히 이렇게 줄바꿈을 했음에도 불구하고
웹 페이지에서는 것이 반영되고 있지 않습니다
자 그럼 여러분이 이제 뭘 해야 겠어요 줄바꿈을 하는 태그를 자 줘 봐야
겠죠
자 추천 검색어 나갑니다
html 듀오 li 태그
새로운 라인의 태그 란 뜻이죠 수업을 잠깐 멈춰 놓고 여러분이 검색을
통해서 직접 결과를 찾아보시고 적용을 해 보십시오
해봤나요 자 그러면 저도 같이 해보겠습니다 자
html 에서 새로운 줄을 표현할 때는 br 이라는 태그를 쓰면 됩니다
br
그리고 이 줄바꿈 은 어차피 의미가 없기 때문에 이렇게 없애 버리셔도
결과는 같습니다 리로드 해볼게요 보시는것처럼 한줄이 떨어집니다
하지만 단락 이기 때문에 우리가 이걸 두 번 쓰면 음 단락 처럼
느껴지겠죠
만약에 세 번 쓰면 좀 더
여백이 강조된 단락을 표현할 수가 있을 겁니다
자바로 bi 태그 라는걸 이용하시면 되요 상당히 자주 쓰는 태그입니다
자 그럼 여기잇는 br 태그 는 좀 특징적인 게 있습니다 우리가 지금까지
배웠던 h1 태그는
어디서부터 어디까지가 h1 이다 라는 것을 설명하기 위해서
열리는 태그 바치는 태그가 쌍으로 존재했습니다
하지만 bi 태그는 단지 줄바꿈 이라고 하는 시각적인 의미만을 가지고
있기 때문에 무언가 을 감쌀 필요가 없어요 그래서 같지 않습니다
제건 api 태그 말고 html 을 만든 사람들은
단락을 표현할 때 쓰라고 어떤 특정한 태그를 만들어 놨어요
우리는 그렇다면 그 태그를 사용해야 됩니다
검색엔진을 키시고 추천검색어 나갑니다
html 페라 그래프 태그
페라 그래프는 단락 이란 뜻입니다 자 요 정도 검색어로 여러분이
검색해보시면 나오는 결과가 있을 건데 좀 멈춰 놓고 여러분이 직접 해결해
보십시오
자 이런 훈련이 자꾸 돼야 됩니다
자 그러면 아마도 p 이라는 태그를 찾을 수가 있었을 거에요
페라 그래프의 첫 번째 글자 입니다 잠 여기 있는 bi 태그를 없애고
우리 단락을 나타내는 태그 를 적용해 봅시다 자 p 태그는 bi 태그
와는 다르게 어디서부터 어디까지가 한 단락 인지를 표현할 수 있기 때문에
보시는 것처럼 열리는 태그 와 닿지는 태그가 규제 합니다
이렇게 해서 여기
자 이렇게 머리는 두 개의 p 태그를 썼고 그리고 두 개의 단락을 나눈
겁니다
리로드 를 해보겠습니다 123 짜잔
결과는 같습니다 하지만 사용하는 태그는 다르고 이 각각의 태그 중에 이
맥락에서 는 어떤 태그가 더 좋은 태그 냐 면 p 태그를 쓰는 것이 더
좋은 결정입니다
왜냐하면 이 태그는 이 웹페이지를 좀더 정보로서 가치 있게 만들기
때문입니다
왜요 제가 지금 선택한 저만큼 $2 있다라는 것을 의미론적 으로 표현해
줄 수 있다는 것이 자지만 bi 태그는 그냥 줄바꿈 일 뿐입니다
자 정보로써 좀 더 가치 있는 html 이 된다는 것이 왜 중요한지는
자차로 알게 되니까
지금은 그냥 듣고 그냥 끄덕 끄덕 하고 넘어가시면 되겠습니다
제가 내 bi 태그와 p 태그를 비교했을 때 p 태그는 단점이 있어요
br 태그는 여러분이 줄바꿈을
좀 많이 하고 싶으면 br 택을 여러 번 쓰면 됩니다 하지만 p 태그는
정해져 있는 여백 만큼 2 이렇게 벌어지게 돼 있기 때문에
시각적으로는 자유도가 떨어집니다 하지만 우리에게는 css 라는 기술이
있습니다
우리 수업은 css 수업니기 때문에 지금 제가 잠깐 설명 드리는
css 의 문법은 듣고 이 주시면 됩니다
css 에서
태그와 태그는 사이에 어떤 여백을 나타내는 코드가 있어요
게 뭐냐면 여기 있는 두 번째 태그 에다가
스타일이라고 습니다 스타일이라는 html 속성을 써요
그리고 저 속성의 값은 우리 css 배우지 않았지만 예 그 css 라는
html 과는 완전히 다른 컴퓨터 언어의
문법이 저 들어오게 약속되어 있습니다
얘 안가도 괜찮아요 자 그래서 css 의 문법 중에서
태그와 태그 사이의 여백 걸 뭐라고 하냐면 마진 이라고 합니다
그리고 이 두 번째 p 태그에
위쪽 여백을 주고 싶은 상태거든요 마진 탑 그리고 어
40 픽스 요건 이제 cm 같은 컴퓨터 상에서 사용되는 단위 입니다
이렇게 하면 이 그 여백과 여백이 40 픽셀 만큼 떨어지게 되요 해볼게요
이렇게 요구에 요거를 제가 45 로 하면 아주 정교하게 여러분이 원하는
만큼 떨어트릴 수 있다는 겁니다 자 요것이 바로 css 라는 것인데
css 는 우리 수업의 주제 가 아니기 때문에
여러분 버리지만 의미나 이 얘기는 어쨌든 중요한 것은 이 p 태그를
사용하는 걸 통해서 어디서부터 어디까지가
같은 단락 이다 라는 것을 여러분이 표현할 수 있고
시각적으로 부족한 부분은 css 를 통해서 훨신 더 정교하게 제어할 수
있기 때문에 여러분은 의미에 맞는 태그를 사용하는 것이 더 좋은 방법이다
라는 얘기를 저는 하고 싶었어요
자 이렇게 해서 우리 두 가지 중요한 태그를 배웠는데요
p 태그 보시는 것처럼 81.5% 가 차지하는 상당히 인기있는 태그 란
걸 알 수 있습니다 그리고 bi 태그는 7 10.3% 나 차지 않은 p
태그 보다 못하지만 이것 역시도 많은 사람들이 애용하는 태그 라는 것을
알 수가 있습니다
여러번 아주 중요한 태그 두가지나 배웠습니다
축하드려요 자 여기까지 하겠습니다.
댓글 0개
등록된 댓글이 없습니다.