Dreamweaver CC 2018 – Introduction to responsive web design

안녕하세요, 제 이름은 댄 스콧입니다 이 비디오에서 우리는 웹 영웅에서 웹 영웅으로 당신을 돌릴 것입니다

Dreamweaver를 사용하여 가장 반응이 빠른 웹 페이지를 구축하십시오 이제이 자습서를 완벽하게 따라갈 수 있습니다 운동 파일을 다운로드하면됩니다

설명 아래에 링크가 있으며 무료로 다운로드 할 수 있습니다 가서 비디오를 일시 중지하고 파일을받은 다음 다시 찾아 오십시오 따라서이 튜토리얼의 목표는 현대 웹 디자인에 당신을 노출시키는 것입니다 반응 형, HTML5 및 CSS3과 같은 용어를 살펴 보겠습니다 그들은 공상에 들리지만 일단 당신이 그들을 이해하면 실제로는 꽤 쉽습니다

우리는 또한 어떻게 볼 것인가 Dreamweaver를 사용하면 매우 쉽게 작업 할 수 있습니다 사실 내가이 비디오에서 얻길 정말로 원한다면

잘하면 결국 끝에 지점에 도착하는 것입니다 네가 좋아하는 곳에서, "사실, 내가 생각했던 것만 큼 힘들지는 않다" "나는 더 많이 배우고, 배우는 것에 대해 꽤 흥분된다 내 사이트 만들기 " 이제 시작해서 일을 시작하십시오 먼저, 프로세스에 대해 이야기 해 봅시다

처음에는 웹 사이트를 먼저 디자인해야합니다 포토샵이나 일러스트 레이터 같은 무언가 당신은 여기에서 볼 수 있습니다, 나는 내 웹 사이트가 데스크톱에서와 같이 보이도록 디자인했습니다 태블릿에서의 모습과 모바일에서의 모습 당신은 볼 수 있습니다, 그들은 매우 비슷합니다 각 디자인 종류는 장치 크기를 가장 잘 사용합니다

그것은 단지 몇 가지 글꼴 크기 변경 사항입니다 다른 장치에서 보이게하기 위해 상자를 다시 정렬합니다 그리고 이것은 우리가 반응 형이라고 부르는 것입니다

그래서 웹 사이트가 모양을 바꾸고 형태를 조금 바꿀 것입니다 모바일, 태블릿 또는 데스크톱 여부에 따라 다릅니다 그래서 이것이 우리의 첫 번째 큰 의미입니다

반응 형 웹 디자인은 단지 웹 사이트가 기기를 가장 잘 사용하도록 변경됩니다 그래서 상관 없어요, 포토샵이나 일러스트 레이터 하지만 Photoshop에서 제 설계를 했었습니다

이제 이것을 번역해야합니다 이것은 우리 웹 사이트의 완성 된 버전입니다 데스크톱 용 내 포토샵 모의와 일치하는 곳

하지만 태블릿으로 내려 가면 거기에 변화가 생기고, 나는 내 브라우저를 드래그 아웃하고있다 글꼴 크기가 변경된 것을 볼 수 있습니다 열은 3에서 2로 바뀝니다 그래서 그것은 우리의 반응이라는 용어이며, 우리는 이것을 만들 것입니다 그리고 그것은 단지 1에 걸쳐서 뻗고있는 Mobile에 도착합니다 우리는 또한 당신이 그것을 알아 차릴 수있는 것들을 할 것입니다 태블릿에는 6 개가 있지만 모바일에는 4 개뿐입니다 그래서 우리는 그들 중 일부를 비활성화 할 것입니다 우리는 또한 여기에있는 메뉴를 변경하려고합니다 당신은 볼 수 있습니다, 내 Photoshop 모형, 그들은 모두 똑바로 바탕 화면에 그러나 그들은 작은 장치에서 다른 버전으로 붕괴됩니다 그래서 우리는 Responsive가 의미하는 것을 해결했습니다

우리는 우리가 무엇을 만들지를 알고 있습니다 이제 가자 그리고 건물을 짓기 시작하자 먼저 Dreamweaver를 엽니 다 처음에는 종종 몇 가지 질문을합니다 배경색을 원하는 색상이 무엇인지 당신이 디자이너 이건 개발자이든간에 그래서 당신이하고 싶은 것은이 경우에 대해 '개발자'를 선택하는 것입니다

올바른 옵션을 선택하지 않았다면 계속 진행하십시오 그런 다음 다시 변경할 수 있습니다 여기 오른쪽 상단에 '개발자'를 선택하십시오 그리고 그것은 내 것과 같이 보일 것입니다 다음으로해야 할 일은 크기를 정의하는 것입니다

그래서 '사이트', '새 사이트'로 이동하십시오 우리는 모든 새로운 웹 사이트에 대해이 작업을 수행해야합니다 그래서 만약 당신이 방금 하나를 가지고 있다면, 당신은 한번 이것을해야 할 것입니다 하지만 나 같은 사람이고 많은 웹 사이트를 구축한다면 모든 새로운 사이트를 정의해야합니다 그래서 이름을 지어주세요, 저는 제 전화를 'Roar Cycles'라고 부릅니다

우리가 일하는 회사 야 하드 드라이브가 어디에 있는지 결정해야합니다 우리는이 웹 사이트를 유지할 것입니다 왜냐하면 우리의 모든 이미지와 모든 HTML 우리가이 웹 사이트를 위해 만드는 모든 것들이이 같은 폴더에 보관되어야합니다 그래서 우리가 할 일은 '로컬 사이트'폴더로 이동하는 것입니다

이 '찾아보기'버튼을 클릭하십시오 그리고 당신은 당신 자신의 것을 만들 수 있습니다 운동 파일이 이미 있으므로 다운로드 할 수 있습니다 설명의 링크에서 다운로드 한 파일 'Responsive Exercise Files'로 가서이 폴더를 선택하십시오 조금이라도 더 깊이 들어갈 필요가 없습니다 계속 나아 가기 전에해야 할 다른 일은 '고급 설정'으로 이동합니다 여기 '기본 이미지'폴더가있는 곳으로 이동하십시오 내가 만든 이미지 폴더를 선택하십시오

직접 사이트를 만드는 경우 자신 만의 이미지 폴더가있는 폴더를 만들 수 있습니다 우리는이 과정에서 반응이 빠른 것들로 이동할 시간을 절약 할뿐입니다

'선택'을 클릭하고 '저장'을 누르십시오 그래서 일을 빠르게하기 위해 한 것은 웹 사이트를 시작한 것입니다 우리가 반응 할 수있는 부분으로 뛰어들 수 있도록 우리를 데려 가기 만하면됩니다 이제 'index1html'로가 보겠습니다

그리고 이것은 우리 페이지가 코드에서 보이는 것과 같습니다 우리는 브라우저에서 어떻게 보이는지보고 싶습니다 여기 아래쪽 아래로, 아래쪽으로 내려갑니다 '실시간 브라우저 미리보기'라는 것이 있습니다 이런 종류의 오른쪽 아이콘입니다 클릭 한 다음 'Google 크롬'을 클릭하십시오 Chrome을 설치하지 않았다면 지금 설치하고 설치하는 것이 가장 좋습니다 가장 일반적인 웹 브라우저입니다

그리고 그것은 당신이 당신의 테스트의 대부분을해야만하는 것입니다 사파리 또는 다른 기능을 사용할 수 있지만 크롬은 우리의 사람입니다 그래서 지금까지 내가 한 일이야

내 브라우저에서 로컬로 미리보기 만하면됩니다 로고,이 내비게이션 및이 큰 핑크색 상자를 추가했습니다 구조를 올바르게 얻으려면 그래서 우리는 그것이 반응하는 것을 보면서 시작할 수 있습니다 그 순간에 내가이 가장자리를 잡으면 그것은 전혀 반응이 없으며 그냥 거기 앉아 있습니다 Dreamweaver로 돌아가서 우리의 첫 번째 비트를 추가하겠습니다 우리는 헤딩에 넣을거야 우리는 어디에서 그것을 넣을 것인가? 이제 여기에 헤더가 있습니다

여기에는 내 로고와 내 탐색이 포함됩니다 그 세 개의 작은 버튼을 보시죠? 그런 다음 다른 덩어리 인 Main이 있습니다 메인은 웹 사이트의 중간 부분입니다 헤더는 일반적으로 Google 로고 및 탐색만으로 이루어집니다 그래서 메인에는 이미 내 영웅 박스가 있습니다 그리고 그것은 내가 이미 창조 한 큰 분홍색 상자입니다 이 사람이 여기 있습니다 그래서 거기에는 내 표제가 필요한 곳이 있습니다

여기서 우리는이 표제를 디자인 할 것입니다 'roarX, 지금 선주문하세요' 그래서 Heading에 넣기 위해서는 H1이라는 것을 넣을 필요가 있습니다

H1은 Heading1이고 Heading1은 페이지에서 가장 중요한 제목입니다 그래서 문법은 다음과 같이 말합니다 이 메인은 여기에 '메인'이라고 쓰여있어 이 꺽쇠 괄호 '<>'안에 있습니다 그것을 닫기위한 '/ main'이 있습니다

그래서 우리는 우리 H1을 위해 똑같은 일을 할 필요가 있습니다 그래서 꺽쇠 괄호 '<>'를 M 키로 누르십시오 'H1'을 입력 한 다음 닫습니다 여기 Main과 마찬가지로 시작 부분입니다 두 번째 부분은 같은 단어입니다

하지만 앞에는 슬래시 (/)가 있습니다 그래서 우리는 '</'를 입력 할 것입니다 도움이되는 오래된 Dreamweaver가 우리를 위해 그것을 채워 넣었습니다 이것이 Dreamweaver의 특혜 중 하나입니다 텍스트가 내부로 들어가서이 두 텍스트의 중간에 위치합니다

두 개의 태그 사이에 커서가 깜박이도록하십시오 그리고 우리는 'roarX'를 입력 할 것입니다 그것은 우리가 시작하고있는 우리 새로운 자전거의 이름입니다

그리고 우리는 '선주문'을하시기 바랍니다 또는 '지금 선주문' '저장'을 눌러 '파일', '저장'을 누르십시오 가서 실시간 브라우저 미리보기를 확인해주십시오 이제 Chrome으로 다시 돌아와서 다시 확인할 수 있습니다

그것은 자동으로 업데이트 또는 원할 경우 여기를 클릭하십시오 Chrome을 다시 클릭하십시오

어느 쪽이든, 우리의 브라우저에 가자 당신은 여기에서 볼 수 있습니다, 내 H1, 'roarX pre-order now'가 있습니다 기본적으로 검은 색이며 굵게 표시되며 특정 크기입니다 그리고 저의 친구들은 HTML의 첫 번째 비트입니다 웹 디자인을 처음 접한다면 잘하게됩니다

이것은 코딩의 첫 번째 단계입니다 다음으로해야 할 일은 기본 색상, 크기 및 글꼴을 변경하는 것입니다 포토샵에서 우리의 목업과 일치하는 것으로 이제 CSS라는 것을 배우고 배우자를 배우자 그래서 우리는 HTML이 무엇인지 배웠습니다 우리는 H1을 추가했고 텍스트를 HTML에 추가했습니다 이것은 HTML입니다 이제 스타일을 지정하기 위해 CSS라는 것을 사용합니다 여기 CSS 시트를 만들었습니다

'관련 문서'바에서 클릭하십시오 그리고 저는 이미 기본적인 것들을했습니다 내가 말했듯이, 우리가 만든 영웅의 상자

나는 그에게 높이를 주었고 나는 그 배경색에 분홍색을 주었다 이제부터 시작하기에 필요한 것들이 있습니다 지금 우리 자신의 CSS를 만들어 보겠습니다 따라서이 중괄호 밑에 'return'을 누르십시오 CSS 나 HTML에서는 반환 값이 중요하지 않습니다

당신은 그 반환을 필요로하지 않는다, 나는 다만 그 (것)들을 밖으로 조금 밖으로 나누고 싶다 그냥 당신이 쉽게 볼 수 있도록 따라서 CSS에 관해서는 따라야 할 기본 구문이 있습니다 기본적으로 여기에있는 내용을 복사 할 수 있습니다 그래서 이것이 H1이라는 이름입니다

공간이 있고, 당신은 볼 수 있습니다 시작과 끝 부분에 중괄호가 있습니다 그래서 우리가 할 일은 첫 번째 중괄호를 입력하십시오

Dreamweaver는 정말 영리합니다 너는 결코 닫히지 않고 단지 개통을 결코 가지지 않는다 그래서 그것은 당신을 위해 거기에 그것을 채 웁니다 그래서 그것은 우리를 위해 결말에 넣어졌습니다 'return'을 넣자

물건을 쓰는 것이 더 좋은 공간이기 때문에 돌아 오는 이처럼 높이와 색 구문의 첫 번째 비트, 중괄호

시작과 끝을 잊지 말고 삭제하지 마십시오 우리가 할 다음 일은 속성이라고 불리는이 CSS를 제공합니다

속성은 단지 색상과 같은 것을 제공 할 것임을 의미합니다 또는 글꼴 크기 일 수 있습니다이 속성은 모두 속성이라고합니다 당신은 거기에서 볼 수 있습니다, 나는 '공동'이라고 타이핑했고, 색깔로 미리 채웠습니다 그리고 나는 'return'을 치고, 그것이 한 것은 그것을 채우고 콜론 ':'을 추가했습니다 그래서 결장이 들어갈 필요가 있습니다

다음은 색상을 선택하는 것입니다 이제 Dreamweaver의 멋진 점은 색상 선택기가 있다는 점입니다 또는 도서관에서 선택하십시오 정말 멋집니다 그럼 '색상 선택기'를 클릭합시다

그리고 우리가 할 일은이 원을 여기 끌어다 놓는 것입니다 우리는 그것을 끌고, 우리는 색조로 놀 수 있습니다 하지만 내가 원하는 것은 왼쪽 상단 구석에 있어야한다는 것입니다

그리고 그것은 백인이 될 것입니다 그래서 그것을 위로 끌면, 우리는 흰색을 사용할 것입니다 끔찍하게 잘못되면 '#FFFFFF'라고 입력하면됩니다 그것은 흰색을 나타내는 코드입니다 이제 마지막으로, 많은 사람들이 잊어 버리는 것

그들은 CSS에 새로운 브랜드 일 때 당신은 세미 콜론을 칠 필요가 있습니까 '; 결국 이것이 CSS에 필요한 모든 구문입니다 중괄호가 있고 처음에는 하나가 있어야합니다 끝에 하나가 있어야합니다 속성에 입력하면 우리의 경우 글꼴 색이됩니다

그리고 나중에 콜론 ':'을 넣습니다 우리의 경우, Dreamweaver가이를 수행했습니다 세미 콜론 ';'을 잊지 마라 결국 가자

저장하되, '파일', '모두 저장'을 사용합시다 CSS와 HTML을 동시에 저장하므로 편리합니다 실제로는 별도의 파일이므로 HTML 인 '소스 코드'로 검색합니다 이 하나는 내 CSS이고, 실제로는 내 웹 사이트에서 개별 파일입니다 그래서, 당신이 배우는 동안, '파일', '모두 저장'을 선택하는 것이 낫습니다

모든 것이 저장되었는지 확인한 다음 브라우저로 이동하십시오 준비 되었나요? 우리는 H1이라는 일부 HTML을 추가하고 텍스트를 추가했습니다 그런 다음 CSS를 사용하여 H1을 스타일링했습니다 웹 디자이너가 되려고합니다 안정되고

가기 굉장해, 응? HTML을 추가 했으므로 CSS를 사용하여 해당 HTML의 스타일을 지정할 수 있습니다 그것이 모든 웹 디자인의 기본입니다

우리는 우리의 실물 모형과 일치하는지 확인하기 위해 몇 가지 다른 작업을 수행 할 것입니다 그런 다음 특정 Responsive Web Design을 살펴 보겠습니다 그러니 가자 그래서 우리의 실물 크기에 맞게, 우리는 몇 가지 일을 할 것입니다 여기 포토샵에서 타입 툴을 잡으러 갈 것입니다, 나는 클릭 할 것입니다 나는 글꼴 62 포인트를 원한다는 것을 알고, 맨 아래로 밀어 내고 싶다

여기 왼쪽에서 멀어져 이제 CSS에서 해보 죠 여기 Dreamweaver에서 'return'을 입력하고 글꼴을 입력 해 봅시다

보시다시피, 그것은 미리 채워진 옵션을 제공합니다 나는 글꼴 크기를 원한다 당신은 볼 수 있습니다, 그것은 콜론 ':'을 우리를 위해 거기에 넣었습니다 자, 우리 사건에서 우리는 62 실제로 나는 마음이 바뀌었고 55 픽셀을 사용하려고합니다 그저 작은 것이기를 바랍니다 그리고 나는 세미콜론을 추가하는 것을 잊지 않았다 '; 결국 새로운 일이 많이 생길 때

'돌아와', 우리는 몇 가지 다른 일을 할 것입니다 '패딩'을 입력 할 것입니다 그래서 '패드'를 타이핑했는데 Dreamweaver가 도움이 될 것 같습니다 "당신은 이것들을 의미합니까?"라고 말하면서, "네,"상단을 클릭하십시오 그리고 맨 위에는 120 픽셀을 할 것입니다

세미콜론 ';'을 기억하십시오 결국 그리고 마지막 것은 Padding이 될 것이고, 나는 'Left'를 할 것입니다

그리고 왼쪽에서 60 픽셀 정도 떨어져 있습니다 '저장'을 눌러 보겠습니다 그리고 '모두 저장' 브라우저에 들어가서 확인해 봅시다 굉장해, 응! 그래서 그것은 기본적입니다

우리는 H1 인 우리의 HTML을 버렸습니다 CSS에서 많은 시간을 보냈습니다 그것을 스타일링하고, 우리가 원하는 것을보고 그것을 얻는 것

그러나 지금은 반응 형 디자인이하는 것을보아야 할 때입니다 이제 응답 성은 설명하는 데 사용되는 포괄적 인 용어입니다 코드에서 다른 화면 크기에 맞게 조정할 수 있습니다 코드에서하는 일 중 하나는 아마도 주요한 것은 미디어 쿼리 (Media Query)라고하는 것입니다 이제 Media Query가 트리거라고 생각합니다 화면 크기가 활성화 될 때만 설정됩니다 그럼 내가 전에 만들었던 것을 살펴 봅시다 이것이 우리가 창작하려고하는 것인데, 미디어 쿼리 (Media Query)라고 불리는 것입니다

그리고 화면 크기가 768 픽셀 이하일 때이 H1을 트리거하면됩니다 그러나 그것이 그보다 더 크다면 그것에 대해 걱정하지 말고 무시하십시오 그것이 바로 그것이 방아쇠입니다 화면이 특정 너비 일 때만 활성화됩니다 여기에 모바일 버전이 있습니다

400 픽셀 이하인 경우에만이 H1을 트리거하십시오 이제 우리 버전에서 만들어 보겠습니다 어디로 간다? 우리는 그것을 H1 밑에 놓을 것입니다 몇 가지 '반품'을하십시오 그리고 이것은 당신이 쓰려는 구문 중 가장 어려운 비트입니다

저는 약속합니다 그렇게 힘들지는 않지만, 그것을 그대로 입력하고, 그대로 따라 와야합니다 '@'기호가 있으며 '미디어'를 입력 할 것입니다 그런 다음, 우리는 괄호 '()'를 타이프 ​​할 것입니다 이 대괄호 안에 'max-width'라고 입력 할 것입니다

우리는 다음에 콜론 ':'을 넣어야하는데, 콜론이 아닌 세미 콜론이되도록하십시오 이제 태블릿이 얼마나 커질 지 결정해야합니다 이제 여기에서 크기를 선택할 수 있습니다 정말로 일반적인 태블릿 크기 또는 iPad 크기는 768 픽셀입니다 우리는이 미디어 질의가 여기에 태블릿을위한 것이라고 말하고 있습니다

그리고 그것은 그것이 크기를 얻는 것이다 이제 시간이 지남에 따라이 기본값이 변경됩니다 다른 사이트를 찾을 수 있습니다

Tablet에서 약간 다른 픽셀 너비 사용 하지만 정말 일반적인 크기이므로 잠시 사용하십시오 그러나 그것은 절대 규칙이 아니라는 것을 알고 있습니다 이 마지막 괄호 뒤에 우리가해야 할 마지막 일은 중괄호에 넣는다

그래서 우리는 중괄호를 추가합니다 반환에 넣어, 그것은 미디어 쿼리입니다 이제는 조금 어려워졌습니다

구문을 많이 들었습니다 하지만 앞으로 할 수있는 일은 복사하여 붙여 넣기 만하면됩니다 내가하는 것처럼, 그리고 다른 모든 일을해라

자,이 미디어 쿼리는 어떻게 될 것입니까? 원하는 모든 작업을 수행 할 수 있지만 Tablet에서만 실행됩니다 내가 뭘하고 싶은지 글꼴 크기를 변경하는 것입니다 당신이 여기 볼 수 있다면, 내 버전 그것은 왼쪽 정렬에서 꽤 큰 글꼴 크기가 이 작은 크기로, 그리고 중심에 그래서 그게 제가하고 싶은 일입니다 폭이 Tablet에 도달하면 이 H1을 바꿔주세요 그냥 크기와 위치를 변경하십시오 당신이 색깔을 바꾸지 않기를 바랍니다, 색깔은 괜찮습니다, 그래서 우리는 그것을 떠날 것입니다 크기와 위치 만 알려주므로 CSS에서 살펴 보겠습니다 이 두 중괄호 사이에있는 한 당신이 필요한 것은

바로 여기에 'H1'을 입력 할 것입니다 그리고 우리가 위에서 한 것처럼 우리는 우리의 중괄호를 넣고 안으로 귀환해야합니다 그리고 이제 우리는 가서 스타일을 적용 할 것입니다 나는 Font Size와 같은 것을 말하고 싶다 40 픽셀로 떨어 뜨리고 싶습니다

세미콜론 ';'을 기억하십시오 결국 구문이 올바른지 확인하십시오 당신은 중괄호를 가지고 있습니다 거기에는 콜론이 있고 거기에는 세미콜론이 있습니다 작동하는지 봅시다 '저장'을 눌러 보겠습니다 우리 자신을 준비합시다

미지의 응답 영역에 들어갈 예정이기 때문에 당신을 위해 있을지도 모릅니다 이제 브라우저에서 확인해 보겠습니다 그리고 테스트하는 방법은, 우리는 여기서 데스크탑보기를보고 있습니다, 그것은 꽤 넓습니다 하지만 768 픽셀까지 내려 가면 그게 어디 있니? 네가 알아낼 때까지 끌고있어 조심해, 내려와

이 글꼴을보고, 나는 그것을 가리키고있다, 당신은 나를 가리키는 것을 볼 수 없다 저것 봐 내 친구, 모든 반응 웹 디자인입니다 다른 것들이 있지만 그것의 핵심 핵심 부분입니다 특정 폭에서 미디어 쿼리 트리거가

CSS가 변경되면 HTML도 똑같습니다 텍스트는 바뀌지 않고 CSS 만 변경됩니다 그리고 그것은 우리의 미디어 쿼리로 시작됩니다

잘 했어, 너 네가 흥분했으면 좋겠다 나는 처음에 이것을 알아 냈을 때 꽤 흥분했다는 것을 기억합니다 자, 가서 몇 가지 다른 일을 해봅시다 Dreamweaver로 돌아갑니다

제가하고 싶은 것은, 기억하십시오, 우리는 몇 가지 일을해야했습니다 우리는 텍스트 정렬을해야했습니다 그래서, 코드에서는 '텍스트 정렬'입니다

거기에 맨 위에 있습니다 '센터'를 클릭하겠습니다 Dreamweaver에 대한 좋은 점은 알 수 있습니다 나는 그것을 입력하거나 구문을 기억할 필요가 없다 이걸 클릭하면됩니다

그리고 내가 기억해야 할 모든 것은 이 모든 줄의 마지막에 무엇이 마지막일까요? 모두가 잊어 버렸습니까? 세미콜론 ';' 굉장해! '저장', '모두 저장', 미리보기 이제는 중심입니다 그것은 일종의 센터링입니다 여기 H1에 있기 때문에

이 H1이 내 타블렛으로 촉발 된 것입니다 하지만 여기의 상단에있는이 H1은 60 픽셀의 패딩 왼쪽을 말하는 것입니다 그래서 그것을 사용하고 있습니다 그래서 중앙에 위치하게되고 측면에 60 픽셀이 더해집니다 그래서 우리는 그것을 무시할 수 있습니다, 실제로, 나는 그것을 원하지 않습니다 왼쪽 패딩 때문에 0 픽셀이되고 싶습니다

세미콜론 ';' 결국, '저장', 그것을 확인, 이제 우리는 좋은거야 굉장해! 그래서 중심에 있고, 새로운 글꼴 크기입니다 그것을 끌어 내라 이제 모바일 용 미디어 쿼리를 한 번 더 해보겠습니다 폰트 크기가 더 작아지는 것을 제외하고는 아무 것도 많이 변하지 않기 때문에

그래서 그것이 우리가해야 할 일입니다 이제 Dreamweaver에 들어가 보겠습니다 Dreamweaver 내부에서이 모든 것을 다시 입력 할 수 있습니다

또는 우리는 단지 게으름을 피우고 그것을 모두 선택할 수 있습니다 마지막 중괄호를 포함하여 미디어 쿼리 사람들은 항상 그걸 잊어 버리고 '복사하기' 또는 '편집', '복사' 나는 여기에 두 개의 리턴을 넣어 '붙여 넣기'를 할 것입니다

그리고 내가하고 싶은 것은, 몇 가지 일입니다 하나는,이 최대 너비를 변경하고 싶습니다 Tablet에서 768로 변경하고 싶습니다 실제 일반 모바일 크기 인 400 픽셀입니다 이것은 꽤 많이 바뀝니다 매우 다양한 휴대 전화 크기가 있습니다 내가 찾은 400은 정말 좋은 종류의 은폐입니다 나는 새로운 아이폰이 375 픽셀 너비라고 생각한다 그러나 더 큰 LG 전자, 삼성 전화 중 일부는 약간 더 넓다 그래서 나는 그 전화기들을 모두 커버하기 위해 조금 더 크게 만들었습니다 왼쪽에 무엇이 필요합니까? 왼쪽 패딩은 필요 없어

텍스트 정렬이 필요하지 않습니다 내가하고 싶었던 것은 글꼴 크기를 바꾸는 것뿐입니다 그래서 나는 그것들을 모두 지우고 있습니다

나는 당신을 20 픽셀로 바꾸고 싶다 '저장'을 눌러 브라우저를 체크인합시다 데스크톱

태블릿 변하기 쉬운 아마도 조금 작을 것입니다 28 픽셀이라고 가정 해 보겠습니다 조금 더 커

따라서 모든 다른 크기의 미디어 쿼리가 가능합니다 우리는이 수업에서 3 학년으로 단순하게 지내고 있습니다 그리고 종종 작은 웹 사이트를 위해서, 내가해야 할 모든 것입니다 일부 웹 사이트는 조금 더 세게 가고, 7 가지 크기를 설명합니다 그래서 그들은 7 가지 미디어 쿼리를 가지고 있으며, 그것은 당신에게 달렸습니다

저는 기본, 데스크톱, 태블릿 및 모바일만을 사용하고 있습니다 우리가 CSS에서 할 일은 우리가 계속하기 전에 우리는 몇 가지 CSS 주석을 추가 할 것입니다

이 모든게 의미하는 것은 내가 이걸 만들었 기 때문이다 이 일이하는 일,이 남자가 여기서하는 일

하지만 나 자신에게 몇 가지 메모를 추가하고 싶습니다 내 미래의 댄의 자아에게 그냥이 일들이하는 일을 기억합니다 그래서, 바로 앞에 커서를 놓으면

여기에 대한 '@ 미디어'쿼리, 768 내가 여기 왼쪽 편에 갈거야 '댓글 적용'이라고 말한 것을 클릭 한 상태로 유지하십시오 그것은 CSS의 주석입니다

클릭하십시오 별로 아무 일도 일어나지 않는다 당신은 볼 수 있습니다, 거기에 슬래시 '/'와 두 개의 별표 '**' 하지만 여기서 '타블렛'을 타이프하면 이것은 단지 브라우저가 무시하는 것을 의미합니다 아무도 그것을 보지 않으며, 그것은 단지 인간을위한 것입니다 그것은 다른 웹 디자이너를위한거야 당신이 말하는 것을 아는 것은 미래의 자신을위한 것입니다 나는 그것을 복사해서 여기에서 사용하려고합니다 나는 이것을 '모바일'이라고 부를 것입니다

이제 '파일', '모두 저장'으로 이동하십시오 브라우저에서 작동하는지 확인하십시오 네가 아니라면 그리고 당신은 태블릿으로 내려 가지 않고,이 H1을 위해 모바일 크기로 내려갑니다 '재설정'버튼을 누르면됩니다 그럼 모두 그렇게합시다 당신은 필요가 없습니다 네가 일하고 있다면, 계속해라

따라서 'index1'을 닫고 'index3'까지 올라갈 수 있습니다 거기에있는 것을 클릭하십시오 브라우저에서 미리보기 그리고 그것은 우리가 잠깐 전에 그것을 정확히 가지고 있어야합니다 좋은! 그래서 네가 끔찍하게 잘못하면

여기를 열면 재설정하고 여기에서이 부분으로 돌아갑니다 우리의 반응 우산의 다음 부분은 미디어 쿼리를 살펴 보았습니다 응답 성이 고려되었습니다 또 다른 하나는 반응 형 이미지입니다 그리고 그것이 의미하는 전부는, 제가 여기서 마지막 예제 중 하나를 확인한다면

즉, 브라우저의 크기를 조정하거나 다른 장치로 이동하면 이미지는 실제로 크기가 재조정됩니다 보시다시피,이 배경이 맨 위로 이동합니다 그리고이 모든 것들은 제공된 공간에 가장 잘 맞는 크기의 재사용도 가능합니다

그래서 우리는이 배경 이미지를 먼저 살펴볼 것입니다 그러면 우리는이 이미지들을 아래쪽에서 보게 될 것입니다 둘 다 우리가 접근하는 방식이 약간 다릅니다

Dreamweaver로 돌아가서 '스타일'을여십시오 우리가 찾고있는 것은 영웅 박스입니다 그게 내가 가지고있는 큰 상자 야 우리가 작업하고있는 것을 보자 보시다시피, 제가 이미 우리를 위해 만든 큰 핑크색 상자입니다

그리고 제가 한 것은 높이와 배경색을 분홍색으로주었습니다 나는 또한 그것을하고 싶다 그래서 저는 '배경'을 입력하고 있습니다 여기서 '배경 이미지'로 이동할 수 있습니다 지금 내가해야 할 일은 'url'을 사용하고 'return'을 누르는 것입니다

이것은 먼 길입니다, 이미지, 나는 'im'을 타이핑하기 시작했습니다 이것은 정말 편리합니다 사전 준비가되었습니다 특히 여기서 내려올 때, 당신은이 이미지들을 선택할 수 있습니다 그리고 당신은 그 (것)들의 위 공중 선회에 얻고, 당신을 위해 그 (것)들을 시사 할 것이다

Dreamweaver가 사용하는 더 빠른 방법이 있습니다 그래서 나는 그 모든 것을 취소 할 것입니다 당신까지, 당신은 그 긴 방법으로 그것을 타이프 할 수 있습니다 정말 좋은 코드가 있습니까? 이 경우 'bgi', 즉 '배경 이미지'입니다 그리고 내가해야 할 일은 돌아 오는 것 대신에

또는 해당 옵션 중 하나를 클릭하십시오 내 키보드에서 '탭'을 누르기 만하면됩니다 우리의 배경 이미지 인 콜론 ';'을 채워서 필요한 URL을 추가했습니다

그리고 타이핑을 시작할 준비가되었습니다 당신이 새로운 사람이라면 익숙해지기 위해 모든 것을 타이핑 할 수도 있습니다 하지만 일단 가면

전체 단어 '배경 이미지'를 입력하고 URL을 그것을 기억하는 것은 어려울 수 있습니다 그냥 'bgi'라고 치고 'Tab'을 누르십시오 우리가하고 싶은 것은 이미지 폴더에서 이미지를 가져오고 싶기 때문에 'i'라고 입력했습니다 Dreamweaver, 감사합니다 그리고 그것은 단지 내 이미지 폴더를보고 내가 가지고있는 이미지를 볼 수 있습니다 이 배경 이미지를 배경 이미지라고합니다 그 위에 마우스를 올리면 내가 원하는 것을 배경으로 볼 수 있습니다

끝에 세미콜론을 추가했습니다 그래서 저장하고 브라우저에서 확인해 보겠습니다 작동하지 않을 것입니다 거기에 있지만 반응이 없습니다 나는 그것이 모든 신축성이 있고 배경을 채우기를 원합니다

우리는 CSS 속성을 사용하여 그렇게 할 것입니다 CSS3 속성입니다 사람들이 HTML5와 CSS3에 관해 이야기 할 때

그들이 진짜로 의미하는 것은 새로운 것들 중 일부일뿐입니다 우리는 전에 할 수 없었던 CSS로 할 수 있습니다 이전에는 HTML4와 CSS2가있었습니다 그래서 그것은 단지 새로운 버전이지만 꽤 상상력이 풍부하고 위협적입니다 그러나 정말로 그들은 이것과 같은 단지 새로운 것들입니다 최신 CSS 기능 중 하나는 배경입니다

나는 '배경 크기'라고 불리는 것을 원한다 거기에있다 '표지'라는 옵션이 있습니다

정말 멋진 CSS3 기능입니다 세미 콜론 ';'을 추가하십시오 마지막에 '저장'을 클릭하고 브라우저를 체크인하십시오 이제 우리는 말하고 있습니다, 이제는 모두 반응 적입니다 제공되는 공간을 채우는 종류 모든 신축성을 얻는다

CSS3의 기능인 '표지'와 '배경 크기'입니다 그래서 우리는 새로운 현대 웹 디자인의 비밀 중 하나를 공개했습니다 그리고 이것이 CSS3라고 불리는 것입니다 당신은 많은 부분에서 그것을 보았습니다, 그러나 실제로 그것은 우리가 할 수있는 새로운 것들입니다 이전 버전의 CSS에서는 이전에 할 수 없었던 이제 그것이 끔찍하게 잘못되어, 당신의 것이 작동하지 않는다면 – 나는 그것을 저장하고 닫을 것이다

– 'index4'를여십시오 그리고 그것은 똑같은 지점으로 당신을 돌려 보내야합니다 조금만 쉬면 브라우저에서 체크인하십시오

그리고 네, 완벽하게 작동합니다 너의 것이 잘 작동한다면, 당신은 다시 설정할 필요가 없다 과정 전체에서 색인 1을 계속 수행하십시오 길을 잃으면이 작은 리셋으로 나를 따라갈 수 있습니다 그래서 다음으로하고 싶은 일은 – 우리는 이런 종류의 최고의 부분을 가지고 있습니다

이 작은 이미지 그룹을 여기 아래쪽에 구축하고 싶습니다 그래서 우리는이 이미지들이 들어가기위한 상자에 넣어야 할 것입니다 Dreamweaver에서 살펴 보겠습니다

이 상자는 일반적으로 Divs라고합니다 우리에게는 Div가 이미 있습니다 Div 영웅 상자라고하는 사람이 있습니다 그것은 분홍색 이었지만 지금은 신축성있는 이미지 배경을 가지고 있습니다 그래서 우리는 우리 자신을 위해 이들 중 하나를 만들어야 할 것입니다

그래서 우리의 영웅 상자 밑에 '돌아 오는'것을 넣으십시오 우리는 Div에 입력 할 것입니다 그래서 우리는 꺽쇠 괄호로 들어가서 Div, '<div 를 입력합니다

클래스 이름도 지정합니다 클래스는 우리가 제공하는 고유 한 이름입니다 그리고 모든 문법은 미리 채워 져야합니다 'class'라는 단어를 입력하면 마우스를 클릭하면 볼 수 있습니다 구문을 채 웁니다

나는 그것에게 이름을 줄 것이다 당신은 그것을 어떤 종류의 이름이라도 갖게됩니다 대문자 나 공백을 사용하지 않도록하십시오 우리는 칼럼 (column)을 짧게하는 칼럼을 호출 할 것입니다 이 용어를 사용하는 것이 일반적입니다

끝내려면 꺽쇠 괄호 '>'를 넣어야합니다 마지막 꺾쇠 괄호 '<'를 엽니 다 우리 H1을 기억하고, 우리는 그 슬래시 '/'를 넣습니다 그리고 그것은 우리를 위해 그것을 끝낸다 이것이 영웅의 상자가 만든 것입니다

우리는 col이라는 버전을 만들었습니다 이제 HTML로 좀 더 진보했다면 "남자, 긴 여정이야

나는 더 짧은 길이 있었으면 좋겠어" 'col'을 입력하면됩니다 도트 '' 그것의 시작 부분에 그냥 클래스 이름을 말합니다

그리고 'return'대신 'tab'을 누르면 그냥 당신이 컬 클래스 Div 클래스를 의미한다고 생각 그리고 모든 것을 채 웁니다 그래서 빠르고 쉽습니다 새로운 것이라면 먼 길을 타이핑하면됩니다 구문에 익숙해 져야합니다 어쨌든, Dreamweaver는 지금 당장 큰 도움이됩니다 이 안에는 내 이미지를 넣고 싶습니다 그래서 상자를 만들었지 만 상자는 아직 아무 것도하지 않습니다

그것은 단지 빈 상자에요, 그 안에 이미지를 넣고 싶습니다 길을가는 길, 먼 길을 이것이 정말로 길기 때문에 당신이 그렇게하는 것을 원하지 않습니다

<img src 를 입력합니다 그 src 내부에서 우리는 벗어나 우리의 이미지를 찾는다

그런 다음 대체 텍스트를 추가합니다 단순한 이미지를 넣기 위해 필요한 모든 다른 것들이 있습니다 당신은 거기서 볼 수 있습니다, 나는 이미 그것을 했으므로, 'image src' 이미지가 있습니다 그런 다음 대체 텍스트를 입력해야합니다 그래서 조금 길어 나는 그것을 취소 할 것이고, 내가 할 일은 우리의 슈퍼 비밀 드림위버 awesomeness를 사용하고, 단지 'img'를 입력하십시오 '입력'이 아닌 '탭'누르기

보시다시피, 저를 위해 그 모든 것들이 저 안에 있습니다 자,이 '근원 안에, 내 이미지는 어디서 오는거야? 나는 이미지 폴더에 대한 '나는'을 입력 고마워, 드림위버 내 이미지 폴더를보고 말하길, "너, 이거?" 그리고 나는 말합니다

"예, 저기, 이미지 1이 필요합니다" 'Save All'을 누르면 브라우저에서 점프 해 보겠습니다 그리고 그는 거기에있어, 그는 아직 반응이 없습니다 우리는 단지 HTML 이미지를 넣었 기 때문에 다른 어떤 것도하지 않았습니다 그러나 이것이 우리의 이미지에 담긴 첫 번째 부분입니다 이제 우리는 그를 반응시켜야합니다 우리는 CSS로 이것을 수행합니다 조금 봅시다

우리가 해낸 첫 번째 방법과 약간 다른 방식으로합니다 왜냐하면 첫 번째 옵션은 배경 이미지가되고 싶었 기 때문입니다 기억해,이 녀석은 배경이되어야 해

그래서 약간 다르게 작동합니다 그래서 우리가하고 싶은 것은 우리의 'stylescss'로 이동하는 것입니다 그럼 바닥에 내려 놓고 싶습니다 Tablet이 아닌 데스크탑보기의 스타일

그래서 나는 몇 가지 'return'을 내 최고의 'h1'밑에두고 있습니다 그러나 태블릿 앞에 당신이 준비 됐으면 좋겠다

우리는 Compound Selector라는 멋진 것을 배울 것입니다 그래서 Selector는 우리의 H1 Selector입니다 그것은 Selector였습니다 이것들은 모두 Selector입니다 그래서 제가하고 싶은 것은 Compound Selector입니다

나는 그것을 이미지로하고 싶다 모든 이미지를 반응 적으로 만들고 싶지만 모든 이미지가 아닌 우리의 칼럼 안에있는 이미지 만 원합니다

그것은 Compound Selector라고 불리며, 이미지를 의미합니다 모든 페이지의 모든 이미지와 모든 웹 사이트가 아닌 우리가 콜이라고 부르는 그 안에있는 이미지들 우리는 그것을 col라는 클래스라고 불렀습니다 이제 CSS에서 클래스를 참조하기 위해 전체 중지 '' 처음에는 네가 직접 쓰는 것들

아무 데서도 만든 것이 정면에 정차합니다 HTML에 미리 존재하는 것은 종종 그렇지 않습니다 너는 볼 수있다,이 하나, 나는 이것을 영웅 박스라고 불렀다 그래서 정면에 정차합니다 하지만이 H1은, 내가 만들지 않았고, 그것은 단지 기존의 HTML 셀렉터였습니다 그래서 우리는 그것을 가지고 있지 않습니다 우리 콜의 이미지들, 내가하고 싶은게 저는 중괄호를 넣고 돌아올 것입니다

반응이 좋도록하기 위해 내가하고 싶은 것은 폭을 넓히고 싶습니다 그냥 '위'라고 입력하고 내려주세요 그리고 나는 100 % 너비를 만들고 싶다

세미콜론을 잊지 마라 '; 결국 이제 대부분의 작업이 그러나 그것을 만들기위한 몇 가지 다른 것들이 있습니다

모든 브라우저에서 조금 더 잘 지원됩니다 '높이'를 넣고 높이는 '자동'이어야합니다 그리고 우리가해야 할 마지막 일은 '전시입니다

블록;' 그들이 모든 브라우저를 도울 것이기 때문에 다만 그 (것)들을하십시오 반응 형 이미지 처리

그것은 대부분의 일을하는 사람입니다 'width : 100 %' 우리 브라우저에서 좀 어울려 보자 거기에 멋지다, 그가있다, 그는 반응하는 이미지 다 제가 그를 축소 시키면, 당신은 그가 브라우저로 더 작아진다는 것을 알 수 있습니다

브라우저가 커질수록 더 커집니다 그래서 우리가 원하는 것은 정확히 아닙니다 우리는 그를 특정 높이, 더 크지 않게 만들어야 할 것입니다 그러나 이것이 반응 형 이미지가 수행되는 방법입니다 그리고 Compound Selector 사용에 관한 멋진 점은

우리가 말한 곳에서, 컬럼 내부의 이미지 여기이 이미지를 망치고 있는게 아니야 내 로고는이 배경의 모든 이미지입니다 그것은 단지 내 칼럼 안에있는 이미지를 다루는 것입니다 우리가 가기 전에 우리의 실물 크기에 맞는 너비를주세요 우리가 할 일은 몇 번 반복하는 것입니다 거기에있는 모든 이미지를 얻으려면 Dreamweaver로 돌아가 소스 코드로 이동하십시오 소스 코드는 HTML입니다

대신 소스 코드라고합니다 우리가하고 싶은 것은이 칼을 복제하는 것입니다 그래서 나는 그들 중 여섯 명이 여기에 맞춰 주길 바란다 보시다시피, 저는이 상자들 중 여섯 개를 가지고 있습니다 그래서 우리가 할 일은 전체 라인을 복사하여 붙여 넣는 것입니다

Dreamweaver에서 가장 쉬운 방법은 이미지의 아무 곳이나 클릭하는 것입니다 PC에서 'Control D'를 누르거나 Mac에서 'Command D'를 누르십시오 너는 볼 수있다, 다만 사본을 만들 n 다 왜냐하면 내가 원하는 것은 단지 이미지의 중복이 아니라 뿐만 아니라 외부 주위의 기둥 여기를 클릭하면 총 6 개가 필요합니다

그럼 당신이 통과하고, image1 대신에 image2가 있습니다 여기 아래에 이미지 3이 있습니다 당신은 밖으로 클릭하고, 다시 클릭하십시오, 4 보시다시피, 저를 위해 미리보기입니다 굉장해! Dreamweaver, 감사합니다

5, 6 굉장해! '저장'을 눌러 브라우저에서 미리보기를 해봅시다 이제 우리는 첫 반응 형 이미지를 얻었습니다 하지만 이제는 모두 준비 됐습니다 Dreamweaver로 다시 이동하여 '저장'을 누르십시오 네가 일하고 있다면, 끝내라 너의 것이 아니고 완전히 작동하지 않는다면 우리가 열어 놓은 것을 닫고 index5를여십시오 그건 우리를 돌려 줄거야 브라우저에서 미리 보시고 지금 우리가있는 곳으로 돌아가십시오 우리가해야 할 일은 우리의 실물 모형을 보면 실제로 – 보시다시피,이 이미지는이 큰 것입니다

그러나 현재의 실물 크기 모형에서는 전체 크기로 늘어납니다 그래서 우리가해야 할 일은 그 안에있는 컨테이너를 기억해 두었다가 우리는 이것을 콜 클래스라고 불렀다 우리는 "이봐 콜, 너는 33 %가되어야 해"라고 말할 필요가있다 당신이 순간에있는 것처럼 100 %가 아닙니다

" 그래서 33 %가 우리 블록을 구성합니다, 333 이제 어떻게 할 지 살펴 보겠습니다

Dreamweaver로 다시 돌아갑니다 그래서 Dreamweaver에서 '스타일'로 들어가 보겠습니다 내 데스크톱보기에서 할 수있는 일은 Tablet이 아니라 그래서 제가 그 사람 바로 앞에 태블릿을 찾으면 몇 가지 'return'을 넣으면 'col '을 넣을 것입니다 그래서 나는 'col'을 여기에 넣고 싶습니다

중괄호는 여러분이 폭이되도록하겠습니다 나는 333 %의 비율을 사용할 것입니다 끝에 세미 콜론을 기억하십시오 문법이 올바른지 확인하십시오

종종 사람들을 가르 칠 때, 그들은 – 우리는 333 %의 이상한 것을하고 있습니다 그래서 제 모습이 맞는지 확인하십시오 '저장'을 누르면 브라우저에서 확인해 봅니다 그래서 작동합니다

모두 333 %입니다 정말 고마워요 그러나 기본적으로 그들은 서로 위에 겹쳐서 쌓아 놓습니다 그래서 우리는 여기에서 'col'밑에 'return'을 넣을 수 있습니다

'너비'아래 그리고 말하자면, 왼쪽으로 떠돌아 다닙니다 '저장'하고 미리보기하면 이제는 모두 서로 옆에 쌓여 있습니다 오 세상에, 너 정말 끝이야! 내가보기에 상관없이 모두 333 %입니다

데스크톱 용입니다 나중에 Padding을 추가하겠습니다 그러나 그것이 우리의 데스크탑 뷰를 위해 Div의 크기를 재조정하는 방법입니다

잘 했어 우리가해야 할 다음 일은 당신이 볼 수있는 것입니다 여기 내 목에서 데스크톱에서 실제로 333 %이지만, 실제로는 50 %입니다 모바일에있을 때는 100 %입니다 이것이 바로 우리가 지금 할 일입니다 Dreamweaver에서 우리가 할 일은 여기 Tablet입니다

닫는 것 전에 우리 'h1'밑에 왜냐하면 Dreamweaver가이를 유용하게 강조하기 때문입니다 내가 이것들 중 하나를 클릭하면 시작 또는 끝나는 것을 볼 수 있습니다 당신은 볼 수 있습니다, 그것이 래퍼입니다

그래서 우리는이 두 중괄호 안에 모든 것을 유지하기를 원합니다 그래서 'h1'아래에 있지만,이 닫는 것 앞에 우리는 "콜을 원해" 중괄호, 반환, 나는 그것이 폭이되고 싶다 – 우리가 위에서 한 것처럼 우리가 말하려는 것, 너비, 우리의 경우 태블릿은 50 %입니다 끝에 세미 콜론 나는 떠있는 말을 할 필요가 없다 상단의이 하나가 이미 그것을 말하고 있기 때문입니다 우리는 단지 한 번만 말해야합니다 그러나 폭에 관해서, 우리는 말하고 싶습니다 실제로 태블릿은 333 %를 무시하고 50 %가됩니다 조금만 보죠 33

3 %, 나는 그 말을하기가 어렵다 태블릿으로 내려갑니다 준비된? 이제 포토샵에서 우리가 원하는 방식으로 쌓아 올리고 있습니다 그리고 그것은 50 %에 걸쳐 있습니다 나 지금 네가 이걸 멈추길 바래

너 혼자서 모바일에 갈 수 있는지 알아봐 멈춰,가,해라, 너 아직 감히 못 간다면, 같이 가자 당신의 것이 끔찍하게 잘못 될 경우, 내 것을 지켜보십시오 네가하지 않았다면 네가 해냈고 네가 멈추고 일하고있어

자신을 매우 자랑스럽게 생각하고, 배웠습니다 아주 짧은 시간에 많은 반응 웹 디자인 당신은 최고입니다 그래서 내가해야 할 일은 모바일에서 똑같은 '콜'을 사용하고 싶습니다 중괄호

나는 단지 100 % 너비라고 말할 것입니다 세미 콜론을 잊지 마십시오 '저장해

브라우저에서 미리보기 태블릿, 50이야 모바일, 100 %입니다 우리는 새로운 세기의 Responsive Web Designers입니다 좋아, 좀 흥분 되긴하지만, 네가 조금 더 흥분했으면 좋겠어

우리가 정말로 배우고 있기 때문에 반응 형 웹 디자인의 기본 다른 모든 것, 우리는 간지럽 히고 일을합니다

그러나 우리는 이미 진정한 기초가 완성되었습니다 그 기초는 미디어 쿼리 우리는 Responsive Backgrounds를 보았습니다 우리는 영웅 배경으로했습니다 우리가 배경 이미지를 한 것을 기억하십시오 우리는 'cover'라는 새로운 CSS3 옵션을 사용했습니다 그것은 굉장했다 그렇지만 우리는 그것을 약간 다르게 사용하고 싶었습니다 배경이 아니라 보통의 오래된 이미지처럼 그리고 우리가해야 할 일은 복합 선택자를 배우는 것입니다 그러나 정말로, 주요 부분은 이것 (우리가 말했던 곳 (폭 100 %))이었다 그리고 'auto'의 높이와 'block'의 표시 그것은 반응 형 이미지입니다 그리고 우리가 방금 배운 마지막 것은 말했습니다 "Hey column, 바탕 화면에 너가이 너비가되기를 바란다

멋진 미디어 쿼리를 사용하면 50 %가되기를 바랍니다 기본적으로 우리가 할 반응적인 변화는 이 일을하는 데 단지 되풀이 될 것입니다 미디어 쿼리 선택, 우리가 변경하고자하는 것을 제어하는 ​​것을 선택

그런 다음 몇 가지 변경 사항을 수행 중입니다 태블릿 또는 모바일에 따라 다릅니다 네가 아직도 완전히 작동하지 않는다면 작동하지 않고 재설정을하고 계속 진행하십시오

그럼 index5를 내려서 index6을 열자 끝까지 접근하기 바라건대, 브라우저에서 미리보기를하면 100 % 작동합니다 데스크톱 용 태블릿, 50 %, 333 % 그래서 제가하고 싶은 것은, 제가하고 싶은 것입니다 정말로 나에게 짜증나는 것은 여기에 아무런 격차가 없다는 것입니다 반면 내 디자인에는 모든면에 멋진 흰색 틈이 있습니다 자, 가자 덧붙여 마진이라 불리는 것 여기 Dreamweaver에서 'styles

css'로 이동합니다 우리가 원하는 것은 칼럼 주위에 그것을 추가하는 것입니다 우리는 지금 3 개의 기둥을 가지고있다, 그렇지? 이 상위 버전이 내 데스크탑 버전인데, 가장 상위 버전입니다

최고 버전 인 글로벌 (Global)이라고도합니다 그럼 여기서, 제 태블릿에는 또 다른 것이 있고 또 다른 열이 있습니다 그래서 제가해야 할 일은 여기에서 가장 중요한 것입니다 내가 할 말은 이 칼럼에서 소문자로 1 %의 마진을 주셨으면합니다 그리고 그것은 모든 칼럼의 바깥쪽에 1 %를 넣을 것입니다 그리고 그것은 우리에게 초기 문제를 조금 일으킬 것입니다 저장하여 끝 부분에 세미콜론이 있는지 확인하십시오

너 나쁘다고 말하고 있니, 그렇지? 브라우저로 뛰어 들어 봅시다 그것은 일종의 작품입니다 1 % 밖에서 경계선이 하지만 거기에 1 %가 있기 때문에 333 % 여기에 플러스 1 % 플러스 또 다른 1 %

방이 충분하지 않습니다 항상 우리가 할 수없는 최대 100 % 이상입니다 그래서 1 %의 여백을 추가 할 때마다

너비 너비를 빼야하고, 양쪽에 1 %가 있습니다 보시다시피 1 %, 거기에 1 %가 있습니다 따라서 마이너스 2를 원합니다

따라서 313 %입니다 '저장'을 누르자 그것을 확인하고, 지금, 그것은 충분한 공간이 적합합니다 그래서 우리 모두는 똑같이해야합니다

우리가 타블렛에 가면 똑같은 일을하지, 충분한 방을하지 그래서 우리가해야 할 일은 우리 태블릿의 마이너스 2입니다 그럼 48 %로 내려 가자 그것을 확인, 잘 작동, 모든 고정 이제 모바일에 대해 알아 보겠습니다

모바일은 여전히 ​​일종의 작품인데, 왜 그런지 모르겠습니다 우리는 98 %로 내려갈 것입니다 그래서 모든 것이 맞고 가장자리 주변의 경계를 볼 수 있습니다 잘 하셨어요 자네가 내 것 같으면 거기서 90을 볼 수있다

나는 그것이 Dreamweaver의 베타 버전을 가지고 있기 때문이라고 생각합니다 다시 시작하고 사라졌습니다 나 한테 조금씩 일어난다 그러나 그것은 내 컴퓨터의 버그 일뿐입니다 당신이보고 있을지도 모르는 물건 중의 1 개와 나 또한 결함이있다

우리 주변에 여백을두기 때문에 더 이상 그걸로 일종의 정렬되지 않습니다 상단에서 조금 더 커지면 그래서 우리는이 div 태그의 상단에 1 % 경계를 추가해야합니다 우리가 부른 것을 기억하니? 영웅 상자라고 불렀습니다 영웅 상자를 여기에서 찾으십시오, 여기 있습니다 그리고 너는 내 친구에게 이윤을 남겼다

그래서 마진 1 %, 세미콜론 ';', '저장' 이제 조금 더 멋지게 보입니다 우리는 그 주변에서도 마진을 봅니다

우리가 그에게 폭을주지 않았기 때문에 그는 모든 것을 빼앗길 필요가 없습니다 보시다시피, 그는 어디에도 너비가 없습니다

그가 그렇게한다면, 우리는 다른 사람들처럼 그렇게 마이너스해야합니다 하지만 우리는 그렇게하지 않으므로 그는 괜찮습니다 마지막으로 중요한 것은, 내가하고 싶은 것은 네비게이션을 살펴 보겠습니다 당신은 내 모의 – 여기에 볼 수 있습니다 그것은 나란히 스택, 여기 데스크탑 그러나 태블릿과 모바일에서는 서로 위에 있습니다

하지만 지금은 모두 서로 겹쳐 쌓여 있습니다 그래서, 제가하고 싶은 것은, 데스크탑보기에서 말하고 싶습니다 내 탐색, 이미 여기에 복합 수업을 만들었 어

내 탐색 스타일 처음부터 시간을 절약하기 위해서입니다 내가하고 싶은 건

당신은 'nav ul li'라고 말하는 것을 찾고 있습니다 그것은 내 탐색을위한 나의 목록입니다 내가 말하고자하는 것은, 당신이 전시하고 싶습니다

'인라인 블록 (Inline-block)'이라고 불리는이 작업을 해 주시기 바랍니다 즉, 그들은 서로 옆에 쌓아 올 것입니다 세미콜론을 잊지 마라 '저장'을 눌러보세요 굉장해! 유일한 문제는 Tablet에 도착하면

그 또한 인라인 블록을 유지 그리고 조금 더러워지면 로고를 넣을 공간이 없습니다 그래서 그것은 아래에 스택 따라서 태블릿으로 전환하면 다시 전환해야합니다

우리가 가지고있는 다른 방법들 위에 쌓아 놓은 것 우리가해야 할 일은 'nav ul li'을 찾는 것뿐입니다 존재하지 않는 Tablet에 여기 있습니다

그래서 우리가 할 일은 '칼럼'아래에 'nav ul li {'이라고 불리는이 것을 넣을 것입니다 그리고 나는 그것이 여기에 도착할 때 말하고 싶다 이제 블록을 보여 주셨으면합니다 그리고 그것은 그들이 서로의 위에 겹쳐 쌓일 것이라는 것을 의미합니다

'저장'을 눌러 브라우저에서 미리보기를 해봅시다 굉장해! 그래서 데스크톱은 줄을 서서 놓았습니다 그리고 여기서, 모바일과 동일한 스택 블록입니다 글쎄, 내 친구, 우리가 반응하는 여행을 떠날거야 Responsive Web Design에 대한 놀라운 자료들을 배웠 으면합니다

간단히 요약하자면, 반응 형은 일종의 우산 용어입니다 웹 디자인의 몇 가지 특정 사항을 설명하는 데 사용됩니다 '스타일'아래에있는 큰 것 중 하나는 미디어 쿼리입니다

그리고 이것은 다른 브라우저 너비에서 시작됩니다 그리고 그 미디어 쿼리에서 우리는 일을 바꿀 수 있습니다 글꼴 크기와 높이가 비슷합니다

우리는 또한 상자 일부의 너비를 변경합니다 우리의 경우, columnm, 우리는 백분율을 사용하여 그것의 너비를 변경했습니다 데스크톱, 태블릿 또는 모바일인지 여부에 따라 다릅니다

반응 형 용어 중 또 다른 하나는 반응 형 이미지였습니다 우리는 두 가지 버전을 보았습니다 배경 이미지가있었습니다 여기서 우리는 '표지'라는 CSS3 속성을 사용했습니다 우리는 또한 반응적인 정규 이미지를 보았습니다 그들은 단지 페이지에 앉아

배경이 아니라 기본적으로 100 % 너비입니다 우리는 또한 자동차의 높이와 그들을 작동하게하는 블록의 디스플레이를 추가했습니다 당신은 Responsive Web Design을 위해 많은 일이 CSS에서 행해졌다는 것을 알아 채실 것입니다

여기에있는 HTML은 멋지고 깨끗하며 쉽고 멋지게 작동합니다 우리의 CSS 스타일은 밖으로 퍼져 나가고, 몇 가지 다른 스타일을 포함합니다 하지만 당신은 볼 수 있습니다, CSS의 구문은 특히 어렵지 않다 특히 당신이 그것을 직접 만들었을 때

이제 시작하기 위해 몇 가지 사항을 건너 뛰었습니다 이 비디오가 아주 오래되었는지 확인하십시오 더 많은 것을 배우고 싶다면, 나는 많은 과정을 가지고있다 bringyourownlaptopcom에서 그들을 확인하십시오 Dreamweaver에 많은 코스가 있습니다

기타 웹, 비디오 및 그래픽 디자인 제품을 많이 포함하고 있습니다 가서 확인해보세요 bringyourownlaptop

com 설명에 링크가있을 것입니다 좋아, 그게 다야 haere rā, 좋은 YouTube 사람들 다른 비디오에서 보자 내가 좋아하는 것을 잊지 마라

안녕