Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 14강 웹페이지 실전-I
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 볼수 인다 자 오늘 html css 열네 번째 시간 웹페이지
실정 1 첫번째 시간을 진행하도록 하겠습니다 자 지난 시간에 우리가13강 은 33강 까지 통해서 html 의 기본적인 태그 들에 대해서
살펴 보았구요
다음에 css 에서 중요한 선택자 들 여러가지가 있었죠
태그 선택자 속성 선택자 자존 선택자 후손 선택자 등등해서 많은 문자
선택자 까지 많은 선택 자들이 있었습니다
고 선택자 들 뭐 그 약방에 감초 라고 할 수 있는 부정 선택자 그런
것도 있었죠 그래서 고런 선택자 들이 중요한 의미는 어떠한 속성 대 가
어떠한 태그의 속성을 변경하기 위해서는
정확하게 내가 원하는 그 요즈 를 선택할 수 있어야 된다고 했죠
그럼 다음에 정확하게 선택이 된 다음에 그 요소의 속성을 변경할 수 있기
때문에 선택자 중요하구요
다음에 우리가 그 선택 때를 알아 본 다음에 속성에 대해서 알아봤습니다
그래서 css 에서 존재하는 제공해 주는 여러 가지 속성 대해서
알아봤는데
중요한 것은 레이아웃을
구성하고 있는 디비전 태그 라든가 div 태그
뭐 흔히들
예 dv 태그 라고 하는 디비전 태그 그 다음에 플로트 다음에 뭐 포지션
그런 것들이 굉장히 중요한 의미 없고요
그 외에 뭐 텍스트 속성 이라든가 아니면
백그라운드 속성 그런것들은 여러분이 그 금방금방 숙지를 하셨으리라
생각합니다
자 속성은 css 를 제공한 속도 무지 많아요 근데 그거를 한 번에 다
공부할 수도 없고요
한 번에 다 공부한 더라도 바로 소화를 시킨 할 수가 없습니다 그래서
계속 기본적인 것을 충실히 하시고 그 다음에 계속
음 계속해서 작업에 웬 문제를 만들어 나가면서 하나씩 하나씩 경험을
통해서 익혀 나가는 게 가장 좋습니다
자 어느 쪽도 시작해서 이제 웹페이지 실전 지금까지 우리가 배웠던
html 태그
그 다음에 css 선택자 css 속성 등을 이용해 줘
웹페이지 실전 에 대해서 웹페이지를 만들어 보는 거에요 그래서 웹페이지를
실제로 만들어 보는 시간을 갖도록 하겠습니다
자 먼저 웹페이지 개 웁니다 우리는 다양한 웹 사이트를 경화 0
경험하고 있습니다 하지만 수많은 웹 사이트 1의 2호 또 전체적으로 거의
비슷한 레이어를 가지고 있습니다
자 여기 제가 대표적으로 몇 가지 아주 기본적인 그레이엄 만 봤는데요
자 먼저 sba 의 서울 점 kr 서울산업 진영 홈페이지를 보면
간단하죠 맨 위에 뭐가 있어요
내 비밥 네비게이션 바가 있죠 메뉴 바가 있고 다음에
백그라운드가 이렇게 들어가 있고 여기에 배너가 슬라이드 배너 갈 나오고
있습니다
다음에 회사 오피스 정보가 나오고요
굉장히 심플하게 되어 있습니다 자 다음에 여기 보시면
제 입어 검색사이트 자 어 다음에야 우도 있고요 그 다음에 아마존도
있습니다
자요 네이버가 가장 대표적인 우리가 많이 접하게 되는 레이어 인데요
여러분들이 어떠한 그웬 문제를 만든다 홈페이지를 만들 때 웬 면서 웹문서
가 필요하다 만들다 함 쓰면 머릿속으로 일단 구성 하시겠죠
그리고 뭐 스케치 패 보시고 여러가지 툴을 이용해서 작업을 할 텐데요
일단 웬 문서를 만들 때는
초평 방향으로 좀 나눠 주는 게 좋아요 예를 들어서
명석 더해 까지 즉 네이버 같은 여기서 에까지 해도 로 나눌 수 있겠구요
다음에 여기서부터 역까지는 모루 네비게이션 바로 나눌 수 있겠고요 다음에
여기서 부터 시작을 해서 쭉 내려와서 컨텐츠로 낳을 수 있겠구요
이 밑에 보시면 회사 정보가 나오겠죠 그건 푸터 로 나눌 수 있겠습니다
그러면 총 몇 개 1 2 3 개 큰 덩어리 4개 정도 나누고 그
다음에 컨텐츠 르르 라고 나눠 문 않은 부분이 보이죠
요 부분을 보면 또 크게 뭐로 나머지 자면 반이 이렇게 딱 가려져
이쪽 내용과 다음에 이쪽 내용에 좀 큰 덩어리로 나눌 수가 있습니다
그래서 이쪽 섹션 이라고 보통 얘기를 하구요
섹션 분과 어 사이드 부분을 우리가 분리해서 큰 레이어드 도 잡을 수가
있습니다
자 이렇게 큰 레이어 슬 큼직큼직 하게 먼저 잡아요 처음에 내 덩어리로
이렇게 큼지막하게 수평을 기준으로 해서 덩어리를 나눴고 요
그 안에서 또 다른 큰 덩어리로 레이어를 잡아 나하고
그 안에서 또 여기 보시면 위쪽에 상담 배너가 나오고요
다음에 여기에 뭐 뉴스에서
주요 뉴스를 들이 나오고 그 다음에 여기는
어 주요 우리나라 언론사 신문 언론 자기 자들이 나오고 있죠
이런 큰 덩어리로 또 나눠 보고 그 다음에 좌측 우측을 보시면 로그인
관련된 부분이 나오고요 그 다음에 여기에 배너 광고와 또 나오구요
이런 큰 덩어리로 세부적으로 쪼금씩 조금씩 쪽에 나가기 시작하면
홈페이지가 아무 무리없이 만들어질 수가 있겠습니다
자 여기 보시면 야 홈페이지 인데 약 홈페이지도 마찬가지에요 마련된 위에
뭐가 있어요 수평으로 분들 알아보는 거에요
맨위에 네비게이션 바 보이고요 다음에 2부 쪽 9분은
유기 까 줘 여기까지는 뭐가 보여요
로고와 서치 와 그 다음에 나의 정보 드 로그인 아는거 매일 마이야
구해서 한덩어리 두 덩어리 또 나눠질 수 있겠구요
자람에 밑에 와다 이제 섹션 부분 콘텐츠 부분을 건데 이 부분도 크게
이렇게 바를 알 수 있겠죠 그래서 이쪽은
각 카테고리 메뉴들 다음에 이쪽은 실제로 내용들
그저 그렇게 나눌 나누어질 수 가 있겠습니다
자 아마존 인데요 아마존도 여기서 10가지 이렇게 헤더 라고 볼수 있을것
같구요
다음에 여기를
음 쭉 다 섹션이 거고 밑에 포터가 존재할 수가 있겠습니다
자 그리고 이 안에서도 이렇게 나눠서 이쪽 부분과 또 이 쪽 부분을 큰
덩어리로 나눌 수 있겠구요
자 이렇게 나누는 것은 주관적으로 제가 안내 새 나름대로 주간조 나는
거지만
실제로 거의 대동소이 해요
아주 특별한 레이어 것니고 저야 거의 수직 수평 먼저 수평으로
커널의 나누고 그 다음에 그 안에서 수직과 수평을 이용해서 면을 쪼개기
시작합니다
그래서 여기도 이렇게 나눠서 위 떵 어 리 나눌 수 있고 밑에 덩어리라
할 수 있겠구요 그 다음에 요 밑에서도 요렇게 나눠서 이쪽은
어여 영화 영화 들 나오는 곳이고 이쪽은
뭐 tv 무 그런가봐요 어떤 배너 같은게 좀 나올 수가 있겠습니다
절에서 여러분들의 처음에 아까 말씀드렸듯이 처음부터 어예 를 들어서
위에서 아래까지 난 쭉 만들어 나가야지
저와 그런것 보다는 전체적인 큰 레이아웃을 먼저 큼직큼직 마케 분리해
놓고 그 큼직큼직 막하게 나누는 덩어리에서 자시 세부로 들어가면서 또
면을 하나씩 쪽에 나가면서
웹문서를 만들어 나가시면 아무 무리없이 만들어 나갈 수가 있겠습니다
자 그러면 이제 야우 닷컴이 홈페이지를 우리가 참고로 해서 이 홈페이지를
실제로 우리가 만들어 보는 시간을 갖도록 하겠습니다
그러느냐 홈페이지 한번 실제로 들어가 볼까요 자 웹사이트를 통해서
자야 우다 콩을 제가 들어갔습니다
그러면 여러분들이 몇 번은 보셨을 만한 론 글에 이어 오실 거에요 이게
그래서 이걸 만들고 있는데 아까 말씀드렸듯이 제제 추가한 적으로
주관적으로
면을 크게 크게 나눠서 작업을 하기 때문에 여기서 우클릭을 해서 소스보기
하면 실제로 html 소주가 어떻게 구성되었는지 쭉 나온다
굉장히 많은 내용들이 있죠 이거를 어 전체 다른 아니더라도 내가 원하는
부분을 조금씩 조금씩 보면서 분석의 나가는 것도 굉장히 그 학습 방법
중에 가장 좋은 학습 방법일 수가 있습니다
어 굉장히 많은 고민을 해서 이 작업을 한 사람들은 공연에서 가장
최적화된 레이어스 만들어 놓은거 기 때문에 그것을 우리가 습득하는 것도
굉장히 좋은 학습 방법입니다 시간을 내서
전체 자를 하면 너무 부담스럽고 우리말로 그냐
멘붕이 온다 로 줘 너무 어렵고 시간이 많이 걸립니다 그래서 내가 원하는
부분 사이트에서 내가 어떠한 특정한 보고 길어져서 요 부분을 원한다. 그런
요 부분만 찾아서 그 부분에 어떻게 레이아웃이 구성되어 인지 한번 살펴
보는 것도 큰 도움이 될 수 가 있겠습니다
어쨌거나 요렇게 되는데 요구를 주관적인 개념의 해서 한번 만들어 보도록
하겠습니다 자 보시면
볼게요 자 이렇게 큰 덩어리로 나누어 봤습니다
요게 어떻게 구성이 되어 있는지 한번 하나씩 음 분석을 해보도록
하겠습니다
자 제가 지금은
제가 지금은 lg 10ml 태그 안에다가
html 문서 안에 다가 스타일 태그를 좀 길지만 다 이렇게 쭉 음
문제를 포함 시켜 놨습니다
너무 길어서 가능성이 약간 떨어질 수가 있는데 이렇게 한 이유는
여러분들이 실제로 그 이 문서를 가지고 여러분들이 실제로 코딩을 해 볼
때 참고하기 쉽게 하기 위해서 이렇게 한거구요
실제로 게 너무 문서가 그렇기 때문에 따로 분리합니다 분류하는 것은
추후에 한번 다시 기회를 해서 해 보기로 하고요
어쨌든 용어를 가지고 한번 천천히 분석을 해보고 제가 분석을 한 다음에
여러분들이 실제로 한번 코딩을 직접 해보는 시간을 갖도록 음 가져보세요
자 먼저 발이 태그 부터 시작을 해서 이제 한번 살펴 봐야겠죠
자 이런 레이어 어떻게 난 듯 만들었는지 겁니다 자 컨 덩어리를 보면
먼저 해다가 있어요
연습장에 까지 해 답니다 헤더가 어디 부분이 하면요 부분임 대부분은
그래서 홈 l 어
에 엔써 그루 플리커 모르겠어서 쭉 메뉴들이 나오고 있죠
이부분이 헤더 아 여기까지 거야 그 다음 에서 치의 마이아 옥에서
요 부분까지 가다 해다 냅니다 자 큰 덩어리 않았구요 그 다음에 두 번째
컨텐츠 라고 해서
컨텐츠 라고 해서 전부 다 요 밑에 헤 럼 이테 전부다 다 컨텐츠로 쭉
뺐습니다 푸터 빼고 요기까지
그래서 큰 덩어리 컨텐츠 라는 디비전 태그를 이용해서 컨텐츠 라는 태그를
왼쪽이 내용을 덩어리를 분리해 씁니다
다음 에프터 가 있어요 그래서 가장 하단 에프터를 만졌습니다 근데 실제
사이트에서는
야옹 사이트 가보시면 포 통한 문제 하지 않아요
좀 특이해요 보시는 이쪽 에프터를 그냥 푸터 비슷하게 1 두고요
여기서 스크롤 내리면 계속해서 정보가 리 플래시 되면서 서버 에서 정보를
계속 불러옵니다
현준아 는 우리나라에 있는 사이트 건 약간 틀리죠
계속해서 나옵니다 그래서 모바일 환경의 약간 최적화 되었다고 볼 수
있겠습니다
어쨌거나 이렇게 됐지만 우리는 푸터 를 이렇게 하나 만들어놓고 포터의
되는 * 내 용 어 입력하지 않았습니다
자 그러면 헤더 큰 덩어리 헤더 다음에 컨텐츠 다음 에프터 큰 덩어리
3등을 않았구요
여기를 이제 한번 하나씩 분석을 해보도록 하겠습니다 자 헤더를 보니까
헤더는 크게 또 디비전 태그를 이용해서 헤더 내비 테러 대비 것 이에요
깽 위쪽에 네비게이션 여기죠 자 그래서 헤더와 네비로 큰 덩어리 난
않았구요
다음에 또 헤더 인포 밑에 야우 서치 마이아 해서 마이 헤더 임포 라고
해서 또 큰 덩어리를 안왔습니다
자르면 또 3배로 들어볼게요 헤더 내비 안에는 div 디비전 태그를
써왔고
어유 nuol i 리스트 리스트 태그
홈 매일 엔써 에서 쭉 나오고 있죠 그래서 요게 내려가고 있습니다
저런데 리스트는 수 직후 주로 되어있죠 기분이 근데 이거를 수평으로
바꿨죠
어 플루트 명령 등을 이용해서 우리가 위치를 변경해 쓰리라 예상이 되구요
다음에 이 쪽을 보면 어 파이아 벅스 업그레이드 투 던 류 파이어폭스
라고 설명합니다
고 또 디비전 태그로 이렇게 음 표시를 해놨습니다
자가면역 이 먼저 한번 살펴볼게요 css 에서 어떻게 수직 구조로 수평
구조로 바꾼 뒤에 헤더와 내 비서 부터 한번 살펴보도록 하겠습니다
자 먼저 스타일의 컸으니까 발이 태그 이거는 이제 초기 갓 어 바디에
전부 다 적용되는 바디 아래의 바디 아이 애나 있는 태그 들의 전부 다
적용이 되는 태그로
어폰 템을 레이건은 폰트 결정한 겁니다 그래서 기본적으로 폰트 이런
폰트와 이런 폰트를 쓰는데 이런 폰트도 없으면 어떻게 기본적으로 사용자가
브라우저에서 제공하는 폰트 가정 되고요
자 맞으면 용어 좋습니다 맞은 0 좋기 때문에 가장 상단에 붙어 6도
시작을 할 수 있겠고요
자매의 1 태그 모든 이 문서에 존재하는 a 태그에 는 모두 테스트
데코레이션에 놈 그 밑줄 그어진 거죠 그것을 빼버렸습니다
자람에 헤더가 나오네요 헤더는 99% 래요 그래서 여기서 또 시장에서의
까지 의 99% 차질을 하고요
베 풀어 주며 여기 딱 붙는 데 어 그 직후 풀을 좋습니다
다음에 맞은 명을 줬고요 보도일 픽스 의 소리 되서
전체적으로 이렇게 헤더는 요렇게 1 픽셀의 에 그 보도 값을 가져갈 수가
있겠습니다
자 헤드 안에 뭐가 있어요
헤더 내비 하고 헤더 대 뭐가 있냐면 임포 헤더 임포 가 있죠 그래서
먼저 헤더 내비 부터 잔해 비는 100% 다 차지한 되요
가루가 100% 다 차질을 하고요 다음에 어부 플러그인 좋고 백그라운드
칼라 이세계 아마 찐한 보라색 일 겁니다 그래서 이 색으로 주 6 바탕을
알았구요
자 이 안에 해 전에 b 안에 뭐가 있어요
얘도 내비 안에 html 태그를 보면
리스트를 해서 리스트 쭉 수직 구조로 홈 레일에서 메뉴들이 나오죠
이걸 수평 구조로 밖에 없겠죠 어떻게 바뀌었는지 한번 살펴봅니다
자 헤더 내 bali 에 폰트 사이즈는 0.9 1위 기분 크기인데 0.1
약간 줄인 거죠 그 다음에 칼라는 폰트의 컬러는 화이트로 했습니다
자네 마진 라이트 왜 오른쪽 마진은 20 픽셀을 줬어요
다음에 리스트 스타일 눈 좋구요 그래서 리스트 스타 2 g
여기에 쩜쩜쩜 이 원래 지켜 되는데 빼버렸습니다
자다 플루트 속성을 속성값을 레포트를 줬어요 왼쪽 5분 거죠 그래서
이거 에 의해서 술집 구조로 나타난 리스트 메뉴가 이렇게 수평 구조로
옆으로 나열 될 수 있겠습니다
제 그리고 몇 번 말씀 드렸는데 이렇게 플루트 레프트 줄 때는 이렇게
플로트 래 프 트 를 주고 나면 elie 아에 있는 태그 들의 이 속성이
계속 타 적용이 되기 때문에 이건 막아 된다고 했죠 그래서 막기 위해서
하는 방법은
음 여기서는 헤더 bali 를 감싸고 있는 이 위쪽에 업 어플로 해서
좋습니다
이렇게 하셔도 되구요 아니면 예 위에 감싸고 있는 태그가 에라이 를 감자
올테니까 유리 줘 유일의 다가
어떻게 오버플로 퀴즈를 줄여도 상관이 없겠습니다
엄밀히 말하면 이게 정석이죠 근데 이렇게 안하고 이 위에다가 조 2
음 별 문제는 없겠습니다
그래서 레프트 여기서 중요한 것은 이렇게 수평 수직 구조 를 수평으로
메뉴를 만들 수 있다는 거
이렇게 안 만드는 어떻게 되요 뭐 다른거 를 이용하면 디비전 태그를
이용해서 디비전 태그의
그 디스플레이 속성은 인라인 블로그로 해서 수평으로 떨어지지 않고 옆으로
쭉 나열 줄 수 있게 할 수 있겠죠
그런데 주로 사용하는 게 플라토 서 이런 소통을 많이 써요
간단하게 처리가 될 수 있기 때문에 그럽니다
자 그 다음에 헤더 네비에 파이어폭스 클래스 예가 뭐였냐면 이 녀석입니다
자 이 녀석은 플루트 라이트 레오 오른쪽에 분 는 데 요 오른쪽에 붓고
마진은 위쪽에서 시 픽셀 더 르 오른쪽 오른쪽에서 씨프 3 떨어지게
처리를 해놨습니다
자 다음에 a 태그 파이어폭스 안에 입는 이게 링크 걸려 있어 지금은 l
태그는 이렇게 하얀색으로 컬러의 속성을 하얀색으로 청했습니다 만약 얘기
없다
자 그럼 어떻게 이렇게 색깔 기본적인 파란색이 정 되죠
보기 싫으니까 이것을 하얀색으로 이렇게 바꿔 봤습니다
자 여기까지 하면 위쪽에 헤더 내비 부분이 끝난 거에요 간단하죠
자 메뉴를 갖다가 주요 포인트는 메뉴를 갖다가 리스트를 타입을 이용해서
수집 구조를 딴 만들어 놓고 그걸 내가 원한 대로 수평 구조로 플로트
속성을 이용해서 플러그 옆으로 수지 꾸준 수평 구조로 변경을 1개의
중요하고요
다음에 이렇게 오른쪽에 어떤 메뉴로 주고 싶을 때 예를 갖다가 플루트
라이트를 좋구요
어 그런 내용들이 중요하겠습니다
자람에 헤더 림프 는 어떤 문의하면 요법입니다 로고 하고 서치 하고 마
임프
요금 넓혀 볼까요 예 마워 4이닝 농후한 거 있죠 그 다음에 2
이런 부분 요 부분이 이제 인포 인데 이 부분도 보면 위드가 1000
픽셀 이에요 그리고 마 진영의 오토
즉 요섭 때 시장에서 여기까지는 브라우저와 커져도 어떻게 해요
브라우저 커드 항상 가운데 정렬이 될 수가 있겠죠
왜 그래요 마 진영 오토를 좋기 때문에 맞은 영어 또는 위 아래는 다
0이고 좌우가 오토 쭉 좌우를 균 중 분할해서 반반씩 나눠 가진다 고
했습니다
그래서 가운데 정렬이 되구요 가운데정렬 하는 방법은 거의 대부분 다 이
방법을 씁니다
아라 주시구요 자 자네 헤더 림프의 div 마진 탑 위쪽에서 17세 뛰
어때요
그 다음에 플러스 lf 틀을 줍니다 div 가 뭔가 있는지 한번 와
html 태그 보고 올게요
헤다 인포 를 보니까 헤더 임파 4
dr 여 디비전 태그가 하나가 있구요 얘가 로고 가려서 이고 다음에 애가
검색 차 소치
다음에 여기가 서비스 여기서 3개의 디비전 태그 큰 덩어리가 있습니다
쟤를 같아 db 저한테 그는 그 디스플레이 타입 2 기본적으로 블럭
타입이죠
블럭을 갖다가 수직으로 나열된 안되고 옆으로 나야 되니까 어떻겠어요
db 전에 다 속성 에다가 플루트 레프트 를 줘서 왼쪽으로 다 하나씩
않아 쉽게 처리를 해 줬습니다
그래서
여기 저의 여기서 플루트 레프트 좋습니다 그래서 왼쪽으로 수평 구조로
하나씩 하나씩 다 나의 10이 될 수가 있겠습니다
자네 헤더 림프의 서치 인풋 있어요
얘 뭐냐 면서 치 이해하고 임프 서치 의 인피 예입니다 에 이어서 이
녀석을 가루를 400
댓글 0개
등록된 댓글이 없습니다.