Seoul Wiz | 실전 HTML5 & CSS3 동영상강좌 제 4강 HTML 기본-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불순 입니다 자월 html 4강 배치 tml 기본 세 번째
시간을 진행하도록 하겠습니다자 오늘 살펴볼 내용 지난 시간과 지 지난 시간에 거쳐 왔고 우리가
html 의 기본적인 태그들을 살펴봤습니다
그 html 의 전체적인 구조는 헤드 하고 바디로 구성되어 있다고 살펴
봤고요
그중에서 발내 우리가 p 태그 라든가 아니면 리스트를 나타내는 태그
ul li 아니면 오웰 태그 정도를 알아 봤구요
그 다음에 dg dl dt 즈음에 대해서도 살펴 봤습니다
자매의 이미지를 넣을 때 img 를 넣을 수가 있고요 오디오를 때 오디오
태그를 사용할 수가 있었습니다
자 오늘 알아볼 내용은 취향 시에 우리가 오디오를 넣을때 오디오 택을
썼는데요
동영상을 출력해주는 태그 비디오 태그입니다 비디오 테 그런거 알아보고 그
다음에 어떻게 보면 html 태그 해서 정보를
어 사용자로부터 정보를 받아들일 때 가장 중요한 태그
톰 택을 한 것이 있습니다 그래서 폼 태그의 대해서 살펴보도록 할 거고요
다음에 레이아웃을 구성한 테그 div 하고 스 펜 트 가 있는데 제가
먼저 말씀드리면
동영상을 출정하는 태그 이거는
그다지 중요하지는 않습니다 그리고 뭐 사용 방법도 굉장히 쉬워요
그래서 여러분들이 이것은 별로 그렇게 스트레스 받을 일닌데
폼 태그 하고 레이아웃 태그 이거는 굉장히 굉장히 중요합니다 아 그래서
여러분들이
이거 할 학습은 굉장히 철저하게 잘 정리를 해주시면 될 것 같습니다
자 먼저 그러면 동영상을 출력하는 태그 비디오 태그입니다
자 이거는 간단하게 예제를 통해서 뭐 살펴보 넘어 갈게요
자 보시면 음
그 동영상을 출력할 때는 비디오 택을 써요 사용하는 방법은 요렇게 사용할
수도 있구요 아니면 태그 1 에다가 이렇게 속성을 다 넣어 줄도 상관이
없겠습니다
자 보시면 sr 시 src 에다가 이렇게 동영상의 위치하 일이 존재하는
위치의 값을 넣어 주고요
그 다음에 타입 정보 깝 넣어줄 수 있겠습니다 컨트롤러는 오디오 태그
처럼 컨트롤러가 화면에 보이게 건지 안 보이게 할 건지
여러분 여기다가 명시를 해 줌 되겠습니다 아까 말씀드렸듯이 사용 방법은
비디오 태그를 나눠서
그 안에 소스 태그 를 넣어서 이렇게 태그를 입력을 하셔야 되고요 아니면
비디오 태그 안에다가 수수 속성을 다 넣으셔도 상관이 없겠습니다
자 그래서 이거는 여러분들이 직접 한번 해 보세요 별로 없게 사용 방법이
어렵지 않고
어 어 많은 속성이 존재 하는 것도 아니니까 여러분이 한번 직접 진행을
해 보시면 될것 같습니다
자 중요한 거 이제 폼 태그의 들어가도록 하겠습니다 자 폼 태그는
여러분들이 회원가입이 라든가 아니면 어느 곳에 가자 뭐 정보를 입력할 때
그래서 이벤트에 응모를 한 다니면 어느 사이트에 회원으로 등록을 한다.
그런 경우에 많이 접하게 되고 우리가 폼 태그를 정확하게 사용할 수
있어야지 회원 사용자로부터 정확한 정보를 얻어낼 수 있기 때문에 굉장히
중요합니다
자 그리고 폼 택은 여기서 끝난게 아니라 폼 태그의 입력한 그 정보 값을
보면 제출이 라는 버티고 이제 선미 버튼을 누릅니다
이 선문 패턴 룬 문 울름 으로 함 눌 때 각각 0 태그 에 존재하는
정복 값들이 어디로 서버 로 전쟁이 되겠죠 그래서 서버에서 또 왜 응용
프로그램을 웹 어플리케이션을 다른 프로그램 마시는 분들이 다시 서버에서
뭔가 가공해서 데이터베이스의 서버 뒤에 있는 데이터베이스의 정보를
차곡차곡 정리를 해 놓을 수 있겠죠
정렬해 놓고 나서 다시 우리가 원할 때 html 이 화면에서 사용자가
다시 정보를 원할 때는 다시 꺼내 와서 화면에 출력을 해 줄 수 있어야
될것 같습니다
저때 꺼내야 html 까지만 우리가 알아보는 시간 이니깐요 html 태그
해서 폼 태그가 무엇이 있는지 1
제 살펴보도록 합니다
자 먼저 전체적인 리뷰를 한번 보면 어 폼 태그를 은 시작되게 폼을
시작되어 다음에 끝난 태그도 끝나는 폼 태그 로 끝날 수가 있겠습니다
그래서 시장을 폼으로 하고 끝나는 것도 홈으로 끝나는데 / 프 트
붙여줘야 겠죠
자 다음에 폼 아래 5 그 속성이 두 개가 존재할 수 있겠습니다
액션 하고 메쏘드 인데 액션은 뭐냐면 내가 써밋 버튼 제 툴이 함 버튼을
딱 로스의 예를 들어서 내가 여기 거기가 회원가입 하는 페이지에 요 회
5 가입하는 페이지에서 매 정보를 다 인용을 다하고 맨 마지막에 써밋
버튼을 딱 누르면 이 정보가 어디론가 가야 되겠죠
엇 이론과 갈 때 주저 주 서버쪽 에 준수를 여기자가 적어 주는 곳이에요
그죠 그래서 이건 내가 정한 게 알겠죠 서버를 쪽에 응용 프로그램을 담당
허고 있는 사람이 그 웹 문서 어느 웬 문서 를 호출해 주면 된다 그러면
그 문서에 그자가 입력을 해주면 되겠죠
어 그래서 여기는 추 조 조수를 저거 좀 더 있구요
자매 소드 랑에 나오는데 개 빵 개시한 게 있고 그 다음에 포스트를 하게
있습니다
자 이거 또 우리가 웹을 갔다가 지금 다르고 있는 사람들이니까
레비 아주 포스트가 보고 계신 보고 정도는 우리가 알아둘 필요가 있습니다
자 뭐냐면 음
우리가 예를 들어서
자 저 사이트를 하나 열어 같고
자네 2벌 열었어요 네이버에 내가 1 들어서 여기다가
음 오늘
오늘 의원 제
이렇게 적었어요 그러면 오늘의 운세 라는게 데이터가 오늘의 운세 라는게
데이터가 이 네이버에서 제공하는 서비스 서버로 같겠죠
가서 오늘의 은 3와 관련된 검색어가 쫙 검색이 된거 있죠 그럴때 이
정보 가는 방식을 결정하는 곳이 바로 여기에는 메소드의 요
개방식 뭐냐면 지금처럼 url 주소를 보면 도메인 주소 뒤에 깨끗하죠
아무도 없죠 근데 검색을 딱 누르니까
뒤에 서치 내부에서 에서 외워 낳으면 물어봄 파악해 정부의 나오죠
오늘의 운 생활 코드 값으로 이렇게 쭉 변환되어 가는 거에요 자 코드값을
변해 됐든 안되면 어쨌든 간에 도메인 주소 뒤에 이렇게 붙어서 내가
입력한 정보의 값이 붙어서 서버 쪽 으로 전송 되는거 그걸 우리가 개
방식이라고 합니다
어 자 반면에 포스트 방식 뭐냐면 내가 어떠한 정보를 입력하고 정보를
보냈어요 보낼 때 도 맨스 와 계속해서 깨끗해요
즉 포스트 방식은 암호화해서 문서 헤더에 정보가 암호화 돼서 카요 어디로
서버로
그게 포스트 방식입니다 그래서 개 방식은 보안에 취약하게 쬲 브라우즈
에다 정보 노출 됩니다만 이게 회원정보를 쭉 타 입력한 다음 개방식
뭐냐면 아이디 이름 뭐고 id 는 뭐고 비밀번호 뭐가 하는게 url
주소의 쭉 다 그대로 노출이 되요
그렇게 써 보러가고 포스트 방식을 하면 이 전송되는 화일 파일의 헤더에
은이 콰 처리되어서 전송이 됩니다 서버 적으로
그래서 여러분들이 갭 방식과 포스트 왕지 노출을 되는거 노출 안되는거
정보 어느게 안되는거 정보 언니 게 되는거고 차이라고 생각하면 되겠습니다
개방 시 그 금일 정보를 다 은닉한 게 좋아서 1st 방식을 쓰면 되겠다
적 그렇지 않고요 갭 방식을 쓸 때도 있고 간 당한다.는 개방 질만 쓰겠죠
정보도 표준 상관없고 1 이럴 때에 아까 네이버 같은 경우에도 개
방식으로 검색엔진이 돌아가고 있죠 그래서 둘중 하나 그때 그 뜻이며
있구요
입력을 안 해주시면 디폴트가 계십니다 그래서 디폴트 개 방식으로 정보가전
잘 될 수가 있겠습니다
어쨌든간에 폼 태그를 이렇게 명시를 해 주구요 그 다음에 크 안에다가
이제 임프 태그를 주윤하 일을 하면서 각 항목들을 지정했습니다
자 먼저 이름이 나오고 id 가 나오고 빈 가운데 이름부터 볼게요 자
이름은
임프 태그로 이렇게 넣어줍니다
다음에 속성이 있는데 속성이 두 개의 속성이 보여요
타이프 라는 조금 타입이라는 속성과 네임 이라는 속성이 보이죠
자 타입은 뭐냐면 텍스트 자 이런 이름의 다른 정릉 거에요 그래서 보통
일반적인 문자가 들어갈 때 우리가 타입을 텍스트 합니다
반대로 여기 밑에 보시면 비밀번호 있는데는 빌 문을 우리가 보통 회원가입
할때
뭐 문자가 안 보이고 에 스타리그 나 아니면 동그란 점을 표시 되죠
그럴때 타입을 패스워드 를 지정합니다 이렇게 그러면 글자 우리가 타이핑
한 글자 가은이 칼에서 안보이게 처리되고 어 나타낼 수가 있겠습니다
그래서 텍스트는 일반 문자로 패스워드는
그 기 5 로 비유 로 대체해서 대체 문자로 표시 될 수 있겠습니다
다음엔 m2 있는데요 내일 뭐냐면 요 임프 1 만든거죠 지금 요거 에
유익한 이름이에요
나중에 이게 서버 로 갔을 때 서버 왔을 때 이 이름에 해당하는 값을
서버 에서 받길 원해요
그럴때 요 이름 있죠 유저 냄 유저 id 갠 유전 m 겐 유저 아이드 갯
유저 패스워드 라고 이렇게 매수도 노출하면
여기에 사용자가 실제로 입력한 값을 얻어낼 수가 있습니다 그래서 네임
도그 꼭 이렇게 작성을 해 주셔야지 받는 쪽에서 이 네임을 가지고
해당하는 값을 엄 층과 사용자가 입력한 값을 얻어올 수 가 있겠습니다
잘해서 임포 속성 타입 속성과 네임 속성 정률 잘해서 알아 2시고요
자 연락처도 보면 똑같아요 타입이 있고 내의 및 꽂아 사이즈랑 값이
나오는데 사이즈가 올해 오는 뭐냐면 요가로 에서 새로운 과로 포개 여포
즉 토 개
문자가 몇 글자 이 안에 들어갈 수 있는지 사이즈를 결정할 수가
있겠습니다
다음의 파일을 수 있어요 타입을 파일로 하면은 이렇게 되어 파일 선택
선택 양파 여름이라서 클릭하면 은
엄 윈도우 탐색해야 그리고 우리가 어떠한 파일을 선택할 수 있는
대화상자를 이겠죠
그래서 고런 화일을 선택할 때는 타입을 화일로 지정해 주셔야 됩니다
다음엔 레 디 오 아 오 체크 징을 타입의 레 디 오 하고 체크박스가
있는데 레디 온 뭐냐면 둘중에 하나 앵 개 중에 하나만 된게 중에 한개만
유일하게 선택을 해야 될 경우 성별 남자 여자 다 선택하면 되겠죠
그렇게 앵 개 중에 한개만 선택을 해야 될 때 사용하는게 레드오크 입니다
레디 5버튼 의 사용 방법을 보면 이름이 똑같아요 똑같아야 되요
그 아이템 하나하나 마대 이름이 똑같구요 그 대신 밸류 값이 다릅니다
그러면 나중에 서버 에서 받을 때 뭘 찾아 만드세요 위 쪽에서도 위크 1
이름 내 인가 빕스 가져온다고 했죠
요즘 마찬가지에요 겐 네임 에서 젠더를 가져오면 내가 상태가 사용자가
여자를 클릭 에 따 금 값이 뭐가 전송 된다고
w 가 전송 된다고 생각을 하시면 되겠구요
다음에 남자가 체크된 상태로 전송을 하면 어떻게 된다구요
햄 m 값이 전송 된다고 생각한 되겠습니다
사용방법은 타입을 레디 으로 맞춰지고 네임을 똑같이 맞춰 주시면 되겠구요
다음에 여기 보면 체크박스가 있어요 체크박스는 은행계 선택 중에 앵 게
를 선택할 수 있는 도구입니다 즉 체크박스 체크 막 체크 학사 지고
이름이 다 똑같아요 랭 이에요
이제 배워라 줘 코리안 영어 그럼 일본어 다음에 중국어
이렇게 선택을 해주고 난 은행 기를 써서 한글 일어 이렇게 선택했어요
그러면 나중에
어깨에 냉해 왔고요 값을 받아오면 값이 2개가 들어 오겠죠
한글 kor 가 jp ij apu 두개의 값이 배열로 해서 들어옵니다
그 다음에 속성 중에 체크 드가 있는데 기본적으로 2페이지 처음 들었을
때 디폴트로 들어가 있는 것을 선택할 때의 체크 드 옵션을 우리가 속성을
쓸 수가 있겠습니다
그래서 레 디 오 하고 체크박스는 사용방법 꼭 잘 알아 주세요 네임이
같아야 됩니다 그래야지
그 중에 어떠한 밸류 값을 유력한 밸리 값을 서버 에서 가져와 러 쉴
수가 있겠습니다
자람에 이렇게 이번에는 선택하거나 뭔가 이렇게 글자를 짧게 있는 한게
아니라 글자를 좀 길게 입력하는 거에요
골프의 쓰는 게 테스트 에리어 라는게 있습니다
이거는 임프 태그는 아니죠 님프 태가 아니고 텍스트 에리어 태그입니다
자 텍스트 에리어 태그 안에 속성인 로우 컬러 했어요 문제 아시겠죠
딱 이것만 봐도 로는 행 5주 행 다음에 코스는
이식한 2시 끌자
그렇게 해서 텍스트 에리어 태그로 쓸수가 있겠구요
다음에 셀렉트 가 있어 셀렉트 는 이렇게 선택하는 거에요 드롭다운 으로
출 선택한 거죠 그래서 셀렉트 드 임프 태그는 아닌 다 사용 방법을 알아
두셔야 됩니다
셀렉트 태그 안에 옵션 택을 쪼 넣어요 그래서 옵션 다 하나하나 마다 에
아이템이 겠지 게 그저 코리아 us 에 재팬 차이나
주구요 이걸 해 주면 이렇게 선택을 우리가 해서 사용할 수 있겠구요
좌욕 이 줘 클릭해야 되겠죠 자 다음에 셀렉트 에서 하나만 이렇게 해주면
국적을 이렇게 하면 국정원 1개 겠죠 그래서 성경은 선택할 수 있는데
좋아하는 음식은 여러가지가 있을 수 있죠 이렇게 해서 멀티 팀 취하고
불고기 두개중 선택되어 있죠
멀티로 선택 2일간 선택이 가능하게 만들려면 속성 멀티 프리한 속성을
주고요
속성 값으로 멀티 뿌리라는 속성값을 주시면 됩니다
그러면 이 옵션 하나하나에 아이템 중에서 하나만 선택할 수 있는 게
아니라
앵 게의 선택을 하실 수가 있겠습니다
자 이렇게 해서 우리가 인풋 태그의 타입의 텍스트 패스워드 레디 5
체크박스 다음에 텍스트 에리어 셀렉트 등을 쭉 알아봤는데요
2 이렇게 정보를 다 입력을 했어요 인물 한 다음에 실질적으로 이제 그
선 및 버티라고 해서 이 버튼을 누르면 데이터가 서버 전송 됩니다
될 때 이 버튼은 어떻게 했냐면 이것도 임프 태그를 만드는데 타입을 써
미수 로 해주면 되겠습니다
그래서 예를 딱 누르면 어디로 한다.고요
액션에 지정한 경로를 터라서 정보들이 갯수로 날라 가던 포스트를 방식을
날라가 다완 날라 전성 될 수가 있겠습니다
자 그럼 실제적으로 이거 코드란 보도록 할게요
자 열어서
예제 4번이 줘
아예 폼텍 오고 실제로 여기서
브라우저에서는 보도록 할게요
요렇게 나오겠죠 자료 간단하게 해서 몇 가지만 한번 잠깐 코딩을
해보고 난 멋진 여러분들이 코딩을 지쳐 한번 해보시기 바랍니다
자 html 페이지를 만들구요
저장을 해야겠죠
털이 라고 해서 저장을 할게요 자 먼저
홈은 폼 태그 가 먼저 시작을 해야 겠죠 그래서 홈 태그를 시작한다.
그러면 닫는 태그 자동적으로 나오고 있구요 여기서 이제 말 때 이름이다
이름은
정보를 은 이 칼 필요없겠죠 그래서 이름은 임프 태그를 바로 넣어주는데
밴프 태그 타입을 어떻게 텍스트를 넣어 줄게요
그리고
텍스트로 넣어줄게요 다음에 뭐가 필요하다
나중에 서버에서 바르기 차값을 더 내밀한 속성 꼭 넣어줘야 합니다 유저
냄 이라고 정의해 주도록 하겠습니다 자 임프 태그는 닫는 태그를 같이
이렇게 혼용해서 같이 쓸 수가 있겠습니다
자 행 박대 행하기 위해서 비열 태그 넣어 줄게요
재단의 비보 한번더 거야 비밀 언어 넣어주고요
자 임프 태그로 넣어주면 되는데
타입을 어떻게 음식 시켜 되니까 패스워드 지정 할게요
네임을 유저 패스워드 로 지정을 하겠습니다
그 다음에 br 태그 토너 어준 될것 같구요
자 그 다음에 폼 태그의 반드시 들과 대한 속성 액션 깝 들어가 되겠구요
잠의 메쏘드 메소드도 들어가 되는데 갭 방식이 나토는 포스트 방식을 넣어
주면 되겠습니다
안 넣어주면 된다구요
안 넣어주면 기본적으로 포스트 방식으로 캡 방식으로
전송이 되어 질 수가 있겠습니다
자 그 다음에 어 셀렉트 바텀 더 볼까요
셀렉트
자 셀렉트 를 넣어 주는데 그 아이템 하나 하나는 옵션
옵션으로 넣어주면 되겠구요 그래서 김치
그 다음에 으
굴곡이
그다음 fer
그 다음에 비빔밥 이렇게 할게요
자 이렇게 하고 한번 실행해 볼까요
브라우저에서 확인을 행복해요 * 시작해 보면 요런 갚지 나오겠죠
이렇게 해서 멀티 루
이게 멀티가 아니었네요 자 멀티 속 소음 좋을까요
자 멀티플 속성을 주도록 하겠습니다
뭘 tv 풀
총을 죽어 다시 확인해볼게요
자 그러면 이렇게 여러 가지 선택을 하실 수 있겠습니다
자 이렇게 해서 쭈우 한번 타이핑을 여러분이 시간을 내서 한번 해보시구요
어 요런거 테스트 해야 하는가 아니면 체크박스 라디오 는 꼭 해보자
되겠죠 사용 공략한 특이합니다
잠의 맨 마지막에 뭘 해야 된다 임프 태그로
써 미술 하나도 적자 그렇지 전 성이 될 수가 있겠습니다
그래서 제출을 누르면
제출을 누르면 어디로 액션에 지정한 경로로 갈 수 있겠습니다 여기 보면
아까
어 파일 요거 때 보셔야 겠죠 화일 찾아 들어가는거 요런 것도 꼭
해보시길
어흑 보시면 될 것 같구요
저기서 폼 태그는 아까 제가 말씀드렸듯이 있고 잘 알고 게재됩니다 잘
알고 계시지 정확한 정보를 사용될 때 바라서 서버 쪽으로 정확하게 보낼
수 있기 때문에 잘 익숙하게
어 숙지를 하시기 바랍니다
자 그 다음에 레이아웃 구성 태그 div 태그와 스 펜 트 가 나오는데
무지무지하게 중요합니다 실제적으로 우리가 홈페이지 만들때 각 태그 글을
하나 줄 아는 것도 중요한데요
어디 아이 부팅을 한 스 펜 태그를 이용해서 특히 지하 임태경 에서
전체적인 홈페이지 전체적인 레이아웃을 잡는게 가장 먼저 초기에 작업이
돼야 되고요 그것을 잘 잡아야지 그 안에 세부적인 내용들도 다 체험 할
수 있겠죠
그래서 di 특 아스펜 태그 알아보도록 하겠습니다
다시 산 예제를 분 하도록 할게요
음 자 브라우저 3 보도록 하겠습니다
자 보시면 di 블럭 이에요 자 html 에서는
강 요소를 태그를
블록 요소와 크게 두가지 풀려날 수 있습니다 블럭 요소와 라인 요소로
나눌 수가 있어요
댓글 0개
등록된 댓글이 없습니다.