실전 HTML5 & CSS3 동영상 강좌 제 28강 그리드 레이아웃 - I > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 28강 그리드 레이아웃 - I

본문

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

 안녕하십니까 불수 입니다 전을 html css 스물 여덟번째 시간 그리드

레이아웃 첫 번째 시간을 진행하도록 하겠습니다
자 오늘 알아볼 내용은 그리드 레이아웃을 하는건데요
자 그리드 레이어 슨 무엇이냐면
우리가 여태까지 했던 작업들을 잘 생각해 보시면 이렇게 화면이 있어요
웹문서 가 있죠 이 왼 문서 에다가 우리가 보통 헤더를 만들고
다음에 네비게이션 바를 만들고요 다음에 섹션을 만들고 이 섹션 갔다가 또
면 분할을 해서 우리가 원하는 대로 균등하게 면도날을 했었구요
다음에 밑에 푸터 가 존재하죠
자 대부분의 그웬 문서가 이러한 형태를 가지고 있습니다 그래서 이러한
현태 를 받고 있는 것을 좀 정화하기 위해서 우리가 예전에 시멘틱 태그
란 곳도 우리가 있었다 그랬죠
css3 html5 부터는 시멘틱 태그 를 지원하기 때문에 시멘트 태그를
이용해서 음 헤더 섹션 포터 기능 등을 사용했습니다
작은데 오늘 하게 돼 그리드 레이어스 뭐냐면 우리가 이렇게 어떤 웬
문서를 만들지 간에 뭔가 좀 정해진 틀이 브 에요
헤더를 만들고 다음에 네비를 만들고 다음에 섹션을 만들고 다음 f 틀을
만들고
어느정도 정형화되어 있는 틀에서 크게 벗어나지 않습니다
그래서 이 전체적인 레이아웃을
html 코드를 코딩 하지 않고 우선 작업순서 좀 바꿔서 css 를 먼저
만들어 놓는 거예요
css 를 먼저 만들어 놓고 그 css 에는
전체화면을 이렇게 전체 하면 있으면 2 전체 화면을
그리드로 이렇게 면 분할을 많이 해 놓습니다
이렇게 해 놓고요 놓고 만약에 헤더를 만들겠다 그러면 윗부분에 면 분할
해 놓은것을 합치는 거에요
다합쳐서 헤더를 만들고 다음에 네비를 말겠다 네비를 만드는데 네비에
메뉴가 4개다 금연 4개씩 이렇게 묶어서 또 면을 분할하고 요
다음에 색상을 만들겠다 섹션은 통으로 다 전쟁 했다하면 면 분할 했는걸
을 전부 다 합쳐서 색상을 만들고요
다음에 포털을 만들겠다 포터 도 전부 담그 쓰겠다 그러면 전부 다면
분할해 놓은 것을 합쳐서 토 털을 만드는 방식 즉 그리드 레이아웃을 한
것은 어떠한 템플릿이 작가가 볼수가 있겠죠
우리가 맨땅에 처음부터 이렇게 코딩을 한 게 아니라 css 를 만드는
것이 아니라 면은 분할을 막 쪼개 놓은 css 코딩 그 문제를 가지고
2위에서 이걸 기반으로 해서 역으로 html 코드를 코딩하는 방식입니다
그래서 어떻게 이런 방식으로 코딩이 되어 지는 지에 대해서 살펴보는
시간을 갖도록 하겠습니다
자 먼저 그 그리드 라인을 그 제공해주는 플러그인이 있어요
자 지금까지 살펴본 예제들을 보면 전체적인 레이아웃을 개발자가 처음
서부터 만들어야 했습니다
자 이러한 수고를 조금 줄여 주고자 개발된 플러그인 있어요 이게 그리드
라인 플러그인 이고요
자 몇 가지 계산과 규칙만 알고 있다면 개발자는 쉽게 전체적인 레이아웃을
만들 수 있습니다
자 플러그인을 다운 받는 것인데요 이어 기억하면 요런 화면이 나옵니다
자음 원점 가볼까요
자 브라우저를 열어서
자 그럼 3자가 타이핑을 해 왔고 이 주소로 들어가보면
제가 이렇게 나옵니다 자 화면이 간단한데 여기서 어떻게 뭐냐면 컬럼의
드는 이게 우리가 실제로 만드는 웹문서 화면이라 생각하심 되요
1분 더 왠 문서가 있는데 그웬 문서를 컬러 미드
요 한칸 한칸 한칸 한칸 컬럼 이라고 줘 그래서 크 컬럼 의 가로
사이즈를 60 를 중 거고요
다음에 그 컬럼의 몇 개냐 12개 1 2 3 4 5 6 7 8 9 10
10화 12개를 중 거구요
자 다음에 그 터 라고 있는데 그때 뭐냐면요 간격 이에요 컬럼과 컬럼 4
에 감격 그 간격을 20 픽셀 죽었던 얘기예요 그래서
초 음
60 짜리에 컬럼의 12개가 보입니다
그리고 그 간격 컬럼과 컬럼 4 의 간격이 20 이에요 그래서 이것을 다
더 해보면 총 콘텐츠 내가 만드려는 웬 문서의 컨텐츠는 총
어 940 짜리가 나오고요
그 다음에 전체적인 거 전체적은 960 인데 이 960 뭐냐면 자
프리뷰를 볼게요
이 설정 값을 앞두고 프리뷰를 해보면 이런 화면이 만들 수 있다는
얘기에요 그래서 총 콘텐츠는 940 인데
양옆으로 cp 쎄씨 더 들어와서 총 풀 위드는 전체의 가루는 960 짜리
만들어지고 요
이것을 각 컬럼 마다 60 씩 중 나열 했어요
기본적으로 디폴트가 된거구요 여기서 내가 원하는 대로 나는 1 씨앗이다
쓰겠다 그러면 1에 이어서 쓰면 되고요
나는 두 개는 나누겠다 금연 463 10 2개를 나는 거고요
아 때로는 다 쓰겠다 금 904 짐을 않은 구요
디폴트로 제공해 준 건 이렇게 열 두 개로 나눠져 있는 것에서 사용자가
개발자가 임의로
2개의 합치고 세계도 합치고 해서 면 분해를 해 나가는 방식입니다
즉 지금까지 우리가 했던 방식의 html 로 뼈대를 만들어 놓고 그
다음에 css 를 적용한 게 아니라 먼저 css 정형화 되어있는 어느정도
템플릿 화대 있는 css 를 만들어 놓고요
거기에 우리가 맞춰서 html 뼈대를 잡고 그 다음의 상세한 css 를
더 추가하는 방식으로 작업이 되어 질 수가 있겠습니다
자 그러면 이렇게 뭔가 템플릿으로 된 부분을 갔다가 우리가 css 화일을
다운받아 되요 그래서 밑에 보면 따운 css 파일 있죠
저거 클릭해서 다른이름으로 대상 저장을 해서 우리가 사용하는거 우리가
개발하고 있는 곳에
개발 하는 곳에 와서 이렇게 다운을 받을수가 있습니다
그래서 저장을 하면 저장이 되겠죠 어
자 그러면 실제로 코드를 한번 볼게요 자 다운로드 받음 코드를 한번 열어
보면 그리드 css 라고 되어 있죠
이 화일을 먼저 보면 굉장히 많은 코드가 이렇게 될 이미 코딩이 되어
있는 겁니다
그 자 자 이것을 일일이 다 분석을 할 필욘 없구요 우리는 몇가지 사용
봉봉 만 알고 있으면 되요
그래서 실제로 작업한 파일을 한번 열어 볼게요 자 이런 내용입니다
방가 위쪽에 보면 헤드 태그 안의 위쪽에 보면 우리가 방금 다운받은거
크리드 css 를 링크 걸어서 링크 태그를 이용해서 가져오고 있습니다
자 그리고 사용하는 방법입니다
자 우리는 면 분할을 할 때 만약에
음 여기 보시면 전체적인 구조가 컨테이너 쉽 이루 되있어요 클래스를 2개
쓰는거죠 컨테이너 쉼이 를 쓰고 다음에 레이블 썼습니다
자 컨테이너 12 나는 아까 12개 였죠
장 표를 잠깐 볼게요
10 두개로 나눠져 있는데 이 12 걸 다 쓰겠다 헤더는 대부분 가스 줘
그래서
컨테이너 라는 키워드를 미리 예약해놓은 키워드를 쓰시구요 그 다음에
언더바 쓰고 싶 이라고 적어주시면 되요 그러면 면 분할이 어떻게 되요
다스는 통으로 다 쓰는 면 분할이 자동으로 될 수가 있겠습니다
자 그 다음에 밑으로 쭉 내려와 보면
자 자 그리고 그 다음에 그리듯이 미 라는 게 있어요
자 그리드 12일 뭐냐면 마찬가지에요 12개를 다 쓰겠다
다음에 밑에 보시면 12개를 다 쓰고 나서 반드시 밑에다가 디비전 태그로
클래스 클리어 라는 태그를 어 저기 클래스를 하나 명시를 해 주셔야
되구요
그래서 요렇게 한 쌍을 이룬 다고 생각했음 되겠고요
요거 지우면 잠깐 쥐어 보면
요렇게 되는 거겠죠 이렇게 한 쌍을 이룬 겁니다
이렇게 그리드 언더 방 다음에 내가 묶으려는 숫자 입력을 해 주시고요
그렇죠 자 그 다음에 난 6개씩 먹겠다 그러면 12개 니까 가루가 총
12개 인데 6 깨짐 금연 총이 분할 2개의 덩어리 나눠지는 거 있죠
그래서
그러면 6개 6 개 묶어서 2개를 이렇게 표시할 수 있구요 이것도
마찬가지로 클리어를 명령을 주심 되어있구요
자 4개씩 나왔어요 그런데 총 몇 덩어리 3등으로 나오겠죠
그리고 나서 클리어 주시면 되고요 다음의 세 개씩 묶어 3 그러면 총 4
덩어리가 나오겠죠
그래서 클리어 명령을 쯤 되겠습니다 자 다음에 여기 보시면 포터가 있어요
프 터 드 마찬가지로 12개다 쓰는데요 그래서 12개 다 쓰고 마지막에
클리어 명령 엄만 주시면 되겠죠 그럼 그렇게 해서 큰 덩어리를 다 만들어
놓고 그 다음에 이제 사용자가 타이핑을 속성을 더 해 나가는 방식이에요
그리고 그 속성을 더 부여할 때 클래스 라든가 id 가 필요할 때는
그때그때 더 이렇게 클래스 같은 경우에는 여기서 더 많은 클래스를 추가할
수가 있겠죠
그래서 이제 헤드
다음에 루고 다음에 섹션이 원 섹션 투 섹션 쓰리
다음에 요정도 푸터 그래서 클래스를 더 추가한 다음에 그 추가한 클래스
선택자 를 이용해서
세부적인 속성을 css 속성을 부여 를 해줄 수가 있겠습니다
자 자 그러면 한번 10가지 다시 작업을 한번 해보도록 할게요 자 일단
사이트에서 다운로드 파일을 저장 을 해보도록 하겠습니다
되서 바로 수정할게요 저장하고 됐죠
그 다음에 새로운 문서 꺼내서
h10 조건에서 저장을 할게요
작가 다운로드받은 곳과 동일한 곳에다 저장을 하도록 하겠습니다
3시에 자 그러면 윈도우 탐색기 열어서 한번 확인해 볼까요
제대로 세팅이 되어 있는지 볼게요
예 방금 했던게 이거죠 페이지 30번 다음에 방금 다운받는게 그리드 씨의
쓰였습니다
자 이렇게 해놓고 나서 이제 여기다가 css 가지말자 그래서 링크 태그를
주고요
에서의 시티즈
요렇게 주면 되겠죠 자
그리드
css 예 이렇게 해서 내가 다음 받은 그리드 css 의 속성을 쓰겠다
라고 명시를 해 놓고요
다음에 내가 이제 새롭게 만들 스타일 여기에 들어가 겠고
잡아 d 부터 먼저 이제 크게 크게 한번 나눠보도록 할게요 자 보시면
결과 음을 화면을 먼저 볼까요
작열감 화면을 보면
예 내가 나누지 않았지만 미리 나누어 놓은 그리드를 가지고 그리드를
합치는 방식으로 해서 면 분할을 지금 해 나가는 겁니다
이쪽에 보면 이거는 전부 다 쓰고 있어요
근데요 전부다 수 있기 때문에 12개 그리드를 다 쓰는거구요
얘는 6개 6개 묶어서 총 12개 쓰고 있고 얘는 네 개씩 묶어서 면
분할을 해갖고 해주고 있고요
여기는 3개씩 묶음 검 자 이제 총 4개의 면 분할을 해주고
이 밑에는 전부 다 쓰고 있죠 그래서 12개를 쓰고 있는 것입니다
되시겠죠 자 그러면 어
자 이런 방식으로 한번 코딩을 해 보도록 하겠습니다 자 먼저 디비전
태그를 만드는데 애가 전체를 다 감쌀 거에요 그래서 클래스 태그로 해서
컨테이너
10 12 라고 명시를 할게요 자 자 그다음에 여기다가 drt 비전
태그를 또 넣어줍니다
작은데 예 클래스 는 어떻게 되냐면 내는 12 걸 다 쓸 거예요 그러면
무조건 그리드 하시고 언더바 하시고 12 개 다 쓰면 12 라고 이름을
클래스 이름을 주시면 되겠습니다
자단 의 애가 한번 끝났어요 그러면 반드시 뭘 해 준다
클래스 로 되고 클래스 로
클리어 라는 그 db 줘 온 클래스를 하나 명시를 해 주면 되겠습니다
자 이런 점에서 애가 이제 해당화 될 부분이고요
그 다음에 밑에
여섯 개씩 묶어 녀석을 또 줄 거에요 그러면
벽에다가 크리드 2
6개씩 묻겠다 자 여섯 개씩 묶으면 어떻게 되요
두 덩어리 있어야겠죠 죠 그래서 이렇게 두 덩어리를 만들도록 하겠습니다
자 다음에 4개씩 묶을 거에요 그러면 뭐 조금 촬영 할게요
네 개씩 묶어 니까 총 세 덩어리로 나오겠죠 12개의 총 12개 덩어리
니까
그래서 이렇게 이렇게 세월이 묻고 반드시 끝에 클리어 클래스 1 명치를
해주고요
자 하나만 될꺼예요 세 개씩 묶어 볼까요 자 3개씩 묶으면 그리드 언더바
다음에 3 을 입력해 주시면 되고 세 개씩 묶어 니깐 총 4 덩어리
나오겠죠
그래서 내 덩어리
그 다음에 어떻고 클리어 명령을 주면 되겠습니다
4 요렇게요 이렇게 하고 나서 그 다음에 맨 마지막 에프터 에 사용할
12개 짜리 덩어리 12개를 묶은 덩어리 하나 더 놓도록 학교나 주도록
할게요
이렇게 타투 보도록 하겠습니다 자 그 다음에 애 같은 경우엔 이제 헤더가
될 녀석이에요
그렇기 때문에 클래스명을 하나 더 추가합니다
이때는 내 마음대로 하나더 이름을 마음대로 되겠죠
얘가 헤더가 들려서 2 9 얘는 토토가 될 녀석이죠
예 클래스 명은 예전 했던거 다 시기 올려두면 클래스 명은 한테 그
안에다가 여러개를 무한 대로 해서 클래스명을 줄 수가 있죠
그때 이렇게 한 칸 0 100만 띄어 주시면 클래스 명 의 그리듯이 비즈
될 수가 있고
해도 될 수가 있고 두개로 나눠서 쓸 수가 있겠습니다
되시겠죠
자 이 상태에서 제가 음
여기 만약에 헤더
의자가 푸터 마 입력을 해 볼게요
4 유명 해주고 미리보기 브라우저에서 보기로 한 번 보도록 하겠습니다
이렇게 되죠 어 자 보시면 가운데 정렬이 되고 있어요
브라우저의 중앙 명의를 되고 있죠 내가 그러한 스타일을 주지 않았어요
하지만 지금 12개를 다 차장 거고요
그리고 전체적으로 컨테이너 12 전체적인 게 어떻게 마 진영 오토와
들어가 있겠죠 어디에 그리드 css 에 그래서 가운데 정렬이 이루어지고
있습니다

자 그러면 헤더를 만들었구요
게다가
좀 지우고 요 헤더 에다가
디비전 택을 하나 만들어서 여기다가
클래스 gmb 글로벌 내비게이션 발 하나 만들도록 할게요
ul
자 됐습니다 자 다음에 에이텍 않은 어딜까요
그러다가 gnb 1번
자 이렇게 넣어주고 메뉴는 한 대여섯 개 정도만 넣으면 되겠죠
2번 3번 4번 5번 이렇게 넣어 주도록 하겠습니다 자 잠에 결과를
하면서 보면 요런 구조 구요
자 그 다음에 로고 드 1 넣어 주도록 할게요
누구 2 자 클래스를
로고로 하도록 하겠습니다
그 다음에 디저트가 하나 만들까요 그래서 이미지 가로 가져가는데 일단 그
자리가 남는 거니까 로 구라고
텍스트로 넣어 주도록 하겠습니다 자 이렇게 해줬구요 그러면 이제 헤더
부분은 어느 정도 정리가 된 것 같아요
이제까지 해서 잘 다음에 섹션을 넣어주는데
셸 넣어 주는데 이 세션을 넣어주기 위해서
tv 저한테 글을 하나 더 만들어 주도록 할게요
그래서 이 디비전 태그로
여기 6 개 씩 분할 된 녀석을 한번 감싸 주도록 하겠습니다
그리고 이녀석의 이름을
몰라 까요 섹션 일러 까요 그냥 예
이렇게 되도록 할게요 자 됐고요 자 그 다음에 똑같이 아래쪽 얘도 똑같이
한번 감싸 주도록 하겠습니다
여기까지 겠죠 예 다음의 클래스 명 주도록 하겠습니다
* 수명을 액션이 번이라고 그냥 간단하게 약해요
자 마찬가지입니다 을 밑에도 똑같이 디비전 태그 주고요
이렇게 감싸도록 하고 예 클래스명을
섹션 3 이라고 해 주도록 하겠습니다 자 포터는 편리 영업소 경의를
낫도록 할게요 자 푸터 는 여기서 그냥 요렇게
db 저한테 그의 으
오피스 인포메이션 이라고만 타이핑을 해 놓고 마치도록 하겠습니다 자
전체적인 변해 알았으니까 한번 미리 보도록 할게요
요렇게 나왔고요 자 그 다음에
2학년 여기가 글자 한 번씩 넣을까요 세션 일이니까 섹션 2 써주고
패션 이니깐 섹시한 일을 하나씩 넣어 주도록 할게요
이렇게요
네 그렇죠 자 그러면 실제로 선이 안보여서 그렇지 분할 된게 보이겠죠 쎄
써 너는 6개 쉼 꿔서 이렇게 가로로 불알을 했습니다
초 이렇게 같은 선상에 섹션 원이 있고요 섹션 투는 3개를 분할 되었죠
색 4개씩 그리드를 4개 시 묶어서 삼사십 위에서 3동 이름 껐습니다 3
등을 묶어 없기 땜에
나는 분명히 디비전 2 블럭 태그 니까 아래로 떨어 졌는데 수평 구조로
작업한 게 없지만 뭐 에 의해서 위쪽에 있는 그리드 css 성격에 의해서
옆으로 수평 구조를 이루면서 쎄씨 아니 위의 3개의 덩어리가 배열되고 이
배치되고 있습니다
쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 마찬가지겠죠 센 사람은 4
덩어리 나누고 있어요 그렇죠 결과 보면 4 덩어리로 1 2 3 4 등으로
나왔고요
오피스 인포메이션 10 두 덩어리 묶어서 12 덩어리 표시 된거 확인이
됩니다
되시겠죠 자 이렇게 해놓고 나서 이제 그러면 나머지 학원 뭐예요
2 그 중간 중간에 내가 만든거 사용자 하시죠 맞는거 gmb 클래스
라든가 ul li 라든가 아니면 로고
이런 부분들을 하나씩 어허 활용을 해서
그 사용자에 맞게 css 를 하나씩 부여해 주면 되겠죠
그래서 하나씩 부여를 한번 해보도록 하겠습니다 먼저 전체 선택자 이용해서
그리고
어진을 영을 주고 올 수 밖에요 패딩도 영을 주도록 하겠습니다
그 다음에 li 태그 도 보이죠 그래서 li 태그의 되고
리스트 스타일을 다 빼 머리 도록 할게요
그 다음에 또 뭘 줄까요 am 크 태그도 있었죠 그래서 at 그자와
텍스트
데코레이션 이렇게 언더라인 다 빼 머리 께요
그래서 오늘 주도록 하고요 그 다음에 컬러도
좀 진한 그레이 로 바꾸도록 하겠습니다 원래는 파란색 풀어줘 제공하는
파란색이 줘 예
이렇게 되구요
자 그 다음에
벽이 보면 그리드 유기 있구요 그리드 사가 있고 그렇게 3인데 결과를
보면
크리드 유예 예 적 그래도 6가 사와 3일 밤 속 떨어져 있죠 그래서
공통적으로 다 아 조금 패딩을 줄게요
그리드 6과

댓글 0개

등록된 댓글이 없습니다.

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

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권에 문제가 있는 자료일 경우 impactlife@naver.com 으로 신고해 주시면 즉시 삭제처리하겠습니다.

Menu