Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 17강 스마트폰 레이아웃-I
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 볼수 있는 다 잘 html css 17번째 시간 스마트폰
레이아웃에 대해서 살펴보는 시간을 갖도록 하겠습니다 자 우리 같이 지나신앙과 지난 시간을 거쳐서
웹페이지 pc 상에서 이루어지는 웹페이지 실전에 페이지에 대해서
살펴보았습니다
그래서 야우 닷컴 사이트를 예를 들어서 전체적인 레이아웃을 우리가
잡았구요
어 그 다음에 일반적인 쇼핑몰의 전체적인 레이어드 잡았습니다 그리고 지난
제안에
웹폰트 란 고수 웹폰트 란 고도 살펴보았습니다
자 오늘은 이제 스마트폰 요즘은 스마트폰을 떠나서는
어 제외하고는 어떤 웹 환경이 라든가 이런걸 말할 수가 없겠죠
그래서 스마트폰에서는 어떤 레이아웃이 어떻게 적용이 되는지 그리고 주위에
대상이 어떤 것들이 있는지에 대해서 한번 살펴보는 시간을 갖도록
하겠습니다
자 일단 살펴볼 내용은 어
뷰포트 라는 얘기가 나와요 그래서 부 포트가 무엇인지에 대해서 먼저
살펴보고 요 다음에
pc 상에서 이루어지는 웹사이트 웬 문서를 만들 때 고 똑같이 헤더가
있습니다
그래서 헤더 흐름을 만들어 보고 다음에 네비를 제작해 보고 다음 시간에
본문과 퓨 터 를 제작해 보도록 하겠습니다
자 먼저 그 pc 상에서 이루어지는 웹 문서를 말고 스마트폰에서
이루어지는 모바일 환경에서 이루어지는 웬 문제의 경우 뷰포트를 명시를
해야 됩니다
제 웹브라우저의 html 문서에 특정한 정보를 나타내기 위한 태그로 메탈
태그가 있습니다
여러분들이 우리가 지금까지 한 html 먼저 상단을 자세히 보시면
메타태그 란 곳이 있어요 금액 자태가 하는 히칼은 뭐냐면 내가 지금
만들고자 하는것 사용자가 지금 보고자 하는 보고 있는 그웬 문서에
눈썹 많이 갖는 특정한 어떤 설정 정보들을 거기다가 값으로 입력을
해줍니다
그래서 html 문서에 특정한 정보를 나타내기 위한 태그로 메타태그 가
있습니다
모바일 웹브라우저의 저는 브라우져의 화면 설정과 관련된 정보를 제공하기
위한 방법으로 뷰포트 메타 태그를 사용합니다
왜냐면 제 우리가 pc 는 사실 pc 는 이렇게 브라우저가 제 친구네
집에 이만한 브라우저가 있고 나는 이렇게 와일드한 넒은 게 있어요 그죠
이런 다 하더라도 우리가 어떠한 사이트를 더할 때 친구집에서 있는
모니터에서 봤을 때 하고 내가 갖고 있는 와이드형 모인 터에서 봤을 때
하고 사이트가 뭐 특별하게 달라 보이진 않습니다
사이트에 포키 10 되어서 일만 하다 그러면
그대로 내화 면서도 이렇게 보여요
단지 네가 사용하는 모니터는 크니까
좌우 여백이 많이 보이는 거죠 요런 차이가 있습니다
하지만 모바일 디바이스 스마트폰 모바일 디바이스는
제조사마다 엄청 많은 사이즈가 꽤 있어요 이 말하는 것부터 시작해서
이렇게 커다란 것 있고요 심지어는 타블렛 있죠
이렇게 넓은 타블렛 또 있고 이 사이에도 굉장히 많은 싸 이 즈 엄청
많은 사이트 들이 존재할 수가 있습니다
그리고 이 그 사이즈에 따라서 브라우저와 보일 때 이렇게 곡 여백이
좌우로 생기지 않고 요 항상 어떻게 되요
단말기 크기가 lcd 화면이 담날 개의 화면이 작던 아니면 크던 상관없이
항상 꽉 차게 브라우저가 노 10 치죠
그래서 이런 특정 정보를 디바이스의 가루에 기대 하든가 이런 특정 정보를
나타내기 위해서
웹브라우저 바일 웹브라우저에서 는 브라우저 의하면 설정과 관련 정보를
제공하기 위한 방법으로 물을 사용한다. 뷰포트 메타 태그를 사용합니다 즉
문제 맨 하하 상단에 내가 이름을 넣어 준 거야 메타태그 캐릭터 요
utf-8 을 쓴다 문제였습니다 그 다음에 뷰포트 이름 뷰포트 구요
콘텐츠는 뭐냐면 위드가 로는 디바이스 의 가로 사이즈 그렸습니다
나는 처음에 pc 는 1000 팩 3 림은 1000 픽셀 800p 네팔
픽스 저어 들어가죠 하기 때문에 쪽만 모니터에서 여백이 만큼 보이지만
커다란 모니터에서 여백이 이렇게 많이 보잉 거죠
하지만 모바일 환경에서는 이 가루를 정확하게 세팅을 할 수가 없어요
왜 모바일 환경에 따라서 제조자 에도 나오는 단말기의 따라서 화면 크기가
다 제각각이기 있지요
그래서 위드는 디바이스의 바로 사이즈를 그대로 채팅을 한다. 이렇게 준
겁니다
예절 스킨은 확대 책 소 손가락으로 핑 것 손가락 두개 가지고 확대
축소를 하죠
웹사이트를 그때 처음에 브라우져를 때 사이트 1.0 1.0 인격 그냥
노무라는 때
디폴트 상태 입니다 자료 가장 잘한 것도 1 점령 그 다음에 유저가 sk
그 손가락으로 확대 축소할 수 있는 기능인데 걸을 노 하지 못하게 한단
얘깁니다
그래서 이런 정보들을 퓨 퍼트 메타태그 라고 하고요 사이트 상단 해다가
명시를 해 주면 되겠습니다
자필 퍼트의 소통 들은 방금 제가 만큼 말씀드린 내용들이 인데요
위드가 있고 화이트가 있고 인 2절 스케일 us k 러블
그 다음에 미니멈 스케일 맥시멈 스케일이 있을 수가 있겠습니다 이런
것들을 그때그때의 설정을 해주시면 되겠습니다
자 그러면 실제적으로 이제 왜 헤더 부터 시장에서 pc 상에서 이루어지는
웹문서 제작한 거 똑같아요 헤더가 있을 수가 있고 그 다음에 gm bl
엔딩이 있을 수 있겠고요
그냥 그 통 들어진 앱이라 그렇죠
그 다음에 컨텐츠 항목이 있을 수가 있겠고 밑에 부분 에프터 항목이 소의
긋고 그럼 커 다락 그 항목들을 전체적인 항목들을 나누었고 그 안에서
다시 세부적으로 면을 분할해 나가면서 면 문서를 만들어 주시면 되겠습니다
절에서 먼저 헤드를 제작할 텐데 헤더를 우리가 코드를 보기 전에 먼저
말씀드리면 요하며 는 pc 상에서 보는 화면니라 어디 스마트폰
모바일 환경에서 모바일 환경에서 제공되는 브라우저를 통해서 보는
화면입니다
그래서 여러분들이 실제로 테스트를 하려면 여러분들이 p 시장에서 코딩을
하더라도
비주얼 스튜디01 쌍 익스프레스 202 서버 웨이브가 꼭 코딩을
하더라도 브라우저 상에서 피치 장에 있는 블러드 크롬이나 인터넷 익스플로
갖고 바 저는 정확한 결과물을 확인할 수가 없습니다
환경이 다르기 때문에 그래서 이것을 정확하게 확인할 연말을 어떻게 되냐면
어 호스팅을 받는게 좋아요 웹 그 호스팅을 무료 웹호스팅 한데도 여러분도
있구요 헤매도 있고 국내에도 여러 있는 거 아니면
어 자기야 웹 프로그램을 좀머 전문적 을 하고 싶다 그럴 때는
어 무료 말고 유료 웹 포스팅도 월 1000원 부터 시작해서 만원 이만원
옷 좀 비상 국도 여러가지 있습니다
그런 고를 서비스를 받아서 호스팅 업체에서 서비스를 받아서
웹프로그램 한다.면 dvd 필요 하겠구요 그 다음에 그 서버사이드 언어도
필요하겠죠
그런것도 여러분이 테스트해볼 수 있으니까 한번 그런것도 시도를 해보시면
좋을 것 같습니다
저같은 경우에는 제 팻 임포 라는 사이트에서 포스트 사이트에서 무료
호스트 제 개정 블로그 스터디 일이라고 해서 개정을 하나 만들었습니다
여러분들 여기 그 무료 호스팅을 받을 분들은 한번 들어 촉 톤을 조금
떨어지지만 그 사용한 데는 아무 지장이 없습니다 재패 림프 사이트 가서
간단하게 개정 악을 하나 만들어 낼 수가 있겠습니다
그래서 그 곳에다가 지금 만족은 예제 html css 17년 드 바 ex
1 점
html 화일을 올려 나요 업로드 해요 수시로 계속 ftp 프로그램을
열어 놓고 계속 업로드를 하고 실제 확인 어떻게 해요
스마트폰 제가 가지고 있는 스마트폰에서 이유 아래 http 부터 시작해서
블러 스터디 1 제패 서 요 문서 까지 가는 url 주소를 브라우저
입력을 해서 나온 화면 이유 화면입니다
지금 여러분들 확인 하려면 이 결과물을 작업을 하면서 계속 수시로 확인을
해야 되겠죠 보면 옆에 스마트폰을 앞두고
ftp 프로그램을 열어 놓은 상태에서 계속해서 여러분이 작업하고 있는
것을 서버 쪽 으로 보낸 다음에 브라우저 스마트폰 브라우저 를 하게
통해서 확인을 하시면서 작업을 해주시면 되겠습니다 자 지금은 동영상 하다
보니까 제가 실제로 확인하는 과정은 못 드리고요 이렇게 굿 으로만 설명을
드리고 바로 코드 리뷰로 들어가도록 하겠습니다
아 코드 리뷰를 하구요
자 됐습니다 자 이것을 웹브라우저에서 포기하면 열린 열려요
예 근데 내가 원하는 대로 정확한 환경 설정의 되어지지 않습니다
그래서 가급적 이는 여기서 된다고 하더라도 되는 기능이다 하더라도 실제로
모바일 환경에서 보면 안되는 기능일 수 있고요
여기서 안 된다 하더라도 모바일 기능을 섞는 될 수가 있습니다 그래서
항상 정확한 환경 설정을 해 놓고 작업하는 좋겠죠 그래서 아까
말씀드렸듯이 무료 웹호스팅 업체 등을 이용해서 여러분이 직접 부팅한
다음에 그쪽에 서버 쪽에
회를 올려놓고 스마트폰 웹브라우저에서 여러분이 확인을 하면서 작업을
하시는게 좋습니다
어 저한테 후에는 지금 뭐 일단은 이렇게 그냥 브라우저와 께요 스마트폰
여기도 1 뛸 수가 없으니까 이렇게 놓고 대략적으로 설명을 해 보고
여러분들은 실제로 스마트폰 갖고 해보시기 바랍니다
자 일단 헤더를 제작할 텐데요 자 html 구조부터 볼게요 자 임프 지
있구요 임프 뒤에 토 글이 있네요
이제 뭔가 토글 보그 온오프 기능이 있죠
체크박스 타입이 체크 없습니다
자 div 가 있구요 레비 있습니다 그래서 레비 어디서 여기서 부터
시작을 해서
쉬운 눈가 전체를 다 감싸고 있는 것 같네요 아 여기까지 감싸고 있네요
렙 태그 가요계 # 했는데 이래 테고 를 감싸는 중 태가 안 보이죠
빠진거 같습니다 그러면 여기에다가
그 단어 어딜까요
체의 v
그래서
이렇게 하나 넣어 줄게요 빠진 것인데 그럼 에러 표시 없어지겠죠
차 자 이제 보도록 하겠습니다 자렛 태그로 전체적으로 1 감사 좋구요 그
다음에 헤더가 있습니다
그래서 헤드 아의 아이디는 레인 헤더 라고 되어 있고요 그 다음에
여기에 음 카테고리 피앤지 에서
이미지가 이렇게 들어가 있습니다 카테고리 핫한 유연석 이겠죠 줘 어
자 다음에 모바일 h1 태그를 해서 모바일로 이렇게 글자 타이핑 도
있구요
다음에 라벨이 들어가 있습니다 라벨 태그를 이용해서
이미지를 넣어 주고 있어요 메뉴 png 이 녀석입니다
자 그럼 야이 이렇게 3가지 요소 카테고리 글자 몹 im nu 는
헤더로 개통돼 있는데 어떻게 css 스타일에서 레이아웃을 만들고 있는지
살펴보도록 하겠습니다
자 헤더를 안보면 레인 했던가요
이름이 맨 해두죠 그전에 인 헤더를 딱 가보니까
높이가 45 픽셀 이구요 백그라운드에 백그라운드를 주고 있습니다
자 그라데이션 백호 가운데 이거이 보나마나 1 픽셀 인데 이 픽셀이 필
색 자리를 어떻게
왼쪽 소프트웨어에서 오른쪽으로 쫙 에서 백그라운드로 깔고 있는 거죠
그죠 그래서 url 이미지 경로를 지정해 주고 있습니다 이미지 폴더에
빚이 헤더 png 로 해서 왼쪽도 조금 까지 쭉 꼭 저 깔고 있고요
이 이미지일 픽셀 짜리 가로 1 픽셀 짜리에 이미지의 높이가 사실 뭐
픽셀의 겠죠 그래서 한 라인 많이 이렇게 깔린 것이 보여집니다
자 그 다음에 여기 안에 h1 태그가 있어요 모바일 이 글자 줘
그 다음에 메인 헤드 안에 a 태그도 보일 수 있구요 라벨 태그 돕는다
a 태그도 뭐 이걸 아벨 태그 듣고 있어요 아까 자 그런 녀석들을 다
블럭을 줍니다
블록을 두고 높이 32px 포이즌 앞설 로 떨어졌습니다
어 자 그러면서 앞세 루트를 중 나서 a 태그에
레프트 이 녀석이죠 레프트 면
에녹이 줘 래프트 예가 라이트 구요
그래서 레프트 를 어떻게 한다.고요
레포트는 왼쪽으로 더 씨 픽셀 위로부터 7 픽셀 왼쪽으로부터 시 픽셀 위
로프트 7p 3 떨어진 곳의 위치를 하구요
가로는 80 픽셀로 고정시켜 놓았습니다
자네 라벨이 있었죠 아까 렐은 요 맨 이었죠
그리고 클래스가 라이트 였습니다 얘는 왼쪽에 오른쪽 오른쪽 으로부터
cpx
자다 압수 루트 예요 절대적 위치해서 왼쪽 오른쪽 toc 픽셀 위로부터
7부 떨어진 곳에 위치 하고
가로 사이즈는 6픽셀로 지정 했습니다
음 되시겠죠 그래서 헤더를 이렇게 카테고리와 모바일 메뉴를 구성했습니다
자 여기 보시면 위쪽에 html 맨위에 보면 임프 태가 있었는데 임프
태그 안보이죠
자 왜 안보이지 한번 찾아보도록 합니다
제 임프 태그 이름이 뭐였죠
음 토 그렸네요 토 글에는 어떠한 속성 이끼 레 화면에 안보이는 지
보도록 합니다
톡 우리 의 디스플레이에서 돈 자 농가 우리 자생 해보시면 디즈 플레이
항목과 비 쥬 얼 리 티가 있었죠 지지 플레이도 는 위치에 공간도 없애고
이미지도 아얌 화면상에 안보이게 하는거 있구요
비쥬얼 빌리 t 의 어 그 키드는 어떤 거 있죠
자리는 남겨놓고 떠요 그 자리는 확보해 누고 실제 이미지만 환상에서
안보이는 기능 햇죠
자 이번에는 디즈 플레인 우니까 이 위쪽에 있어야 되는데 없어 버린
거에요 전 날려 버린 겁니다
왜 날 은지를 점이 타 보기로 하구요
자 다음에 gmb 가 있어요 gmb 의지 mb 가 ll 에렌 딛고 gmb
요 맨 1 클릭하면 여기에 나온 예 맹이 맨 입니다
자의 미니도 클릭을 하면 나오고 다시 클릭하면 들어가고 요런 구조로
되어있는데 어떻게 이런 구조를 만든 지 살펴보도록 합니다
자지 mb 를 보니까 gnb 이렇게 덩어리 줘 큰 덩어리의 그리고 어
gmb 랩이 있고 gmb 가 있고 리스트로 쭉 나와 있습니다
그래서 gnb 123 되게 되는데 잘 리스트 같다 옆으로 붙여 쪄요
그러면 레프트 속성을 이용했을 것 같아요
작아서 한 번 봅니다 gmb 레븐 디스플레이 눈 이래요
아 처음에 쌀까 탕 올리면 안 보여야 돼요
자리도 없었죠 있죠 안보이죠 그래서 디스플레이 눈으로 좋구요
자 디스플레이 눈이지만 보던 주네요 cpx
가 상하 좌우 다시 픽셀의 요런 3 찐한 생으로 좋고요
다음에 토굴에 체크
톡 우리 상태의 선택해 줘 톡 우리 선택되어 있을 때는
4배에 자존 선택자
gmb 랩은 어떻게 해야 디스플레이 블로그 래요 보이는 거에요
아 톡 우리 임프 태그 처음에 우리가 만들었던 임프 태그
얘를 갖다가 토글 체크박스 니까 오노 포기 있는거겠죠
그래서 뭐 높은데 온 이에요 체크 되어 있어요 그러면 글로벌 을
넵 이게 전반 랩을 어떻게 한다.고요 보이게 블로 그래서 보이게 만드는
거예요 즉 이 상태입니다
어 그리고 그렇지 않을 땐 어떻게 되요
노니까 안보이게 되는 겁니다 자 그러면 토글 버튼은 온오프 하면 되는데
통을 버튼 안보이죠 지금 디스플레이 토글 더 디스플레이 눈 이에요 눈이
내용을 다 안보여요
그러면 어떻게 디스플레이에 논을 얘를 갖다가 온 어플 하는지 알아봐야
겠죠
어떻게 하면
교육 내려와서 html 태그를 보면 자애 가토 글인데 예를 온오프 해야지
여기 있는 글로 메뉴가 보였다 안 보였다 합니다
css 로 설정해 왔죠 기본적으로 안보이다가 디스플레이 누리다가 톨
버튼이 오니 되면 어떻게 되요
얘가 블로 그래서 보이게 된 거죠 그러면 토굴 버튼을 오너 플레이되는
데톨 부터 안보이니까 5+ 없습니다
그런데 여기 메뉴를 클릭하니까 보이고 안보이고 해요
금이 메뉴 하고 뭔가 관련이 있을 것 같아서 html 태그를 게 봅니다
보면은 자 여기 있는 메뉴가 라벨 태그 했죠
라벨 태그 그래서 나이트에서 왜 오르도록 붙였는데 요
저기에 포 라는 속성을 줘요 얘는 누굴 위약과 하면 토글 애가 아 이제
토 글이죠
임프 태그 id 가 토 그리 녀석을 위한 여성입니다 이 라벨은
그리고 옹 클릭이 돼 있어요 아 이 라벨 이 라벨을 갖고 메뉴 라는
라벨을 클릭을 하면 애가 누구를 적 똥 시키냐 면 임프 태그 이 녀석을
작동시킵니다
그렇죠 끌어와서 예 상태 선택자 토굴에 상태의 선택 자에 의해서 체크가
되어 있으면 어떻게 된다
랩에 자선 선택자 gnb 랩이 디스플레이 블로
화면에 보이게 되는 거겠죠 그쵸
그렇지 안테 체크가 언 체크 되요 그러면 어떻게 디스플레이의 눈으로
화면에 가려진 거구요
그래서 얘 를 클릭함으로써 이렇게 보여지고 안보이고 할 수가 있겠습니다
자 그러면 토굴을 왜 만들어 놓은 지 아시겠죠 토굴을 만들어 놓고 매
디스플레이 오늘 했는지 이해가 되실겁니다
자 그래서 gmp 까지 이렇게 만들었고요 그 다음에 여기 보면 ln 비듬
안되요 1조 로컬 네비게이션 봐도 만들어야겠죠
그래서 로컬 네비게이션 바를 만들기 위해서 밑에 보면
여기에 gmb 의 유에 라고 애 라인은 여러분들이 야만 했던 내용 인간
보세요 플루트 에 래프트 좋구요 맞은 패딩 놓고 텍스트 올라 의 박스 4
이징 다 안쪽으로 인사 애들을 주기 위해서 보다 더 방세를 좋습니다
* 어려운 내용 아닌가 여러분의 한번씩 좋다 보시구요
사람의 lnb 가 나와요 lnb 는 높이가 60 픽셀 이래요 여기가
60p 쎄 다음에 백그라운드 칼라 는 녹스의 3
녹색이 깔렸고 요 다음에 un 에다가 오버플로 길어졌어요 얘를 준 이유는
거야 겠어요
ul li floor ft 를 좀 더 주기 위해서는 all 아이를 감싸고
있는 그 상위의 태그의 오버플로우 히스 늘 주어야지 된다고 우리가
배웠습니다
자 그 다음에 li 에다가 플루트 속성을 좋구요 다음에 위드는 20 픽셀
1 20% 이래요
이게 총 5개 기 때문에 스마트폰 예를 들어 커요
컷 일에도 다 이렇게 갈 늘어나겠죠 얘가 조금씩 작아요
그럼 어떻게 되요 그럼 좀 작게 돼야 되겠죠 그래서
군중 중 분할을 하기 위해서 20% 중 겁니다 만약에 세계다 그러면
33.33% 를 중 되겟죠 4개다 25% 정도 여러분이 상황에 맞춰서
그때그때 주시면 되겠습니다
잘 높이는 6시 픽셀이 고요 그 다음엔 라이트 66세 높이가 62 고행
간 그 높이가 62 니까
가운데정렬 될 수 있겠구요 그 다음에 이 건은 그 글자 색상
댓글 0개
등록된 댓글이 없습니다.