Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 19강 스마트폰 레이아웃-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 벌수 입니다 자지 지난 신앙과 지난 시간에 우리가 17강
과실 8강을 통해서 스마트폰 레이어 허브 아주 기본적인 거 을 우리가만들어봤습니다 그래서 고 정도만 만들 줄 알아도
어느정도 스킬 업 이 됐다고 볼 수 있겠구요
자 오늘은 스마트폰 레이어 지난 시간에 했던 거에 조금 더 새로운
기능들을 가미해서 일반적으로 우리가 음 그 스마트폰 블루웹 브라우저에서
많이 볼수있는 그런 레이어 슬 만들어 보도록 하겠습니다
자 여기 보시면 이제 스마트폰 레이아웃입니다 그래서 스마트폰 레이아웃을
만들어 온 데서 의 19장 11번 얘기인데요
자 이것도 마찬가지로 제가 친할 전에 말씀드렸듯이
pc 시장에서 코딩은 하지만 코딩을 뭐 그 스마트폰 아 환경에서 할 수는
없겠죠
폐 시장에서 코딩을 하지만 확인은 어디서 한다.
스마트폰에서 직접 확인을 하셔야 지 가장 정확하게 확인이 되어 질 수가
있습니다
자 스마트폰에서 확인을 하기 위해서는 호스팅 업체 공식을 마틴 다음에
서버 에다가
내가 pc 에서 작업한 걸 로컬에서 작업한 파일을 서버에 올려 놓아야
된다고 했죠 그럴 때 사용한 프로그램이 ftp 프로그램 이었구요
저의 서 그런 과정을 미 사전 작업을 좀 해주시고요
그 다음에 진행을 수업을 진행해 주시면 될 것 같습니다
자 오늘 들어갈 부분은 플러스 털이 에서 요요기 사이트에 결과물이
있습니다 여러분들 스마트폰의 다 가요 주주를 어 입력을 하시면
지금 결과 믈 요 예제 결과물이 나올 수 있겠습니다
자 저는 부득이하게 지금 여기서 할 점 스마트폰 환경을 동영상에서 찍을
수가 없겠죠 그래서 일반 pc 브라우저로 어허 확인을 하면서 작업하는데
여러분들은 반드시 스마트폰 국내서 어허 확인을 하면서 시행착오가 생기겠죠
그래서 작업을 진행해 주시기 바랍니다
자 그러면 열었어요 예
자 브라우즈 성폭행 어요
자 이런 사이트입니다 작은데
어찌 하찮은 우리가 새로운 드마라 봤는데 가로 모드일 때도 깨지지 않게
이렇게 표시 해냄 자라서 가로 모드와 세로 모드를 다 아우를 수 있는
그런 사이트를 만들어 보도록 하겠습니다
자 자 먼저 결과물을 보고 한번 위에서 아래까지 쭉 한번 어떤 구조로
되는지 걸쳐 보도록 할게요 자 위쪽 부분은 해저 일 거에요
헤더에서 메뉴가 있구요 다음에 여기 로고가 있고 그 다음에 나의 정부
마인 포 라는 정보가 있을 수가 있겠죠
그래서 메뉴 헤더에 해당하는 부분이고요
대담 a 홈페이지 요 웹 문서에 가장 화려할 때 보면 되요
서치 메뉴 들어온다 우리가 웹브라우저를 스마트폰에서 웹브라우저 통해서
아니면 왜 하이브리드 앱 이라고
앱을 통한 앱이 있죠 그런것을 우리 살펴보면 이렇게 서치 메뉴가
늘어나 들에 단말의 크기가 2 만 하더라도 아니면 이렇게 작더라도 아니면
가로로 눕혀 떠라 도어 항상 꽉 차는 요런 비율로 들어가 있습니다
그래서 임프 탭에서 검색한 거죠 요런거 에 레이어스 은 어떻게 구성을
하는지 에 대해서도 살펴보는 시간을 갖도록 하겠습니다
그래서 커요 그죠 크다고 해서 애가 인 포트가 짧은게 아니라 크더라도 다
차질을 합니다
자 그 다음에 메뉴얼 mb 가 있어요 친한 식 했던거 와 동일합니다
이거는 mb 가 들어갈 수 있겠구요 다음에 배너 6개가 들어가고
이 밑에 이제 글쓰기 좋아하는데 글자를 보면 글자 쭉 가다가 끝에서
쩜쩜쩜 글자 너무 길기 때문에 그를 말 줄임 으로 나타낸 거죠 이걸
우리가 전문적인 용어로
어 엘리 칩스 처리해라 옵니다 글이 너무 길 때 그를 짬 짬 쪽으로 표정
거죠 그래서 요런 표시는 어떻게 구현을 하는지 어떻게 코딩을 하는지
살펴보도록 합니다
다음에 요런 메뉴 아님 요런 레이어 많이 보여서 그 이미지가 나
들어가구요 이미지 외곽으로 바깥쪽으로 타이틀과 바디 그리 들어갑니다
이것도 마찬가지 그리 말할 때는 쩜쩜쩜 엘리스 처리가 되어 있습니다
자람 에프터 가 보이네요 포터가 보이고 여기에 이렇게 쭉 그 회사주소 가
들어가는 포터는 별다른 건 없을 것 같구요
그래서 이런 전체적인 구조로 이루어져 있는 거 한번 어 봤구요
이제 코드를 통해서 어떻게 구형이 되고 있는지 살펴보도록 하겠습니다
자 먼저 html 구조 먼저 볼게요 자 파티가 샤카 여기서부터 이제
했는데 헤더가 있고요 컨 덩어리 해봤습니다
자 자 이 헤더가 히 헤더 아내는
디비전 태그 하나가 보이고 또 다른 d 변태가 보입니다
첫번째 디비전 태그가 이 부분이에요 메뉴 하고 로고가 나오는 이 부분 쭉
제가 그 언젠가 말씀 드렸죠
홈페이지를 구성 웃는 것을 파악할 때는 수평 구조로 뭐 전라 보시라고 요
그렇죠
수평 구조로 짤라 보니까 이 구조가 먼저 짤려 집니다
그 요 이 부분이 뭐라구요 디비전 헤드 랩 로 글에 요 부분 입니다
자네 밑에 써 채 나오겠죠 그죠 설치는 이 다음 거 디비전 서치 해당하는
디비전 부분이 부분이겠죠
자 자 이렇게 해서 헤더가 크게 두 덩어리로 나누어 질 수가 있겠구요
전 암의 lm 디바이스의 메뉴
로컬 네비게이션 바의 약들의 멀쩡해서
lnb 있는데 레미는 1 2 3 5 6개의 서
리스트 구조 수직 구조의 리스트 구조를 갔다가 수평 구조로 css
스타일을 적용해서 변경을 해서 이렇게 사용을 하고 있습니다
다음에 섹션이 부분이 나오네요 섹션 부분이 없지 새롭게 기네요 여기서도
시작해서
어디까지 여기까지 나오고 있습니다 섹션 부분은 이 부분이에요 큰 내용들
다 세션 인데 섹션 부분도 하나하나 초 각종 앞쪽에 보면 더 열정 한 건
없을 것 같습니다
자 먼저 디비전 테그 큰 덩어리 하나 보입니다
섹션 컨텐츠 01 나 애가 유분이 부분 일어 큰 덩어리 부분
자 이 부분은 글자로 않고 이미지를 많이 걸 차 있네요 그래서
디비전 태그로 룩 1 1의 다음에 루이 2 의 3행 그래서
일행 길엔 첫 번째 줄 이행 그 다음에 3 행을 처리를 하고 있습니다
그리고 그 db 저한테 가 아내는 또 다른 db 저한테 가 있었고
이미지를 2개를 배열을 하고 있어요
제 옆에 어를 여기 배우라고 여기 되더라구요
자 디비전 태그는 기본적으로 타입이 블럭 태그 인데 수평 구조로 가고
있죠
뭔가 또 플루트 등을 이용해서 초평 구조 이 두개의 이미지를 평으로
나란히 놓일 수 있게 css 를 사용해서 적용 레이아웃을 만들었을 것이라
예상이 됩니다
자람에 두번째줄 세번째 줄 동일하게 처리가 되어 있고요
자 그 다음에 큰 덩어리 또 보면 디비전 택은 컨 셉 션 콘텐츠입니다
이부분이 요우니 에요 자 자 요 부분에서 여러분들이 유심히 보여 줄걸
엘리시스 mr 줄이 표시가 어떻게 되는지 봅니다
자 보시면 리스트 타입의 li 태그 돼 있어요 그리고 하이퍼링크 걸려있고
종족이 없이 온 업무는 에꼴 쭉 글자 나가고 있습니다
자 그래도 너무 길죠 그래서 스마트폰 작은 화면에 다 보일 수 없기
때문에 점 점은 편인데
여기에서 html 코드에서 만 보면 엘리스 처리하는 어떠한 특별한 코드가
보이지 않습니다
결국 그럼 어디 css 에서 적용을 했던 얘기했죠 그래서 css 에서
어떻게 1리 실수를 적응 했는지 좀있다 다시 같이 살펴보는 시간을 갖도록
하겠습니다
자 그 다음에 섹션이 콘텐츠 3인 다 얘는 이 부분이에요
이 부분은 이 부분은 또 어떻게 처리해 내봅니다 자 어
리스트가 나오네요 u 에레라 인데 에라이 안에다가 단지 그림이나 결정
않는게 아니라 그 i li 태그 안에서 어떻게 해요
단락을 나눠 가면서 p 태그 2개가 보이죠 저 이렇게 준비되어 있습니다
첫 번째 p 태그에 는 이미지를 넣고 있어요
그럼 두번째 태그에는 글자를 넣고 있습니다 그래서 글자의
어 클래스를 txt 라고 해 봤구요
실패한 태그를 이용해서 글자가 입력되어 있습니다
자 이렇게 우리가 지금까지는 ul li 안에다가 간단하게 이미지 라든가
아니면 내비게이션 바를 만들 때 간단하게 문자를 입력을 하고 마쳤는데
실제로는 이런 형수도 많이 써요 에라이 안에다가 또 다른
뭐 db 저한테 블록 택을 넣어서 거기 안에서 또 잔 내역을 나온다던가
아니면 지금처럼 문단을 여러개를 나서 그 안에서 어떤 구정을 또
레이아웃을 나 간다던가 계속해서 그 안에서 계속 면을 분할 하면서 정보를
제공해 주는 거겠죠
자 그래서 이런 구조로 되어 있는데 이런 구조가 하나만 있는게 아니죠
계속해서 연달아서 지금은 3개가 보입니다
자 이 세계가 어떻게 이렇게 좌우로 레이 없어 갖고 가질 수가 있는지
css 에서 또 살펴보도록 합니다
자 이렇게 하고 나서 세션의 다 끝났어요
s 니다 이렇게 해서 끝날 수가 있겠구요
다음에 마지막으로 포터가 보입니다
그래서 포터는 어 디비전 태그가 하나 있고 야크 안에 문단 태그 가
2개가 보이는데
첫 번째는 이미지가 들어가 구요 두번째는
그 텍스트가 들어 와서 이렇게 화면에 출력을 출력이 되어지고 있습니다
자 포터는 * 뭐 어려움이 없을 것 같고 자
전체적으로 보면 그 다음은 살펴봤는데 푸터 그 다음에 쎄 쎄 쎄 쎄 쎄
쎄 쎄 쎄 쎄 쎄 죽일 점 에서 세션 다음에 헤더 헤더 라고 전에 lnb
다음에 헤더 부분 총 4가지의 큰 덩어리로 구성되어 있구요
센 같은 경우에는 그 안에서 또 어떻게 섹션 콘텐츠 01 큰 덩어리 1
0 2 2 정어리 3 덩어리 컨텐츠 공장에서 채 덩어리로
음 전체적인 내 역시 만들어지고 있습니다
자 그러면 하나씩 하나씩 이제 css 스타일을 이용해서 어떻게 요런
화면이 구성되어 있는지 한 번 살펴 봅니다
아까 마신 될지 중점 조사 귤 살펴볼 것은 임프 태그 설치가 화면 크게
상관없이
좌 우 루 버튼과 함께 다 그 공간을 찾아 보이는거 요고 코드를
중점적으로 보시면 될것 같습니다 처음 나온 내용이구요
자 먼저 strip 이용해서 전체 여기까지가 초기화 코트 라고 생각이
되겠습니다 l 스타리그에서 마진과 패딩을 사용 해 줬어요
영을 좋기 때문에 좌 상담 부터 시작을 하는 깔끔한 탱 아마 저희
홈페이지가 웹문서 만들어질 수 있겠구요
자 바디에 펀드 매물 얘는 서울 u 세레스 이지오 이 물은 폰트가 있나
봐요 그래서 이런 폰트 를 갔다가 쓰겠다 라고 해서 폰트를 지정 해줬구요
물론 이런 폰트 말고 더 예쁜 폰트가 웹상에 있으면 웹폰트를 사용을
하셔도 무관 하겠습니다
잠의 여기에 리스트 스타의 모든 어떠 어딘가에 리스트 스텔라 미안
크리스트 스타일은 어떻게 논 다 빼 머리 있단 얘깁니다 리스트 살 달
최고 하겠다
다음에 a 태가 나오면 그 a 태그에 텍스트 뵙고 레이 션은 및 아래
밑줄 그어진 거에요
그거는 눈 처리에서 밑줄 도 없애 버리겠다는 얘기겠죠
그래서 초기화 코드를 이정도 작성 해 놓고요
지난번에도 말씀드렸듯이 초기화 코드는 여러분이 웹상 을 검색해보면 초기화
코드를 제공 전문 저를 제공해 주는 사이트도 있습니다
무수히 많은 초기화 코드 우 양이 굉장히 많아요
그것은 그런 곳을 이용해서 컨트롤 씨 컨트롤 에서 붙여 되고요 아니면
동료 거 주변에 있는 동료들이 갖고 있는 초기화 코드를 그대로 재활용을
하셔도 무관 r 작업에는 큰 영향이 없습니다 무관합니다
자 이제 봉급표 볼게요 자 먼저 헷 엄다혜 다는
높이가 100 픽셀이 되요 그리고 백그라운드 컬러가 ff 9c 00 예가
아마 아마도 오렌지 컬러 이런 컬러 겁니다 그래서 100 이래요 헤더
아내는 뭐 뭐가 있냐면
로고가 있고 설치가 있습니다 그래서 여기서 또 시장에서 여기까지
높이가 몇 이라구요 100 이란 얘깁니다
드디어 팩 픽셀의 백그라운드 컬러만 주어지고 있습니다
자 다음에 그 안에서 큰 덩어리 2개의 떨어졌죠
로고 랩과 다음에 서치 가이 떨었습니다
자 로고 랩은 먼저 높이가 50 픽셀 이라고 나오네요 57 테니까 여기게
쪽이 그만큼 이 옷이 픽셀이 고 그는 나머지 서치 가 차지하는 부분도
50p x 이겠죠
다음에 로고 랩의 텍스 온라인은 센터 해요 그래서 가운데정렬 되고
있습니다
다음에 라인 헤이트 캅 to 10 이래요 높이가 50 이고 그 행간
높이가 50 이에요
즉 새로 쭉 가운데 정렬이 되고 있습니다
자 그 다음에 포지션은 릴레이 티브 에어 예 릴레이 티브 쓰는거 보니까
이 안에 들어있는 요런 이미지들 뭔가 앱솔루트 로 갈 거 같아요
자 한번 봅니다 자 로고 의 a 링크
로고 랩의 a 는 디스플레이 인라인 블록을 쓰고 있네요
아 그거 보시면
로고 랩을 가볼게요 로그 랩에 가까운 마다 at 가 걸려 있네요
저 세개 요새 타 듯 한데 얘들 갖다가 다 모르신다 인 라인 블록을
쓰는데요
옛날 블로그로 인라인 블로그 건 블럭이 면서 인 라인 의 성격을 바뀌는
거죠
또는 인 라인의 성깔 받고 있으면서도 블럭의 성격 받고 있는 거죠 그래서
우리가 디스플레이 속성 할땐 온도 있었고 인라인 석정리 있었고 블럭
청중도 있었고 인라인 블록도 있었습니다
그래서 인라인을 쓰면서 나는 블로그 60까지 가고 싶다 그러면 인라인
블로그로 소통 을 정해 놓고 썼어요
자 헤더에 로그 랩의 메뉴가 있고 로고가 있고 마인 포가 있습니다 메뉴는
이 부분이구요 다음에 로고는 가운데 부분 다음 min 퍼는 오른쪽 부분이
부분입니다
자 이 부분에 포지션을 r 솔로 태서 레프트 왼쪽에서 c 픽셀 떨어지게
왔는데요
즉 이 부분이겠죠 자 여기서 포지션을 에 플루트 주기 때문에 얘를 감싸
분은 로 고레벨 포지션 어떻게 레벨러 팀을 준 겁니다
그저 인레트 줘야지 얘를 기술 해서 로고 레플 기준으로 해서 정확하게 시
픽셀을 기준 삼아 서시 픽셀을 정확하게 떨어지 떨어트려 놀 수가 있었죠
어 잘 기억이 안 나시는 분들은 다시 돌아가서 그 css 속성 부분에서
우리가 포지션 카마라 봤던거 다시 한번 제가 그때 설명할 때 굉장히 되다
그랬죠
위치를 잡는 거 레이어드 잡는 것에 굉장히 중요한 거니까
다시 한번 잘 모르시는 분들은 꼭 그 반복 학습을 해 주시면 되겠습니다
자 그래서 어쨌든 레프트 cpc 떨어졌어 그래서 cpu 떨어질 게 났구요
다음에 마인 폰은 포지션 아주 루트 얘는 왜 오른쪽으로 퍼시픽 3 떨어진
되요 그래서 라이트에서 cpx 위치하는 곳에 위치를 했습니다
잠의 칼날 보니까 로고의 컬러는 화사한 색이 돼요 그리고 폰트 사이즈는
약간 키웠어요 1.0 에서 1점 선배의 케어 있구요
폰트 웨이트 볼풀 좋았고 이렇게 모바일로 9라는 숫자가 두껍게 볼드
처리가 되어 있습니다
자 이거 처리하는 방법 다시한번 0 리뷰 라서 여기에 중요한 부분입니다
오른쪽으로 밀고자 할 때 이렇게 하구요 왼쪽으로 밀고 절대 이렇게 하는데
얘네 를 감싸고 있을 감싸고 있는 녀석은 어떻게 한다.
10여 팁으로 속성을 주셔야 되겠습니다
다음에 헤더에 서치 부분입니다 서치 부분이 부분이 조 자
그래서 이 부분을 보면 4g 전 렐라 티브 와 얘도 마찬가지로 뭔가 그
값을 이용해서 추고 있습니다 포지션 값을 주고 있나봐요
그래서 렐라 팀을 좋구요 오버플로 오히려 위드 100%
자 먼저 서치 서치 는 임프 꽈 자 임프 과 이미지
임프 가 이미지를 다 감싸 운이 녀석이죠
이녀석을 일단 100% 로 좋습니다
이렇게요 그 다음에 왼쪽에 존재하는 인 푸 3
위즈 값을 또 베풀어 줬어요
그러면 내가 전부 다 찾아 겠죠
이렇게 주고 나서 다음에 이미지 해당되는 부분을
라이트 0 그 다음에 탐 0
그리고 포지션을 앱스를 틀어 줬어요 즉 이미지의 하단에 의해서 친구같은
이거죠 돋보기 버튼 예를 갖다가
오른쪽 0 위쪽에서 영웅인가 여기에 위치 겠죠
너 이렇게 처리하면 측 전체를 100% 로 놓고 다음에 임프 슬 100%
러 넣는데
났는데 오른쪽에 다가 이미지 하나를 에 플루트 해서 0 콤마 0을 주면
이와 같은 레이아웃이 나올 수가 있겠습니다 그리고 확대를 해요
만약에 단막 에 커 다른 이렇게 커다란 담아 게 못해도 탭 프로 다 찾아
더 좋습니까 어떻게 해요
무리 없이 짤리지 않고 다 차지하는 결과를 나타낼 수가 있겠습니다
요 방법 타지 않고 암기를 하셔야 되겠죠
어느 정도 왜 옷이 되겠죠
그래서 어떻게 한다. 어 일단 4g 전에 플루트를 안쪽에서 택 안쪽에
존재하는 태가 사용하기 위해서 위쪽이 조상이 태그 에다가 레일러 팁을
좋구요
그 다음에 임프레자 100% 좋고 다음에 포지션에 플루트 에서 0 콤마
영어를 라이트 하고 탑에 좋습니다
쪽 확대해 볼까요 예
자 인 풀 태그를 보면 이 플루트 는
돌자 레프트 에요 다음에 높이 우시 보도는 op.6픽스 2개 들어가
있구요
다음에 박스 사이 징을 보도 박스에서 안쪽으로 들어갔습니다 안쪽에
들어가지 않으면 태 프로다 차지했는데
선이 바깥으로 나가면 레이 암스 깨져 버리겠죠 그래서 5패 줬구요
페이징 아래서 글자 입력할 때 욕 글자와 임프 태그 r 관계 오피스를
뛰었습니다
그리고 폰트 사이즈는 1.2 키웠고 요 되겠습니다
자 그 다음에 예 그래서 헤더는 이렇게 할 수 있는데 헤드가 중요한 것은
요인 푼 만드는 방법
다음에 위쪽에서 메뉴를 왼쪽과 오른쪽에 붙이는 방법 요법은
여러분이 잘 알고 계시면 좋겠습니다
자 다음에 lnb 부분 작업이에요 로컬 내비게이션 바 부분 작업인데
자 유애리 있구요 li 가 있겠습니다 그래서
live 안봄 되겠죠 li 는 메뉴가 1 2 3 5 6 개 줘
백을 6으로 나눠요 그러면 16.6 몇명 나오겠죠 대충 16.6%
에라이 하나가 차지하는 가로의 비율이 신입 합니다 그러면 브라우저와 그
단막 외쳤어요
허 지더라도 동등하게 나눠 가질 수가 있겠습니다
자 이렇게 해서 위드를 가변적으로 저 쪽은 뭔가 유동성이 있게 설정해
졌구요
다음에 헤이트 와라이 네이트 값을 30 피스를 좋고요 텍스트 li 는
센터를 좋습니다
그래서 새로 추가로 쭉 다 중앙 정렬이 되고 있고요
다음에 플러드 는 레포트를 다행히 조회 되겠구요 마진은 0 페리 경이
고야 보드 라이트는 0px 해주는데 박스 사이징 을 안쪽으로 좋습니다
그래야지 레이아웃이 깨지지 않고 정상적으로 예쁘게 다 보이지가 있겠습니다
댓글 0개
등록된 댓글이 없습니다.