Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 20강 태블릿 레이아웃-I
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 인다 자 오늘 이 제 20강 html css 이식과
태블릿 레이아웃 첫 번째 시간을 진행하도록 하겠습니다 자 우리가 예전에어 왜
pc 상에서 웬 문서를 만드는 레이아웃에 대해서 살펴 봤고요 다음에 지난
시간과 지지는 시간에 스마트폰 레이아웃에 대해서 우리가 살펴봤습니다
자 오늘날 내용 1 오늘부터 이제 태블릿 에서
태블릿에서는 어떻게 레이어 엇 html 과 css 를 가지고 어떻게
레이어를 만들어 나가는 지 한번 살펴보도록 하겠습니다
자 오늘은 먼저 해당하고 내비 메뉴죠
보통 메뉴로 많이 재정을 하죠 그래서 해 다완 앱 이 부분을 어떻게
제작을 하는지 에 대해서 살펴보도록 합니다
자 먼저 해다 부분인 다 자 여러분은
어 이거 또 이제 타블렛 여러분들이 지금은 제가 브라우저를 이렇게 캡처를
하는데 실제로는 탑을 1
뭐 아이패드 라든가 아니면 테 삼성 탭 일하는거 아니면 뭐 lg 우리나라
대 주장해도 탭이 많이 나오죠 아니면 다른 외국 제조사에서 탭이 많이
나옴 태 pc 가 태블릿 pc 가 많이 나옵니다
그 태블렛 pc 에서 실제로 서버 에 올려놓고 태블렛 pc 를 접속을
해서 거기서 여러분이 확인을 하시는게 가장 정확합니다
근데 여건상 지금은 동영상 제가 녹화가 왔는데 테이블에 화면을 보여 드릴
수가 없어서 일단 브라우저 화면에 해서 확인을 하면서 작업을 하구요
여러분들은 태블릿 pc 에서 가능하면 확인을 하면서 작업을 하시게
가장정확하게 쬲
그래서 만약에 이제 태블릿 pc 를 잡아 태블릿 pc 에서 헤더 부분
이 부분입니다
먼저 보통 대부분 다 그 웹 사이트의 로고 라든가 그런 부분이 나올 수
있겠고요
다음에 여기에 네비게이션 바가 나올 수 있습니다
여기서 포인트는 왼쪽에 이렇게 메뉴를 1 2 3 5 붙이고 요
오른쪽에 또 메뉴 2개 이렇게 붙이는거 어떻게 하면 이렇게 왼쪽과
오른쪽을 분할해서 붙일 수가 있는지에 대해서도 살펴보는 시간을 갖도록
하겠습니다
자 다음에 좌측메뉴 여길 구정 해요 그래서 이것도 좌측에 어떻게 하면
메뉴를 쭉 때 쭉 나열할 수 있을까에 대해서 오늘 살펴보고 요
나머지 부분 콘텐츠 라든가 부터는 다음 시간에 살펴보는 시간을 갖도록
하겠습니다
자 그러면 먼저 소스를 보면서
음 살펴보도록 할게요
자 오픈을 해서 20번 20 다시 1 예제를 꺼내도록 하겠습니다
자 됐구요 자요 오늘 제가 탭을 위해서 보일 수 없기 때문에 일단 그냥
브라우저에서 보여드릴께요 보여드리고 여러분들도
브라우저에서 확인을 하는 것보다는 어떻게 탭을 1 그 어 가지고 개
구비하고 계신 분들은 테이블에서 확인한 게 가장 좋습니다
자 이런 구조인데요 자 여기서 우리가 헤더를 만드는데 해당 않을 때
중요한 것은 아까 방금 말씀드렸듯이
메뉴를 왼쪽에 이렇게 나열하고 오른쪽에 나를 합니다 그래서 얘를 죽이면
메뉴가 떨어지지 않아요 떨어지지 않고 가려 지더라도 떨어지지 않고 밑으로
내려오지 않고 요 이렇게 지속되는 거 이런 레이아웃을 영구적으로 지적하는
방법에 대해서 한번 살펴보도록 합니다
자 코드가 좀 긴데 요자 보시면 전체적인 html 의 전체적인 구조 부터
살펴보도록 할게요
자 처음에는 먼저 헤더가 있습니다
다음에 네비가 있구요 줘 요 두가지 먼저 살펴보도록 할게요
자 헤더는 윗부분이 에요 윗부분 6 윗부분 모일 부분은 덜 묶어 없을 것
같습니다
디비전 태그를 이용해서 이렇게 아이디는 헤더 라고 정해 놓고 요 그
다음에 p 태그 문젠 태그 이용해서 이렇게 표시를 해주고 있습니다
다음에 디비전 테그 큰 덩어리 또 나오고 있어요
다음에 네비 있구요 레비 컨텐츠로 컨텐츠 내용 이겠죠
그래서 컨텐츠 내용이 쭉 다 나오고 있고 맨 밑에 포터 가 존재합니다
총 덩어리와 큰 덩어리와 맥 덩어리 덩어리가 있는 거죠 부터 예 어야
하구요
그 다음에 여기에 컨텐츠 부분이 쭉 코팅이 되어져 있구요
여기까지 요 그 다음엔 애비가 있고 그 다음에 헤더가 있습니다
결과 화면에서 보면 큰 덩어리가 어떻게 나눠진 거냐면 먼저 이 부분
헤더가 있구요
다음에 네비가 있고요 그 다음에 이 부분이 컨텐츠 부분입니다 컨텐츠
부분은 또 크게 두 덩어리
오른쪽에 메뉴 다음에 왼쪽에 컨텐츠 다음 에프터 가 맨 마지막에 존재할
수가 있겠습니다
자 그러면 형과 cc 살펴보도록 할게요
자 헤더는 방금 밭에 지 별거 없을것 같습니다 헤더에 css 스타일을
보니까 처음에는 음 여기 보면 그 초기 바코드가 있어요 그래서 에
스타리그 전체 묻은 태그의 마진과 모든 태그 뿐만 아니라 모든 요소들
226 웹 문서를 구성하는 모든 요소들에 마징가 패딩은 기본적으로 영을
주도록 합니다
다음에 바디에 글자는 요 글자 폰트 요 글자를 쓰겠다
다음에 li 의 리스트 스타일은 주지 않겠다 눈은 좋습니다
다음에 바디에 민 위드 최소로 줄여 드릴수 있는게 1000a 게
중요합니다
자유 그 웬 문서가 바디 전체적으로 받을 감사 된거죠
바디에 최소의 사이즈 최소의 가로 사이즈가 천 이란 얘기예요
자 천 이기 때문에 이렇게 지정 했기 때문에 애가 줄어들어요 줄어든다
하더라도 요 메뉴들이 밑으로 떨어지지 않고 레이어 없이 깨지 않고
계속해서 옆으로 유지가 될 수가 있는 겁니다 이게 만약에 없다면 이
메뉴가 브라우저와 줄어드니까 예 밑으로 떨어질 수 있겠죠
하지만 최소값을 민 윗 이라는 속성을 좀 으로 해서 천천 은 항상 유지가
되는 거에요
천이 유지가 되기 때문에 브라우저가 줄어든다 하더라도 우리 눈에
안보이지만 이쪽에 1000 팩 셀 이렇게 주어져 있는 거겠죠
그래서 레이아웃이 유지될 수가 있겠습니다
그래서 바디 태그 요청을 좋고요 자 헤더 살펴봅니다 헤더는 높이가 100
픽셀 이래요
그래서 100 픽셀 좋구요 다음에 라인 에이트 도 100 p3 돼요 자
헤드 지금쯤 이 이제 이제는 요렇게 2 코드만 들어와도 어떤 의미인지
아시겠죠
세로 쭉 중앙 정렬을 시키기 위해서 이렇게 중 거겠죠
다음에 패딩은 시 픽셀이 되어 여기 c 픽셀 위아래 다시 픽셀 중 거구요
더 잡아 턴 보더를 주는데 아래쪽에 바 틈에 많이 픽셀로 가려다 랗게
선을 하나 만들어진 거구요
다음에 백그라운드로 컬러를 요런 색으로 지정했습니다
다음에 폰트의 칼라는 하얀색으로 지정이 되어 있구요
되어있죠 그래서 헤더는 별 특별한 건 없고 다음에 p 태그 그 안에
있는 문단 태그 p 태그에 폰트 의 사이즈는 2배 키웠어요 그래서 그쳐
크게 들어 갔고요
폰트의 웨이트 더 가볼 도체를 지정했습니다
뭐 요정도 는 이제 여러분도 이제 코스가 됐기 때문에 이 정도면 곳에
있기 때문에 금방 이해하실 거고요
자 내비게이션 바 이 부분이 부분이 제자는 중요합니다
자 일단 바디를 최소의 위 두 값을 천 100세를 주어진 상태에서
네비게이션의 바탕을 이런 로서 ebb 높이를 80 픽셀 87세 좋고요
라인의 to 80 3 즉 가로세로 쭉 중앙 정렬을 시켰습니다
자 그 다음에 그 안에 들어가는 거 그 아내가 어떻게 고정돼 있냐면
html 탭을 보면 이렇게 미스트 ul 가 에라이 를 통해서 리스트를
했는데 두 덩어리 나눴어요 유액 와의 리스트로 버튼 1 2 3 5 그
다음에 버튼 675 해서 이렇게 2동이 나눴습니다
자두 덩어리 나는 걸 중에서 어 두 덩어리 전부다 u 혜택은 오버플로 5
헤딩을 줬어요 넘치면 가려지게 놓구요
첫 번째 유에 구조 선택자 를 중에서 차일드 1번째 차일드 두번째 다
플루트 레프트 라이트 좋습니다 그래서 첫 번째 유애리 누구냐면
이 부분이죠 이 부분은 왼쪽 정렬이 되게 다음에 이 부분 두번째는 어떻게
플루트를 좋았고 라이트 오른쪽 정렬이 되게 만들었습니다 그래서 두 개로
양분 된거죠
왼쪽의 들어가려 적들과 오른쪽에 들어갈 녀석들을 양분해서 대화를 해
놨습니다
자 그 다음에 그 다음에 이제 않도록 조금 좀 들어가 보는 거에요 자
li ul 안에 li 가 있죠 리스트 아이템 들이 있죠
그것들은 전부 다 레프트 플루트 속성 레프트 줬어요 그래서 왼쪽으로
하나씩 하나씩 정렬 수집 구조가 아닌 수평 구조를 주기 위해서 플로트
드래프트로 좋습니다
그리고 li 의 a 태그 줘 a 태그에 텍스트 코레 수는 논
그 다음에 디스플레이 불러 올렸습니다 지난 시간에 예전에 한번 살펴
봤는데 기억이 잘 아실 지 모르겠네요
이렇게 a 태그에 다가 디스플레이를 블록을 주고 패딩을 50을 줘요
이 주는 이유가 왜 그런 다구요 에일 태그를 확장을 해서 내가 btn
일이란 것을 사용자가 직접 클릭하지 않고
이사회 평이 사각형의 근접해서 요 아무 부분 이런 부분을 클릭을 해도
btn 일이 클립 될 수 있게 즉 사용자 테 편의성을 증가시키기 위해서
a 태그에 다가 블러그를 주고 패딩을 50을 준 겁니다
즉 좌우로 다 확장 시킨 거죠 자 이렇게 해서 a 택에 주는 요런 기법과
알고 계시면 좋겠습니다
자네 보더 라이트 오른쪽에 다일 팩스를 줬어요 그래서 1팩 세실 이렇게
보도 라인을 주고 있습니다
폰트 레이트 볼드하고 컬러는 화이트 를 주고 있습니다
자람에 un 에서 첫 번째 라스트 차일드 6월에 라스트 차일드 가도
구해요
예 저의 오른쪽에는 에 이 녀석의
li li 에 첫 번째 6과 마지막 녀석의 속성을 또 주고 있습니다
자 첫번째 6억 은 첫번째 여 저게 a 태그에 는 보도 레프트 왼쪽에
다가 1피스 중 돼요 그래서 요 성이 나온 거구요
어 그 다음에 어
라스트 보도 라이트 행운은 이쪽에 당하는 영을 중 거에요 그래서 이쪽에
그 보속 값을 빼버린 거겠죠 어
요렇게 처리를 한거 이런 기법도 알아두시면 좋을것 같습니다
자 이렇게 해서 헤다 와 내비게이션을 했는데
어제가 아까도 말씀 드리 중요한 것은 기존에 있는 거 같 아 뭐 했던
내용들이 에요 그래서 그 여러분들이 다 아실만한 때문에 중요한 건 어떻게
된다구요
미니 드 최소값을 1000 픽셀 줬어요 그래서 브라우저 하게 클 때는
상관이 없는데 그 생생한 없는데 쭉 줄어들어요 줄어들다가 브라우저가
1000 픽셀 가로 사이즈가 처음 픽셀 이해가 된다 하더라도
이해가 된다 하더라도 바디는 무조건 1000 pc 를 가지고 하는 거예요
그렇기 때문에 이 레이아웃이 깨지지 않고 즉 btn 6과 btn 7이
아래쪽으로 떨어지죠 떨어져서 레이아웃이 깨지지 않고 이쪽 그 전체적인
ui 가 유지가 될 수가 있는 겁니다
이런 기법들 꼭 알아두시면 되겠습니다
아 그러면 돌아볼까 의장 표로 에 들어와서 헤더 참 작정을 했구요
메뉴 이름에 이쪽 그 본문에서 왼쪽에 있는 요렇게 수직 구조의 메뉴로
구성 하는거 어떻게 되는지 살펴보도록 하겠습니다
자 수입구제 내 비전 앱으로 감싸져 있는데 내부로 감싸져 있는 것 중에
큰 덩어리 네비게이션 엘리 비 자
로컬 내 2개 잔다 요거 보입니다 요구는 추 직구 저를 좀 돼 있어 요금
수직 거리 로 되어있는걸 왔다가 그냥 쓰면 되겠죠 쓰면 되는데
밑에 부분에 선이 점성이 되겠죠 보도에 솔리드 타입의 아니라 데 씨드
타입을 이용한 거겠죠
자 살펴봅니다
자기가 안 깐 랩은 전체를 쌓은 것은 기본적으로 오버 플러그 히든이
주어지고 있구요 백그라운드로 칼라 에다가 이런 색상 요런 색상을 주고
있습니다
다음에 그 중에서 그 안에서 큰 덩어리 똘 내비 개전 로컬 네비게이션
바의 랜디는 플로트 레프트 해요 그래서 왼쪽으로 이 큰 덩어리가 왼쪽으로
붙어 있습니다
그리고 토큰 250 픽셀이 되요 여기서도 됐구요 여기서부터 시작해서
여기까지 250 픽셀을 주어지고 있구요
그 다음에 그 안에 리스트가 u 애가 li 로 구성되어 있죠
근데 이것도 마찬가지로 다 링크가 걸려 있는데 링크를 쫑 링크 형을 확장
시키기 위해서 a 태그에 다가 디스플레이 블럭 이라는 속성을 좋구요
패딩을 위아래 c 픽셀 좌우 21 좋습니다
그래서 전체가 다 여기를 클릭 해도 btm 구가 선택이 될 수 있게
확장시켜 나왔습니다
자람에 바다가 보도에 바텀 인데 아랫부분에 피그 보도 값을 줍니다
1 픽셀을 죽죠 그리고 나서 솔리드 가 여태 시들이 좋기 때문에 점성이
점 점 점 점 점 점 나열 될수가 있겠구요
색상을 또 부여 했구요 텍스 댓글에 저는 놓으셨어요 너무 좋기 때문에
여기에 선이 보이지 않고 이렇게 깔끔하게 처리 된거구요
그 다음에 색상도 원래는 이게 없으면 파란색 브라우저와 학 기본적으로
제공하고 있는 파란색의
그 링크가 걸려 있는 글자들은 파란색의 나오겠죠
그런데 그 글자도 보기좋게 이런 색으로 변경을 해 주었습니다
자 여기서 중요한 것은 어떻게 된다구요 디스플레이 블러 a 태그에 다가
디스플레이 블록과 패딩을 줘서 a 태그 영향을 확장함으로써 사용자가
클릭을 할때
비스무리하게 이 근처에 가서 어느 곳을 클릭을 하던지 간에 클릭 이용해
하게 클릭이 될 수 있게 만들어 주는거 이런 기법이 중요하다고 볼 수가
있겠습니다
자람에 컨텐츠 램이 나온데요 2부 부터는 이제 다음 시간부터 알아 볼
건데 내용이 굉장히 좀 많아요 많지만 따지고 보면 하나씩 하나씩 따지고
보면 별 내용은 없고 요
여기 보시면은 뭐 문자 오래간만에 보조
그 문자 선택자 또 나오구요 문자 선택자 에 퍼스트 라인 1st 레드
같은건 나오고 여러 가지가 나오고 있고 여기 보면 자존 선택자 로
나오고요
이런데는 후 전 선택자 져 이런것도 복합적으로 어떻게 서로 역할을
분담해서 어떻게 매력을 잡고 있는지 살펴보도록 하겠습니다
자 오늘 했던 내용들 여러분이 다시 한번 리뷰를 해 보시는 데요 중요한
거는 누누이 말씀드리지만 가로 사이즈가
민 윗 이라는 속성을 좋았고 가로 사이즈가 브라우저와 쌀겨 칩 울더라도
지금은 제가 브라우저를 지금
이렇게 브라우저를 임의 적으로 이렇게 하고 있지만 실제로 타블렛은 이렇게
안되죠
근데 왜 미니 제값을 중요하면 타블렛에 사이즈가 조그만 타블렛 있지만
커다란 태블릿도 있죠
그렇기 때문에 쪼그만 탭을 1건 커다란 탑을 됐건 모두 다 다 보이게
하기 위해서 다 적용되기 위해서 레이아웃이 깨지지 않기 위해서 제가 요런
그 위드 미 뉘 드 값을 중 겁니다
그래서 일에 역시 깨지지 않게 하기 위해서
음 그런거 유념해서 여러분이 실제로 코딩을 해 보시면 될것 같고요
다음에 수직 태그 수직 구조
어느 부분이 언 냐 면
이 부분이죠 이 부분은 술집 구조인데 이 부분에
css 가 들어가 있는 부분 얘는 굳이 수평으로 줄 필요 없기 때문에
li 에다가 플루트 레프트 를 주지 않았습니다 대신 데이트가 lib 태그
요기 id 라 플러스를 였죠 왜요
결과물을 보면 예 2 전체 랩을 갔다가 반을 나눠서 이쪽에 왼쪽에 다
내비게이션 붙인 거죠 상단에 붙인 아니라 왼쪽에 붙인 겁니다
그리고 오른쪽에는 컨텐츠 나와 되기 때문에 예를 우산 레프트 로 붙여서
정렬 시키고 요 나중에 다음 시간에 알아볼 컨텐츠
얘도 마찬가지로 애플은 래 프 트 로 푸켓 줘 그러면 자 그래서 래프트
여기 보이네요 코드가 레프트 붙인것 보이시 겠죠
그 처리 한거 다음에 메뉴에 a 태그를 확장에서 클릭을 용이하게 만드는
기법들
이런 기법들 여러분들이 다시 한번 꼭 중점적으로 살펴 보시면 될 것
같습니다
자 오늘 뜬 내용들 굉장히 중요하구요 태블릿이 사용 펜더와 점점 높아지고
있죠 그래서 모바일 환경 뿐만 아니라 탭을 에서 사용 빈도 높아지고 있기
때문에 여러분들이 탭을 s 에서 의 매력 잡는것도 어
꼼꼼하게 다 살피 살펴보면서 내 것으로 지식을 내것으로 만들어 주시면
되겠습니다
자 오늘 수업은 여기서 마치구요 다음 시간에 마저 나머지 부분 더 진행을
하도록 하겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.