실전 HTML5 & CSS3 동영상 강좌 제 27강_반응형 웹 (수정) > CSS

무료강좌-디비라

CSS

※ 가장 하단이 첫강좌입니다

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 27강_반응형 웹 (수정)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
15450302551161.jpg

 안녕하십니까 풀수 입니다 정말 html css 술 7번째 시간 반응형

웹에 대해서 살펴보는 시간을 갖도록 하겠습니다 자 일단 들어가게 앞서
갔고 반응형웹 이랑 거에 대해서 제가 구두상으로 잠시 설명을 드리고
진행하도록 하겠습니다 자 반응하여 기라
우리가 예전에는 pc 환경에서 주로 웹문서를 보는 출력을 하는 환경이
pc 환경에서 이루어지고 했습니다
하지만 몇 년 전부터 새롭게 뭐 굉장히 많은 디바이스 환경에 나타나기
시작을 했죠
대표적인게 여러분들이 요즘 많이 이용하고 있는 스마트폰 또는 태블릿 pc
이런 환경들 소용 디바이스 에 그 환경이 굉장히 넓어 졌습니다
자 그리고 pc 환경에서는 모니터와 크다 작다 의 m5 별로 그다지 많은
영향을 미치지 않고 그 웹사이트에 의 가로 폭스를 우리가 그 하나의
사이즈를 정해서 적용해서 웬 문제를 제작을 했지만 스마트폰과 태블릿 pc
는 브라우저가 스마트폰과 태블릿 pc 화면에 꽉차게 항상 들어가죠
그 들어갈 때 스마트폰이 제조사에 각각의 모델마다 스마트폰의
그 화면사이즈 쌓은 사이즈가 굉장히 많이 다양하게 준비되어 있습니다
태블릿 pc 도 마찬가지죠 태블릿 pc 도 굉장히 많은 사이즈로 출시가
되고 있습니다
요렇게 그러면 내가 어떠한 문서를 만들 때 pc 전용 문서를 만들어
예전에는 과거에는 pc 형 분들을 1 만든 됐지만 이제는 똑같은 문서를
하나 만드는데 그 문서가
어디서 보여질 건지 어디서 출력이 될 건데 따라서 많은 고민을 하셔야
겠죠
만약에 pc 환경에서 본다 스마트폰 환경에서 본다 테블릿 pc 환경에서
본다
그걸 맞췄고 다 각각 어떤 설정해 줄 필요가 네어 있어진 겁니다 자
그래서 반응형웹 이란 건 뭐냐면 그런거 스마트폰 홍 경 처럼 가로 4
링의 작은 화면에서 볼 때는 내가 만든 웹문서 가 어떠한 레이아웃으로
맞춰 줘라
아니면 태블릿 pc 에서만 그 보일 때 똑같은 웹문서를 태블릿 pc 에
있는 브라우저를 통해서 웬 문제를 봐요
그럴 때는 스마트폰과 다르게 어떠한 설정에 의해서 맨 문제와 보여줘라
또는 pc 환경에서 봐요 그러면 p 심한 경우에는 어떤 문서 그 레이어
덫과 어떤 설정으로 화면이 보여 줘라 라고 해서 말 그대로 어떤 어떠한
반응에 따라서 웬 문서가 어떻게 출력되는 g 를 설정 하는 그 방법입니다
잘해서 반응형 웹은 물수 의 내용이 많고 놓아도 하루아침에 키워 지지가
않아요
기존의 한번 코딩하는 거 가지고 어떻게
사용자가 개발자가 3배 어떻게 보면 세뱃돈은 3배 이상의
그 많은 코드 양의 들어갈 수도 있겠죠 각 환경에 맞춰 다 코딩을 해 줘
되니까 되겠죠 그래서 단 중간에 한 번에
노하우가 생겨서 고수가 되지 않고요
많은 여러분들이 어 코딩을 해 보면서 본인의 노하우를 쌓아 실 필요가
있고 또 그 프로젝트 성격에 맞춰서 웬 무슨 상태에 맞춰서
여러가지 여러가지로 여러분이 만들어 볼 필요가 있을 겁니다
그래서 오늘은 가장 기본적인 거 이렇게 이렇게 한다 라는 거 기본적인
걸을 살펴보면서 우리가 학습을 진행 하도록 하겠습니다
자 언제 오늘은 미디어 규칙 규칙 중에 미디어 규칙을 이용하여 반응형
웹을 만들어 보는것 이 살펴보도록 하겠습니다 자 보시면 화면 세계 가
개최돼 있는데요 가장 왼쪽에 있는게 뭐냐면 pc 반격 똑같은 앤
문서입니다 별도로 만들어진 외 문제가 아니고요 똑같은 웹문서 인데
가장 왼쪽에 있는게 음 pc 환경에서 봤을 때 똑같은 그 url 주소를
치고 들어갔을 때 pc 환경에서 뉴런 화면으로 보이고요
일단 글자 자 거에요 그리고 좌우에
동등한 pc 환경에서 브라우저를 크게 할 수 있고 자그맣게 조그맣게 할
수 있죠 pc 환경에서는
브라우저 크기에 상관없이 항상 일정한 크기를 유지하면서 이 좌우 여백을
항상 동동 에 나눠 갖습니다 즉 항상 pc 브라우저의 중앙 정렬 가운데
정렬을 할 수가 있겠습니다
자 그리고 요 두 번째 까 이제 태블릿 pc 입니다 태블릿 pc 에서는
항상
태블릿 pc 화면에 꽉 차야 줘 어 꽉 차면서 어떻게 즉 좌우에 벽이
없습니다 여백이 없고 꽉 차면서 글자가 pc 환경보다는 커 졌죠
줘 자 잠 의 세 번째 스마트폰 안경입니다 스마트 평생 도 마찬가지로 저
태블릿 pc 와 마찬가지로 좌우 여백이 당연히 없어 되겠죠
이 칠 수가 없죠 그래서 없고 여기 어떤거 글자 글자가 태블릿 pc 가
더 커졌어요
여기서 이렇게 크게 항 뭐 이런거 에서 간단하게 몇가지 설정 하는
것으로서 한번 학습을 진행하도록 하겠습니다 자 예제를 먼저 살펴볼게요
자 먼저 음 브라우저를 하는 뛰어 놓고
네 됐습니다 자 보시면 먼저 html 이게 pc 환경 인지 그 태블릿
pc 인지 아니면 스마트폰 경 일단 무시하 구요
일단 요 그 html 만든 뼈대 뼈대는 어떻게 생겼는지 한번 보고
넘어가도록 합니다
자 먼저 크게 바디 택하면서 크게 어떤걸 랩 팩으로 감쌌습니다 디비전
태그를 이용해서 랩으로 아이디를 조져 크게 감 싸구요
다음에 그 안에서 덩어리가 1 2 3 4 개로 나눠 증거 확인이 됩니다
자 그리고 첫 번째 위에서부터 보면 자해 답니다 헤더
그래서 헤더에 별 내용 없어요 그냥 해라 라고 타이핑 되어있을 뿐입니다
자람에 네비게이션 이 있는데 네비게이션 보면 리스트로 만들어 놓고 수
직후 조를 수평 구조로 바꾸고 있습니다
메뉴 1 2 3 4 5 라고 되어있구요 그래서 결과물에 보면 메뉴
1 2 3 4 5 나타났고 요 자 세 번째 덩어리에 컨텐츠인 다 컨텐츠
인데 컨텐츠 내부를 일단 크게 감쌌고 요
그 안에 다시 컨텐츠로 이렇게 어디 브 태그를 이용해서 표현을 해주고
있습니다
그 안에는 별로 뭐 특별한 거 없죠 h2 태그 태그 태그를 이용해서 서울
산업 진흥원 설립목적에 나오구요 다음에 문단 태그 p 태그를 이용해서
내용 그리 쭉 타이핑이 되고 있습니다
자 다음에 마지막 부터 태그가 보이네요 부터 안티 부터의 서포터가
보입니다 그래서 서울산업 찍는것 예 저렇게 기본적인 내용만 해서 내일
덩어리 헤더 다음에 내비게이션 콘텐츠 다음 에프터 로 이루어진 웬
문서입니다
자 이거 받다가 음 css 로 어떻게 반지 알아봅니다
자 일단 미디어 위치에 이거는 이게 이제 반 응용 외과 가장 그 관련된
코드 인데요
자 이거는 일단 제껴두고 요 자 여기서부턴 정하면 살펴보면 자 전체 태그
star 이크 이용해서 자마 진영이 곱해 신형 입니다
자 그리고 li 이 문서에서 사용하는 리스트 아이템의 모든 리스트
스타일을 어떻게 한다 다 빼겠다고
눈이라는 그 속성값을 주어졌습니다
벽 에서 리스트 아이템 이라고 하면 여기가 구역이 겠죠 여기 메뉴에 올라
는 점 점 점이 있어 됐는데
그리 스타일 스타일을 다 빼 버린 거죠 자 본격적으로 덩어리 한덩어리
ccs 가 들어가 있습니다 자 먼저 가장 큰거 4 맵이 가량 외곽에 큰
덩어리 줘 한덩어리
저희 덩어리는 어떤 속성이 있냐면 마진 속성을 영어로 주고 오토 상하
영어로 주고 좌우를 o2 줬죠
어떤 거에요 브라우저의 가운데 정렬을 하고 있다는 얘기겠죠 감정을 하고
있죠
플로라 커져도 어떻해요
가운데 정렬이 되고 있겠죠
제가 이렇게 해서 가운데 정렬을 시켰구요
다음에 크 안에서 큰 덩어리 해도 입니다
잡어 더 값을 1 픽셀 조건 소리를 구별하기 위해서 좋은거 같구요 다음에
높이를 100 픽셀 좋습니다
이 높이가 100 픽셀이 고요 다음에 h1
자존 선택자 의 영서 h1 은 어디 정열을 가운데 라면서 가운데정렬
됐구요
아무런 특이사항이 없겠죠 전남의 넵 이게 전 들어갑니다 자 두번째
내비게이션 들었더니 것도 식별 가능하게 써 보도를 1팩 셀을 좋겠구요
다음에 유에 오버플로 이승조 세요 그 안에 플로트 레프트 를 주기 위해서
오버플로 기수는 중국 했고요
자 리스트 아이템 들어가 봅니다 자수 직구 조로 되어 있던 그 리스트
아이템을 어떻게 수평 구조로 바꾸게 서 이런 수 직구 저를 수평 구조로
바꾸기 위해서 플로트 래프트 줌과 확인 되시구요
이정도는 우리가 무지 많이 지금까지 무지 많이 했기 때문에 별 어려움
없이 하실 수 있을 겁니다 자 텍스트 온라인 센터 졌어요 가운데 하나 폭
에서 가운데 주기 위해서 자위 들을 20 으로 오세요
자 여기서 중요합니다 자 고정된 사이즈가 아니라 고정된 사이즈가 아니라
어떻게
바로 사이즈의 리스트 아이템의 하나의 가로 사이즈를 20 풀어주세요
자 여기서 부터 시작을 해서 여기까지 리스트가 존재를 하는데 리스트에
개수가 몇 개 요
총 5개 줘
5 개인 여성을 갔다가 한 게
베라 2 한계 리스트 아이템 하나 마다 어떻게 20% 차지 안되요
그러면 결과적으로 브라우저 커져요
퍼지는 어떻게 되요 전체적인 사이즈도 드러나면서 그 안에 존재하는 메뉴에
사이즈도 가로로 커지고 있죠
그저 20% 니까 프라우드 와 줄어들어요 그러면 그 안에서 20% 찾아
되니까 메뉴가 잡아 지는 거겠죠 줘 그래서 20% 로 설정했습니다
자 높이는 그냥 61세 리 되요 커리 던 말던
프로젝 컬러 말 덩크 6시 픽셀 고 정도로 쓰고 있구요
잘하네 행간 60c 레어 아 세로 쭉 중앙 정렬을 하기 위해서 60승 거
이해 되실 겁니다 자 담에 보도 까기 픽셀 식별 가능 하기 위해서 일단
보드카를 하셨구요
빡신 알파 악세 사이징 을 보드 박스 였어요 이걸 줘야지 똑같이 굉장하게
20% 씩 가져갔을 때 깨지지 않고 이렇게 일 년을 나을 수가 있겠죠
예전에 다 같은 내용이니까 별다른 설명없이 넘어가도록 하겠습니다
자네 세번째 컨텐츠 이래 린 자작 포도 사이즈 1 픽셀 줬어요
마찬가지로 식별 가능하게 부도 중국 했고요 잠의 레벨 콘텐츠 안에 있는거
패딩 식 안쪽 안쪽에 상하좌우 다시 픽셀 들어가 있는 거 확인 되시고요
그 안에 h2 는 보도 바트 메일 픽셀의 투표 때요
여기선 가느다란 선 보 2시구요 마진 바텀 은 cpx 여기서 10px
에어백 으로서 공간 여백 생긴거 확인됩니다
* 특이사항 됐구요 자포 텀 다 포터 아주 특이사항 없겠죠
높이 베개 행간 백에 간 우정을 됐구요 세로축 가운데정렬 됐고 텍스트
온라인 센터 줌으로 해서 가로축 감정을 됐구요
자 폰트 사이즈 1.2 5일자 1.5 2m 일정 500 키움 거구요
폰트 웨이트 볼드 에마 진영의 오토 빠진 영어 토코 안되겠지 건 가운데
차가운 되겠죠
자 보더 1 px 에 특히 줬구요
보도일 픽셀이 예 됐습니다
자 이렇게 됐는데 이제 중요한 거 방영을 해서 아까 우리가 그 장 표에서
살펴봤듯이
pc 환경에서는 피셔 경우에는 좌우 여백이 이만큼 이고 폰트 싸게
이정도입니다
자 거다 이게 태블릿 pc 로 가면 폰트가 달 저 좌우 여백이 당연히
없겠죠 태블릿 pc 는 없고 이렇게
그 폰트 사이즈가 커 졌구요 스마트폰 배경화면 폰트 떠서 더 커졌습니다
자 실제로
4 보면 자 이게 pc 환경 이구요
어 지난번과 마찬가지로 태블릿과 pc 환경을 지금 동영상 녹화를 하고
있는 여건상 여기서 여러분들의 직접 보여줄 수가 없기 때문에
어 지금 이 pc 환경 브라우저로 생각 하시구요 이걸 제가 줄여 볼게요
pc 환경에서 어느정도 쌀이 같 줄어들면 태블릿 pc 라고 생각을 하고
우리가 예제를 진행하도록 하겠습니다
자칭한 변화가 없어요 메뉴는 줄어드는게 당연하구요 좌우 여백 되고 들이
있고 폰트 사이즈도 그대로입니다
자 이렇게 계속 그대로 다 가 어느정도 브론 싸이가 딱 줄어들면 어떻게
되세요
펌 쓰기 갑자 커지죠 커 지구 브라우저 좌우 여백 없어지죠
요게 태블릿 pc 혁명 이구요 저장에 또 어떤 반응이 있어요
사이즈가 작아지는 반응이 있어요 그러면 어떻게 되요 이게 스마트폰 환경
글자 경계 커 였죠 이게 스마트폰 환경에
그 css 스타일이 적용된 예 입니다 그래서 좀더 커피 캡 올까요 그러면
마찬가지로 태블릿 pc
좀 더 커지면 여백도 있으면서 pc 환경 일반 우즈가 pc 환경에서 보는
브라우저의 레이아웃을 가져갈 수가 있겠습니다
자 이걸 어떻게 많은 뭐냐면 기본 뼈대에 골자는 문제를 여러 개 만든 게
아니구요
이렇게 하나 만들어놓고
자 보면 미디어 규칙을 씁니다 자 미디어 그 지원 쓰는데 다 어디
미디어 종류 놓은 다 스크린 이래요 스크린 해서 우리가 사용하고 그리고
& 연산자가 있습니다 nd 를 주고
자 먼저 넥스 위드 이게 어디냐 하면 스마트폰 됩니다
가장 작은 사이즈의 부터 시작해서 가로 사이즈가 넥스 위드 값이 767
픽셀 까지는
이러한 속성을 쓰겠다는 거에요
알겠죠 그래서 이게 어떤 경우라면 이런 경우입니다
자 이게 결국 스마트폰 홍 경 자출 167 팩 3 까지는
가로 사이즈를 100 풀어주게 때요 카로스 200% 들어 왔구요
컨텐츠 일에 에어 컨텐츠 콘텐츠 레이 왜냐면 콘텐츠 랩의 컨텐츠 이 안엔
내용들이 줘
이 내용의 p 태그 문자 태그는 결국 이 본문이 있죠 본문 이북은 본문의
속성을
폰트 사이즈는 3배 키웠고 요 다음에 폰트 웨이트는 볼 2로 주겠다고
설정을 했습니다
다음에 미디어 스크린 최소 브라우저의 그 가로 사이즈가 768 이래요
그러면
768 보다 크고
768 이상 그리고 넥스 최대로 큰 개 959 팩 3 까지 쭈 768
픽셀 에서
가로 사이즈가 959 픽셀 까지는 이러한 속성을 준대요
자 그래 베
가로 사이즈는 100% 다 쓰구요 콘텐츠 이 랩의 컨텐츠의 p 태그
위에서는 폰트 사기가 어 32m 이었죠
근데 얘는 어떻게 1.52 m 으로 1.5 배 만 키운 아니겟죠 그리고
볼트 볼트
그러니까 자자 피우면 어떻게 되요 키우다가 768 과 950 코 사이에
들어오면 폰트 사이즈가 대응 조정되고
좌우 여백 은 그대로 업계 되겠구요 잔을 미디어의 스크린 이고 그리고
어떻게
가장 작은 사이즈가 961 요 즉 960 이상인 사이즈 줘
브라우저가 커져요 그닥 960 이상이 되요 그러면 그 전체적으로 감싸고
있는 4배 위드가 80% 그래요 80% 이기 때문에 여기 10% 여기
10% 나누어져서 좌우 공백이 생 여백이 생기는 거고요
컨텐츠 랩의 컨텐츠의 피는 콘텐츠 사이즈 1 2 앤 그대로 원래 갖고있던
아마 16 픽셀 정도 겁니다
16 픽셀 크게 원래 버튼 크게 갖고 볼드 웨이트 만 볼 교체를 적용했다
라고 이렇게 음 표시가 되어 있습니다
자 이렇게 해서 가장 기본적인 것도 마 이렇게 설명하는 데
아까 제가 말씀드렸듯이 반응형 웹을 할 때는 여러 가지 환경 조건을
맞춰야 되고 여러분들이 하루아침에 되는게 아니라 많은 수많은 그 코딩을
해보고 환경 해서 많은 경험을 해보면 노하우가 생겨요
지금 그냥 속성만 변경 반대 레이어 자체가 바뀌어 될 경우도 있겠죠
이제 과로로 뭔가 리스트가 보다가 새로운 리스트가 보여주는 경우도 있고요
그런거는 상황에 따라서 여러분이 응용해서 노하우를 많이 만들어 나가시면
되겠습니다
자 그러면 한번 이거를 코딩을 같이 한번 해보도록 할까요
자 새로운 문서를 꺼내서 제가
저와 같이 코딩을 한번 해보도록 하겠습니다
자세 문서를 거 했구요 자 먼저 게다가 html 태그 이렇게 해서 딜
구태 그를 넣어주고요
쓰기를 해야 겠죠
자 먼저 여기다가 idea
에레브 라고 할까요 전체를 1 감싸 줄게 했습니다
자 그 다음에 디비전 태그 1 토너 놓고 여기는 이제 헤드가 될 녀석
이구요
자 두번째 덩어리의 어떠한 모 있었죠
네비가 있었죠
자 세 번째 덩어리는
어 콘텐츠
컨텐츠 랩 이라고 하겠습니다
그 다음에 div 태그를 아 놓고
컨텐츠 라고 해 줄게요 자 마지막으로 덩어리 붙어 덩어리가 있었죠
예 이렇게 되겟습니다
자 헤더에 는 뭐 간단하게 h1 태그 정도 써 왔고 hater 헤더 라고
차이 빙 해 주겠습니다
요렇게요 자 내비게이션에 는 음 ul 태그 넣어서 리스트 타입을 이용해서
메뉴를 만들도록 하겠습니다
됐구요 자 컨텐츠 랩의 는 h 툴 태그를 쳐서 어떻게 어떻게 멋을 쓰겠죠
나중에 카 페 오고 케이건은
hrt 가 아니라 운전대 급히 텍스쳐 있죠
요 내용도 카펫에서 오겠습니다 자 포터의 는 목표대로 많겠죠
자 이렇게 부터라고 타이핑 해 주겠습니다
자 그 다음에 여기자가 이제 스타일시트 가 들어가 되겠죠
자 랩 팀을 먼저 스타일 시트를 적용을 해 보겟습니다
자 사이즈는 그때그때 다르기 때문에 일단 여기서는 마진
영상 0 가운데정렬 시켜 오토를 주 들어 왔구요
그 다음에 음
헤더 있어야 될 거 같고
단 어떤건 컨텐츠 랩 태그가 있어야 될것 같구요
그 다음에 포터가 있으면 되겠죠
자 간단한 것부터 여기서 일단 마진
2 필요 그쵸
자 이걸 언제 전체 태그 기초 값을 좀 주고 들어 갈게요
자마 지나고 패딩을 0으로 주고 들어가겠습니다
베팅 0 됐구요 자넬 아이도 나올 거니까 너 나 아까 나왔었죠 리스트
태그의 리스트 스타일 때 벌이도록 하겠습니다
자 그 다음에 헤더를 좀 가서야 헤드 에다가 도덕 값을 좀 조성
눈에 잘 보이게 일단 예제 니까 눈에 좀 잘 보이게 하도록 하겠습니다
그 다음에 높이 높이는 1 100 정도로 주도록 하겠습니다
자 그 다음에 헤더에 아까
h1 태그가 있었죠
h1 태그의
정열을 센터로 해 주도록 하겠습니다
전에 내비 네비도 속성을 되도록 하는데
네비가 등 외에는 뭐 좀 잘 보이게 이것도 보도는 마찬가지로 1px 에
요렇게 해주고요 그 다음에
내 비에 유에
자 li 수지 코드를 수평 구조로 바뀌어 되니까 플루트를 쓸 거 아니깐
오버플로 를 어떻게 해 등으로 일단 줘야 되겠죠

댓글 0개

등록된 댓글이 없습니다.

 
Total 30건 1 페이지
썸네일
제목

Menu