Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 22강 태블릿 레이아웃-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 입니다 자 오늘 html css 스물두 번째 시간입니다
태블릿 레이아웃의 번째 시간을 갖도록 하겠습니다자 오늘 알아볼 내용은 고종 바라고 해서 어휘들 많이 사용을 태블릿 pc
에 맞는
어 맞게 많이들 사용하는 레이아웃입니다
그러면 고전과 레이아웃이 뭔지 먼저 살펴보고 그 다음에 코 소스 코드를
한번 살펴보도록 하겠습니다
자 태블릿 pc 에서 주로 사용되는 고정 발만 들어온다 자 보시면 뭐냐면
지금 이거 같은 경우에 위쪽이 짜지 mb
글로벌 네비게이션 바가 1 2 3 5 6 에서 위쪽에 존재 하구요
다음에 아래쪽에 포트와 또 존재합니다
또 왼쪽에 이렇게 lnb 에서 로컬 네비게이션 바가 존재를 하구요
다음에 오른쪽에 이제 배너 들이 나오고 있죠 쭉 존재를 합니다
다음에 중간에 이제 컨텐츠 항목이 나오고 있죠 줘
자 이 때 상단과 좌측과
우쭈쭈 다음에 아래 쪼
부터 여기 항상 고정되어 있는 거예요 스크롤 바가 움직이더라도 계속
얘네들은 9종 대로 이 화면에 계속 보이는 겁니다
그래서 고정되어 있다해서 고정 바라고 이름을 우리가 흔히들 부르고 있는
것입니다
실제로 소스코드를 보면 여러분이 금방 어떤건지 더 확실하게 감을 잡으실
수가 있을 것 같습니다
자 이게 소스 코드 구요 자 여기서 제가 한번 브라우저를 통해서 태블릿을
통해서 공도 좋은데 브라우저를 통해서 한 번 보도록 할게요 자 이렇게 돼
있죠
여기서 제가 내용이 꽤 많이 길게 밑으로 있어요
자 스크롤바 생겨 있죠
일반적으로 탭을 이지 자유 말한 사이즈 다 라고 가정했을때 자 여기서
제가 스쿨 을 내려 볼게요 내려오면 어떻게 되요
안쪽에 있는 컨텐츠의 있는 내용만 스크롤이 되고 있죠
어 상단과 하단 과 좌측과 5 초에는 전혀 움직임이 없습니다
즉 고정되어 있는 거죠 그래서 우리가 9종 바라고 합니다
요런 레이아웃은 어떻게 잡는지 한번 살펴보도록 합니다
자 일단 전체적인 html 의 전체적인 구조를 살펴볼게요
자 보시면 디비전 태그로 위쪽에
타파 위쪽 위쪽 영역을 표시할 티비 전 태그가 보이고요
자 다음에 래 프 트 바 보인다 애가
왼쪽 영역 2 부분이구요
이 부분은 자 다음에 라이트 바 봅니다 오른쪽 부분에 배너 들이 보이는
이쪽 부분이고 있고요
다음에 밭은 바 보이죠 얘가 밑에 아래쪽 부분이 부분입니다
그 다음에 내미는데 애가 어디 중간에 컨텐츠 실제로 스크롤이 하는
녀석이죠
스크롤이 되는 이 부분입니다
그래서 내용이 쭉 키니까 스크롤이 나오겠군요 이렇게 전체적으로 구조가
되어 이니깐
총 어떻게 덩어리가 낸 위쪽에 한덩어리 다음에 우측의 한덩어리 좌측의
한덩어리 가운데 그 다음에 아래쪽 1등을 쫑 5 덩어리를 이루어 진
레이아웃이 음 레이아웃입니다
자 이거 하나씩 먼저 코드 리뷰를 하고 간단한 거니깐 코드 리뷰 하고
금방 코딩을 한번 해보도록 하겠습니다
자 먼저 초기가 초기 코드가 있어요
에스터 링크에서 전 요소의 마진과 패딩을 전부다 0 씩 주어졌고 요
다음에 html 높이가 100% 로 줬어요
브라우저 그 태블렛 크기가 어떻게 했든 간에 100% 다 쓰겠다는 기 줘
이렇게요 그래서 이 영역부터 가 계속 따라다닐 수 있겠죠 자 높이를
100% 좋고요 다음에 바디에 글자 폰트 는 이런걸 쓰구요
바디에 높이를 100% 좋습니다
다음에 li 태그 에디터 스타일 리스트 스타일은 논 그 리스트 스타일을
빼 줬구요
a 태그에 텍스트 데코레이션 밑에 언더라인 생기죠
그 언더라인 도 제거를 했습니다
자 이제 본격적으로 타봐서 바라보는 거에요 위쪽에 잇는거 위쪽에 있는 6
부터 알아보는데
자 보시면 포지션을 일단 픽 쓰기로 했어요 자 포지션이 팩스가 있고
릴레이 tv 가 있고 그 다음에 앱솔루트 가 있고 스태틱 이 있죠
기본적으로 대 볼트는 스태틱 이었구요 자 픽스드 를 어떻게 어떤 거라고
있어요
스크롤이 되지 안 되던 되지 않던 줘 스콜이 되더라도 항상 어떤 요소의
위치를 픽스 하는 거에요 브라우저의 위치에 항상 고정시켜 놓는 거죠
쪼 자 우리 4g 지원 속성 했던거 잘 기억이 안 나시는 분들은 다시
들어 뒤로 돌아가서 한번 다시 한번 학습을 하고 오신 것도 좋습니다
자 이렇게 픽스를 놓고요 다음에 어디 위치에 놓는 야 위쪽에 탑에 영 래
프 트 0
라이트의 영을 놓겠다 그리고 높이는 백을 주겠다
자 그럼 어떻게 되요 탑 2 0 이구요
타 위에서 00 콤마 0이니까 여기에 뭘 레프트 명의자 여기저 li 트
0 2 정관 라이트 끝까지 꼭 하겠죠 꽉차 겠죠
그 다음에 높이가 100 이래요
높이가 되는데 라인 하이트 르 어 그 행 간격도 백을 좋습니다
즉 위 아래는 요소들이 중앙 정렬이 될 수 있겠구요
자아의 백그라운드를 뭐 이렇게 좋고 자폐 크라우드 파트 말해 쪽에 다일
픽셀 라인을 좋습니다 이렇게 그래서 탐을 고정 시켰구요
자 그 다음에 탑 안에 있는
요런 요소들은 쫌 자기 살펴볼게요 천체 전체적인 거면 어떻게 잠언집
볼게요
자람에 밭은 반자 밭은 많은 누구냐면 이 b10 u 입니다 이 녀석인데
이 녀석은 이 녀석도 마찬가지로 포지션을 픽스 되어 딱 고정시켜 없는데요
자 그리고 아래쪽에 북해에서 아래쪽 바 틈을 0
레프트 0 라이트 영어 좋습니다 높이는 백을 좋구요
자람 의 왼쪽 왼쪽 부분입니다
자 왼쪽 부분은 차비 100 이니까
탑에 높이가 100 이니까 레프트 는 00일 지언정
위에서 의 좌표 값을 어떻게 대기 되어야 되겠죠
그래서
레프트 마의 4g 저는 팩스 인데 위쪽에서 100 픽셀 내려온 곳에
위치해 되기 때문에 탑을 백을 좋고요
그 다음에 바탐 바 틈도 100 이겠죠 왜냐면 아래쪽에 바탕의 높이가
102 줘
그 다음에 여기서 부터 시작을 했으니까 같음 2 102 적용이 되어 질
수 있겠습니다 레프트 는 0이 겠죠 왼쪽으로 딱 붙어 있으니까 왜
명입니다 그리고 위드를 300을 좋습니다
다음에 라이트 바 입니다 오른쪽 바자 오른쪽 바에 포지션을 픽스드 다음에
탑 100 같은 백입니다
라이트 0 이고요 마찬가지로
위쪽에서는 백을 내로 100 내려와야 되구요
다음에 아래쪽에서 도배 골라 가야되고 다음에 라이트 왼쪽에 딱 붙어
되니까 라이트는 0 이겠죠
그 다음에 위드 톡 쓴 폭은 410 픽셀을 좋습니다
자 다음 의 아내 콘텐츠를 앱이에요 이 부분이 부분을 보면 자 마진
10110 100 300 의 역 자 이게 무슨 얘기에요
상위 쪽에서 100 떨어지는 거죠 그래서 위쪽에 탑이 존재하니까 팩 만큼
내려와서 이거 존재 되겠죠 그래서 위의 여백을 백을 중 거구요
다음에 어 오른쪽 오른쪽 을 400 핏 410 픽셀을 주었습니다
왜 410p 세워 줘요 라이트 바가 위드 포기 410 픽셀이 니까 410
픽셀 떨어서 여기까지만 존재 해야 겠죠 그래서 410 픽셀을 중 거구요
다음에 아래쪽 마찬가지겠죠 아래쪽 100 이니까 뱅 만큼 떨어져서 마진을
춥고 오른쪽 왼쪽의 왼쪽은 300 토기 300 이니까 300 픽셀 마진을
주었습니다
다음에 그 안쪽으로 패딩을 20 픽셀 줬어요 안쪽으로 여기 이곳 그
오른쪽 아래 쪼다 4
20px 떨어지려고 20 픽셀의 패딩 값을 주었습니다
자 그러면 이제 이렇게 전체적으로 하나씩 구조를 다 만들어 놨어요
큰 덩어리 드래 그냥 그 안쪽에 어떠한 요소들이 있는지 하나씩 살펴보도록
하겠습니다
먼저 탑 반대 타파 의 글 보면 디비전 태그 아래 하나 있고요 그 다음에
그 안에 미스트 영실 되어 있습니다
수직 구조의 리스트 타입을 갔다가 수평 구조를 바꿔야 되요
자 그러기 위해서 음 타파 에 db 저한테 그 자전 태그 디비전 태그의
듀엘 태그 오버플로우 헤드를 좋습니다
다음에 수집 구조를 수평 구조로 바꾸기 위해서 플루트를 어떻게 레프트 를
좋은 거죠 자 여기 세 미크론 있어야 되겠죠
자 다음에 lila 가 있습니다
그래서 링크 걸려 있는 것 요기 줘
li 태그의 다가 패딩을 10 40 을 줬어요
자 이렇게 주는거 확장 시킨 거죠 a 태그를 확장해서 위아래 c 픽셀
좌우 40 픽스 조서
이 부분에 같은 마우스를 갖다 대도 글자 할 거 같아 되고 근처에 가지고
회만 해도 바로 선택해서 클릭이 될 수 있게 만들어 놓았습니다
다음에 마진은 좌상 않을 얻고자 5만 cpx 해줬구요 cp 3 좋기
때문에
가다보면
요 부분에서 마진이 걸리겠죠 자 그래서 선택이 안 될 수 있겠습니다
자 그 다음에 보도 타
어여 게 아니죠 여기죠 그래서 보더 라이트 보석 값을 라이트 왼쪽 이
정도 대치 대 1p 쓰셨어요 그래서 점 점 점 점 이렇게 나오겠죠
다 모든 lia 점 점 점 점 점 점 2 점 점선이 들어오고 있습니다
이제 맨 마지막 원 정도의 안 보이네요 자 이것도 처리를 해 좋겠죠
어 여기 보면 lim 아지 막 라스트 차일드 에 자존 선택자 a 태그에
보도 라이트는 영을 좀 들어서 맨 마지막에는 점성이 안보이게 처리를
해놨습니다
자람에 아래 쪼래쪽은 밭은 다는
예 여기죠 자 피트가 하나 안 보입니다 그래서 간단하게 속성을
잡아 틈에 피는 4g 저는 아까 우리가 고정 바 형식으로 지정 했고요
텍스트 온라인 센터 에라이 네이트 100 이래요 높이가 100 인데
높이가 되는데 100 라인의 틀을 헹 간을 배구 좋습니다
그래서 가운데 정렬 가로축 또 가운데에 세로로 쭉 또 가운데 정렬을 시켜
놨습니다
다음에 레프트 뒤쪽에 이쪽 이제 이 쭈 레프트 는 자 래프트 안에 자전
태그 div 태그 ui 가 있는데 구조가 어떻게 되냐면 래 프 트 바 의
디자인 태그로 먼저 한번 더 감싸 없구요
다음에 ul 리스트 타입입니다
자 보시면 div 의 ul 오버플로 기존 좋구요
그 다음에 lin 은 뭐 한껏 없네요
어 위쪽에 탑 바에서는 여기다가 플루트 레프트 좋죠
왜 줬어요 수직 구조로 숲은 구조를 바꾸게 서 하지만 얘는 그냥 수직
구조 그대로 쓰 줘 그래서 주지 않고요
단지 그 안에 그 아래에 있는 자전 태그 중에 a 태그에 만 디스플레이
블럭 패딩 13:00 물렸어요 왜
글자를 아니고 그 짝 바깥쪽 근처에 가져도 클릭이 될 수 있게 a 태그
영역을 확장시킨 겁니다
그리고 블럭 타입을 줬어요
자 글자는 하얀색이 있구요 하얀색으로 했구요
폰트 사이즈 1.3 좀 귀엽고 아래쪽에
보더 밭은 아래쪽에 다가 이런 색을 줬고 그 다음에 탐 에다가 또 이런
색을 좋습니다 그래서 여기 보면 선이 2 개정 선이 2개인데 아래 쪼
아래쪽에 약간 어두운 색 써니 있고 위쪽에 밝은색 써니 있습니다
그래서 메뉴를 9분짓는 이런 보도 속성을 우리가 주었습니다
자 다음에 lif 스트 차일드 첫번째 이 녀석이죠 이녀석은
보도를 영어 줬어요 이 윗부분에는 있으면 안될 것 같아서 보도를 영어
줬구요
다음에 어여 기 마우스가 따내면 색이 벽 바뀌죠
이런 처리는 liat 그 작은 태그 중에 상태 선택 짜져 이거 링크 위에
걸려 오버 됐을 때 어떻게 밖에 라고 버렸을 때 백그라운드로 컬러로
어떻게 of b 사의 로 바꾸라고
이렇게 색을 지정해 좋습니다 되시겠죠
그래서 브 래 프 트 알아 봤구요
자 이번엔 라이트 알아볼게요 라이트는 아까 410 정도 됐죠 넓어 쵸
요법입니다 자 요 부분은 또 어떻게 구성이 돼 있냐면
어 div 의 이건 뭐 자존 선택자를 쓰고 후손 선택자 할지 건 지금은
다한 하기 때문에 하나밖에 없기 때문에 상관이 없겠죠 그래서 여기서는 후
존 선택자를 싸요 사용했구요
텍스트 얼라인 센터 가능할 시켰고 패딩 위쪽에 1 픽스 의
이쪽에 이 픽셀 아래쪽에 ex 의 상하 1 픽스 의 좌우는 0 픽셀
좋습니다
그러나 서 라이트 바를 보면
다 어 리 스타일인데 이 안엔 이미지 태그가 들어가 있어요 그래서 이미지
배너 들이 존재하고 그 안에 그 이미지들을 다 링크를 걸었습니다
자 블랭크 셀프 타 페 어른 체육 블랭크 탁 의 속성을 따로 떨어졌습니다
자 블랭크 는 구글이 줘 새로운 창에서 열리는 거 이렇게
잠에 셀프 는 내가 갖고 있는 이 브라우저에서 자체적으로 열립니다
자 여기 탑 카페 어란 치가 있는데 자유 거 잠깐 설명을 하고 넘어갈게요
지난 시간에
예전에 좀 우리는 기억인데 블랭크 하고 잘 뿐만 해봤죠 탑과 편지
어떤건지 잠깐 설명을 즐기고 넘어가도록 하겠습니다 자 블랭크 는 뭐냐면
내가 이렇게 보인 창에서 어떤 부분을 콩 하고 찍어서
하이퍼링크를 콩 우치 가서 클릭하면 새로운 창이 열리는 게 이게 블랭크
셀프 는 내가 이렇게 있는데 내가 내 창에서 뱅크를 하면 새로운 촬영에
얼린 가 아니라 내가 지금 보고있는 창에서
하이퍼링크 에 해당되는 창이 열리는 겁니다 이게 더 예쁘고
탑은 뭐냐면
우리가 요즘은 잘 안쓰는 기법 인데요
예전에는 홈페이지 이렇게 만들면
프레임 이라고 해서 프레임을 이렇게 나눠서 많이 썼어요 이렇게
나눠 써가지고 실제로 우리가 눈으로 보기에는 한 페이지 입니다
한 페이지에 웬 문 선대 실제로 요거를 만들기 위해서 이 위쪽에 존재하는
html 문서 하나와
이 밑에 쪽에 존재하는 htm 2개가 존재하는 거예요
그리고 이 두 개를 다 한번에 아우를 수 있는
바깥쪽에 html 문제를 떠나 만듭니다 즉 우리 눈에는 하나의 웬 문서를
보고 있지만 실제적으로 코딩 상에서는 문서 믿게 세계 1 2 3 개를
가지고
문서를 웹 문서를 만들어 나가는 방식이 있습니다
프레임으로 나누었고 그 프레임 마다 하나씩 문서를 가꾸는 거에요 그리고
이 전체를 다 아우를 수 있는 커다란 문제를 밖에 하나 뜹니다
요즘은 많이 안 쓰기 때문에 그곳에서 뭐 예제 나 이런거 하지 않았는데
이런 구조가 예전에 많이 썼어요
자 이럴때 어탕 게시 탑 이면 뭐냐면
내가 여기서 많이 가 하이퍼 링크를 클릭을 해요 셀프 면 내문서 뇨 기
만 대 문서인 거죠 그럼 여기서 그냥 열리는 거에요 자 타 비운 뭐냐면
나를 아우르고 나를 감싸고 녀석 있죠
여기서 열리는 겁니다 즉 이쪽에 위쪽에 있는 프레임이 의미가 없어져요
탑 위에 올라가서 나의 내가 있는 프레임 위쪽에 올라가서 나를 아우르고
나를 감싸고 있는 위쪽에 올라가서 그 문서에서 열리는 거 탑 이고요
태어난 지 도 마찬가지인데 앞에 어느 m 내가 어떠한 부분을 딱 클릭을
했어요 그러면 나를 감싸고 있는데 부모 나를 감싸고 있는 6 문서에서
열리는 방식 크게 페어런츠 입니다
그래서 어 타 카페 런치는 아주 미세한 차이가 있는데 걸 비싸다고 보시면
될 것 같구요
이런 방식이 있는데 요즘은 문제를 나눌 때 이렇게 문서를 문서를 여러
개로 쪼개 갖고 세 개로 쪼개 갖고자 하는 방식
또 쪼갤 수도 있어요 여기서 프레임을 더 만들어요 그러면 문서가 하나 둘
세 개를 됩니다 때로는 이쪽으로 쪼개 기도합니다
그래서 많은 문서를 만들고 어쨌든 간에 이 만든 문서 봤다가 전체 오를
수 있는 커다란 바깥쪽에 문제를 하나 더 만들어 줘야 되요
굉장히 예전에 많이 썼는데 요즘은 거기 사용이 안됩니다
그래서 예 페란 치와 다 요즘 거기 안되겠죠 그러니까 그래서 블랭크 라
셀프 정도만 여러분의 알아 두셔도 상관이 없겠습니다
자 남의 렙 태그의 랩 태그 렙 태그는
4분 보니까 마진 100
그 다음에 위쪽 100 옆에 오른쪽 410 아래쪽 100
왼쪽 300 놓습니다 내 중 거냐면
고정 바로 여기 300 차지하고 요 여기 4명씩 차지하고 위에 100
아래 배우 찾아 니까 그 안에서 내용물이 존재 되니까 마진을 다중 거겠죠
자 그 다음에 플루트 래프팅을 줬어요 이미지
그것은 지난 시간 했던 내용과 동일 하네요
자 이미지를 보면
자 이미지가 있고요 다음에
문 단테가 있습니다 그래서 어떻게 별이 되냐면 이미지가 있고 원래 문쪽
글자들이 밑으로 내려와 되겠죠 근데 글자들이 옆으로 쭉 나열 되고
있습니다
자 이런 글이 어떻게 만들어요 플루트 속성을 이용해서 플루트 레프트 를
주구요
그 다음에 넥스 위드 얘는 최대 최소 최대 500 픽셀 이래요
가장 넓게 사용하시는게 500피스 에 대한 얘기입니다
그래서 5배 까지 쭉 들어갈 수 있겠구요
자 요렇게 해서 우리가 그
뭐죠 이미지와 이미지와
글자를 수평 구조로 나열을 할 수 있습니다 지난 생을 했던거 와 동일한
구조 줘
그리고 이 이미지의 최대 크기는 500피스 이미지가 원래는 굉장히 큰
건가 봐요
자 제가 한번 이렇게 치워 볼게요
이미지가 엄청 큰거 네요 근데 여기서 제한을 주는 거죠
이미지 너는 아무리 이미지가 큰 이미지가 불러 와도 그 이미지 사진은
500 슬럼 지 말라 예를 들어서 1백 픽셀의 가요 그럼 300 3짜리
보이겠죠 하지만 너무 큰 이미지가 올때는 500 픽셀로 이렇게 가로 값을
제외한 시켜 놓습니다
이렇게 제 1식 놓지 않으면 어떻게 되요 깨져 벌겠죠 바깥 쪽으로 넘어가
버리겠죠 그런 걸 막기 위해서 최대값을 좋습니다
자제 말까지 다 알아 봤구요 그러면 실제로 한번 여기까지 한번 간단하게
같이 코딩을 한번 해보는 시간을 갖도록 하겠습니다
새로운 문제를 만들어 놓고요
저장을 하고 하도록 하겠습니다
전부다 코딩을 하지 않고 중요한 것만 코딩을 하고
어 재활용할 수 있는 코드는 죄 활용을 하면서 진행을 하도록 하겠습니다
좋습니다 자 먼저 큰 덩어리 부터 코딩을 해 보면
div id
탑이라고 할게요 자 이름을 보통 이렇게 정하기도 하고 있어 안정 하기도
하는데 상관 없겠죠
자매 텔 귀 id
얘가 뭐가 될까요 아래쪽 바 역할을 하겠습니다
댓글 0개
등록된 댓글이 없습니다.