Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 5강 HTML기본-IV
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불 쓰인다 자 오늘 html cs 강의 다섯번째 5가 입니다
html 기본 네 번째 강의를 진행하도록 하겠습니다자 오늘 알아볼 내용은 제가 지난 시간에 잠깐 설명을 붙여 4강
마지막부분에 나오는 div 태그 레이아웃을 잡는 굉장히 굉장히 중요한
태그 라고 했습니다
그래서 div 테가 왜 레이아웃을 이루는데 중요한 태그 냐 면
제가 지난 시간이 까지 지난 시간에 우리 잠깐 살펴 볼 턴테이블 에 이어
없이 기억 나실 겁니다
그래서 테이블 레이아웃을 우리가 살펴볼 때 테이블 레이아웃을 바치고
과거에는 홈 페이지의 레이아웃을 많이 자 용 했지만 요즘에는 근래들어
드럼 거의 사용된 도 거의 없어졌다고 있죠
테이블 에 어스의 tr 태그와 다음에 td 행과 열을 걷고 있는 tr 과
t 를 가지고 우리가 작업을 많이 했습니다
근데 이게 많은 1 개선과 많은 문제점을 도출 했고요
그러면 이걸 대체를 할 수 있는 무엇인가가 존재 해야 겠죠 그게 바로
div 태그 입니다 그래서 div 태그를 가지고 우리가 왜 빼 그 관련된
그 기사나 이런거에 보면 왜 표준 이란 말을 경계 많이 들어봤을 거에요
왬 2.0 웹 표준 이런 말을 많이 들어봤을 겁니다 그게 테이블로 되어
있는 코딩을 점점점 드러내고 여름으로 div 태그로 만드는 거 그게 바로
웹표준 택 코딩의 기분이 기초 에요 그래서 dirt 가 중요한 거고 그
중요하다고 말씀을 드렸던 거구요
그래서 오늘은 div 태그를 이용한 전체적인 매여 점거 굉장히 간단하게
만 한번 살펴보도록 하구요
다음에 요즘에 또 들어와서 시맨틱 택을 쉬면 탭을 이용한 레이어 저랑 그
방법이 하나의
뭐 추세라 올 거에요 유행할 거에요 그런 방법이 있습니다
그래서 고런 방법이 시멘트계 그 을 이용한 방법이 어떤 방법인지 에
대해서도 살펴보는 시간을 갖도록 하겠습니다
잠언 자 div 를 이용한 레이아웃입니다
자 먼저 이런 홈페이지가 있다고 해요 아지 우리가 css 나 이런 걸
배우지 않기 때문에 굉장히 해 간단하고 완전히 그냥 긍 말 중요 되겠죠
자 요런 레이아웃을 만들 때 div 태그를 과거에는 테이블을 많았지만
요즘에는 지혜의 밑에 글을 쓴 덥죠
그럼 제어부 책을 가지고 어떻게 하는지 div 태그에 기본적인 속성은
어떻게 블록 타입 이라고 했습니다
그래서 그거를 머리속에 잘 생각하시고 요 보시면
없 아 디아 시장에서 먼저 dib 가 여기 한 덩어리 있어요 시작돼 그냥
태그
또 drv 태그가 한덩어리가 또 있구요 또 div 가 한 덩어리
디아의 가 또한 덩어리 총에서 내 덩어리가 있습니다
그리고 덩어리 어떻게 된 거냐면 요렇게 한 덩어리의 두 덩어리 쇠
덩어리 내 정어리 이렇게 나는 겁니다
그래서 우리가 홈페이지를 보면
자 어떤 사이트를 예를 들어 들어가 이렇게
그러면 대부분 윗쪽에 뭔가 홈페이지에 가장 중요한 내용 20 눈
들어갑니다
그래서 오늘 우리가 div 패드 라고 애들하고 이렇게 한 덩어리를 알아도
이 헤더에 어떠한 내용을 있구요
나의 홈 페이지의 이름을 된다던가 회사의 로고를 노 초 그런 부분을 놓고
그 다음에 내려오는 부분 여기는 뭐냐면 고추로 메뉴 불러요
자 방금 살펴 봤던거 에도 헤더가 있겠고 그 다음의 메뉴가 있죠
내일 카 페 블로그 지식인 쇼핑 스케이트도 메뉴들이 들어가죠
회사로 치면 회사소개 뭐 sb
헬스 비서울 산업 진흥원 홈페이지를 보면 이것도 마찬가지 이거는 헤더가
있구요
헤드 안에 같이 이렇게 메뉴까지 매일 매일 같이 들어 있는 형태죠
자 이렇게 메뉴가 들어가는 형태가 하나 있구요 덩어리가 있고 그
다음이 이제
정보에요 정보 저 정보가 이렇게 들어갑니다 여기는 이제 내용들
그 홈페이지 주요 내용들이 들어 가겠죠 다음에 맨 마지막에 요 부분이죠
부분은 뭐 들어가면 주로 카피라이터 나
회사로고 라든가 회사의 위치라 능가 회사의 전압 어촌 와 등 그런
인포메이션 정보들이 들어 갈 수 있겠습니다 그래서 주로 홈페이지 특별한
홈페이지를 제외하고는 거의 모든 페이지에 구조가 크게 나누면 이렇게
나눠져 요 어떻게 헤더와 그 다음에 메뉴와
그림 손이 너무 분 나왔네요
메뉴와 뭐죠
메뉴와 그 다음에 뭐 어 그 다음에 본문 내용 즉 본문의 많은 내용들이
좋아하겠죠 그 다음에 포터 라고 해 왔고 아랫부분에 회사의 인포메이션
같은 정보들이 들어 갈 수가 있습니다
이런 구조로 div 도로 div 코드를 이용해서 전체적인 레이아웃을 잡아
나갑니다
자 이건 실제 코드를 가지고 한번 살펴보도록 할게요
자의 거죠 브라우저에서 확인을 해보면
되겠죠 아 요게 첫 번째 덩어리 두번째 덩어리 세번째 덩어리 네번째
덩어리 워 이루어집니다
자 html 페이지를 만들어 놓고요 험 번 보도록 하겠습니다
자 먼저 헤더에 존재하는 div 태그 1 동안에만 들어갈게요
크게 크게 만들어 냅니다 하단 메뉴에 들어가 알려서 그 다음에 본문
그 다음에 뭐예요 포터의 들어갈 인포메이션 부분
그래서 여기다 많은 자 h1 태그를 한번 이용해서
마이
페이지가 있을까요 예
자 그 다음에 9분 좀 9분하기 위해서 hr 태그 를 하나 넣어 줄게요
자 한동안 끝났구요 두번째 정어리 는 메뉴 니까 메뉴는 리스트 타입으로
유에 태그를 이용하도록 할게요
참여 다가와 의미인 6
원래는 하이퍼링크 드 걸고 그림에서 들어 고막 들어있죠 이제 지금은 di
밑에글 이용해서 전체적인 레이어 구조만 보는 거니까 간단하게 최대한
간단하게 한번 만들어 보도록 하겠습니다
자 그 다음에 여기에 들어갈게 이제 본문 내용이 들어가야 겠죠 그래서
h1 태그를 이용해서
빠리 즈 html5
제목이 들어가고 문단은 p 태그로 만약 내 짱 에서 html5
에브이 스 그
풀 터 자 여기서 가 이제 진단을 하는데
xx
회사
1,000 c
모임 + 전화번호 좋아할 수 있고요 이런식으로 해서 전체적인 레이아웃을
만들 수가 있겠습니다
각각 마다 hr 태그 를 하나씩 넣어주면 9분이 되어 보일 수가 있겠죠
자 지금은 여러분들이 전체적인 제가 펴냄 안됐기 때문에
저게 뭐야 저게 어떻게 레이 없이 되지 하지만 이렇게 기본적으로 이렇게
나눈다는 거요 개념 할 때 잡아주세요
헤더 부근 메뉴 부분 다음에 본문 부분 잠 애프터 아래쪽 복음을 나눌 수
있다는거
요 개념 말아주시고 나중에 이 안에 3 제 3부로 들어가면서 하나씩 꿈에
나올 거고요
다음에 css 에 도움을 받아서 전체에게 내여 술 조금 더 예쁘게
다양한 형태로 만들 수가 있겠습니다
됐구요
됐구요 자단 시맨틱 태그는
여러분들이 뭘 특별한 택은 아니구요 자 보시면 방금
div 태그를 이용해서 우리가 여기 보면 헤드보드 헤드 부분에 들어갈
법으로 그 다음에 메뉴에 들어갈 부분 다음에 본문의 들어갈 부분 푸터
들어갈 부분 이렇게 div 태그로 쭉 난 왔어요
자 근데 이걸 쓰다 보니깐 많은 사이트 들의 거의 대동소이 약의 이런것을
스 헤 드 들어가고 내비게이션 바 메뉴바 들어가고 본문 들어가고 포터
들어가고 그쵸
그러면 어 검색 엔진이나 이런 서버 에그 검색 로 것들이 어떤 사이트를
막 검색을 할 때 그래도 좀 더 빠르게 검색을 하고 작업을 할 때도 좀
더 빠르게 적 업을 할 수 있게 하기 위해서 이런 구도를 구워낸 거에요
div 태그를 쓰지 말고 이렇게 헤더 태그 를 쓰자
헤드 부분엔 혜택을 수 자 그다음에 맨 이마저 네비게이션 이제 그래서
내비게이션은 내 입엔 av 내비 그 태그를 쓰자
다음에 컨텐츠 본문 본문 해당되는 것은 섹션 생을 쓰자
다음 에프터 는 푸터 탱 애를 쓰자 이렇게 하면 검색엔진에 어떤 서버
인데 검색 왠지 각 사이트를 막 뒤질 때 헤더 부분 이 부분 더 빨리
검색을 할 수 있을 것 같고 내비 부분 더 빨리 검색을 할 수 있고
그리고 실제로 작성을 하는 사람도 6
코딩을 하는 코드 입장에서도 내가 코딩을 하다가 다른 사람한테 이 코드를
물렸을 때 그 사람의 더 빨리 코드를 리프 하는데 치열 단축시킬 수가
있겠죠 더 이 한대 더 빠르겠죠
그래서 이런거를 우리가 이렇게 하자 라고 해서 시맨틱 이라고 합니다 이런
방식을 헤드 헤더 하고 내비 하고 섹션 하고 포털을 초청해서 타이핑
코딩을 하는 방식
시멘틱 방식이라고 합니다 그래서 요건은 보시면 아까 했던거 하고 똑같은데
단지 그걸 div 태그를 안쓰고
해도 내 b 섹션 푸터 태그를 쓰는 거에요 그래서 보시면
음 이렇게 되어있죠 헤드와 되어있구요 다음의 네 bj 코 섹션 되어 있고
푸터 돼 있고
자 이거 또 한번 새로운 파일 컨 에서 직접 타이핑을 해 볼게요
자 아까는 여기다가 어떻겠어요 div 로 그렇습니다 이게 틀리다는 것도
아니고
줘 나중에 없다가 id 란 걸 좋았고 여자가 이렇게 해 더 줘도 돼요
너 이제 이거를 조금 더
봄과 2 취 가 시키자 해서 나온게 시멘트 방식입니다
자 헤더 주고요 다음의 메뉴가 거의 나오는데 이것을 내비 라고 해 주고요
그 다음에 본문이 나와요 이걸 물어보신다면 섹션 이라고 해 줍니다
자 다는 활 사이트에 파자
이걸 푸터 라고 이렇게 우리 가정이 해주는 거에요
다음의 내용은 똑같아요 게다가 h 워 1
마의
a 찌
있구요 네비 해당하는 이제 며 들어오겠죠 그래서 유에
돼서 li 똑같이 들어가면 되겠습니다
테크 아 다음에
섹션 본문 2 줘 본문이 안에 div 태그가 또 이렇게 들어갈 수도
있고요
자 어쨌든 간에 지금 큰 덩어리가 활동 없는거니까 간단하게 변하게
최대한도로 간단하게 해서
대체할 태그 말아 넣어 줄게요
빠 dash am free
그 다음에 튀 태그 문 잔 태그를 넣어서
html5 이즈
예 이렇게 해주고요 다음에 포터의 는
해외정보 되게 되어 나오자 그래서 p 태그 들어가구요
출시 회사 서울시
뭐 너고 5
너무 동 이런식으로요 자 그럼 가서 실제로 풀어져서 보게 아까 dr 그
탱을 나은거 나 화면 똑같아요
똑같죠 hi 없네요
되겠죠
자 화면상으로 보게나 아까 div 태그 똑같습니다
근데 소설을 보면 이제 그 시멘트 태그를 이용한 방식이죠 그래서요 ks
당 점 뭐라구요
검색엔진이 조금 더 사이트를 검색할 때 좀 도움을 좀 해석하고 이제 그
해석할 때 좀 더 빨리 행동을 할 수 있다는 거 하고 다음에 사용 우리가
어떤 그 혼자 코딩한 게 아니라 다른 팀 작업으로 다른 사람한테 코딩한
소주를 물려줘야 할 때 그 사람 나한테 좀 리뷰를 빨리 해야 그 사람이
리뷰를 빨리 할 수 있겠죠
고런 걸 하기 위해서 이렇게 어떠한 규칙을 만들어 놓은 거죠 자
꼭 이렇게 코리안 하고 div 태그 해도 상관은 없겠습니다 아닌 혼용
사실혼 혼용해서 하는 경우도 많이 있고요
여러분들이 프랑스 쯤 되는데 중요한 거는 큰 레이아웃을 이렇게 잡을 수
있다는 거예요 개념을 일단 정확하게 인지를 하고 계시면 될것 같습니다
자 돌아왔어요 자 오늘은 div 태그 하고 쉬면 혜택을 알아봤는데
요 개념들 자세 한번 정리를 다 하시고요 자 오늘로써 html 기본 그
태그 들에서 아주 기본적인건 다 알아봤습니다 자 증가 됐든 내용이 강석주
시장에서 2 3 5 강 4강에 예상되는 기본적인 태그 들 개념들
다시한번 정리를 하시고 다음 편부터 css 에 대해서 살펴보도록
하겠습니다
자원 강 여기서 마치겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.