생활코딩 | WEB1 - 6.기본문법 태그
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 HTML강의 청각장애인을 위한 자막
자 그럼 이제부터 진짜 코딩을 해 봅시다 오래 걸렸죠
자 지금 보고 계신 이 화면은 우리가 만들었던 기획서 입니다여기는 우리가 한꺼번에 만들 수 없기 때문에 조각 조각내서 하나씩 완성해
가면 되는데요
제 중에서 우선 우리가 먼저 화면에 표시 할 부분이 이 부분입니다
자 저기 있는 저 텍스트를
저는 웹브라우저의 표시 해 볼 겁니다
그런데 제가 말씀드리고 싶은 것은 여러분이 우리 수업을 하면서 제가 계속
강조 드리는 것은 자기 자신의 주인공으로 만들어 주세요
무슨 말이냐면 이 웹페이지를 저랑 똑같이 만드는 건 역시나 져 여러분
저를 그냥 따라오는 것들과 하잖아요
하니까 여러분들의 삶에서 정말 중요한 여러가지 정보들이 있을 겁니다
그리고 그 정보를 누군가와 나누고 싶은 것들이 있을 거란 말이에요
이를테면 우리 가족들의 대한 정보 또는
음 내가 좋아하는 어떤 스타에 대한 정보
또 내가 좋아하는 게임에 대한 정보 듯 이러한 것들로 이 내용을 채워
가면서 제 수업을 따로 오신다면
우리 공부가 훨씬 더 생동감 있을 겁니다 하지만 뭘 할지 아직은 떠오르지
않는다 그럼 똑같이 하시면 되겠죠 그리고 제가 영어를 쓰고 있지만 한글로
하셔도 아무 문제 없습니다 다녔죠
자 그러면 여기 있는 텍스트를 저는
음 옮겨가 보겠습니다 자 여기 1점 html 이란 쪄 파일의 다가 이렇게
붙여넣기 를 했어요
그리고 컨트롤 8 팝 컨트롤 알파벳 s 또는 맥을 맥은 커맨드 알파벳 s
를 누르시면 단축키 입니다
저장이 되고 여기서 리로드를 하면 보시는 것처럼 이렇게 오른쪽에 있는
것이 원인이 돼서 왼쪽에 결과인 웹페이지가 만들어지는 것이죠
오른쪽 뭐라고 한다.구요 코드 또는 소스
구체적으로는 html 이라는 언어의 문법에 마케 작성된 소스 나 코드
라는 거죠
그 결과인 웹페이지가 왼쪽에 있는 것이구요
자 그러면 여러분은 처음에는 이렇게 아 대거 웹브라우저 에다가
정보를 표현해낸 라는 것만으로도 굉장히 행복하고 즐거운 실 겁니다
하지만 우리 사람의 욕심은 끝이 없죠
곧 이걸 계속 쳐다보고 있으면 여러분들 마음속에 서는 여러가지 불만
족들이 생겨날 겁니다
그럼 저걸 이렇게 쳐다보고 있으니까 여러분이 어떤 불만족이 지금 생기고
있는지를 제가 맞춰 볼게요
예 여러분은 지금 이걸 보니까 아 여기에서 왠지 크레이 튕
웹페이지 라고 하는 이 문자가 정말 중요한 정보 처럼 보이는 거에요
맞죠 그렇다고 치세요 하 아
자 그럼 이제 어떻게 하면 될까요 어떻게 하고 싶으세요
때맞춰 볼게요 여러분은 음
저걸 진하게 표시 하 고 싶습니다 맞죠
그렇다고 하십시오 자 그럼 여기잇는 요 부분을
이 웹 페이지에서 따른 문자 들과 9분 되게 진하게 표시하는 방법을 설명
드릴 건데요
그 과정에서 자연스럽게 웹을 지배하는 가장 중요한 문법이 나옵니다
그리고 외부의 지배한다.는 것은 어
인터넷을 지배하는 거라고도 볼 수 있을 만큼 정말 중요한 문법 입니다
다행스럽게도 회상에서 j 쉬운 문법 이기도 합니다
왜냐하면 태그입니다 자 일단은 경험적으로 한번 해봅시다 지금 우리가 하고
싶은 것은
크 레이팅 웹페이지 라는 이 새의 단어를
진하게 표시하고 싶어요 그럼 이렇게 따라해 보십시오
store
그리고 요 끝나는 부분에서 다시 슬래시 스톰 이라고 하고 저장
그리고 리로드를 해보시면 어떻게 되나요
123 짜잔 크 레이팅 웹페이지 쓰라는 것이 진하게 표시되어 있습니다
신기하지 않아요 아 우리가 매일같이 몇 십 년 동안 봤던
예 나는 만들 수 없다고 생각했던 웹페이지를
우리가 드디어 만들었고 그걸 자세하게 제어할 수 있는 첫걸음을 내디딘
겁니다 역사적인 순간이죠
자 그리고 여러분 이렇게 봤더니 이 중에서 웹 이라고 하는 적 글짜가
왠지 터 중에 보이는 거예요 그럼 제를 더 강조 하고 싶겠죠
근데 우리가 이미 진하게 강조하는 건 했기 때문에 그럼 이제 다른
방법으로 여러분이 강조하고 싶을 거란 말이에요
자 그러면 여러분들 뭘 하고 싶겠어요 지금
바쳐 볼게요 여러분은 저 웹이라는 텍스트 밑에다가 밑줄을 치고 싶습니다
여러 밑줄이 영어로 뭔가요 밑줄
밑줄이 영어로 언더 라인 입니다
언더라인 의 첫 번째 기차가 뭐예요
유에 요 자 이렇게 하시면 됩니다
꺽쇠 6억 쌕
꺽쇠 3 슬래시 6세
그리고 제가 컨트롤 알파벳 s 눌러서 저장하고
그리고 리로드를 하면 어떻게 되나요 123
왜 밑에 2 에 밑줄이 생긴 것을 볼 수가 있습니다
여러분 더 밑줄 우리가 그냥 u 라고만 썼을 뿐이지만 이렇게 밑줄을
실제로 긋는 것은 쉬운 일은 아닙니다
누군가는 우리 대신해 굉장히 큰 고생을 했기 때문에 저렇게 쉽게 밑줄이
거 지능 거에요 사실은
자 그러면 우리가 몇 개 태그를 배웠나 요 두개
스트롱 이라는 태그와 유라는 태그를 배웠습니다
자 문법을 한번 정리를 해보죠
자 이렇게 크 레이팅 웹페이지 쓰라는 것을 우리가 뭘로 감싼 나요
저렇게 생긴 코드로 감쌌습니다
그리고 앞에 있는 것과 뒤에 있는 저것을 뭐라고 하냐면
태그 라고 한다.고 했죠 라페이는 태그를 열리는 테 카 뒤에 있는 태그는
닫히는 태그 라고 하고 닫히는 태그는 어때요
앞에 있는 것과 뒤에 있는걸 9분하기 위해서 뒤에다가 슬래시 를 붙인다
라고 하는 것도 특징이라고 할 수가 있겠습니다
자 여기 있는 이 문법이 제가 태그 라고 말씀드렸는데
여러분이 일상에서 태그 라는 말을 쓰나요 말 쓰나요
쓰 줘 언제 쓰나요
여러분들 옷을 사면 그 옷에 붙어 있는 그 딱지를 뭐라고 하나요
태그 라고 합니다 자 그럼 여러분들 너무 잘 아는 거지만 제가 태그가
무엇인지를 구제 한번 설명해 볼게요
그 태그는 여러분의 옷을 설명합니다
자 저기 있는 좀 스트롱 이라는 태그 다시 한번 보세요
저기 있는 저 스토리라는 태그는 크 레이팅 웹페이지 스 라는 것이
중요하다
진하게 표시 해야 된다라는 것을 설명합니다
html 과 같은 언어를 만든 사람들은 저렇게 생긴 문법을 어떻게 설명할
것인가 로 고민 했겠죠
그리고 저거 외부 이름을 정할때 한번도 들어보지 못했던 이름을 정하는
것과 우리가 일상에서 이미 자주 쓰는 것 중에
저기 있는 저 문법과 굉장히 성격이 유사한 것을 비유적으로 사용하는 것
중에 뭐가 더 쉬울까요
비유적으로 사용하는게 더 쉽겠죠
그래서 여러분들이 처음 이 컴퓨터공학 이나 이 프로그래밍과 같은 것들을
공부하시면 이런 용어들이 굉장히 어렵고 힘들게 느껴질 건데요
그럴 때는 사전을 찾아보세요 그렇게 가 어떤 뜻인지를 찾아보시면
우리 일상과 굉장히 밀접한 관계에 있는 용어 의 가능성이 굉장히 많습니다
그래서 컴퓨터 공학은 어떻게 보면 하나의 거대한 c 라고 할 수 있어요
그냥 물체 를 기반으로 하지 않고 논리적인 것을 기반으로 하기 때문에
컴퓨터공학 에서 만든 것들을 사람들에게 설명해 주고 또 사람들이 그것을
마치 손에 잡히는 것 처럼 예 받아들이게 하기 위해서는 필연적으로
여러가지 비유와 은유를 쓸 수 밖에 없게 되는데 그것은 시와 굉장히 유사
하 죠
그래서 여러분 앞으로 만나게 된 여러 가지 개념들을 시 라는 느낌으로
보시면 또 색다른 느낌이 드실겁니다
제가 여러가지 개념들이 나올 때마다 게 어떤 점에서 시인 지에 대해서도
틈틈이 설명드리도록 하겠습니다 여러분 축하 드립니다
여러분은 이제 html 지배하는 가장 중요한 문법을 알게 되었습니다
우리 돼서 이게 얼마나 우리한테 중요한 사건이었다 는지를
한번 음미해 보는 시간을 갖도록 하겠습니다.
댓글 0개
등록된 댓글이 없습니다.