실전 HTML5 & CSS3 동영상 강좌 2강 HTML 기본-I > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 2강 HTML 기본-I

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
15450302363174.jpg

 안녕하십니까 볼수 입니다 자 지난 시간에 이어서 html

2강 두번째 시간입니다 그래서 오늘부터 취하 시간에 우리가 html 과
음 그 이전에 웹 이라는 게 무엇인지 다음에 그 전에 네트워크란 게
무엇인지 또 잠깐 살펴 같고요
다음에 우리가 본격적으로 알아볼 html 과 css 가 무엇인지 왜
우리가 이걸 배우는지 에 대해서 살펴보았고 온 에서 부터 시작을 해서
이제 html 본격적으로 살펴보는 시간을 갖도록 하겠습니다
저희가 html 기본 첫번째 시간입니다
자 먼저 태그 랑 무엇인가에 대해서 살펴보고 제가 지나 션에 태그 란걸
잠깐 설명을 드렸는데 자택을 한거 무엇이 무엇이 택을 한지 태그를 한
것인지 살펴보고 요 다음에 html 버전과 편집 트
실제로 우리가 코딩을 하려면 코딩 트레이 서 리 겠죠 그래서 편집 툴을
어떤것들이 사용되는지 다음에 html 태그 개요
그 다음에 태그 중에 어 음 기본적인 거 가장 쉬운 것들 이면서 대표적인
것처럼 많이 쓰이는 것들입니다
자 h1 pbr a pile of 인 스텔
태그 이런 것들 한번 살펴보는 시간을 갖도록 하겠습니다
자 먼저 태그 란 무엇인지 살펴봅니다 자 요즘도 나가기 전에 여러분들한테
한번 한 가지 먼저 말씀드리면 html 언어는 제가 진행 하시면 잠깐
말씀을 드렸듯이 굉장히 우리가 접하기 쉽고 금 바지 조금의 노력만 있으면
금방 습득을 하실 수 있는 언어입니다 근데
그렇다 면서 이게 너무 쉽다 오래 갖고 이렇게 눈으로만 본다
이제 코딩을 안하고 눈으로 온 건 다 물론 눈으로만 봐도 얼만큼 m 만큼
타 이해가 되요 그만큼 실수는 다 언어가 다른 뭐 그 어려운 언어 예를
들어서 뭐 c 언어 쉽을 불러 너 아니면 잡아 고런 언어의 비하면
스크립트 언어 이기 때문에 굉장히 쉽게 우리가 접할 수 있고 결과물도
빨리빨리 바로바로 확인이 가능합니다
그냥 그렇다 하더라도 이렇게 눈으로만 보고 아니면 책 뜨거워 책이나
웹사이트에 레퍼런스 문서 말을 보고 학습을 하지 마시구요
꼭 본인이 어코드 링을 해봐서 손에 익숙한 언어가 되야지 진짜 잘 알게
됩니다 눈으로만 보면 문진을 알지만 실제로 코딩을 딱 해보면 막히는
경우가 허다하게 발생할 수 있어요
그래서 꼭 정상 강의를 보시고 퍼즐을 누르신 던가 아니면 동상 강의를 다
한번 리뷰를 하신 다음에 꼭 분 혼자서 그 코딩을 하는 습관을 꼭
들으시기 바랍니다
자 먼저 태그 4부터 이제 봉술 나갈게요 어택을 랑 무엇인지에 대해서
살펴보도록 합니다
html 문서 배치되면서 뭐예요 웹 을 구성하고 있는 웹을 만 웹
서비스를 하기 위한 기본적인 문서 줘
자 html 문서를 구성하는 요소 입니다
그래서 h 트이면서 요게 지금 html 문서 입니다
굉장히 복잡해 보이지만 우리가 html 을 다 배우고 나면 아무 것도
아는데 그런 내용들은
자 이렇게 html 문서 구성할 때 이렇게 가로 꺾은 가로로 구성되어
있죠 이렇게 이걸 우리가 하나를 가 하나 하나 갖다 같아
태그 라고 합니다 이것도 태그 구요 태그
여태 그 중에 이렇게 슬러 싶은거 있죠 슬러쉬 가 안 버튼 여 도 있고
슬론 씨 가 붙어 있는것도 있습니다
슬러시 가 안 붙어 있는걸 우리가 열린 테그라 그러구요
그 다음에 슬러시 가 붙는 태그를 다 진태 그런데 이게 무슨 얘기냐 하면
어떠한 태그가 시작을 했으면 이렇게 시작을 해요
그 3 왔으면 끝날 때 욕 태그 dd 라는 태그의 기능이 다 됐어요
그러면 반드시 끝에 이렇게 종료 태그를 넣어 주셔야 됩니다 이게 html
태그의 기본 성질이 원래 이래요
물론 이 종료 테크가 없는 태그를 도 있어요
엄태웅 있는데 없는 태그는 안넣어도 되지만 이렇게 정현태 가 있는데 그럼
꼭 반드시 종료 태그를 넣어 젠더 래서 시작 태그와 종료 될까 쌍을 항상
이룹니다 이렇게 보이시죠
dd 다음에 슬러시 dd 유액 그 다음에 슬러시 이외에 이렇게 쌍을 이룰
수가 있겠습니다
div 회담 배 밑에 들어오면 슬러시 tiv 25t 이렇게 쌍을 이루게

그래서 태그에는 이름과 속성이 있습니다 우리는 앞으로 태그에 대해서
학생입니다
html 문서 늘 태그 로 구성되어 있으니까 우리한테 그만 배운 되요
태그를 많이 배우고 태그를 정확하게 배워서 정확하게 사용할 수 있으면
그게 html
그 작업을 할 수 있다고 할 수 있겠죠
자 태그는 기본적으로
이름과 속성이 있어요 자 좀 지켜 볼게요
지금 처음에 html 기본 하느뇨 단계에서 여러분 잘 개념을 잡으셔야
되요
사실 html 은 제가 아까 말씀드렸듯이
기능적으로 굉장히 접하게 쉬워요 학습하게 아쉬워요
근데 이 처음에 개념들을 잘 못자 보시면 굉장히 어려운 미궁에 빠질 수
있어서 제가 110 오늘 설명드릴 때 잘 정확하게 정리를 해주시면
되겠습니다 자 문제냐 며 아 태그에는 이름 강성이 돼요 잘 보시면 애한테
우리가 아주 안되었는데 애라는 태그가 여기 있어요
다음에 오게 보면 href 란게 있고 여기서 이제 끝납니다
그리고 시작 태가 있겠으며 끝나는 a 끝에 이렇게 종료 태가 있죠
그죠 자 이럴 때 a 가 이 태그의 이름이에요
이제 앵커 테 그럼 달아서 a 태그에 이름이 있고 그 다음엔 이 태그의
속성 있어요
사람이 에 서영이 가 있으면 영이의 성격이 있죠 영이는 착하다 아니면
영웅은 나쁘다 이면 엮는 달리 가 빠르다 달걀 일이라 그런 속성이 있죠
마찬가지입니다 요렇게 태그 마다 에 태그 이름 있고요 그 다음에 그 안에
속성이 있을 수가 있겠습니다
여기도 보면 태그 이름이 있고요 img 이미지를 넣어 주는 태그입니다
어 태그 이름이 있고 그 안에 src 라는 속성이 또 있을 수가 있습니다
속성은 이렇게 속성이 있으면 그 다음에 주로 큰 따옴표로 이렇게 묻고 요
떠올 쿼터를 묶고 그 안에 뭐가 들어 하냐면 속성 이니까 속성의 값이
들과 요
예를 들어서 img src 이렇게 있는데 이게 이미지를 넣어 주는 태음
다 나중에 할 겁니다
이미지를 넣어 주는 태 근데 어떤 이미지를 넣을 까요 는 속성의 결정하는
거에요 그래서 속성 어디에 있는 이미지 입니까
kr 슬러시 이미지 즈 헤더에 냉 젊 png 에 있는 이미지를 스 겁니다
그럼 이게 뭐라구요
속성 값입니다 그래서 여기서 한가지 더 플러스 하면 이미지가 이름이 있고
태그의 이름 있구요
여기서는 img 태그 다음에 속성이 있죠
src 에 다음의 또한 안보가 있다
속성 값이 존재할 수가 있겠습니다
그러면 우리는 앞으로 뭘 학습한다 태그의 이름 과
그거 태그가 갖고 있는 속성 들과 그 속성에 벨류 값들을 우리가 학습에
나가는 시간을 갖도록 하겠습니다
자 lg 댐을 버전과 편집 뜰 자 우리가 html 제가 신버전 얘길 한
번도 안했는데 우리가 앞으로 알아볼 html 버전 옵니다 결론부터 말씀
도우 해요
저희 5가 굉장히 요즘에 스마트폰 환경 내에서 는 굉장히 화두가 되고
있고 요즘은 다 거의 모든 브라우저 들이 html5 를 지원을 많이
지원을 하고 있어요
그래서 html5 루 어 수업을 진도를 나갈 계획입니다
그래서 버전에 대해서 알아보고 요단 편집툴 에 대해서도 살펴보도록 합니다
우리가 학습 r html 버전은 html5 입니다
편집의 사용되는 툴은 개인 취향에 맞게 사용함 됩니다
아까 얘기했던 버전 5조 오늘 우리가 사용하고요
오늘 많이 쓰는 이유가 그 등 우리 회사를 마셨어요
근데 오해 와서 표준 아란 얘기도 많이 나오고요
그렇죠 그리고 5가 되면서 많이
음 어떻게 보면 언어 html 언어 개가 안정 하겠다
모든 브라우저 들이 조금 이제 어 이 어떤 똑같은 사이트를
a 라는 브라우저에서 볼 때 하고 필요는 브라우저에서 볼 때 고 좀
내용이 닳는 경우가 있어요
우리가 많이 사용하는 인터넷 익스플로러 ms 에서 만든 그 다음에
구글에서 만든 크롬 브라우져 요
역으로 보면 똑같은 홈페이지 인데도 약간의 레이아웃이 자 등과 정보가 좀
다르게 보일 때가 있습니다
그런 사례들이 있어요 그래서 그런 것을 좀 막고자 표준 웹 표준 도 많이
찍혀 주고
고름 버전이 뭐냐면 html5 에요 그래서 우리는 최신버전 html5 를
학습을 하도록 하겠습니다
물론 4에 비해서 많은 태그 들이 새로 생기기도 했어요
기능들이 생긴거 있죠 태그가 생겼습니까 그래서 html 을 배우고 요
자매의 편지 툴은 html 그 코딩 틀은
뭐 그 카메 말씀드리면 여러분들 윈도우에 있는 보조 프로그램에 있는 네모
짱이죠 그 메모장 으로도 코팅이 됩니다 실제로 간단한 코딩 같은 경우에는
문서 빨리 할 해야되는데 편집 툴이 없다 그럴 때면
메모장을 이용해서 코딩을 하는 경우도 허다합니다
자 그렇게 삶을 되고 아니면 노트패드 플러스 플러스 무료 인자 요런 편집
틀을 써도 되고 아니면 뭐 자바나 c 쪽에서 어떤 분들 보면 은 이제
이클립스를 쓰는 분도 있고요
뭐 애드 과거에만 있었던거 lte 플러스 라는 프로그램을 쓸 수 있고
편집 투룸 그다지 그렇게 딱히 어떤걸 정해놓고 쓰지 않아도 무관합니다
어디 자 이쪽에 계신 분들은 드림 2부 많이 쓰였을 거구요
또 되는데 어이 html 파일 을 오면서 이 html5 의 모든 기능을
거의 완벽하게 지원을 해주는 프로그램이
비쥬얼 스튜디오 익스프레스 2014 운포 웹이라는 이런 좋은 프로그램 이
세상에 나타났어요 ms 에서 만든 거겠죠
그리고 이게 좋은거는 이것도 무료입니다
자동 완성도 가장 잘 되고요 다른 편집 틀에 의해서
웹표준에 맞게 가장 그 잘 만들어진 현존하는 현재로써 가장 잘 만들어진
프로그램이기 때문에 이걸 음
점점 사용하는 빈도가 높아지고 실무에 있는 사람들도 거의 많이 씁니다
그래서 이 툴을 가지고 학습을 강의를 진행하도록 하겠습니다
자요 툴 다운 박는 다운로드 받는 방법은요 사이트에 들어가시면 되요
그래서요 사이트에 들어가서 제 컴퓨터는 이미 설치가 되어 있구요
다운로드받는곳 까지만 한번 같이 한번 해 보고 넘어가도록 하겠습니다 자
이 사이트에 먼저 접속을 하셔야 되는데요
4 접속을 하기 위해서
자요 사이트 요거를
복사해서 웹브라우저에서 실행을 시키도록 하겠습니다
자 아까 말씀드렸듯이 비주얼스튜디오 이 익스프레스 203 퍼 외국
무료입니다 무료이기 때문에 여러분들은 다운받아서 바로 설치를 해서
사용하시면 되요
자요 주소를 통해서 브라우저를 통해서 들어 왔구요 밑에 내려오시면
비주얼스튜디오 커뮤니티 뉴스 플레이스 그래서 비쥬얼 스페이스 프레스
201 쌍 업데이트 포웰 어 허 oo 웹 일하고 있습니다
자 이걸 다운로드 받으면 되요 그래서 클릭을 하시구요
그 다음에 지금 설치 예 를 클릭합니다
자 저 같은 경우에는 이미 지금 로그인이 되어 있으니까 개정 물을 로그인
되어 생가 바로 이하 많이 나오는데요 여러분들이 개정이 없으시거나 아니면
로그인이 안된 같은 로그인 화면이 나옵니다
로그인을 유도하는 하면 가져왔고 계정이 없으신 분들은
개정 간단하게 싶은 만들 수 있어요 간단하게 만드시구요
개정 있는데 로그인이 안되 진단되어 있는 분들은 로그인만 하시면 이
화면으로 바로 볼 수가 있습니다
자 여기서 어 요거 ex 플러스 2 0 싸움 펌 웹을 다운로드를 받으시면
되요 그래서 클릭을 하면 바로 다운로드 가 진행되고 요
자 요구를 제가 강의 html 다가 한번 저장을 합니다
다운로드는 굉장히 금방 돼요
작아서
에로 왔죠 그래서 exe 실행파일 잊어요 파일을 더블 클릭만 하면 바로
비쥬얼 sc2 5202 싸움 익스프레스 202 싸움 펍에 프로그램이
설치가 됩니다
그래서 이걸 하면 데 전원 지 이미 설치가 되어 있기 때문에 복구에 제가
나온데 여러분들의 요가 다르게 설치 버튼이 보이실 거에요 설치하면 시간이
좀 걸린 걸립니다 다른 프로그램에서 좀 시간이 걸리지만 설치 하는데 뭐
그닥 그렇게 많이 걸리지도 않아요
설치 하는데 별 어려움 없이 설정해 주거나 이런 거의 없이 그냥
넘어갑니다
그래서 한번 설치를 동상을 다 보시고 나서 설치하셔도 되고요 아니면 등장
보는 와중에 지금 퍼즈 버튼을 눌러서 설치를 진행하고 나서 다시 저같이
수업을 진행 하시면 될것 같습니다
자 칫솔을 학교에 저는
4 됐구요
자 그 다음에 이제 편집 툴인 그래서 결과적으로 비주얼 스튜디오 ex
플레이스 202 싸움 퍼 입을 수 있도록 할꺼구요
자 ht 문 저의 전체인 구조를 한번 살펴보도록 하겠습니다
자 먼저 제가 프로그램 편집 툴을 실행시켜 되겠죠
저는 이미 설정 아이템의 실행을 시켰구요 저 오픈에서
예제를 한번 열어 보도록 하겠습니다
자 html 의 전체적인 구조 한번 살펴봅니다 html 은 크게
여러분이 먼저 따줄게 요렇게 보면 되요
음 자 먼저 html 거 꿍 3 거 끔 가로로 된 게 우리의 테러로
날짜와 에서 html 태그 아무도 나와요 이 문제는 html 태그 입니다
라고 해서 html5 이렇게 위아래를 전체적 간석 감쌌습니다
감싸고 나서 그 다음으로 크게 두 단락을 합니다 헤더 라는 부분 하고
헤드 라는 부분 하고
바디 라는 부분으로 나눠져 요 이 헤드는 헤드는
이 문서에 정보 타이틀 이게 뭐냐면 실제로 브라우저를 우리가 봤을 때 이
부러져 위쪽에 요기 부분에 나오는 묶고 있죠
요 문구 를 지정하는 곳이에요 html 문서와 별로 관계가 없죠 내용
아군을
지정해야 되고 안전 하게 되고 요 문구 고 자 헤드의 는 주로 어떤 설정
값들 예를 들어서 스타일시트 css 를 왁스만 될텐데 스타일 시트의
내용이 라든가 아니면 뭐 자바스크립트를 하시면 하바 스크립트의 내용이
라든가 그런 설정 환경 설정에 관한 정보가 실제 들어가는 것이 아니다
환경 설정에 관한 정보들이 헤드 태그 안에 이렇게 다 존재할 수가
있습니다
저러면 가장 중요한 과 우리가 웹 서비스 중에 그 html 문서를 만드는
이유는 정보 전달을 하기 위해서 만든 거죠
그 정보를 전달할 때 그 정보 어디 들어가면 다 이바디 안에 들어갈 수가
있겠습니다
그래서 바디 태그로 시장을 하고요 바디 태그로 끝나요
그리고 그 아내가 우리가 뭔가 전파하고자 하는 공유하고자 하는 정보를 다
타이핑을 해서 넣어주시면 그림들이 넣어도 되구요
어떤 것을 넣어 지면 그게 웹상에 쭉 널리널리 퍼져 나갈 수가 있단
얘깁니다
그래서 전체적인 문제는 어떻게 되고요 4 밑에 닭 타임이 있어요 덕
타임이 html5 에서는 아 이렇게 html5 간단하게 표현될 수가
있습니다
이 문제는 html 문서라 고여서 으 top 멘트 타입을 먼저 지정해 줄
수가 있겠습니다
아 그 다음에
으 자 그리고 실행을 해보면 이렇게 헬로 월드 라고 나옵니다
자 그럼 요거 부터 이제 기초 니까 처음부터 하나씩 하나씩 꼼꼼하게 한번
음 저랑 같이 진도를 나가도록 하겠습니다
자 사용한 방법 굉장히 쉬워요 컨트롤 & 면 새문서 대화상자가 나오는데
여기서 우리는 html 만들 거니까 html 선택하시구요
열기 예 그러면 새로운 문서가 나왔습니다
자 결과물을 화면은 제가요 로컬에서 놓으면 어깨가 화면을 분할해서 볼
수가 있어요
옆에 좀 긴 올게요
자세 있구요 자 기본적으로 파일 화일 하나 만들면 바로 이렇게 뭐가
나온당
그냥 전체 링 구조 처제가 나온다 헤드는 이 부분에 놓이고 바디는 요구로
놓이고 헤드와 바지를 전부 다 감싸고 있는 html 테크가 보일 거구요
자 그러면 밥에다가 한번 타입 합병의 쉬워요 그냥 우리가 일반 매 모자
워드 프로그램 이란 메모장에 타이트한 시 똑같이 하면 됩니다
안녕하세요 초 점입니다
자네 br 태그를 잘 안되었는데 * 태그는 뭐냐면 갱을 해주는 거에요
그래서 이렇게 하면 계획을 할 수 있습니다
다른 태그 들은 시작 태그와 / 리고 닫는 태그 있다고 종료 태그의
떠오르죠
자 br 태그는 종료 태그와 시작 터가 한 몸으로 되어 있습니다 즉
하나만 써 주면 되 그래서 이렇게 시작되고 이렇게 1 많이 되구요 아니면
얘는 시작 태그와 정말 때와 같이 따라서 끝에 이렇게 슬며시 옥저 되는데
fm 이라고 할까요 우리가 보통 fm 에 나오죠
html5 에서 그 정해놓은
원칙은 이렇게 꼭 / 를 붙여 슬러시 를 붙여 주는거 끝에 다 붙여 주는
데에 원칙입니다 하지만 이렇게 해도 상관없어요 브라우저가 다 알아서 인터
핀트를 해줘도 화면상에 출력을 해 줍니다
자 그 다음에 여기다가 갱을 했고요
그 다음엔 유다가 영어로 예치
월드 이렇게 하면 그대로 추락할 수 있고요
만약에 요걸 암 쳤다 그러면 우리 눈에는 분명 에 계획을 한 거죠
하지만 실제로 브라우저가 각 그 크롬 브라우저 됐던 그 ms 에서 만든
인터넷 익스플러 가질까 어떤 브라우저에서 실행을 해보면 갱 그 태그가
없기 때문에 실제로 갱을 하지 않습니다
그래서 갱 할 때는 이렇게 br 태그를 공도 된다는거
알아두시면 될 것 같습니다 자장을 한번 해볼게요
저장을
음 으
문서 에다가 제가
테스트 라고 하나 이렇게 폴더 만들지 여기다가 저장을 따로 하겠습니다
예 됐죠 자 다음에 저장한 다음에 실제로 브라우저에서 확인을 해봐야겠죠
실제로 제가 윈도우 탐색기 를 통해서 방금 저장해 놓은 곳으로 가면
테스트 폴드 오셨죠 테스트 폴더에 가보면 이렇게 문서 있습니다
자 예를 따라 더블클릭하면 이제 브라우저가 1 열리면서 실행이 되요 됐죠
자 근데 이 브라우저는 ms 에서 만든 인터넷 익스플로러로 저는 버전이
10일입니다
12 가장 최근 과정이죠
어 그런데 실제로 크롬 어 인터넷 익스플로러 11 얘들 쌓으세요 이제
저는 크롬 브라우저를 많이 쓸게요 왜냐하면 크롬 브라우저가 현재라는
브라우즈 중에 html5 를 거의 완벽하게 지원하는 브라우저 이기 때문에
어 저는 크롬 브라우저를 쓰겠습니다 html 그 인터넷 익스플로러 11
도 거의 많이 지원을 합니다
하지만 아주 미흡하게 남아 크롬보다 늘 쪼꼼 외 표준과 관련된 몇가지
기능들을 지원하지 못하고 있어요
그 html5 와 관련된 것을 그

댓글 0개

등록된 댓글이 없습니다.

 
Total 30건 1 페이지
썸네일
제목

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권에 문제가 있는 자료일 경우 impactlife@naver.com 으로 신고해 주시면 즉시 삭제처리하겠습니다.

Menu