실전 HTML5 & CSS3 동영상강좌 1강 Web 과 HTML > CSS

무료강좌-디비라

CSS

※ 가장 하단이 첫강좌입니다

Seoul Wiz | 실전 HTML5 & CSS3 동영상강좌 1강 Web 과 HTML

본문

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

 안녕하십니까 볼 수 있는 다 자원으로서 부터 시작을 해서 html 과

css 를 30 가 활동에서 저와 함께 학습을 진행하도록 하겠습니다
전철 시간인데요 첫 시간에는 웹과 html 이라는 타이틀로 앱 이란
무엇이고
그 다음에 html 이란 무엇이고 다음에 css 란 무엇인지 이런
언어들이 무엇인지에 대해서 먼저 살펴보고 요
그래야지 내가 어떠한 목적에서 이 언어를 배우는 g
우리가 파악을 할 수 있겠죠 그렇죠 이런 것들에 대해서 우선 학습하는
시간을 갖도록 하겠습니다
자 먼저 웹 이란 무엇인지에 대해서 살펴봅니다 우리가 이 생생해서 웹
이란 말을 무수히 많이 들어봤을 겁니다
배송을 앱 이란 거리에서 한번 정확하게 머리속에 정리를 해보는 시간을
갖도록 합니다
자 웹 이란 사전적인 의미로 거미줄이 란 뜻으로 아이티의 더는 www
일드 와일드 웹 이란 말에 줄임말로 사용이 됩니다
전세계의 컴퓨터들은 거 전쟁의 컴퓨터를 연결하여 정보공유를 하는 데
주목적이 있습니다 이게 가장 중요하겠죠
우리가 아 여러분들의 1 하루의 일과 시간 중에 컴퓨터를 화려한데 아니면
스마트폰을 활용한 다해서
웹브라우저를 통해서 어떠한 정보를 많이 보고 아니면 다시 또 전파를 하고
그런 행동 행위 를 많이 할 겁니다
그런게 전부 다 뭐예요 정보를 공유하는 거죠
정보를 공유하는 목적이 없으면 내가 굳이 일부러 사이트에 들어가서 어떠한
정보를 찾을 필요도 없고 정보를 확대 그 웹개발 표도 없고 다시 그를
재배포 할 일도 없을겁니다
지만 우리는 정보를 공유하는 시대에 살고 있기 때문에 그 정보를 공유하는
데에 주 목적이 있어요
좀 무엇을 하는 데 주목적이 있다구요 전세계의 컴퓨터를 연결하여 정보를
공유해 줘 목적이 있습니다
그리고 이렇게 연결된 상태를 네트워크에 연결되어 있다고 합니다
자 그림을 보시면 이게 누구 컴퓨터가 됐던 간에 내 컴퓨터 가 됐든 간에
옆집 컴퓨터가 됐든 간에 아니면 저 멀리 있는 다른 나라의 컴퓨터
여튼간에
그 컴퓨터 들끼리 이렇게 복잡하게 서로 다 연결이 되어 있습니다
이걸 우리가 네트워크상의 컴퓨터가 있다고 하죠
우리가 흔히 그냥 인터넷 연결 되어 있다고 하죠 그래서 이렇게 컴퓨터
키에 네트워크가 그 연결되어 있고
네트워크 상에서 월드 와이드 웹 서비스 서비스로 정보 공유를 합니다
자금 웹 이란 무엇인지 본격적으로 한번 알아보도록 합니다 웹 이란 1개
이상의 사이트가 연결되어 있는 인터넷 서비스의 한 가지 형태를 말합니다
자 여러분 여기서 이제 개념을 좀 잘 잡아 줄게
뭐 그렇다고 중요하고 된 얘기가 아니고요 우리가 이렇게 컴퓨터 갈증
연결되어 있어 요렇게 그러면 이 상태는 우리가 네트워크가 연결되어 있다고
합니다
우리가 흔한 말로 그냥 인터넷 상에 인터넷에 연결되어 있다고 하죠
이렇게 네트워크가 연결되어 있는 상태에서 수많은 써비스 들이 존재할 수가
있습니다
그냥 서비스 라고 하면 기능이라고 생각하시면 될것 같아요 간단하게
고런 무수히 많은 기능들 중에 우리가 하루 일과 중에 주로 많이 사용하는

자 불려 w&w 주셔서 우리가 음향 따뜻하다 그렇죠
이 웹 이랑 서비스가 뭐라구요
이런 네트워크 연결 되는 무주의 많은 서비스 중에 한 가지를 얘기죠
즉 요렇게 보면
네트워크 인터넷에 연결되어 있는 인터넷 서비스가 있어 요금이 안에
굉장히 많은 서비스가 존재하는데 그중에 하나가 보자
월드 알드 의 랩 이라는 녀석입니다 그리고 웹이 존재하는 이유는 정보를
공유하기 위해서 존재를 합니다
자 인터넷이란 1개 이상의 네트워크와 연결된 형태의 마음 자 그저 아
그래서 1개 이상의 네트워커 연결된 것 그것이 인턴의 시고 그 인터넷을
이용해서 무수히 많은 서비스가 존재를 하는데 그 중에 뭐가 존재한다
따뜻하
즉 렙 이란 서비스가 존재한다 그리고 웹 이란 서비스가 존재하는 이유는
뭐라구요 정보를 공유하기 위한 숱한 써비스 입니다
자 그러면 우리가 브라우저 자가 예를 들어서 hp 그 다음에 따따따
어 서울산업 치는 원의 사이트를 보면 sba 점
서울 점 kr 그 다음에 kr 인해서 이렇게 나올겁니다
그러면 이걸 우리가 도메인 스트라 그런데 요거 에 대해서 간략하게 이런
단어들이 어떤 의미를 갖고 있는지 한번 살펴보도록 합니다
자 먼저 이 앞에 매 앞에 http 라고 되어있는 요법은 부분이 뭐냐면
프로토콜이 라는 녀석입니다
자 프로토콜은 네트워크 상에서 약속한 통신기 하게요
우리가 네트워크 이 그림이죠 이 그림에서 뭔가 정보를 계속 왔다 갔다
하죠
이럴때 통신을 하는 거죠 이 통신을 할때 뭔가 약속을 하는 거예요
요 그래서 그 통신 귀 앞 제 통신 규약에 는 http 가 있고 ftp
라는게 있고 smtp 라는 것도 있고 pop 되는것 있고 dhcp 를
모두 있구요
무심한 은 그 프로토콜 통신 규약 이 집니다
우리가 주로 사용하는거라 hp 이걸 많이 사용하고요 그 다음에 액티브
left p 2 많이 사용을 합니다
자 그리고 우리가 알게 모르게 smtp 와 pop3 에 dhcp 를 많이
사용하는데 단지 인식을 인지를 못하고 있을 뿐이에요
자 s 간단하게 많게 설명을 드릴께요
hp 뭐냐면 정보를 가져오는 거에요 그냥 줘 그래서
정보가 어디 다른 인터넷상에 다른 멀리 있는 곳에 있으면 그것을 내가 그
연결을 해서 연결을 해서 정보를 가져오는 데 사용한 http 프로토콜
통신 규약 입니다
자 ftp 는 뭐냐면 파일 트랜스퍼 프로토콜의 올렸고 화일을 점성 하는
거예요
정보를 어깨가 없는데 그 정보를 화면상에 필요한 게 아니라
어쩌긴 네트워크상의 있네요 원격지에 있는 그림이라 등 거야 아니면 텍스트
문제 않는 모모 음악파일 되던가 이런거를 4일 그 화 일 자체를 내가
다운받고 싶어요
그럴때 사용하는 통신 기억입니다
smtp pop 는 뭐냐면 내일이 ma
내일 보내는거 매수시 하는 거 그래서 내 송수신 에 관련된 프로토콜이
고요
dhcp 는 뭐냐면요 앞에 흰티가 다이나믹 입니다 그래서 우리가
가정집에서 그 인터넷을 보면
센터는 이렇게 들어와요 그리고 이렇게 가정집 있습니다
즉 가정집에 들어오면 이 가정집에 내 컴퓨터의 ip 지적 할당이 되죠
그래서 세 자리로 해서 총 12개의 ip 주소가 이렇게 이렇게
이렇게 이렇게 할당됩니다 작은데
ip 주소를 우리나라의 너무 컴퓨터 많은데 이 ip 주죠 하나 하나에
컴퓨터마다 고정된 ip 주소를 다 부여 하기에는 ip 조모 잘라요
그래서 커다른
고정된 ip 주소를 하나 만들어 놓고 거기서 사설 ip 를 무수히 많이
또 이렇게 분류해 낼 수가 있습니다
그럴 때 다 이나미 내가 오늘 컴퓨터를 사용할 때 나한테 할당된 ip
주소와 아니면 컴퓨터 꿨어요 그거 대지 동네서 저녁에 다시 접속을 했어요
그때 rpg 에서 또는 내의 또는 내일 물에 접속했을 때 ip 도 가
계속 사설 ip 주소 겠죠
그 사설 ip 지도와 계속 변동이 됩니다
그렇게 하는 것 중간에 프로토콜이 1 존재를 해요
고개 뭐냐면 지 hcp 다이나 막이 다이나믹하게 에 계속해서 4일 사설
ip 를 분배해 주는 기능입니다
저래서 어쨌든 이 앞에는 통신 규약 어떠한 목적으로 1 사이트에 접속을
하느냐
를 결정할 결정할 수 있는 앞에 맨 앞에 통신 규약 이란게 붙을 수가
있습니다
우리는 주로 http 를 사용하고 있쬬 정보를 화면상에서 보고 하는
http 를 사용합니다
전함에 ip 가 있어요 네트워커 상해서 컴퓨터를 18 신조 줘
자 여기서 보면 네트워크 상에서 이렇게 컴퓨터 있는데 이 컴퓨터 마다
각각 고유한 주소가 있어야 겠죠
그걸 우리가 ip 주소라고 합니다
자 dns 란 게 있어요 dns 뭐냐면
ip 즈를 인간이 쉽게 외우도록 맵핑 한 문자를 돼요 자 무슨 얘기냐 면
많은 게 여기 있는 컴퓨터에 이렇게 ip 주소가 이렇게 이렇게 있어요
이렇게 있는데 만약에 여기가 구글 서버에 요
구글 컴퓨터에 어 그러면 내가 됐던 내 친구가 될 거 우리 엄마 아빠
그건 누구며 가이 구글 서버를 컴퓨터 접속을 하려고 해야겠죠
검색을 하려면 그러면 항상 이 구글 서버 학원이 고정아이피 영원히 불변한
것 같으니 고정아이피 즈를 출전을 외고 있어야 돼요 열어서
213 에 모일 이 7에 2일 일에 121 닫고 요런 열 두 자리 숫자를
왔다가 외국 있어야겠죠
그런데 사람이 욕 구글 사이트만 이용한 게 아니라 우리나라의 네이버도
있고 다음 도 있고 야우 도 있고 무수히 많죠
고런 그 사이트들의 서버의 ip 수를 모두 다 암기하고 있기에는
역부족 이겠죠 어 그래서 중간에 뭘 둔 자
dns 서브 한거죠
요 중간에 다가 dns 서버란 걸 두고 그 dns 서버에서 어떻게 하면
요 복잡 한 uip 주조를
영문 우리가 일상생활에서 많이 사용하는 영문 무려 바꿔줘 한번 매핑하는
거죠 그래서 이거는 모자
구글이 다 초 구글이 다 이렇게 맵핑 해준다
그러면 이렇게 맵핑을 한숨과 어 다른 다른 컴퓨터에서 원격지에 있는 구글
서버 접속할 때는 이렇게 복잡한 열 두 자리 숫자의 ip 주소를 치고
접속을 하는 게 아니라 뭘 이용한다
그냥 구글 구글 닷컴 으 그 브라우저 외치면 구글 닷컴 인 래핑
되어있는게 열 두 자리 숫자 구글 서버에 주소 겠죠 그러면 그 해당
서버로 접근이 가능하다는 얘깁니다
dns 는 굉장히 중요하겠죠 지낼 수가 없으면 사람이 아마 종이 쪽지에
다 접고 다녀 될 거에요 자 퍼트 보는 뭐냐면 포트 량이 있어요
자 이게 한국 란 뜻인데 이게 문제 알아봅니다 ip 지조가 컴퓨터를
식별할 수 있게 한다면 그저 ip 쓰는 그 컴퓨터 해당 컴퓨터에 유니크한
주소입니다
자 포트 번호는 해당 컴퓨터에 구동되고 있는 프로그램을 구할 수 있는
서버 보는데 이러죠
이렇게 서버 1 때가 있어요 2 서버 1대에 할당되어 있는 ip 주소가
있겠죠
근데 이 좋은 서버를 이 서버에 한 가지인 서비스 만 돌린다
늦어서 월드 와일드 왜 서비스 하나만 둘인데 또는 사이트 하나만 돌아가게
한다 그러면 비율 적자 자원 낭비 겠죠 그래서 예를 들어서
여기에다가 철수 홈페이지 영이 홈페이지
순자 홈페이지 여러 사람의 홈페이지 만들었습니다
아니면 또 다른 인터넷 서비스를 많이 여기서 구동을 시켜 나요
0 그리고 그 하나하나마다 포트번호 란 걸 다시 부여를 해요
즉 ip 주소로 이 서버에 접근을 한 다음에 해당 프로그램 고정 되고
있는 프로그램을 접속 헐 하기 위한 숫자 보다 포트 번호입니다
포트가 항구 를 뜻하죠 그래서 항구가 이렇게 예를 들어 있다
그러면 그 항구에 배가 아무데나 들어온게 아니라 내가 들어갈 포트 항구를
따라서 이렇게 배가 들어오겠죠
마찬가지입니다 ip 주소를 통해서 어떠한 서버 접근 한 다음에
여기서 아 무 서비스 난 막 들어간 게 아니라 내가 진정 원하는 건 내가
어떠한 정보를 원하는 곳으로 해당 이렇게 포트를 찾아서 들어갑니다
자 기본적으로 포트 번호는 몇 천 번까지 있지만 기본적으로 8 0 을
제공 해요 그래서 8 0 은 기본 포트 번호 이기 때문에 일반적으로
생략을 해도
브라우저 여러분들 sba 점 싸울 점 kr 하던가 아니면 네이버 들어갈
때 280 이라고 2명 안하죠 그는 도메인주소 까지 능력을 하죠
그래도 802 디폴트 기본 포트로 우리가 약속을 했기 때문에 브라우저에서
알아서 이거를 연결을 시켜줍니다
자 이렇게 해서 한 번 했는데 이 사이트를 한번 들어가 볼까요
뭐 들어오면 모 사이트 항의 열린 것 뿐이겠죠
그래서 제가 지금 브라우저를 한 여러 봤구요
여기자가
자의 앞에 http 프로토콜을 넣어야 되는데 프로토콜 드 안넣어도 되요
안 너도 기본적으로 브라우저에서 기본 프로토콜을 http 로 세팅을 해
왔습니다
그래서 그냥 우리는 sba 점 seoul 정 kr
이렇게 하고 포트 문을 닫는다 넣어도 되고 안넣어도 됩니다 안 너도
기본적인 포트 번호 8 0 포트를 지원을 해주고 있습니다 누가 브라우저
사는 거예요 자 치며 는 이렇게 들어가겠죠 hp 자동적으로 붓고 그
다음에 kr 드 요 사이에 모아 생각 된거 다 포트가 뭐 생태 거다
이런 일련의 과정 내가 브라우저의
sba 점 서울 점 kr 을 쳤어요
그러면 얘를 누가
자아 이 피즈 바꿔줘요 dns 서버 라는게 바깥 이 줘 바꿔서 해당 고위
가 유니크한 ip 주소로 서버 로 가고 그 서버에서 다시 포트를 찾아서
요런 웹서비스 라는게 실행이 될 수가 있겠습니다
자 그러면 이제 본격적으로 이 중에서 우리가 이제 배우게 될 30강 을
통해서 학습하게 될 html 단계 무엇인지 살펴보도록 하겠습니다
html 이란 하이퍼텍스트 마크업 랭귀지 래요
말이 굉장히 길죠 되어서 가장 중요한 건 뭐냐면 하이퍼텍스트 특히 중요한
건 하이퍼 라는 것만 여러분이
머릿속에 알고 계심 될 것 같습니다
자 하이퍼텍스트 마크업 랭귀지 약자로 웬 문서를 기술 하는 언어입니다
맨 문서를 표현하기 위한 태 글들로 구성되어 있습니다 예를 들어서
여기에 방금 우리가 접속을 했던 sb 에 2.4 월정 kr 요 홈페이지

이 홈페이지를 만들게 눈과 만들었죠 이 만들기 위한 언어가 프로그램이죠
컴퓨터 니까 프로그램 언어가 필요할 겁니다
그 언어 중에 html 문서
웹문서 m 문서를 만들어야 되는데 이 웹문서를 만들기 위한 언어가 보다
화장한 기분에 여러 가지 언어가 사용되어 그런데 가장 기본적으로 바탕 했
꼭 있어야 될 수 있어야 되는 저 그 언어가 뭐냐면 바로 html 입니다
근데 제가 아까 여기서 하이퍼 오후에 가면 추면 했죠
이게 뭐냐면 하이퍼 점프 점프 점프 점프 어종과 계속 링크도 가능 거에요
이게 무슨 얘기냐 하면 아까
어 여기 부러져 있죠 프로세서 내가 어떠한 모습을 마우스를 갖다대고 콩
하고 클릭하면 링크 걸린 곳으로 이렇게 팩의 넘어가죠
이걸 우리가 하이퍼링크 라고 합니다 그래서 내가 원하는대로 정보를 계속
찾아 나갈 수 있는 거예요 이게 html 문서에 가장 큰 특징입니다
그래서 이렇게 링크 걸려있는 곳을 이용해서 여러 페이지를 다음 묶어
났어요
이런걸 우리가 html 이라고 합니다
자 판금 같은 경우에 보면 제가 여기서 사이트에서 우클릭을 해서 음 소스
보기 한번 해볼게요 그러면 이런 소스가 나와요
이런 프로그램 그 html 언어를 인터 프린터 끼가 막 해석을 해요
해석을 해서 화면상의 요렇게 예쁘게 그림과 글자 때로는
동영상이나 음악 또 출력을 해 줍니다
그러면 우리가 웹사이트를 통해서 정보를 얻어낼 수가 있겠죠
어 그래서 우리가 그러면 이제 우리가 그 한 30강 통해서 배우게 될
내용은 보다
요 html 언어 특히 html 언어 중에
html 언어의 생김새는 이렇게 보면 t42 설명 될 텐데요
요렇게 꺾은 가루로 되어 있어요 꺽쇠 가로되 있어요
이 껍질 가루 아래는 요부분 거고요 태그 라고 합니다
요 태그 들이 꽤 많이 있어요 태그 들을 하나씩 배워나가는 시간이 바로
html 을 학습하는 시간 이구요
다음에 이렇게 html5 기본 골격을 만들어 놓고 이 html 을 만들어
놓은 기본 골격을 예쁘게 레이아웃을 잡는다 아니면 어떤 색깔을 변경한다
이런 약간의 디자인적인 요소를 가미해 줄 수가 있습니다
그러면 그가 미를 해주는 작업을 보다 css 작업 이라 합니다 아디 가서
다시 설명을 됩니다
어쨌든 우리가 배울 것은 이런거에 요요 러너
하이퍼텍스트 언어를 우리가 학습을 하도록 하도록 하겠습니다
자 css 도 이제 우리가 같이 알아볼 텐데 css 는 무엇인지
알아봅니다
자 캐스케이드 잉 스타일시트 래요 적 캐스케이드 잉 스타일 여기서 가장
명을 스타일 요 말이 가장 중요할 것 같습니다
자 사람들 보면 은 스타일이 있죠 멋있는 사람들 뭐 그 다음에
쫑 또 한사람 날씬한 사람 아니면 얼굴에 하얀 사랑 뭐 여러가지 스타일의
사람이 있죠 마찬가지에요
어캐 스켈 딩 스타일시트 약자로 html 문서를 디자인적으로 예쁘게
만들어 정보 전달을 좀 더 효율적으로 하기 위한 위에 만들어진 문서입니다
html 을 정보를 가지고 있고 css 는 화면상에 레이아웃 등을 컨트롤
안 하는 문서 라고 생각하면 됩니다
자 무슨 얘기 하면 html 정보를 갖고 있어요
서울 산업 진흥을 4 를 클릭을 하면 어디로 간다 예 클릭하면 어디로
가는데 클릭하면 어디로 한다
요런 전체적인 그 정보를 갖고 있고 실질적으로 여기에 배경 이미지가
이렇게 배경이미지 5기 있죠
배경 이미지가 어떻게 구성이 되어 있다
사업안내 사업 신청 고객 센터 요런 메뉴들은 어떠한 형태로
여기서부터 얼만큼 떨어져서 얘네들 사이에 어떤 구조로 요렇게 수평을 딱
맞추면서 나열이 되어 있는지 아니면 여기에 이렇게 검색을 해요
검색을 할 때 요런 아이콘 아니면 검색을 중 하나죠 이렇게 색깔 나누고
있죠
요런 디자인적인 요소 대 어 요런 것들을 다 좌 관계는 보다 css 요
문서가 하는 일입니다
즉 css 문서가 없어도 홈페이지는 만들어질 수 있고 웹사이트는 구동이
되고 우리는 그걸 통해서 정보를 얻어낼 수가 있습니다
하지만 여기서 있죠 정보 현자를 좀 더 효율적으로 그죠
이 사업안내 사업 신청곡 & 이런 맨 들이 흐트러져 있고 엉망진창이 돼
있으면 우리가 이 사이트에 들어가 져 효율적으로 정보를 찾지 못하겠죠
그래서 조금 더 예쁘게 정보를 좀더 쉽게 전파를 하기 위해서 이렇게
심플하면서도 아주 효율적으로 배치를 해요
207 하는게 배치를 담장 한 녀석의 누구다 css 문서라고 여러분이
생각을 하시면 될 것입니다
자 여기 보시면 폰트의 색상 아 크기 이런 폰트 색상이나 크기 아니면
어 전체적인 내어 저 내어 지 어디냐면 컨 이미지가 바탕에 깔려 있고
상단의 메인 네비게이션 내일 메뉴가 있고 하단에 부터 갈 게 있죠
이런 전체적인 구조를 만드는 것도 다 css 갑니다
css 는 어 지금 살펴 보신 대로 정보를 어떤 정보를 전달하거나 정보를
갖고 있지 않아요
그 정부는 누 갖고 있다 html 문서 갖고 있어요 단지 css 는 그
정보를 예쁘게 한번 포장해주는 거에요

댓글 0개

등록된 댓글이 없습니다.

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

Menu