Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 21강 태블릿 레이아웃-II
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 입니다 자 html css 21번째 시간 태블렛
레이아웃 두 번째 시간을 진행하도록 하겠습니다 자 지난 시간에 우리가태블릿 레이아 5 첫 번째 시간을 통해서 태블릿 레이아웃이 갖는 전체적인
메이어 데 대해서 잠깐 살펴 같죠 그래서
헤더와 네비게이션 바의 대해서 살펴 봤고요 헤더는 별로 특별한 내용이
없었고 내비게이션에서
탭을 sci 제 태블릿 투 어 화면이 조그만 화면 있는가 하면 태블릿도
사이즈가 큰 화면이 있죠 그래서 고런 조그만 화면이나 큰 화면을 상관없이
모두 자 정보가 제대로 보일 수 있도록 하기 위해서
네비게이션 바 처리하는 방법에 대해서 보도 에다가 미니멈 미드 값을
1000 팩 셀을 조서 해결을 했습니다
자 고런 부분은 정확하게 여러분이 다시 한번 어
학습을 해서 완벽하게 숙지를 해주시고요
자 오늘은 나머지 부분 콘텐츠 부분과 푸터 부분을 으
나머지 부분에 대해서 살펴보는 시간을 갖도록 하겠습니다
자 보면 지나 시안에 헤더 의부 해도 가 헤더와 그 다음에 여기에 좌측의
메뉴 술식 구조로 된 좌측 메뉴에 대해서 살펴 봤죠
자 오늘은 이쪽 오른쪽 부근 콘텐츠 부분과 다음에 아래쪽에 푸터 에
대해서 살펴보도록 하겠습니다
자 요것도 마찬가지로 소스로 넘어가서 소스를 보면서 하나씩 하나씩
살펴보도록 하겠습니다
자 프로그램을 실행시키고 분을 해볼게요
지난 시간과 마찬가지로 태블렛 해서 우리가 이것을 확인을 해 봐야 되는데
여건 저항 태블릿을 여기서 동영상 촬영이 안 되기 때문에
브라우저에서 일단 확인을 하는 것으로서 만족을 음 할 수 밖에 없을 것
같습니다
그래서 브라우저를 이렇게 실행을 시켜 났고요
자치 알선 했던게 요 헤더 부분과 내게 전 좌측 메뉴 까지 했습니다
오늘 이제 컨텐츠 부분에 대해서 알아볼 텐데 먼저
수수의 html 구조를 다시 한번 살펴보도록 할게요
지 아세요 우리가 헤더 이 부분 했었고요 다음에 넵 이게 저희쪽에 씁니다
다음에 맵으로 감싸져 있는 커다란 덩어리
사이트에 결과물도 보면 욕이 소프트 샵에서 이 전부다 줘
이 부분에서 살펴보 이 부분에서 살펴 볼 건데 이 중에서 좌측에 있는
부분은 우리가 살펴 봤습니다
자 그래서 오늘은 여기 컨텐츠 레 이 부분 이 부분 하고 그 다음에
이불에서 쭉 살펴 볼 거구요 다음 에프터 에 대해서도 살펴보도록
하겠습니다
자 이 부분에 구조가 어떻게 된지 다시 한번 살펴 보면요 콘텐츠 랩으로
감싸져 있습니다
다음에 크 안에 다시 컨텐츠로 감싸져 있구요
그 안에 div 태그로 디비전 태그로 이렇게 큰 덩어리가 존재합니다
염습 때 시장에서 여기까지가 실제 결과물에서 어디까지 하면 서울
애니메이션 제타 큰 글자 보이시죠
역시 솥에 시작을 해서 요거 태 까지 의 내용들입니다
되시겠죠 자 여기 보시면
커다란 글자가 있어요 이거는 h1 태그를 용 거구요
다음엔 이미지가 있는데 이미지 오른쪽으로 텍스트가 쭉 이렇게 출력이 되고
있습니다
이런 레이아웃은 어떻게 만드는지 자 밑에 보시면 반대예요 이미지가
오른쪽에 들어가고 텍스트가 왼쪽에 출력이 되고 있습니다
다음의 세 번째를 보시면 이미지가 위에 있구요 그냥 블럭 타입으로
아래쪽으로 상화 구조로 이렇게 아래쪽에 극좌 출력되고 있습니다
어떻게 어떻게 되는지 하나씩 하나씩 살펴보는 시간을 갖도록 합니다
자 일단 아이디가 컨텐츠 레비 고 컨텐츠의 와 그 위에 아크 안에 큰
덩어리 하나 있고요 또 큰 덩어리의
또 큰 덩어리가 이렇게 세계가 존재합니다
자 css 스타일 시트의 어떻게 되냐면
자의 부분입니다 콘텐츠 랩이 플로트 레프트 를 딴 되어 있대요
자 콘텐츠 랩과 같은 동등한 위치에 있는 그 디비전 태그가 어떤 거냐면
내비게이션에 랜디 어쩜 애가 결과물에서 이쪽 맨 입니다 아 그리고 컨텐츠
랩은 어디 그쪽 오른쪽 부분 전부 다 져 그래서 얘를 플루트를 레프트 를
줬어요
레프트 를 주고 지난 시간에 우리가 알아봤던 lnb 쪽 드래프트를 중
거죠 그래서 이렇게 떠 둘다 db 저한테 그렇기 때문에 상화 구조를 해야
되지만 플로트 래 프 트 를 통해서
수평 구조로 메뉴와 라는 컨텐츠가 이렇게 수평 구조로 음 배치되는
레이어를 만들 수가 있겠습니다
자 그 다음에 위드가 여기는 지나지 않은 알아봤던 메뉴 있죠
이쪽이 250 픽셀 이었어요 250 쓰이죠
작은데 컨텐츠는 그냥 100% 다 쓴 되요 자 단위를 보면 퍼센트 지네요
100% 다 쓴다고 되어 있습니다 자 왜 100불 다 쓰는 지 이제 좀
읽다가
태블렛 이 때문에 있게 쓰는 건데요 쫌 이따가 저 자세히 알아보도록
할게요
자폐 크라우드 컬러는 f&c f&c f&c f&c 이렇게 약간 옅은
노란색으로 선택을 했구요
자 여기서 마진 라이트 250을 좋죠
자 이게 왜 205 신야 면 자위 지가 일단 100% 죠
100% 면 여기서부터 시작해서 불어 조커 역을 100% 죠 근데
컨텐츠가 208 다 쓰지 못하죠
왼쪽의 네비게이션 바로 메뉴 바로 이렇게 이쪽이 250 을 쓰고 있습니다
그렇죠
그래서 마진 라이트를 250을
마진 라이트 255 좋은데 음수를 준 거예요 자 마진 이란 것은 어떤
요소의 바깥쪽에 공백을 해당하는 수치 만큼의 공백을 주는 거죠 자 음수를
줬어요 음수를
음수를 좋다는 얘기는 바깥쪽에 아니라 안쪽으로 안쪽으로 250을 여백을
좋다고 생각하시면 되요
자 즉 자 보시면
원래는 100% 니까 여기서부터 시작해서 여기까지 전부 다 찾아 겠죠
근데 메뉴가 250 을 차지하고 있죠 그렇죠 그래서 원래 여기서 끝나야
되는데 얘를 오른쪽으로
음 여기서 오른쪽으로 252 내용물을 더 갖고 나가는 거예요 그러면
여기서 잊어버린 여기서 그 면적을 놓친 250을 이쪽에서 이루사 쓰는
거죠 그러면 100% 가 되겠죠
그저 자 일단 그러면 브라우저 바깥쪽으로 250을 더 쓰겠다고 해서
100% 맞춰 났구요
그 다음에 이제
이 전체적인 것을 구정 는 콘텐츠 랩 에다가 래 프 트 랄 마진 라이트
250으로 있는데 이 안에 어떤 내용이 있어요
이 안에 바로 요런 요소들이 들어 온게 아니라
html 택을 보면 콘텐츠 1회 만에 다시 한번 콘텐츠 태그로 디비전
태그로 감싸 주고 있죠 그래서 컨텐츠 레바 내에 컨텐츠 태그를 보면
여기에 패딩 라이트에서 272 들어가 있어요
자 이거 수치 일단 250으로 놓고 볼게요 자 252 들어가 있어요
그러면 아까 제가 그랬죠 100% 를 다 쓰고 싶은데
여기가 일단 이쪽 2일 해보시는 먼저 쓰니까 이르고 시 부족해요 그래서
그 부족한 것을 채워 넣기 위해서
마진 라이트를 음수 값을 도왔고 - 250 을 줬어요 그러면 내용물
입장에서 보면 250을 더 쓸 수가 있는 거죠 그래서 브라우저에서 끝난게
아니라 250을 더 이쪽으로 가서 여기까지 내용물이 다 들어갈 수가
있습니다
이 정도까지 작은데 프라우 접 아까도 까지 괴 100% 다 차지하면
글자가 안 보이겠죠 그래서 안쪽으로 조금 더 들어오게 글자가 브라우저
바깥으로 나가지 않게 하기 위해서 어떻게 해요
펫 잉 라이트를 255 더 중 거에요 그러면 바깥쪽으로 이렇게 글자
나갔다가 패딩 라이트 250 만났으니까 다시 안쪽으로 내용물은 트롤 수가
있겠죠
그래서 브라우저 안에서 이렇게 브라우저가 조금 하던 크던 모든 것을 비율
100% 비율로 해서 다 만들어서 우리가 사용할 수 있겠습니다 근데
여기서 250 을 주면 되요 이쪽이 250 이니까 패딩도 맞은 라이트도
200 - 이곳이 그러면 패딩도 250 을 주면 되는데 여기 부분에 패딩
값이 들어갔죠 약간 공분 쯤 공백이 있죠
이런 것을 감안해서 얘를 271 주구 레이아웃을 만들어 본겁니다
자 이게 되시겠죠 잘 생각해보세요 바깥쪽 바깥쪽 에다가 - 250
좋다는것은 내용물이 바깥쪽으로 원래 사이즈보다 더 넓게 바깥쪽 나갈 수
있단 얘기 고요
근데 브라우저가 한계가 있죠 끝난 다음 있어 요금 크자 밖에 나가
만들겠죠 그래서 나가지 못하게 해서 여기서 끝나기 위해서 100% 다
쓰긴 쓰는데 끝내기 위해서 글자를 다시 안쪽으로 250 들여 보내기
위해서 패딩 라이트를 275 좋다는 얘깁니다
자 요게 좀 어려운 내용이 있는데 여러분이 잘 생각을 해보세요
바깥쪽에 감싸고 있는 마진을 갔다가 음주를 주고 안쪽에 있는 것도 다시
패딩을 주문해서 100% 를 다 쓰는 거에요 왜 100% 잤어요
태블릿이 라는 화면에 특성상 조금만 템플릿 있지만 화면이 화면이 커다란
태블릿 있기 때문에 이렇게 우리가 100% 로 놓고 써야 되는데 100%
코스타 보니까 메뉴 이쪽에 255 찾아오셔서 글자 짤릴 수가 있죠
그것을 막기 위해서 마진 라이트의 음수 와 패딩 나이트 를 이용해서 그
것을 막아 준 겁니다
자 그 다음에 랩 태그 안에 이제 콘텐츠 안에 또 div 가 있대요
컨텐츠 들어갈게요 콘텐츠가 여기죠 이 안에 div 가 이렇게 있죠
저자 이거 하나 둘 이제 봅니다 제가 요금 더 이거든요 디비전 2
요한 덩어리
또 이 한덩어리 또 미탄 덩어리에
잘해서 디비전 에다가 맞은 바 틈 40세 각 db 전에 밑에 아래쪽에
마진을 40p 쎄씨 지금 부여했습니다
격이 사실 들어온거 있고요 자 그 다음에 첫 번째 덩어리 첫 번째 장을
것 이에요
여기 첫번째 덩이 덩어리입니다 다음의 두 번째 덩어리가 이 부분이고
있고요
다음의 세 번째 덩어리가 이 부분입니다
그런데 첫 번째 덩어리 두번째 덩어리 세번째 덩어리 코드가 거의 비슷한데
세번째 덩어리 부터 좀 살펴보도록 할게요
자 세 번째 덩어리를 보면 구조가 어떻게 되냐면 html 구조가
이미지가 나오구요 음 저 이미지가 나오구요 처음에 h1 태그 도 보이고요
이미지가 나오고 다 p 태그 혜택을 합니다
달 h1 태그 p 태그 타 블럭 태그 져 플록 타입이죠 그래서 상하
구조로 이렇게 나요 되는게 당연한 겁니다 자 이게 기본인데
음 세번째 img 이미지 태그 나무 속성도 없어요
자 그리고 어차피 태그 문단 태그 에 첫 번째 라인 의 첫 번째 프
1st 라에
문자 1택 짜 줘 문제 300자 첫 번째 라인의 폰트 사이즈를 일정
500회 이었구요 컬러를 f 2550 오르겠습니다 그래서 첫 번째 라인의
색상을 이렇게 주황색으로 변경을 한거구요
1st 레더 첫 번째 글자 죠이 첫번째 글자는 폰트 사이즈를 1점 오래
갖고 더 키웠어요
자 이거는 뭐 별 어려움 없이 여러분이 다 이해가 되실겁니다
이미지 태그 아무도 없습니다 그래서 상화 구조를 개 쭉 h1 태그 이미지
태그
밑에 p 태그가 단지 p 태그에 는 문자 선택자 를 이용해서 1st
1st 레더 퍼스트 라인 을 이용해서 속성을 변경 시켜 주고 있습니다
자 그러면 이제 두번째 깔아 볼까요 첫번째꺼 먼저 알아 볼까요 자
첫번째는 세번째 하고 내용 거의 동일해요
이미지 태그 피팅을 나오고 문짝 나오자 근데
이미지의 플로트 레포트를 줬어요 제가 볼까요 자 플러드를 애플 좋게 왼쪽
인다
자 우리가 여태까지 플로트 가루를 가지고 주로 이용하던 거는
ul li 리스트 타입 태그에서 이숙 추지 그 로 되어 있는 구조를
수평으로 바꾸기 위해서 풀러 들렸습니다
그래서 어떤 코드가 플루트를 주면 그 다음 고도 그 옆으로 와서 레프트
정년이 딱 되는거죠 붙는 거죠
즉 수평 구조로 이루어질 수가 있겠죠
자 여기서 이미 제자가 래프트 줬어요 그러면 이미지 다음에 누가요 잎이
문단이 5 자문단 태그가 5조 그 문단 태그가 글자 옆으로 이렇게 나열
될 수가 있겠습니다
원래 플루트의 기능이 요런 기능을 하라고 만들어 놓은 테 거에요 근데
그걸 약간 응용해서 우리가 요즘은 이렇게 메뉴를 수평 구조를 만들게 해서
많이 쓰는 것뿐입니다
그래서 이미지의 다시 코트로 들어와서 이미지의 플루트 레프트 를 좋고요
다음에 패딩 나이트 이십 세를 좋습니다
이미 집 뒤쪽에 패딩 값을 20 픽셀 중 건 좀 좋다는 얘기겠죠
다음에 p 문단 태그 에서 첫 번째 라인의 색상
그 다음에 크기 색상과 크기 변경을 해 줬구요
다음에 1st 레더 첫 번째 글자 줘 첫 번째 글자도 사이즈를 이렇게
키워 나왔습니다
자 첫번째꺼 달라고 첫 번째 덩어리 하고 세번째 덩어리 얼음이 9분을
하실 수 있겠죠
차이점은 플루트 래프트 정열을 숙직 구도 아닌 수평 구조로 맞추기 위해서
이렇게 했다는거 자매 그 다음에 두번째 꺼는 첫 번째 응용 해요
자 이번에는 첫번째 꺼는 이미지를 왼쪽에 놓고 글자를 그 옆에 왔습니다
자 두번째 거 보니깐 이미지가 이번에 오른쪽에 나와요 이미지가 오른쪽에
나오고 글자 그 옆에 나오죠
그래서 이미지를 오른쪽에 느끼해서 이미지 플루트 속성을 라이트를 주고요
패딩 레프트 이번에는 왼쪽에 20 픽셀을 주었습니다
자네 퍼스트 라인 1st 레더 문자 선택자 를 이용해서 글자 키우고
글자의 색상도 변경을 시켜주고 있습니다
자 이거 3번 부터 시작을 해서 덩어리 3번 2번 1번에 덩어리
여러분이 잘 많이 쓰이고 여러분의 웹문서 보다보면 이런 구조 많이 보셨을
겁니다 그래서 그런 구조는 이런 식으로 표현할 수 있고 이보다 약간 더
난이도 높은 것은 아까 방금 살펴 봤던거 100% 를 다 주는데
100% 다 죽는데 왼쪽에서 쓴 만큼 을 보존 시키기 위해서
감싸고 있는 녀석이 늘 음수 값의 맞은 값을 주고 안쪽에 패딩 값을 다시
조서 글자를 다 화면상에 출력할 수 있게끔 만드는 방법
요 방법도 굉장히 중요하니까 중 중요하고
유용하게 사용이 될 수가 있겠습니다
자다 네번째 덩어리 인데 이제 4번째 덩어리를 좀 내용이 많은 것
같은데요 따지 공표 없습니다
자 네 번째 버리는 결과를 보면 이런 내용이에요 이렇네요
자 이런 내용 어떻게 만드는지 한번 보도록 합니다
자 먼저 네번째 덩어리 html 구조 를 보니까
자의 거죠 어 젖어
ul li 로 에서 lil 리스트가 1 2 3 덩어리가 나오는데요
첫 번째 덩어리 두번째 덩어리에 세번째 상황 2탄 보어 이미지가 들어가
있습니다 이미지가 이렇게 들어가 있고요
다음의 네 번째 등 알리는 덩어리는 div 태그로 이 해서 글자가 이렇게
출력이 되고 있습니다
자 그러면 이미지와 이 그 글자들이 어떻게 해서 이렇게 수평 구조로 저는
제 원래 라인은 추지 꾸죠 그래서 수평 구조로 어떻게 되는지 다시 또
css 를 보기로 합니다
먼저 유일의 다가 오버 플러그 희생을 좋구요 패딩은 c 픽스 에
시 피스를 좋구요 다음에 보더 탑 위쪽에 보도 아래쪽에 보도 다대
시루 이용해서 이렇게 쩜쩜쩜 점점 의 로 표시를 해 줬습니다
자 다음에 li 0 속도 중요하겠죠 li 요소들 요소들을 플로트 레프트
다 왼쪽 중 시켰어요
이걸 준수는 어떻게 수직 구조의 에라 에 리스트 아이템들이 수평 구조로
박혀서 다 옆으로 쭉 나란히 배울 수 있겠죠
그 중에서 첫 번째 여서 첫 번째 어서 두번째 어서 세 번째로 3 4번째
어서
nth 차일드 자 구조 선택자 를 위해서 첫 번째 유선은
바루 가 150의 마진이 오래요 즉 요 사이즈 가루가 150에 마진
상하좌우에 마진이 오픽 쎄씨 들어온 겁니다 자 두 번째와 세 번째 다
똑같아요
위드가 150 마징가 50분 겁니다 자 네 번째는 이제 그리 적을
그런데 디비전 태그로 이루어져 있어 쪼까 딥 선택으로
자 그래서 네 번째 태그의 자존 선택자 네요
네번째 라이 요소의 바로 밑에 있는 자손 선택자 ti bd 9 에는
페이딩 레프트 왼쪽에 시 픽셀 조 자 이제 왼쪽 여기에 시 픽셀을 중
거구요
다음에 패딩 라이트 400 픽셀 줬어요
아 여기다가 페이딩 값을 줬는데
왼쪽에는 10 을 주고 그 바깥쪽 이쪽 라이팅은 사례 피서 조 자의
480 맺어 쓸까요 자위의 답이 있습니다
아까 우리가 음 여기죠 위즈 값을 베풀어 주고 글자가 밖으로 나가 튕겨
나가는 것을 막기 위해서 맞은 라이트 250회 패딩 207 있었죠
그거 똑같은 것 입니다 얘를 활성이 div 를 감싸고 있는 게 이 윗부분
태그 유분이 줘 요 부분에 다가 마진 라이트 480 481 왜 어떻게
나온 거냐면
애가 150 150 152 줘 그러면 450 잊어 450에 패딩 들어간거
감 맞음 들어온거 감안해서
및 이를 100% 를 주는데 그걸 중대에 - 451 해야겠죠
글자가 바꿔 팅겨 난 걸 막기 위해서 그걸 막아주기 위해서 여기를 어떻게
- 400 픽스 480 픽셀 주고 그 안쪽에는 요즘에 패딩 라이트를
480 픽셀 좋습니다
그러면 전체적으로 다 쓰는거죠 이제 나머지 부분 클 때는 큰 만큼 다
쓰고
작을 때는 작은 만큼 다 쓰겠죠 면적을
음 좀 이제 2번 했으니까 이해가 되실겁니다
결과적으로 뭘 하기 위해서 의미가 이렇게 작업용 거냐면 나머지 부분이
부분이
태블릿이 이렇게 쪼끔 한테 분리시 있나 아니면 큰 테이블이 냐에 따라서
면적이 달라질수가 있어요
이 달라진 것을 다 쓰기 위해서 위드 값을 우리가 100% 주는 거에요
이렇게 근데 100% 를 주자니 먼저 나온 녀석들이 벗어 450 이라는
최소 450 픽셀 이만큼 면적을 쓰고 있으니까
여기서 100% 주면 글자 바꿔 튕겨나가 버려요
그 태블릿이 0 생각하면 테두리 밖으로 나가버리는 극장 안 보이겠죠
그 것을 막아주기 위해서 마진 라이트 위쪽에 다가 마진 라이트로 400p
셀을 좀 480 픽셀 주고요
다음에 글자 같은게 나오면 막기 위해서 안쪽에 다가는 패딩 나이트 4
100 피스 480 픽셀 우리가 준 겁니다
자애 되시겠죠 자 그 다음에 똑같아요 이제 dr 비해 문자 선택자 임해서
1st 라인과 1st 레더가 존재하고 요 1st 라인에는
음 1.5 l 색상을 이렇게 변경을 했고 그 다음에 첫 번째 글자는
글자를 약간 키웠습니다
이렇게 해서 우리가 네 번째 덩어리도 100% 위드 값을 100% 를
활용해서
태블릿이 작은사이즈 또는 큰 사이즈에 맞춰서 그때그때 정보가 짤리지 않고
가려지지 않고 전부 다 화면에 출력이 될 수 있게 만들어 놓았습니다
어 그 다음에 이제 부터가 남았네요 마지막 하단 입니다 하다는 다 쓰고
있네요
댓글 0개
등록된 댓글이 없습니다.