Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 18강 스마트폰 레이아웃-II
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 볼수 있는 다 자제하세요 우리가 17강 부터 스마트폰
레이아웃을 제작하는 그대로 살펴보고 있습니다 그래서 지난 시간에 우리가스마트폰 레이아웃을 헤더 부분을 우리가 한번 알아 봤구요
거기서 중요한 것은 네비게이션 바 지 mb 와 lnb 를 어떻게 나열을
할건지 퍼센트 지로 끊어 놓았고 나열을 했구요 앤비 같은 경우에 다음에
gmb 같은 경우에는 메뉴 라벨 버튼과 다음에 그인 프테 그의 토글
버튼을 이용해서 온 오프 기능을 외조 화면에 보였다 안 보였다는 그런
기능을 구현을 했습니다
자 헤다 분이에요 pc 든 스마트폰 레이어 주다해 다 부분이 작업에 반
이라고 할 정도로 굉장히 좀 많은 공주가 들어가는 부분이고요 자 오늘은
그거에 의해서 본문 제작과 푸터 본문 부분과 푸터 제작 부분에 대해서
살펴보도록 하겠습니다
자지 하셔야 제가 말씀드렸듯이 님 스마트폰 환경 이다 보니까 p 시장에서
확인한 것은 한계가 있어요 그래서 무료 호스팅을 받으시는게 좋다고 있고요
그곳에서 여러분들이 실제 스마트폰 ftp 로 화를 올리신 다음에 스마트폰
환경에서 브라우저를 통해서 확인을 수시로 하면서 작업을 하시는게 가장
좋습니다
자 그러면 지난 시간에 이어서 코드를 좀 계속 볼게요 자 지금 저와 같은
경우에는 스마트폰 환경에서 푹 정상 강의 다 보니까 스마트폰 환경에서
여러분들에게 보일 수가 없겠죠 그래서 일단은 그냥 브라우저에서 이렇게 p
시장 프로세서 보시면 여러분들은 스마트폰 환경에서 보면서 작업을 하시기
바랍니다
자 그 다음에
어디까지 했죠 여기 lnb 결과 졌죠 그러면 섹션 이제 나와요 컨텐츠
부부간
자세 짤 보니까 did 비전 태그를 이용해서 하이서울 나오고요
다음에 hr 태그로 한줄 꺼지고 있습니다 이렇게 대단 의 섹션 바디
디비전 태그가 나오겠죠
자 그 모바일 환경에서 의 스마트폰 스마트폰 환경에서 의 db 저는 거의
대부분 다 이렇게 그냥 수익 구조로 쭉 내려갑니다
어 사이즈가 화면 사이즈가 작기 때문에 굳이 여기서 또 면 분할을 해서
수평 구조로 간다던가 메뉴를 제외하고는 거의 그런 레이아웃은 없구요 다
이렇게 수직으로 가서 스크롤은 무한대로 될 수가 있으니까
그저 수직 구조로 갑니다 그래서 3시간 p 태그가 보이구요 p 태그에
서울시가 인조 내서 이렇게 p 태그 u 부분이죠 서울시가 인정하는 요
부분에 문과 들어가고요 다음에 또 p 태그 단락 태그가 나와서 여기서
어떠한 글들이 쭉 테이핑이 되고 있습니다
자 그러면 여기에 어떠한 css 속성 이 들어가는지 복도로 할게요 자
보니까
색상이죠 자 섹션의 패딩 c 픽셀 상하 자욱 모두다 시프트를 들어가
있습니다
자 세션은 여기 전부 다 져 전부다 안돼 패딩이 c 핏을 다 들어갈 때
즉 위쪽에 도 지금 c 픽셀 들어 한거구요 왼쪽에도 싶은 세를 들어 간
거고 오른쪽에 도시 핏을 들어와 보고
하단 여기 도시 픽셀이 들어와 보겠죠 그래서 패딩을 다시 픽셀 씩
동등하게 좋습니다
재다 맥 글자의 칼라는 3030
회색 개월이 줘 약간 진한 회색 개울로 표시를 해 줬습니다
그러면 섹션 안에 있는 모든 글자는 기분 좋다
요 색상을 가지요 가질 수가 있겠습니다
다음에 섹션 바디가 나와요 자 섹션 받은 어디냐면
섹션을 건데 섹션 받으면 그 안에 첫번째 잇는거 자 두번째 있는 덩어리
입니다 즉 요금 대역이 여기서도 하이브 하이서울 브랜드 요건은 섹션 해
다구요
요기 바디에 요부분 요 부분이
요건 요 부분이 섹션 바디입니다 그래서 섹션이 바디는
음 보시면
예 되겟죠 세션 바지는 섹션 바지에 후 전 태그 썼네요 하피 후손
태그에서 또 어떤 걸렸어요 구조 선택자 를 써 왔고 첫 번째 있는 그 피
거기는 폰트의 컬러 칼날을 요새 바꾼 되요
자 세션 바디에 후 전 태그 피를 썼어요
세션 바리에 pu 가다 선택 되겠죠 그러면 여기서 섹션 바지에 피트가 매
키스의 지금 하나가 보이구요
2 개봉 걔 둘다 하겠죠 2 단대 이 중에서
이중에서 어떻게 해요 이중에서 구조 선택자 를 이용해서 첫 번째 태그
즉 그 녀석에게 만 요런 속성을 주는 겁니다
그 녀석이 누구에요 요기 줘 서울시가 인정한 최고의 0 정부는 4일
브랜드 4월 여기 부분입니다
그래서요 부분에만 그 글자의 색상을 3d a 사의 팔로 하구요 폰트
웨이트는 두껍게 글자는 두껍게 의 다음에 폰트 사이즈는 1.1 약한
키웠어요 여기 밑에 는것도 약간 더 크죠
다음에 패딩은 상 하 자 가운데 2개가 밖에 없으니까 앞에 있는 값이
상하고 하위 아래의 픽스 cp 쎄씨 공통으로 들어 왔구요
다음에 좌 오는 0 픽셀 안들어 1 들어가겠죠
그래서 첫 번째 구조 선택자 를 정해서 첫 번째 p 태그에 만 속성을
이렇게 좋구요
자 그 다음에 밑에 보니깐 섹션 바디에서 p 태그에 이번에는 구조 선택자
영서 두 번째 p 태극 두번째 피트가 누구에요 여기 부분이 제 2 부분
서울시와 여기 쭉 대부분 이 부분에는 백그라운드 이미지가 들어가네요 자
백그라운드 이미지 출 때 경모 url 함수를 이용해서 어느 경로에 있는
이미 진지 정치 정해준 하고 있습니다
그래서 이미지 폴더에 서버 있겟죠 이 문서 html css
이거 제가 ftb 잠깐 보여드릴께요 처음 외부를 하시는 분들이 애 치태
ml 학습하기 내자는 처음 학습 하시는 분들도 꽤 계실 거에요 그래서 뭐
장치 보이면 아가 제가 그랬죠
여기 제 펫 인포 에 라는 사이트에서 무료 호스팅 에서 호스팅을 봤다 고
그리고요 개정 만들었어요
그래서
ftp 프로그램을 가지고 내가 계정을 만들면 암호화 설정이 될 수
있습니다 그래서 제는 저는 여기에 아이디가 이 거구요 id 자동적으로
할당이 된겁니다 아이디가 이거 고 비밀번호가 있었습니다
그래서 이거 가지고 연결을 했어요 이렇게
응 연결을 하고 나니까
요런 이제 이게 제가 서버에 저한테 할당된 공간입니다
이 안에
들어가보면 이렇게 html 문서가 있어요
그래서 요거 를 찾아 들어가기 위해서 경로가 잃게 되는 거에요
이 앞에 까지는 서버 측에서 호스팅 회사에서 정해준 경로 구요 2d 에
가 이제 제가 파일을 올린 경로 겠죠
작은데 2화 1에서
이미지가 있는 경로는 또 이미지 폴더로 들어가면 되요 그러니까 여기서
이미지 폴더 여기 있죠
이 안에 들어가서 어떤거
비주얼 14.jpg 요 이미지를 배경 화면으로 순간 얘기입니다
자 지금은 html 수 없니라 ftp 에 대해서 설명하기는 좀
그렇고요 ftp 대각 쪼금만 설명을 드리면 화일을 전송 하는
프로그램입니다
우리가 웹 프로그램 html 첫 시간 줌이 제가 설명을 되었는데
프로토콜 중에 http 프로토콜 도 있고 at ftp 프로토콜 도 있고
뭐 smtp 도 있고 dhcp 9% 통해 만들었죠
그래서 우리가 웹 서비스를 그 받는 서비스는 http 프로토콜을 이용한
더 그랬고요
ftp 프로토콜은
화일을 전송 해요 그게 바로 이 ftp 프로그램이 그렇게 그 ftp
프로토콜을 이용하는 프로그램이에요
그래서 내가 어떠한 이쪽에 내 로컬 핏이
내가 지금 자궁은 로컬 pc 입니다 그리고 이쪽이 서버에 요 그래서 내가
작업한 걸 갖다가 서버 올려요
그러면 인터넷 브라우저나 이런 스마트폰의 브라우저를 통해서 해당 경로를
찾아 들어와서 해당 문서가 열릴 수 가 있겠습니다
아시겠죠 그래서 ftp 프로그램을 간략하게 설명을 드렸고
어 무료 웹 포스팅을 통해서 여러분들이 한번 직접 활용해 보시기 바랍니다
다운 다시 다운받을 수 있구요 아니면 삭제할 수도 있고 이름을 수정할
수도 있겠구요
자 그래서 어쨌든 백그라운드 이미지를 이렇게 밑에 바닥에 바탕에 좋습니다
사람의 백그라운드 리피트 속성을 줬는데요 팩 그라운드 리피트 속성을 놀이
피트 반복할 지 않게 줬어요
다음에 백그라운드 포지션 x - 600 걸렸네요
그러니까
제가 어떻게 되요 x 축으로 - 6 - 이렇게 온 거에요
지금 화면상에 난 보이지만 이쪽으로 왼쪽으로 - 600원 광 거겠죠
만약에 이게 없다
0 픽셀 이다 이렇게 알아서 어떻게 확인할 어떻게 해요
ftp 가져 다시 올려야 겠죠
sp 에서 가서 얘를 어떻게 우클릭해서 업로드 서버 에 업로드 하는
겁니다
덮어 c 그냥 오르겠죠 덮어씌우고 요 예
자 그 다음에 확인을 해보면 셀에 고치며 그러면 원래는 이런 모습이에요
근데 너무 안 보이니깐 좀 이것을 왼쪽으로 이동 시키기 에서 제가 어떻게
- 600 을 준 겁니다
그래서 어떻게 해요 또 서브의 올려 되겠죠 서버에 또 업로드를 하면 이제
x 축으로 600 이동 된거 확인이 될 수가 있겠습니다
자 이렇게 해서 섹션을 만들었는데 색채는 간단하게 아주 기본적인 구조
만들어왔습니다 여기서 여러분들이 더 많은 구조 면 분할을 해서 뭐 배너를
띄운다 그림과 글자를 같이 표시를 한다.
그러면 여러분들이 그동안 배웠던 기술 기법을 가지고 충분히 해결할 수
있을 것 같습니다
자 다음에 여기 보시면 푸터 나와요 이제 자 포터는
html 태그를 먼저 보면 푸터 가 있구요 그 안에 디비전 태그 div
태그가 세 개가 보인다
첫번째는 로고가 들어가구요 다음에는 인포 어드레스 정보가 들어온다 로고
들어가구요
다음에 여기에 어인 퍼 들어가고 그 주소가 들어갔습니다
어떤 구조로 이렇게 css 가 구정 되는지 살펴보도록 합니다
자 일단 포터 에다가 패딩 상하좌우 고 다시 픽셀 줬어요
그래서 위쪽 여쭈어 아래쪽 다시 픽셀의 들어갔구요
다음에 푸터 에서 로고 라는 부분이 있을 수가 있겠죠 그래서 로고 이
부분은 이 부분에는 img 태그를 이용해 가지고 이미지 쓰는데요
요 자 요건은 보니까 누구 도 더 타 위쪽에 1 픽셀을 줬어요
다음에 아래 뚝 lp 세웠어요 이게 뭐냐면 이상 잊어 이상
어요 선을 주고 패딩을 위쪽 시 픽셀 아래 뚝 시피 쎄면 여기는 좌우
값이 줘 그래서 위쪽 시 픽스 의 아래쪽 시 픽셀을 좋습니다
다음에 텍스트 온라인 글자는 가운데 좀 되요
자 그래서 이미지가 가운데에 위치를 해소해 텍스트는 글자만 가운데 주는
게 아니고요 이미지 같은 요소 이 안에 들어간 요소들을 가운데 정렬을
시켜주는 기능이 있습니다
자 그 다음 에프터 에어 인포 있어요 임포 가요 건요 긴자 서울 산업
진흥 아 에서 얘는
위쪽 패딩 10010 픽셀을 있으니까 약간 떨어져 있죠 지금 cps
들어가 있고요
폰트 사이즈 좀 키웠어요 그래서 1.3 이구요 폰트 웨이트는 볼 들여
그래서 두껍게 처리되어 있습니다
텍스트 원래는 센터 있구요 자 이거 컬러 마음을 바꿔 볼까요
컬러
레드 해볼까요 자 이렇게 바꾸어 어떻게 된다구요 ftp 프로그램으로
서버로 다시 업로드를 해야지
실제 스마트폰 브라우저나 어떠한 태블릿 브라우저 자면 pc 상에
브라우저에서 확인이 될 수가 있겠습니다 에 바퀴가 확인 했고요
자연 여러분도 한번 조금씩 바꾸는 것은 해보시구요
자 다음에 마지막 포토에 어드레스가 있네요 아 맨 밑에 부분 이제 그래서
텍스트 온라인 센터 감정을 시키고 폰트 칼라 바꿔 좋고요 폰트 사이즈
약간 주셨어요
0.92 퀘스트 되구요 아니면 벤 툴에서 정부에도 0.9 로 인식을
합니다
수학적으로 다 이렇게 쓰겠죠 우리가 이렇게 자 밑에 부분 부터 까지 쭉
만들어봤습니다
자 그래서 우리가 지난 시간에 이어서 바디 하고 포털 만들었는데 바닥부터
살펴볼까 정말 별거 없죠
저 아까 말 제가 말씀드렸듯이 에 pc 상에서 웹브라우저를 만들던 아니면
스마트폰이나 타블렛 상에서 의 작동하는 구동이 되는 웹브라우저 화면을
만들 때 바디 나 또는 그 푸터 에 대한 부분은 그렇게 기술적으로
난이도가 있거나 그런 내용은 없습니다
실제로 가장 많은 난이도와 주어지는 것은 헤더 부분이 가장 우리가 많이
나이도 를 필요로 합니다 물론 바디 부분에도 슬라이드 란걸 자바스크립트가
나중에 제이쿼리 라든가 이런거 를 이용해서 많은 기법들이 들어가면 복잡해
지기도 하고
기능들이 많이 생기겠지만 그렇다고 해서 기본적으로 기본적인 뼈대만 잡는
것을 봤을 때는 헤더가 많은 기능을 필요로 하구요
다음에 받아 오프 터는 여러분들이 어 정확하게 만 선택을 해서 정확한
속성을 주어진다면 아무 문제 없이 다 처리가 가능할 겁니다
자 오늘 수업은 여기서 마치구요 지난 시간에 이어서 여러분들이 그 직접
한번 코딩 지난 심했던 내용 헤더와 오늘 했던 바 디 에어 포트 를 직접
타 코딩을 꼭 해보시구요
다음 시간에는 스마트폰 레이아웃을 1시간 동안 걸쳐 같고
음 헤더 본문 포트를 새로운거 새로운 레이아웃으로 다 만들어 볼겁니다
그래서 오늘은 아주 기본만 - 만 볼 타운 되요 번 했던 예제는 기본
맛배기 만 한 거니까
요 정도를 여러분들이 완벽하게 마스터 를 해주시고 다음 시간씩 구강에서
만나는 스마트폰에 이어 약간 난이도가 있습니다
글에 이어 거 지 여러분이 말씀해주시면 스마트폰 레이어 슬 여러분들 이
머리속에 구사하고 있는 거 아니면 어떻게 유명한 사이트에 그 스마트폰
레이어드를 여러분이 직접 타 구현을 하실 수 있는 스킬이 생길 것
같습니다
자 오늘 섬 여기서 마치구요 다음 시간에 끈 매트로 하겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.