Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 3강 HTML 기본-II (수정)
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 볼수 있는 다 처음 3가 html css 3강 html 기본
두 번째 시간을 진행하도록 하겠습니다 자 지나지 않아 우리가 왼 문 저를구성하기 위한 요소로써 태그에 대해서 살펴보았습니다
태그 란 우리가 어떠한 웹 페이지 웹문서 를 만들기 위해서 어떠한 기술을
쭈 스크립트를 기술의 나가야 되는데 그때 하나 하나 하나의 요소를
구성하는
것이라고 우리가 살펴보았습니다
자 그리고 그러한 택을 중에 가장 기본적인 거 h1 태그 라든가 p 태그
br 태그 등등 몇 가지 메 대해서만 살펴보는 시간을 가졌습니다
자 오늘 은 이제 3가 html 기본 두번째 시간에는
리스트 태그 ul 베라 2호 의 표를 나타나는 태그
테이블 태그 그 다음에 어 이미지를 출력해주는 태그 img 태그 사운드를
출력해 주는 오디오 태그
어 이렇게 택을 기본적인 태그 들에 대해서 또 살펴볼 거고요
그리고 주간 히트송 웹문서를 만드는
예제에 대해서 살펴보는 시간을 갖도록 하겠습니다
자 오늘 살펴볼 예제 내용들
리스트 태그와 다음의 표를 나타난 테그 이미지 를 출력해주는 태그 요
3가지가 굉장히 중요한 오늘의 수업의 가장 중요한 부분이구요
출력을 나타내는 태그 요건은 html5 해서 새롭게 지원이 되는 태 근데
그다지 어 많이 쓰이거나 어 그냥 왠 문서에 사운드를 많이 넣는 경우가
억 측정한 케이스에 따라서 좌우가 되죠 그래서 그렇게 많이 쓰이는 태가
난다
그렇다고 해서 모르면 안되겠죠 예전에는 html 태그의 사운드를 넣기
위해서 다른 다른 플러그인을 꽂아 져
그 사운드 출력을 가능하게 했습니다
하지만 html5 에서는 html5 에 있는 태그 마을 이용해서도
어 사운드를 출력할 수 있는 좋은 기능이 때문에 꼬 알아두셔야 되겠습니다
자 그래서 리스트 대부터 이제 살펴보도록 하겠습니다
자 먼저 리스트 태그입니다 자 리스트 우리가 알고 있는 리스트
뭔가 쭉 어떠한
이렇게 내용이 쭉 위에서 아래로 하나씩 나열되는 걸 우리가 이건 것을
리스트 라 부릅니다
자리 스태그 이렇게 무엇인가가 하나씩 q6 나열되는 거 이런 것을
나타내는 태그 란 얘긴 다 잘 리스트 돼 그 ul li 5에 리스트를
표현하는 가장 많이 사용되는 태그 2 중 하나입니다
잘보시면 결과 하면 브라우저 하늘을 먼저 보겠습니다
메뉴 리스트 메뉴 1 메뉴 2 메뉴 산 메뉴 자매 니오 이렇게 나오고
있구요
지역 리스트 서울 경기 충청 전라 경상 강원
이렇게 나와있는데 2위에 꺼도 리스트를 나타내는 태 구 로 만들어진
웹문서 내용이구요
요 밑에 지역 미스트 를 나타내는 태그도
리스트 태그를 가지고 출력을 해주는 내용입니다
자한테 차이점이 하나 있죠 위쪽에서는
순서가 없어요 어느 중 중요도를 나타낸 순서가 없이 그냥 다 점 점 점
점 으로만 이렇게 표시가 되어있구요
밑에 있는 것은 서울경기 충절 충청 전라 경상 강원도가 1번 2번 3번
4번 5번 이렇게 인덱스가 존재를 할 수 있습니다
자 일단 쏘 술을 좀 타 볼 텐데 이렇게 순서가 없이 나오는거 이거를
번호 드오 리스트 타이어 그래서 이걸 나타내는 태그가 ul 태그 고요
다음에 이렇게 123 자 오류 무언가 인덱스를 갖고 있죠
이거는 오더 리스트 라고 해서 ol 로 표시가 된다
자 검색 사이트 리스트 요건은 힐 이루 나눠 줘 그럼 예능 9
ol ol 태그 로 분류되어 질 수가 있겠습니다
자소서를 보면 자 html 문서 기 때문에 우리가 지난 시간에 살펴보았던
대로 html 을 시장을 합니다
자 종료되고 있어야 겠죠 그래서 html 로 끝나고 요
자의 html 문서 안에 는 컨 덩어리 어떤 덩어리 헤드 라는 태그
덩어리와 바디 라는 큰 덩어리로 구성되어진 더했구요
헨리는 어떤 내용 이 문서가 어떠한 성격을 갖고 있는지 타이틀은 무엇인지
메타 태그는 무엇인지
자 그리고 우리가 이제 앞으로 배구 된 css 의 설정도 다 이곳에
들어갑니다
무언가 이 문서를 나타내고 있는 설정과 관련된 내용들이 들어가는 고 싶
어 헤드 라고 했구요
잘래 바디는 뭐냐면 우리가 웬 문서를 만드는 이후 정보 전달을 하기
위해서 만들 줘 그 정보 전달을 하기 위한 내용들
정보전달 내용이 들어가는 것이 바로 바디 태그와 바디 태그 바디 태그
안에 이루어진 들었습니다
절에서 바디 태그 를 보니깐 잡히 태그 칭하여 나온 더 했던거 문단 태그
그래서 문단 t 금 문단 태그를 이용해서 메뉴 리스트 라고 표시했습니다
자 요게 요 내용입니다 메뉴 리스트
자람에 방금 제가 설명 되었듯이 언 오더 리스트 1 2 3 5 가
없죠 그래서 어 노도 리스트를 통해서 만들 때 u 애를 사용한다.고
했습니다
그래서 ul 로 시작을 했구요 ul 로 끝난거 확인이 가능하실 겁니다
자 그 다음에 ul 로 시작을 해서 ul 로 끝난 사이에 li li li
li li 있죠 이게 리스트 아이템을 에서
리스트를 나타내나 하나 하나의 아이템을 나타낼 때 이렇게 li 로 시작을
하고 li 로 끝나는 종류 태그를 써서 나타냅니다
즉 ul 로 시작해서 ul 로 끝나는데 그 사이에 내용들은 아이템들은
li 로 여러분이 표기를 해 주시면 결과 화면이 이렇게 나올 수가
있겠습니다
자 다음에 밑에 보면 지역 미스트가 있죠 자 지역 미스트 결과 화면에
이렇게 나왔구요 문제 한테 그니까 당연히 내가 br 태그 쓰지 않아도
자동적으로 갱이 된거 확인이 되구요
자 그 다음에 이것은 123 자 오륙 으로 표시가 되어 집니다
그래서 어떻게 ol 오더 리스트 라고 해서 ol 로 시작해서 ol 로
끝나는 태그 를 이용해서 요소를 html 문서 요소 를 만들고 있습니다
자 그 다음에 ol 안해도 ul 과 마찬가지로 아이템들이 있죠
서울 경기 충청 전라 경상 강원 이라는 리스트를 이루고 있는 아이템들이
있습니다
그래서 마찬가지로 5회 아내의 li 태그를 써서 서울 경기 충청 전라
경상 강원 을 표시를 해주고 있습니다
자 이렇게 표시만 해 주면 우리가 li 를 묶고 있는게 얻어 리스트 줘
오토리스 데 특징 1 2 3 5 2 인덱스를 갖는 거죠 그래서 여기에
자동적으로 내가 설정 하지 않았지만 알아서 이렇게 넘버링 123 자 오륙
을 순차적으로 붙여서 출력을 해 줄 수가 있겠습니다
아시겠죠 자 리스트를 가 타는거 이렇게 정리하시면 됩니다
리스트를 나타내는 것은 무조건 보 ul 과 언어도 리스트와 ole 따자
자유 엘은
인덱스가 없어요 그냥 이렇게 쩜쩜쩜 점으로 나오구요 오일은 인덱스가 있다
1 2 3 5가 이렇게 인 넘버링 이 되어 진다 라고 생각하시면
되겠구요
자매 ul 로 하던 ol 로 하던 리스트를 나타내는 태그
어떤거 젤 아이 태그가 있다 라고 여러분이 정리를 해주시면 되겠습니다
자유 애가 일일이 됐던 오해를 했던 리스트를 나타내기는 태그 인데요 이게
중요한 이유는 우리가 지금은 여러분들이 많은 내용을 배우지 않았기 때문에
내가 어떠한 문서를 만들어요 왠 문서를 만들 때 이 문제는
리스트 타입이 있을 수도 있고 없을 수도 있겠죠
저 리스트 타입의 이렇게 내용이 있으면 당연히 위의 리 댔던 5일 전부를
1 썼는데요
근데 우리가 가만히 생각을 해 봐도 내가 매일같이 들어가는 우리 회사의
그룹 에어가 됐던 아니면 검색 사이트가 됐던 가만히 보시면 그리 많은
리스트를 본적이 별로 없을겁니다
근데 하지만 이 ul 과 고엘 리스트를 나타난 태그는 현재
그외 문서를 만드는 과정에서 팽 장이 중요하고 없어서는 안될 만큼 너무
많은 곳에 있습니다
자 어떤 곳에 쓰인 냐 면
자 예를 들어서 여러분들의 많이 방문을 하는 사이트를 한번 들어가 보도록
하겠습니다 자 검색 사이트에 들어갔는데
자의 검색 세트 보면 리스트가 뭐가 있을까요 한번 비석도 아래로 쭉
내려보면
별로 그렇게 리스트가 많이 보이지 않습니다
작은데 하지만 요런거 있죠 내일 카페 블로그 지진 쇼핑 t vs 이런
내용들
요것도 어떻게 보면 수평 아이 수직 구조로 이루어진 리스트 나이지만 수평
구조로 이루어진 리스트 라고 할 수 있겠죠
4일 카페 블로그 지식인 쇼핑 류 퀘스트 에 tv 캐스트 사전 뉴스 증권
통해서 이게 우리가 살펴본 이렇게 수집 구조는 아니지만
어떻게 보면 수평 구조로 이루어진 리스트 타입 이라고 생각할 수가 있을
것 같습니다
초 자 요 밑에 보시면 이렇게 뭔가 기사거리 있는데 이것도 덩어리 덩어리
로 생각을 해보세요
한덩어리 두 덩어리 3 덩어리 내 덩어리 닭 덩어리 6 덩어리
그럼 이것도 수평 구절을 이루어지는 리스트 라고 볼 수 있겠죠 자 물론
이 태그를 만들고 에서 리스트 구조로 썼는지 리스트 태그를 썼는지 안
드는지 나요 확인이 안되지만
어쨌든 이렇게 뭔가 우리가 지금 대응 것처럼 수직 구조가 아닌 수평
구조로 나열 될 때도 유애리 나 오해를 사용할 수가 있습니다
이렇게 기본적으로는 술집 구조이지만 이걸 나중에 수평 구조로 이렇게 바꿔
줄 수가 있어요
누가 우리가 아직 안 되었고 나중에 d 에서 배울 css3 가 바로 이런
역할을 해준 자
자 그래서 ul 과 ol ul 됐던 오히려 떠니 리스트 구조의 태그 가
중요한 이유는 웬 문서를 만들 때 뭔가 연속적으로 덩어리 어떠한 요소가
꼭 텍스트 가 아니고 이미지가 됐건 아니면 어떤 내용이 연차적으로 이렇게
수평 구조로 또는 수지 쿠로다 아이를 돼요 그러면 어떤 걸 쓸 수 있다
ul 가 예 를 이용해서 css 로 예쁘게 웹문서를 만들어갈 수
있기 때문에 어떠한 웹문서를 만들지 간의 현대 왼 문 3 은 없어서 안될
굉장히 중요한 내용 자 내용은 그렇게 어렵지 않기 때문에 여러분이 금방
이해할 수 있을 것 같아요
ul 과 5 애를 써서 중간에 있을 때 아이템은 li 태그 만 쓰면
되겠습니다
자 그리고 밑에 보시면 제 밑에 밑에 어떤 내용이죠 검증 사이트 리스트
검사에 리스트 p 태그로 이루어 졌구요
다음에 너 이번에 노예를 썼네요 ol 로 시작을 해서 ol 로 끝나고 앨
아이를 태그를 써서 이렇게 리스트 아이템을 개입을 해서
주고 있는데 여기 위에 는 이렇게 글자만 들어왔죠
근데 여기 밑에는 a 태그가 들어가고 있습니다 저희 자의 a 태그에
대해서 알아보면 a 태그는 하이퍼 링크가 걸린 앵크 테그라 그래요 그래서
뭔가 html 문서에 특징에
내가 어떠한 html 문서를 보고 있어요
자 이렇게 깨끗이 좀 주고 요다가
다시 보면
내가 여기에 있는 첫 번째 이렇게 문제를 보고 있어요
근데 여기에 어떤 정보가 따 있는데 예를 같아 클릭을 할 수가 있죠
클릭을 해서 다른 웬 문서로 또 다른 웬 문제로 이렇게 넘어갈 수가 있죠
초 제 이렇게 뭔가 우리가 넘어갈때 용
요걸 같다 우리가 링크 걸었다 그렇죠 그런 링크를 거는 태그가 바로 앵크
태그입니다
그래서 리스트 아이템 아내
9 굴 가야 울안 글자와 있는 데에 그 안에 a 태그로 시작을 해서 a
태그로 끝나는 앵크 테가 있습니다
그리고 그 앵크 태그 아내는 href 란 속성과 타겟이 라는 속성이
있어요
자 href 는 내가 이렇게 링크를 걸어서 넘어갈때
주소가 있어야 겠죠 어디로 넘어가라고 고 주조 링크 주소가 개입되는
곳이구요
제타 괴산 제가 좀 따와 그 소수를 보면서 타겟이 무엇인지 잠시 설명을
드리도록 하는데 간단하게 설명드리면
자 블랭크 와 언더바 블랭크 와 언더바 셀프 했습니다
자 두 가지의 차이점이 왜냐면 자 블랙 크는 지금처럼 내가 어떤 것을 딱
클릭을 해서 새 창이 열리는 거예요
기존에 있는 창 그대로 유지되고 새 창이 열리도록 하는 게 블랭크 구요
타겟을 셀프 말 그대로 어 내가 어떠한 문제에서 링크를 하이퍼링크를
쿵하고 클릭을 했어요 그러면 웹페이지가 이동 되겠죠
이동될 때 블랭크 처럼 새로운 페이지가 열리는 것니라 어떻게 내가
지금 현재 보고 있는 문서가 바뀌는 거에요
어떤걸로 새 문제로
어 그렇게 일단 연결해주고 있다 예제를 보면서 확인해 보면 더 쉽게 와
닿을 수 있을 겁니다
자 그러면 한번 소수를 보도록 할까요
자 13 다시 아니죠 좋은가요
자 방금 봤던 내용이구요 수수
자 그래서 바지 태그 물에 살펴 같은데 로 html 시작했고 html
시작했구요
제 위쪽에는 html5 문제라고 덕 타입이 htm 드라고 폐쇄돼
있는거구요
헤르타 게는 헤드 태그에는
이 문서 인맥 문서를 나타내는 태그 들이 들어 있구요 중요한 거 이제
바디 태그
바디 태그 해서 ul 과 ol 태그 리스트 를 나타내는 태그 라고 할 것
같고요
다음에 밑에 보면 li 태그 있는데 li 태그 안에 글자만 들어온 것이
아니라 그 글자를 앵크 태그로 감싸고 떠오르죠
그래서 그 앤티크 때 그는 하이퍼 링크를 이용해서 다른 문제로 정보를
이동시킬 수가 있겠다 고 했습니다
자 이거 브라우저에서 보기 로 한번 보도록 하겠습니다
됐구요 자 보시면
음 그래요 저래서 메뉴 리스트 좀 나오구요
자 여기서 타게 조금 더 이제 한번 보도록 합니다 자국을 같은 경우에는
블랭크 에어 새창이 껴 준다 그래서 이 상태에서 클릭을 하면 새로운
브라우저가 이렇게 열리죠
새창이 열리면서 그 새로운 주소로 춰야 갈 수 있겠구요
자담 의 셀프 헤어 셀프 는 이 자신 현재 내가 정보 제공을 받고 있는
이 문 저자 체적으로 새로운 문서가 열리게 될 수가 있겠습니다
이런식으로요
자 그래서 하시는데 자르면 간단한 거니까 한번 예제를 같이 진행을 할 때
보도록 할게요
굉장히 여러분 그 문제는 아주 우리가 초기 때문에 굉장히 쉽습니다
여러분도 조금만 쭉 만
음 노력을 하시면 금방 하실 수가 있을 겁니다
자 게다가 제가 먼저 리스트 태그를 나타내기 전에
p 태그에 진행했던 p 태그 갖고 몰래 볼까요 자 메뉴 리스트 라고
운영 했고요 자 pt 금문 저한테 그 블럭 타입 태그 문자 패서 일부러
갱을 하지 않아도 자동적으로 알아서 p 태그 종료가 되면 개인 되겠고요
자 이제 본격적으로 리스트를 나타내는 태그 어떤거 ul 태그 문제 해
볼게요 자 25l 태그 날은 리스트를 만들겠습니다 근데 어떤 리스트 언
오디 리스트 순서가 없는 리스트 를 만들겠습니다
자 다음에 리스트 아이템을 하셔야 되겠죠 게다가 음 내 누
1번 이라고 입력을 했습니다
자 자네 복사를 좀 해서
자 2번 3번 4번 5번 제 이렇게만 끝난거예요 근데 간단하죠
자 브라우저 보기에서 브라우저 보기 하면 그냥 자동적으로 언로드 리스트
이니까 쭉 나올 수가 있겠습니다
자 그 다음에 어떤 태 겉도 p 태그 가서 이번에는
지역 미스트 라고 입력을 해 보구요
자유의
아 어느 아지오 더 리스트 아 줘 5도 리스트는 5에
자 그 다음에 선언을 해 줬고 리스트를 나타내는 아이템은 똑같습니다 li
여기다가 서울 자 오더 리스트 레져 번호를 기입해 줄 필요가 없죠
자동적으로 알아서 개입을 해줍니다
절 변기 이런식으로 내가 내용만 내용 말 입력을 해주시면 되겠습니다
중 첨
전라 어딘가요 감상 계획이 까지만 해볼게요
자 그 다음에 또 다시 브라우저에서 확인해보면 4
내가 붙이지 않았지만 1 2 3 5 5 왜 오더 리스트 니깐 붙은
겁니다 자 다음에 또 하나
p 태그
자자 낼 오해를 해야 되겠죠
자 여기다가
아 a 태그를 쓰도록 하겠습니다
타겟을 어떻게 블랭크 를 쓰구요
대안의
예 자국 우리라고 했구요
자야 우 라고 하고 얘는 어떤거 셀프로 바꿔 주도록 하겠습니다
자고 그리니까 구글 홈페이지 7용 n 적어 주면 돼요 자 이 때 하일 저
그 뭐죠
프로토콜 앞에까지 http 프로토콜 까지 반드시 정확하게 명시를 해 줘
됩니다
이렇게 해주고요 자야 우두 마찬가지로
네 이렇게 음영을 준 자 자 우리가 이런 도 메뉴에서 dns 서버 취향
신의 알아 봤죠 dns 서버에서 이게 사실 등 어떤
어 숫자 12자리 숫자에 대한 ip 주소를 갖다가 이렇게 우리가 그
사람이 쓰기 편한 영문으로 바꿔주는 그랬죠
여기다가 여러분들이 ip 주소를 알고 있어요 어떤 서버를 접속을 하고
있는데 그 서버로 접속할 때 그 ip 지를 정확히 알고 있어요 그러면
ip 주소를 입력을 해 주셔도 상관이 없겠습니다
자 어쨌든 여기다가 이렇게 좋아서 브라우저 보급돼 볼게요
작은 나왔구요 자국을 클릭한 어떻게 되겠어요 블랭크 니까 새창에서 열릴
수 있겠구요
야 클릭하면 셀 프 니까 지금 현재 보그 는 장에서 열릴 수 가
있겠습니다
자 이해가 오해를 조금 오랜 저 장시간에 걸쳐서 알아봤는데 중요하니까
이렇게 많이 알아본 거 있죠 그래서 반드시 사용방법 말아 주시고요
자 그 다음에 넘어서 dl dt dg 태그 2 태그도 많이 사용됩니다
자 방금 사용했던 유액 와 ol 과 비슷한 태그 인데요
이것도 많이 사용되는 것은 사용되기 때문에 꼬 알아두셔야 겠습니다
자 메뉴 리스트를 나타내는데 이것은 이렇게 나타내요
자 dl 과 dl 로 시작을 하였죠 dl 로 시작을 하고 d 에 종류
태그로 마침을 수 있습니다
자 그 다음에 그 안에 dt 가 있어요
gt 가 이렇게 어떤 리스트에 위쪽에 상단 타이틀을 해당된다고 할 수
있겠습니다
다음에 요기 무모한 또 dt 가 나오죠 그러면 이것도 상담 타이프 역할을
하고 그 안에 dd 로 이렇게 리스트 아이템을 다 만들어 줄 수가
있겠습니다 그래서
d 엘은 아까 우리가 했던 ul 과 ol 이 중요하다 뵙죠 그거 와 함께
많이 어떠한 리스트 타 이브에 문서 레이아웃을 만들 때 많이 사용하기
때문에 여러분들이 이것도 반드시 고 알아두시기 바랍니다
댓글 0개
등록된 댓글이 없습니다.