Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 15강 웹페이지 실전-II
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 풀 수 있는다 겨울 html css 15 번째 시간입니다
지난 시간에 이어서 웹페이지 실전 두 번째 시간을 진행하도록 하겠습니다자 지난 시간에 우리가
야우 다 껌 사이트의 전체적인 레이아웃을
여러가지 방법이 여러가지 태그와 css css 속성을 이용해서 만들어
보았습니다
자 오늘은 우리나라의 일반적인 쇼핑몰의 레이아웃을 한번 만들어 보도록
하겠습니다
자 보시면 쇼핑몰 에 이어 옷인데 자 요런 구조에요 그래서 보시면
보시면 위쪽에 위쪽에 그렇게 메뉴가 쭉 나와요
자 우리가 요런거 를
자 메뉴가 이렇게 하나가 나오고 그 다음에 밑에 떠나 5조 이거를
글로벌 글로벌 너 내비게이션 바라 그래서 보통 그냐 이걸 gnb 라고
많이 하고요
글로벌 내비게이션 바 이 부분을 갖다가 여기에 이제 녹이는 일반적으로 다
모든 거의 대부분의 죽사이트들이 다 입는 명의 드리죠 그래서 이거를
글로벌 내비게이션 바 이거 여기에 이제 메뉴 각 쇼핑몰의 각 사이트에
맞게
여기에 메뉴를 하나씩 하나씩 만들어 놓게 쬲 그래서 영어를 로컬
네비게이션 바라 그래서 l m p 라고 많이 합니다
이런 용어가 중요한 건 아닌데 이런 용어를 알아두시면 나중에 다른 분
다른 사람들과 동료들과 코어 을 해서 작업을 할 때 누른 단어들이 보이면
쉽게쉽게 우리가 파악을 하고 커뮤니케이션이 쉬워 지겠죠
그래서 참고적으로 알아두시면 될 것 같습니다 잘해서 gmb 가 위쪽에
있고요 그 다음에 로고가 있고 그 다음에 여기에 배너 갈 특히 오는 것
같아요
다음에 여기에 램 b 가 있고요 로컬 네비게이션 바가 있고
자 컨텐츠 보면 컨텐츠 항목의 이렇게 크게 컨 덩어리로 나눴고 요 다음에
상품들이 배열 되자 상품들이 바둑판 배울 식으로 테이블 배열로 배열이 쪽
되고 있습니다
다음에 사이트 아래쪽에 보면 회사로고 라든가 아니면 회사정 그 주소
음 뭐 반품 주로 되구요 회사 물류 참고 좀 그런 정보들이 있죠
그 다음에 쇼핑 폼텍 그의 물린 어디에 쓰인다
에스크로 서비스를 어떻게 한다.면 그런 정보들이 있죠 그런 정보들이 나요
나오는 섹션
나오는 부분도 있습니다 자랑 맨 밑에는 거의 대부분 다 카 페 라이터가
존재 하구요 그래서 이런 전체적인 내어 절 한번 만들어 보도록 하겠습니다
자 먼저 비츠 스튜디오 익스프레스 호흡을 꺼내세요
자 15 다시 1 예제를 오픈했습니다 자 먼저 브라우저에서 항복해 요
뿌려져서 보면 어떤 모양인지
금방 쉽게 여러분실 수 있습니다 자 이런 내용이죠
그래서 브라우저 좀 크게 보면 절 딴 가운데정렬 되고 있네요
저 가운데 정렬 다 되고 있구요 아까 말씀드렸듯이 맨 상단에 뭐 갔어요
gmb 글로벌 네비게이션 바가 존재를 하고 다음에 로고 존재하고 배너 들
쭉 나열 되구요
다음에 데 램 b 메뉴들이 쭉 또 수평 구조로 나열되고 다음에 섹시한
컨텐츠 부분이죠 컨텐츠 부분에
보통 이 부분에는 뭐 슬라이드 배너 라든가 아니면 다른 배너 큼지막한
배우들이 나오고 그 다음에 조금만 배너 딜도 게 나올 수도 있겠구요
다음에 바 접한 배울 로 테이블 배울 시골에서 상품들이 쭉 이렇게 나열이
되는게 일반적 에 국내 쇼핑몰의
글에 이어 오신다
그래서 용어는 무수히 많이 쭉 나올 수 있는데 제가 8개 만 일단
해봤구요
자라 맨 밑에 보면 이제 애프터 부분이죠 푸터 부분에 오피스룩 opc 어
드레스 쇼핑 인포 정보들이 나올 수가 있겠습니다
다음에 밑에 보면 카피라이터가 나올 수 있겠구요
자 요런 전체적인 구조를 어떻게 코딩이 되어 있는지 한번 살펴보도록
합니다
자 밑에 보시면 html 코드 했는데 먼저 큰 덩어리 먼저 보면 헤더가
보이네요 헤더 갈수 여기서 시작해서 어디까지 가는지 보니까 여기 까지
갑니다
자의 헤드 안에는 gmb 가 있구요
그저 글로벌 네비게이션 다가 있고 론가 있고 자연히 t 메뉴가 있고
lnb 가 있습니다
즉 헤더가 여기까지 예요 여기까지가 전부 다 해냅니다
헤더를 로고나 히 로고 부분 이나 아니면 맨위에 gnb 부분까지만 헤더를
여러분 주어 되고요 그리고 그걸 내비게이션 이라고 따로 빼도 되고 아니면
이렇게 같이 묶어서 해도 상관은 없겠습니다 근데 따로 빼는게 네비게이션을
따로 뺀 게 로컬 네비게이션 바를 따로 빼는게 추세 긴 추세인데
뭐 그렇다고 해서 큰 지장은 없을 수가 없겠습니다
자 그 다음에 큰 덩어리는 콘텐츠의 어 컨텐츠 배너 라든가 상품들
상품들이 나오는 콘텐츠 부분
자 컨텐츠 부분에는 디비전 태그를 이용해서 또 섹션이 리 있어요
이 섹션 일이 뭐냐면 된 이쪽 요부분 슬라이드 배너
2개의 나오는 부분이고요 다음에 섹션 투는 상품들이 바닥판 배 울로
이렇게 배열이 되는 부분
요기가 섹션 투 하고 지정했습니다
자 그 다음엔 포터가 보이네요 포터는 디비전 태그 네 개를 샀는데 하나는
오피스 로고 다음에 오피스 어드레스 인 토
다음에 카피라이터 까지 이렇게 어 위치를 하고 있습니다
그래서 크게 보면 큰 덩어리 뭐 뭐 뭐 있어요 푸터 가 있고요 다음에
컨텐츠 디비전 태그가 보이고 헤더가 보입니다 큰 덩어리는 3 덩어리 줘
2세 덩어리 아래서 또다시 디비전 태그로 계속해서 면 분할을 해나가고
있습니다
자 그러면 하나씩 볼게요 자 먼저 스타일을 스트 cs 시스템 샬 딱
시장을 하니까
여기에 문주 모르게 막 조안나 5조 자 이게 뭐냐면
태그 선택자 줘 그래서 html 태그 발이 태그 디비전 스 펜 어플 있
오브젝트 아이폰 내가 사용하심 내가 지금 이 htm 를 사용하지 않는 태
그들의 태그 드림 엄청 많아 어져 dl dt dd 윤광 우리 사용할 나라
조 오더 리스트 생활 하구요
하지만 이렇게 전부 자 기본적으로 태그를 사용할 지도 모르기 때문에 택을
정해놓고 그 태그에 대해서
음 그 태그 들에 대해서 마진 패딩 포드 포스트 사이즈 폰트 그 다음에
버티컬 라인을 같다 기본적으로 다 세팅을 해 줘요
자 이런 것 같다 우리가 왜냐면 초기화 값이라 그래요 초기 값이 오
그래요 그래서 임원 하는데 초기값을 여러분이 웹사이트를 통해서 초기
가수로 제공해주는 자이트 많이 있고요 아니면 기존의 이렇게 초기 값이
정해져 있으면 그냥 이것을 어떻게 컨트롤 c 에서 컨트롤 v 의 다른
프로젝트에 가져가셔서 바로 재활용을 하셔도 상관없습니다
그래서 초기 데이터 쓰는 것 초기에 이 탔을 때 - 생겨 또 이런 것도
많이 쓰이죠
우리 예전에 한 번 했던 건데 전체 정책 짠 선택을 해서 어떻게요
마진 0
자매 r9
자 다시 5 전체선택 터에서 마진 0
패드에 0 자 이렇게 해서 전체 선택자 를 이용해서 초기값을 그 정확히
탑니다
그래서 초기값은 여러분들이 웹사이트를 통해서 다른 곳을 제국이 초기값을
제군이 로제트 들이 있어요
그곳에서 여러분이 긁어 와서 써도 되고 아니면 내가 직접 그 기존의
썼던거 컨트롤 시에서 컨트롤 v 루 다른 곳에 다른 프로젝트에 다시
재활용을 하셔도 다 놓겠습니다
자 그 다음에 밑에 내려가 볼게요 자 해다가 보이죠 헤드 l 과 이쪽
부분 위쪽 부분 요 구조체 정해서 여기까지가 해 됐습니까 지가 여기까지
전부 해야되죠
헤더는 미드가 100% 래요 전부다 찾았는데요
그죠 브라우저와 크면 클수록 닿자 자는 거야 브라우저가
아무리 크다 하더라도 그걸 다 찾아 는 거에요 그래서 색깔이 지금 색깔
보면 다 차지하고 있죠 자 헤더는 100% 를 사용하겠다 고 지정이 되어
있고요 그 다음에 백그라운드 는 사무 상어 3 후 루지 적이 있습니다
사무 사무 사무 가 어떤 색이 문제 금 그레이 컬러 같죠
자 어쨌든 아아 해돋이 엠비아 헤드 침이 헤드의 는 속성 양푼 없구요
다시 약해요 죄송합니다
헤드의 는 속성무것도 없고 헤더 지엠비 gmb 가 뭐냐면 얘 예
위쪽 점 인거 보니까 클래스를 지정된다 봅니다 그래서 헤드를 실제로
가보면
헤더에 디비전 테가 나온데 그의 클래스가 진행되었습니다 제가 아까
말씀드렸듯이 글로벌 네비게이션 바로 통상적으로 많이 쓰는 키워드 라고
생각하면 되겠습니다
그래서 곳들이 있는데 그거에 배경색을 정 했고요
그 안에는 ul li 로 구성되어 있습니다 그러면
예 백그라운드 정해졌고 요 그 안에 유에 오버플로 히든 위드 100% 에
첨 픽셀
다음에 높이 30 다음에 행간 30 31 30 쓰니까 어떻게 되겠어요
중앙 가운데정렬 되겠죠 자마 진영 오토 브라우저의 가운데 장을 시켰구요
다음에 li 이게 뭐냐면 요기에 있는 거죠
원래는 이렇게 써야 되는데
에라이 가 하나밖에 없기 때문에 게이트 저도 무관 하겠죠
그래서 리스트 아이템 에다가 플로트 레프 좋습니다
수직 구조의 리스트 아이템인데 이거 왔다가 레프트 주석 플루트 래퍼드
저수 평 구조를 바꿔 났구요
다음엔 리스트 타입 리스트 스타일은 논을 줬고요
맞은 레프트 50 왼쪽 여백을 50 픽셀 좋았고 듬성듬성 메뉴들이
떨어지게 만들어 놨습니다
다음에 폰트 사이즈는 일니고 0.9 를 좋았고 조금 축소를 해
놓았구요
자 다음에 해저 이 안에 여기가 다 l 인가 걸리겠죠 그래서 그의 2
링크 걸려 있는 녀석들의 폰트 칼라는 않다 하얀색 다음에 텍스트 코에서는
선이 밑에 없죠 그래서 눈 다 데코레이션 선을 언더라인을 빼버렸습니다
자 그 다음에 gmb 가 끝났구요 그 다음에 로고가 나옵니다
자 로고를 보면 보도하고 위드 원래는 이루고 안에
이미지가 들어 가겠죠 이미지 태그가 그래서 보면 로 9
여기에 어떻게 될까요 img 한담에 썰 씨로
xr 실외 줘
로고가 들어 가겠죠 자 근데 일단은 생명을 하고 지금은 면 분할 하는 게
우선 목적이 줘 그래서 몇 푼을 많은 데 초점을 맞춰서 그냥 텍스트로 로
오라고 타이핑 했습니다
음 모르고요 자 그래서 속성을 보니깐 또 어떻게 됐냐 면
lnb
자로 거는 보도가 보도가 1픽 3
다음에 가루가 입에 세로가 백 라이트 백 해서 중앙 정을 찍혔고 요
맞은 위에서부터 70 다음에 좌우는 오토쇼 쓰면서 가운데 딱 떨어지게
만들었구요
텍스트를 n 센터 좋구요 자 그 다음에 음 헤더에 헤더 부분에 히트 메뉴
예 저의 됩니다 자 예 un 예 2 마찬가지로
리스트 타입으로 html 코드가 되어 있습니다 그걸 우리가 수평을 바꾸게
어떤 작업 왜냐면 u 회자가 오버플로우 히팅 좋구요 위드 천 픽셀의 마진
경우 통 그 다음에 아래쪽은 3 픽셀 떨었어요 2 3배 떨어진 거구요
다음에 li 에다가 플로트 요번에는 레프트 가 아니라 라이트를 좋습니다
맨 오른쪽을 다 볼게요 그래서 라이트를 줌으로 해서 이것도 리스트 타입의
수 직구 료를 수평 구조로 바꿔놓았습니다
자 다음에 마진을 영을 줬어요
그래서 맞은 0 주고 테스터 란 센터 졌구요
잘하면 히트 메뉴 아내 a 링크 다 여기가 링크가 걸려 있는 겁니다 지금
그래서 a 링크 에다가 디스플레이 불러 그렸어요 그리고 컬러를 2828
펀트 컬러 l 2 8 주고 폰트 사이즈 패딩 보도를 좋습니다
자 여기서 여러분들이 조금 중요하게 보셔야 될 부분이 바로 이 부분입니다
우리가
어 폰트의 컬러라 하는가 아니면 사이즈의 패딩 이런 값들을 값들을 에라
에다가 조 되요
에라 에라 저도 되고 에 이해가 주시는데 차이점은 a 에 다 주면 lil
다 주면 이 폭시 자 마우스를 갖다대면
이거 안에 딱 들어오자 마자 이렇게 표시됩니다
즉 사용자가 클릭하기 쉬워요 꼭 히트 원 이라는 글자 정확할 클릭하지
않아도 이 박스 안에만 들어가면 이렇게 들어갑니다
즉 링크가 걸린 걸려져 클릭할 수가 있어요 사용자에게 좀 더 편한
편리성을 제공해 주는 거죠
a 태그에 이 겨울에 어떻게 된 거냐면 a 태그에 패딩을 위아래 c 픽셀
좌 5 37 세로 써요 즉 원래는 여기에 딱 마케 지금 제 장 어 at
가 걸려 있는 건데 그것을
위쪽 10 픽스 의 아래쪽 10 픽셀
왼쪽 10 픽셀 오른쪽 씨 핏을 중 거에요 그죠
그렇게 주고 그렇게 주고 a 태그 니깐 기본 조례 이 태그는 하이퍼
링크가 걸려 있죠 그래서 패딩에 이렇게 같다 패딩 면적의 마우스를
갖다대면 클링 을 할 수 있게 만들어 놓은 것입니다
이게 되셨죠 그래서 주로 대부분 어떠한 메뉴를 만들고 나서 이렇게 선택을
좀 어떻게 확장시켜 주는 거죠 확장 시킬 때 많이 쓰이는 방법입니다
에라이 에다가 요런 것을 지정한 게 아니라 어떻게 a 태그를 블록 타입을
일단 바꿔요 지정을 해 줘요 그 다음에 패딩 값을 주면 그 패딩 값도
다같이 포함해서 에 링크 걸려서
우리가 사용자로 하여금 마우스 클릭을 용이하게 쉽게 하게 만들 수가
있겠습니다
뭐 잘 알아 2시구요 잠의 헤드의 히트맨 용 앱 에라이 1st 차일드 첫
번째 저서
첫 번째 li 첫 번째 그 r 태그의
a 태그 예 저의 저의 얘는 보도 레디 우스
둥글기 를 좌 상담 부터 시작한 버렸습니다 시계방향 돌아가죠 좌상단 우상
단우 하단 좌 달 보니까
첫번째 찰 등 가 예제 예 이건 라이트 정려 있죠 지금 이 녀석인데
이 녀석의 우상 단 우하단 을 cpx 에 만큼 둥글게 둥글게 굴려 때요
그래서 둥글게 둥글게 굴려 졌구요 라스트 차일드 의 뭐겠어요
왼쪽부터 정렬 되니까 이렇게 이렇게 와서 애가 라스트 겠죠 라스트는
좌상단 다음에 좌 하단을 c 픽셀 만큼 더 둥글게 걸렸습니다
자람에 로컬 네비게이션 맙니다 헤더에 로컬 에그 뭐 이쪽 이제 메뉴
123 조로 7 8 자 이 녀석들은
음 오버 플러그인은 좋구요 위드가 100 백퍼센트 그 다음에 높이가 3실
보드 타 위쪽에 1 픽셀 아래쪽 apx 에 좋습니다 근데 위쪽에는 대시를
좋네요 솔리드 가 아니라 그래서 점선으로 표시가 되어 질 수가 있겠습니다
자 패딩 한다. 상 하 라 op 쎄씨 좋구요
자 그 다음에 그 안에 있는 ul 태그 가 있는데 얘는 1000 픽셀
이래요
그리고 맞은 경우 둘 순 없어 쭉
헤더 델 델 mb 는 100% 래요 그러니까
이렇게 브라우저와 커져도 크도다 차질을 하죠
하지만
그 안에 있는 유에 언어도 리스트는 천 픽셀이 고 가운데 정렬이 에요
그래서 여기까지만 항상 존재할 수가 있겠습니다
자 그리고 그 안에 있는 리스트 아이템은 마지노 픽셀의 라인 에이트 25
려 요 그래서 다 배열이 됐고요
음 되시겠죠 자 그 다음에
자 그리고 여기서 여러분이 한 가지의 더보 샷건은
음 여기에 리스트 아이템 있는데 얘가 원래는 수 직구 좋겠죠 메뉴 1
메뉴 2 메뉴 3 내려서 쭉 나갈텐데 예를 출병 구조를 바꿔 온 거
보니깐 플럼 명령을 좋으실 것 같아요 근데 보시면 로컬 네비게이션 바
어디에도 풀업 영향이 없습니다
없는데 없죠 없는데 지금 수평으로 하고 있죠
자 이건 왜 그러냐면 위쪽에 보시면
여기죠 헤더에 있는 에라이 자 이게 어떤 선택자 자존 선택제 가 아니라
후 전 선택해 줘 호전 소맥 자란
어떠한 태그 그 아래 있는 아무리 깊은 곳에 있던 아니면 데 아래 있던
li 를 이렇게 선택을 하면 젊 모든 li 를 다 선택을 한 거죠
그 모든 li 를 다 래프트 좋기 때문에 얘도 그 영향을 미치는 거죠
그래서 굳이
로컬 네비게이션 바의 있는 에라이 에다가 플로네 프 트 를 주지 않아도
위쪽에서 후 전 선택자 를 이용해서 헤더 밑에 있는 모든 에 라인은 다
레프트 정열을 해라 라고 명령을 젖어 이렇게 왼쪽으로 수평 구조를
이루면서 정렬이 될 수가 있겠습니다
자 그 다음에 또 보호 여기서 이제 컨텐츠 볼게요 이제 해 다른 다
끝났어 이렇게 해서 헤더는 다 끝났고 그 다음은 컨텐츠입니다 콘텐츠는
크게
별로 못 볼 게 없을 것 같아요 실제적으로 우리가 웹사이트를 웬 문서를
만들 때 요 윗부분이 있죠 헤더 부분 메뉴바 네비게이션 바 하고 여기
부분 뭐 회원 그 로그인 부분 아니면 검색 부분 고런 부르는 실제로
작업이 많이들 그 시간이 많이 걸리고 공수가 좀 말씀합니다 실제로 요
밑에 컨텐츠 부분은
양은 많아요 계속해서 왠 문서가 늘어나면 늘어날수록 해당 거의 변화가
없지만 그 컨텐츠 보는 계속 받게 되니까 하지만 그 그 레이아웃이
음 양이 많지만 라이드 가 어렵거나 하지 않고요 그리고 서버에서 옴
데이터를 풀어 주면 되기 때문에 그다지 공부가 마이트 걸 다 않습니다
자 이것도 보시면 에어컨 10g 부터는 이제 별로 그렇게 할 작업이 없을
것 같아요
가루가 1000 팩 3 리고 그 다음에 마진이 0이고 오토 예요 그래서
감정을 시켰구요
여기서 섹션을 원이고 섹션 투가 있죠 섹스웰 어머니요 부분이구요 수평으로
분 아래 봄 요 부분은 섹션 트가 이 밑에 바드 파형 실패 의 부분입니다
그래서 섹션을 보니까
오버 풀러 히 등을 좋구요 그 다음에 과 루가 1000 픽셀 높이가
4배의 여기사 병이란 얘기입니다
다음엔 맞으며 오토 보도일 픽셀 좋고요 섹션의 div 후 전 선택자 모든
div 너네들은 새로 가사 100 이고 플루트 갈래 프로브 4포트 로부터
해요 그래서 수평 구조 아니라 이렇게 하나 붓고 이렇게 1 붙어서 2개가
수평으로 나란히 배울 수 있겠구요
다음에 높이 행간 400 좋구요
받어 박싱 오래간 말 문의 요 빡신 사이즈 받아 박스를 줬어요 그래서 이
포도가 안쪽 바깥쪽으로 투쟁 해라 안쪽으로 투표를 까 잡히게 좋습니다
만약에 이걸 갖다가
과도하게 노 시켜 볼까요 그럼 어떻게 되겠어요 안쪽으로 이렇게 들어올
수가 있겠습니다
자 줘 내용 잘 키워 안하신 분들은 다시한번 뒤로 가서 좀 홈 봐보세요
버트 8명은 아니었고 그 두께를 바깥쪽으로 아웃사이드 옆에 것인지
인사들이 뺄 것인지 그 결정하는 거 있죠
자 그 다음에 컨텐츠 슬라이드 매너 그 다음에 사이드 맨 합니다 슬라이드
리나가 이쪽 이고 사이즈는 했죠 그거에 위드 까 을 좋았고 가로 이쪽
슬라이드는 700 이쪽은 300을 좋습니다
자 빡신 사이즈를 갔다가 안쪽 보도 박스로 줘서 안쪽으로 했기 때문에
이렇게 전체와 1000 픽셀 인데 왼쪽을 703 백 근 동하게 딱 맞추어
댓글 0개
등록된 댓글이 없습니다.