Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 30강 웹문서 제작 팁
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 볼수 입니다 자 오늘 html css 마지막 시간 30강 웬
문서 제작 팁에 대해서 잠깐 살펴보고 어 강의를 마무리 하도록 하겠습니다자 오늘 알아볼 내용은 여러분들이 1 강사 부터 시작을 해서 주 6
작업을 해오는 과정에
여러가지 html5 와 css 에 태그와 속성 속성 값 뜰에 대해서
우리가 좀 살펴 봤습니다
그런 요소들을 가지고 실제로 이제 코딩을 해요
제작을 웹문서 제작을 하는데 웬 문서 제작을 할때 몰라도 작업을 하는데
지장이 없지만
웬 문서를 만들어 낼 수 있지만 그렇게 작업을 할 때 조금씩 좀 cut
질적인 요소로 조건이 좀 c 도움을 주는 사이트와 아니면 그 도구들
툴들이 있습니다
그런 것들을 알면은 조금 더 작업의 효율성을 극대화시킬 수 있는 내용들이
있어요
그래서 그런 것들을 좀 잠깐 살펴보고 넘어가도록 하겠습니다
자 먼저
웹문서 자체 웹문서를 제작하면서 반드시 알아야 내용은 아니지만 알고
있으면 손발이 편해지는 그저 손발이 편해지는 팁들을 해서 살펴보도록
합니다
자 첫번째 편지 트리 인데요 비주얼 스튜디오 ex 플레이스 2000장
우리가 편집 할 때 이것을 많이 썼죠
제가 처음에 비주얼 스튜디오 익스프레스 203 퍼 외부를 설명 드릴 때
어 사실 html 이나 css 를 코딩하는 것은 가장 원초적인 것은 pc
상에 설치되어 있는 기본적으로 설치되어있는
메모장을 이용해 돋아 코딩이 됩니다
그리고 실제적으로 간단 간단하게 급한 경우에는 메모장을
어 실무에서도 많이 사용이 되고 있습니다 그래서 매물 짱 사용 빈도가
굉장히 높아요 예로
작은데 그런것 보다는 좀 자동완성기능 이라든가 여러가지 기능들이
복합적으로 있는 ide 툴 우리가 많이 씁니다
그중에서 html5 에 기능을 거의 완벽하게 다 지원을 해주는 툴이 바로
비주얼 스튜디오 익스프레스 202 싸움 펍에 빕니다
그래서 여기 네 그 주제를 찾아 들어가시면 여러분들이
다운을 받을수가 이 따르죠 그 ms 에 개정 많이 쓰시면 계정이 없으면
만들면 되겠죠
개장 맞으면 로그인을 통해서 우리가 언제든지 다운을 받을 수가 있겠습니다
자의 하는 걸까요 자 이걸 그대로 한번 제어 카 페 를 해서
실제 웹브라우저에서 한번 열어 보도록 할게요
그러면
예 이런 화면이 나오고요 여기서
어
어디 있을까요
여기 줘 얘를 클릭을 해서 여러분이 지금 설치를 눌러서 로그인이 되어
있으면 바로 다운로드를 진행 될 거구요 로그인이 안되 있으면 로그인
계정으로 로그인을 유도하는 페이지가 나올 겁니다
여기서 여러분이 다운을 받은 다음에 진행을 해주시면 되겠습니다
요즘은 거의 표정 하겠어요 거의 다 이 툴을 씁니다
그런데 이 툴이 조금 자기는 낯설 다 하시는 분들은 노트패드 라는 무료
입니다 이것도 이 툴을 사용해도 상관없습니다
그래서 이거는 검색엔진은 등을 통해서 여러분들이 쉽게 그 차릴 수가
있고요
제가 제가 추면
바로 이렇게 이 겁니다 그래서 이거를 다운로드 와서 프리웨어 줘 그래서
다운로드 에서 바로 사용을 하셔서 반갑습니다 이 툴도 비주얼스튜디오
보다는 좀 떨어지지만
여러 가지 꼭 html 니더라도 자바스크립트 했던 아니면 심지어는
잡아
아니면 다른 언어를 선 그 하드를 서버 사이드 스크립트 언어를
어 그 편집할 때도 많이 쓰이고 기본적으로 pc 에 설치되어 있으면
유용하게 사용될 수 있는 툴입니다
자 다음에 과거에만 있었던거 요즘은 사용빈도가 만들었지만 과거에는 무진장
많이 쌓였던 에디트플러스 란 곳도 있고요 그 다음에 디자인 하신 분들이
디자이너가 많이 쓰는 드림위버 라고 있는데 다 유료 줘 그래서 여러분은
크게 비싸진 않지만 그래도 이러니까 여러분이 사용하실 분들은 사용하시구요
유를 다 보니까 버전 업데이트도 자주 되고 여러가지 복합적인 기능들이
있습니다 드린 것 같은 경우에는 그래서 이런 것을 사용하실 여건이 되시면
사용을 하셔도 상관이 없겠습니다
자 그 다음에 두 번째 하위 버전 브라우저 테스트 인데요
우리가 지금 익스플로러 같은거는 10 일이고 뭐 그럼 같은 검색 버전
굉장히 많이 올라갔죠
버전을 그 제조사에서 브라우저를 만드는 제조자 에서 계속 버전업을 하는
이유가 있겠죠
가급적 html5 와 css3 의 가장 표준화된 기능들을 부락에서 지원을
해주기 위해서 꾸밈없이 브라우저를 개선을 해 나가고 있습니다
그래서 근데 내 갖고 내는 나는 뭐 예를 들어서 인터넷 익스플로러 11
번역 작업을 했어요 근데 사용자가 12 관련 씻고 국악 갈릴 수도 있고
과거의 맛있었던 6인 아파 헷갈릴 수도 있겠죠
그런 환경에서는 어떻게 내가 지금 코딩하고 있는게 어떻게 보여 지는지
확인을 하는 툴이 에요 그래서
자 이것도 보시면 이 url 주소로 가면 이 툴을
어 쉽게 다운로드를 하실 수가 있겠습니다
자 그래서 여기 다운로 나오죠 다운로드를 하면 그냥 학문은 문제 없이
바로 다운로드 가 됩니다
다운로드를 한 다음에 실행을 해보면
자요 그래서 제가 한번 실행을 해 볼게요
자 그럼 화면이 나오구요 사용 방법은 굉장히 쉬워요
인터넷 익스플로 5.5 5367 팔고 11 이건 뭐 이제 여러가지가 있죠
그래서 하는
내가 만드는 문서를 11에서 보고싶다 금 12일 탭을 열어 놓고 요
예를 들어서 뭐 내가 만든 물로 맨 문서를 서브 우리는 그 조금 서버
추서 를 입력해주시면 되요
네이버 한번 들어볼까요 그러면 네이버 화면에서는 11 버전의 이렇게
보인다
근데 구하면 어떻게 보이는지 한번 보고싶어요 또 그러면 9 탭을 열어
놓고 요
9 게다가 또 내 서버에 주소를 입력을 해주시면 되겠습니다
요금 시간이 걸리네요 이렇게 되죠 자 만약에 8 버전 굉장히 아래 뻐 전
한번 해볼게요 8 버전에서 나는 여기서 이렇게 하고 싶다
그냥 8 버전 탭을 열어 놓고 하면 뭔가 오르간 하죠 그래서 8 버전은
뭔가 조금 문제가 있단 얘기 했죠
물론 로 코레 잇는거 를 확인도 가능해요 그래서 로컬에 있는 거 예를
들어서
음
자 비쥬얼 스튜디오 해놓고 야
아무꺼나 예제를 하나 꺼내서
자 요거를 갔다가 잔 8 버전에서 한번 보고싶어요 그러면 8 버전 탭을
넣고 컨트롤러에서 부처럼 되겠죠
즉 그러면 지원이 안되네요 그쵸
분명히 저 11 버전에서는 됐죠
적은데 8 버전 뭔가 문제가 있는지 지원이 못해주고 있습니다
이렇게 확인을 해보는 것 브라우저 버전에 타서 확인해 보는 툴이 바로
음
ie 테스터 터트린다 인터넷 익스플로러 툴 여러분이 알고 계시면 많은
도움이 되겠죠
잘하네 우리가 웹문서를 잡아다 보면 더미 텍스트가 많이 필요해요 가상의
텍스트 처음에 전체적인 레이아웃을 만드는 데 거기다가 텍스트를 많이
입력을 해 놓고 그냥 뭐 자판을 쫙 긁어 와서 그럴 수도 있고 하셔야
하죠 자 근데요 사이트에 들어가면 많은 글들이 있어요
준비되어 있는 많은 글들이 있습니다
그래서 실제로 실무에서 많이 사용되는 사이트입니다
여기 글들 있죠 자 여기에 특징은 그를 여러분들이 쭉 카피를 해서 내가
만들고 있는 곳에다가 붙여 넣을 됐고요
아니면 여기 보면 각 나라 언어별로 나누는 중동 지방의 언어가 필요해요
그냥 중동 지방 템을 클릭하시면 이런 언어가 나오고요
언어별로 m 만한 나라의 언어들은 다 여기 있습니다
그래서 여러분들이 여기에 있는 것을 더미 텍스트 를 이용해서 여러분들이
제작 원문 저의
어 텍스를 가장의 테스트를 많이 사용하실 수가 있겠습니다
자 그 다음에 네번째 다니면 1 텐데요 굉장히 유용해 있어요 예를 들어서
단위가 픽셀이 코 e&m 이 거 퍼진 태지의 꼭 포인트가 있죠
얜 애플과의 연관관계를 보는 겁니다
그래서 사이트에 들어가보면
자 이렇게 나오죠 기본적으로 내가 지금 쓰는 브라우저는 16 픽셀이 기본
이래요 그리고 이걸 em 으로 따지면 필 이 햄 이래요
하퍼 전 테지 100% 52p 레어 포인트 따지면 자 여기서 이렇게 쓸
수 있어요 이 표를 보고 이렇게 변경할 수 있는데 잘 이루어져서 나는
32 픽셀의 요로 컨버터 를 누르면 이에 무릎 엿 em 이라 나오죠
자 2 액트 픽셀은 여기다가 만약에 oem 을 적었어요 그러면 픽셀로
8c 픽셀이 다 그래서 컨버터 단위를 컨버터 에서 우리가 볼 수 있는
그런 툴인 다 굉장히 유용하게 많이 쓰이는 드리니까 알아두시면 작업하는데
많이 도움이 돼 많은 도움을 받을 수가 있겠습니다
다음에 전체적인 레이아웃을 제작할 때 가상의 이미지가 또 있겠죠
그죠 우리가
어떠한 웹문서를 만들어요 그러면
헤더 도 만들고 네비게이션 바드 만들고
콘텐츠 섹션 부분을 나눠서 여기에는 어떠한 이미지가 이렇게 들어가겠다
푸터 에도 어떠한 이미지가 들어가고 그리게 들어가겠다
헤더의 도 로고가 이렇게 들어갈 자리가 있겠다 이런 부분을
어 지금까지 제가 예제 할 때는 보도 박스를 쳤고 이렇게 일단 그 가상의
선을 가장 이상니라 보도 라인을 청학 9
가시 눈으로 확인할 수 있게 일단 실제 이미지가 들어가지 않더라도 확인할
수 있게 어느정도 면적을 차지하는 지 볼 수 있게 작업을 많이 했죠
작은데 여기에 이 두 메인주 절을 사용하면 가상의 이미지를 바로 넣을
수가 있어요
자문 얘기하면 잘 어
차좀 탔구요
자의 이곳으로 갈게요 이것으로 가조
자 역사서
자 이렇게 입력을 합니다 근데 나는 작업을 만약에 할 때 200의 100
픽셀 짜리 이미지를 원해요
그럼 여자가 입에 그 다음에 09
20음에 곱하기 바흐 다음에 백을 인형을 해주시면 이런 이미지가 바로
나온단 얘기에요 그러면 실제적으로 내가 문제를 만들 때 예를 들어서 한번
해볼게요
html 문서를 만들어요 자 여기다가
div 태그 안에 만들었고요 d i've
이렇게 만들었습니다
자의 저장을 한번 하고 갈까요
에다가 스타일을 한번 정리해볼게요
적어서 간단하게 그냥 이름 하나씩 넣어 볼게요
앱이라고 해주고요 이거를
아이템 이라고 하겠습니다
이 상태에서 이미지 태그 넣어 주겠습니다
src 는 자 이미지가 일단은 어떻게 처음에 래요 접근 이미지가 없겠죠
자 그러면 어 편지 포트 자 이미지가 이미지 편집 틀을 위해서 가상의
이미지를 하나 만들어놓고 넣어줘도 되는데
일주일에 하나씩 이미지를 다 가장 이미지 만들기는 좀 번거롭게 쬲 그래서
어떻게 하냐면
그래서 아이템
알 테
자 이들을 200 픽셀을 주겠다 그 다음에
높이를 300 픽셀을 주겠다
이렇게 설정해 놨습니다 그 다음에 여기다가 그러면 200 의 3 백작이
들어가는 거죠 그래서 여기다 어떻게 한다.구요
아까 사이트에 가서 200의 300% 이렇게 이미지를 만듭니다 그리고
이걸 갖다가
그대로 양 붙여 넣으면 되요 그죠 자 브라우저에서 한번 확인해 봅니다
그러면
pc 와 가짜 드렸네요
이렇게 내가 만들어 놓은 거에 이미지가 실제로 없죠 없지만 이 사이트를
통해서 200의 300 이미지를 가장의 이미지를 이렇게 만들어놓고 수가
있단 얘깁니다
그래서 여러분들이 제작을 할 때 맨 문서를 만들 때 욧 url 주저말고
있으면 2d 에다가 이미지의 사이즈를 가장의 이미지 사이즈를 넣어서
언제든지 레이어를 과장으로 접어 나갈 수가 있겠습니다
자 그 다음에 6번째 한번 살펴 볼게요 자 월드와이드웹 ll 모유 명
하 죠 그래서 이 사이트에 감으면 실제로
왜 표준과 관련된 많은 정보들을 얻어 낼 수가 있어요 우리가
이 사이트에 가면 표준 왜 우리가 첫 근성과 웹 접근성과 왜 표준 행하는
내용들 굉장히 중요할 c 되고 있죠 갈수록 그래서 그런 내용들을 우리가
출시로 많이 얻을 수 있구요
여기에는 또
그 다양한 그 최근뉴스 드 최근동향 들을 우리가 많이 살펴 볼 수가
있습니다 그래서 어 여러분들이 자주 방문을 하시는 것도 시간 날때마다
방문하신 것도 많은 도움이 될 수 가 있겠습니다
잠의 다양한 디바이스 환경에 는 미디어 쿼리 자유 뭐냐면 다양한 환경
우리가 계속 갈수록 예전에는 pc 환경에서만
맨 문서를 만들어 냈지만 요즘은 스마트폰과 태블릿이 나오면서 굉장히 많은
미디어 환경에서 제작이 되고 있습니다
여기 하면 많은 미디어 미디어 쿼리를 이용해서 많은 레이어 어떻게 작업이
되어 있는지 많은 것을 볼수가 여러분이 참고해 참고 할 수가 있겠습니다
자 다음의 웹 접근성 굉장히 중요시 되고 있는 거죠 갈수록 그래서 웹
접근성과 관련된
왜 접근성의 입각해서 홈페이지가 만들어 된다 웹사이트 만들어진다 그런
공고 사항에 대한 내용들이
있는 사이트
wah 사이트 이곳에 가면
여러분들이 한글 2자 한글이 테 져 큰 우리나라에서
그 접근성이 와 관련된 많은 교육 뜰과 커리큘럼 들이 준비되어 있습니다
여기서 여러분들이 많은 것을 정보를 얻어낼 수도 있겠습니다
그 다음에 또 w3 스쿨 여기는 실제로 튜토리얼을 많이 얻을 수 있는데요
html 과 관련된 웹문서 제작과 관련된 많은 툴이 울 들을 여기서
여러분들이 얻어낼 수가 있어요
실제 코드를 다 제공해주고 있어요 그래서 여기 있는 코드는 그대로다
여러분들이 사용해도 돼요 돼요
그래서 여러분들이 여기서 뭐 다른 서버 사이드 스크립트 많이 있습니다
sql 에 php asp 담배 또 있구요 여러가지 이용해서 여러분들이
제이쿼리 라든가 자바스크립트 도 있죠
이런걸 이용해서 여러분들이 여기서 많은 것을 얻어낼 수가 있겠습니다
자 다음에 책상 전거 이것도 굉장히 유용하게 쓰면 되요 우리가
특히 개발자 입장에서
어떤 문서를 만들다 보면 아까 이미지가 가상의 이미지가 필요하듯이 색깔
정복과 16진수 의 정보 값이 많이 필요로 할 때가 있어요
그래서 여기서 컬러 피커 형제를 보면서 직접 내가 컬러를 찍어요 그러면
그 찍음 칼라의 16진수 값이 나오죠
이 값을 가지고 우리가 사이트 내에서 바로 바로 적용을 하면서 사용할
수가 있겠습니다
어 잘해서 요런게 야한 몇 가지 1 10가지 정도를 알아 봤는데요 정도
사항에 대해서는 내가 왜 부문 자를 만드는 퍼블리셔 다 아니면 개발자다
아니면 디자이너다 의 상관없이 어느 정도 꼭 알고 있으면 좋은 사이트들
2 는 좋은 툴 드리고요
이거 말고도 음 다른 우주 1
우리가 소위 말하는 고주 분들이 의 고수 라고 하는 사람들이 만들어 놓은
갤러리아 등 가 1 외국의 많은 역동적인 사이트 대비 에 리뷰를 해 주는
사이트 들도 꽤 많이 있습니다 그런 것을 처음에는 무조건 많이 봐야
되겠죠 많이 보고 거기 있는 것을 많이 따라 하다보면 자기만의 노하우가
생기고 그것이 나중에 어떻게 되요 쌓이고 쌓여서
고수의 길로 가는 거겠죠 자기만의 노하우가 생겨서 그래서 꾸준히
여러분들이 그 사이트를 많이 방문을 해서
웹사이트를 많이 서핑 을 해서 많은 정보를 얻어 다 하시면 되겠습니다
자 오늘까지 해서 총 html 과 css 를 30강 을 통해서 여러분들과
함께 학생을 했는데
html 과 css 는 사실 언어 중에 스크립터 나중에 굉장히 쉽게
여러분이 우리가 접할 수가 있습니다
하지만 html 과 css 가 계속 발전을 하고 있죠
그리고 왜 표준 이라든가 왜 접근성이 굉장히 크게 부각되고 있는 우리가
시대에 살고 있습니다
그렇기 때문에 아주 꼼꼼함이 필요해요 꼼꼼하게 작업을 해 주시고 꼼꼼하게
코딩을 전체적인 레이아웃이 1과 세부적인 내역을 잡아 주셔야지
수많은 계속해서 나오고 있는 모든 디바이스 환경에 맞게 내가 만든 외 문
설과 정확하게 정보 전달의 목적의 입각해서 만들어질 수가 있겠죠
그래서 여러분들이 꼼꼼함을 많이 키우시고 요 방금 어 제가 아까
말씀드렸듯이
처음 접하시는 분들은 고수 라고 하는 사람들이 만들어온 사이트를 많이 그
방문해서 많이 보고 일단 느껴야 됩니다
이렇게 해서 그런건 어떻게 만들어지는지 거 많은 레퍼런스 문서 나 아니면
레퍼런스 사이트를 통해서 학습을 하시구요
실제로 내가 마니또 코딩을 해 봐야겠죠 그거 그렇게 하면서 자기만의
노하우를 만들어 나가시면 되겠습니다 자 한 달 동안 30강 을 하면서
저와 같이 어 하면서 치고 많으셨구요 앞으로도 꾸준히 꾸준히
목표하는 바가 바에 카페에서 학습을 진행해 주시면 되겠습니다 자
감사합니다 여기서 마치도록 할게요
댓글 0개
등록된 댓글이 없습니다.