Seoul Wiz 실전 HTML5 & CSS3 동영상 강좌 제 29강 그리드 레이아웃 - II > CSS

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

본문

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

 안녕하십니까 불수 입니다 자 오늘 html css 스물 아홉번째 시간

크리드 레이아웃 우 번째 시간을 진행하도록 하겠습니다 자 지난 시간에
우리가 그리드 시스템 플러그인에 대해서 알아 봤구요 단의 그리드 시스템
풀려고 이는 이용하지 않고 내가 직접 그리드 시스템의 그리드를 만들어서
사용하는 방법에 대해서 알아 봤는데 어째 조금 어려운 내용일 수도
있었어요 갑자기 뭔가 계산을 해야 되고 니까 하지만 하나씩 하나씩
따져보면 별로 그 그다지 어려운 내용을 아니었을 겁니다
자지 할 시간에 했던 것을 다시 잘 생각해 보시면 크리드 라인을 갔다가
그리드를 12개는 않았어요 그래서 하나당 한 그리드 다 가루에 사이즈를
60으로 잡고 그리드와 그리드 사이에 그 간격을
20 픽셀 로 잡아서 총 940 픽셀 풀 위드 풀 가로 사이즈는 960
으로 해놓고 작업을 한다.는 가정하에 작업을 했습니다
자 오늘 할 거 는 지난 시간과 거의 동일한 작업을 하는데요
지난시간 처럼 사이즈를 가로 사이즈를 딱 정해놓고 쓰는게 아시니라
가변 형이에요 즉 퍼센트 지를 주는 거에요
퍼센트 지로 브라우저 화면에 몇 프로를 크리드 르 에 가로로 쓸 것인지를
퍼센트 지를 정해 나서 브라우저 크기가 커지면 같이 웹문서 커지고
작아지면 같이 작아지는 그런 10 방식의 음 그리드 라인 을 만들어서
사용을 해보도록 하겠습니다
자 보시면 그래서 이름을 가변형 그리드 시스템이라고 합니다 그래서 가변형
그리드 시스템을 직접 만들어온 되서 지난 시간 똑같죠 똑같은데
어여 여기에 들어가는 1개의 1개의 그리드의 간격을 이제는 60 픽셀을
정해놓고 나 간격을 20 픽스를 정해놓는 것니라 퍼센트에 g 로
정해 놓고 작업을 하도록 합니다
자 10 바로 이제 코드를 가서 한번 살펴보도록 하겠습니다
자 오픈을 해서 소스 결 감을 수술을 한번 보도록 할게요
네 좋습니다 자 결과물을 보면 브라우저에서 살펴보도록 할게요
에 보며 이사해 짖어 여기서 브라우저와 크게 커지면 어떻게 되요 같이
커지고 있죠
각 그리드의 사이즈가 같이 커지고 있고 작아지면 어떻게 같이 작아지고
있습니다
이렇게요
자 그래서 사이즈를 가 변형으로 두고 어떻게 하면 그리드를 잡을까
자 소스를 보면 대략적으로 며 여기 픽셀니라 단위가 어떻게 퍼센트를
됐죠
그래서 퍼센트를 만드는 방법에 대해서 살펴보도록 하겠습니다
자 보시면 음 처음에 html 구조 는 지난 시간과 거의 대동소이 에어
컨테이너가 이렇게 있구요
다음에 그리드 12 12 개 다 준다는 얘기겠죠
다음에 그리드 6 6개씩 에서 두 덩어리로 나누어 쓰고요
그 다음에 네 개씩 묶어서 총 세 덩어리로 싸 사용을 하겠다
다음에 섹션 3 은 크리드 3 덩어리 쉬잉 묶어서 총 덩어리로 사용
하겠다
포터 같은 경우에는 12개를 다같이 쓰겠다 이렇게 명시했기 때문에
html 을 지난번 우리가 알아 봤던거 와 거의 대동소이 하고 다른게
없습니다 단지 다른거는 여기서 이제 css 에서
그리드를 위드가 1개의 위드 값을 설정하는 데 픽셀니라 6.3%
14.6%
22.9% 에서 쭉 나오는데 어떻게 해서 이런 수치가 나온 지 우리가
먼저 개념을 알아야 겠죠
조금 방법들에 대해서 하나씩 살펴보도록 하겠습니다
자장 프로 다시 왔어요 자 보시면
자 일단 이렇게 12개의 그리드를 만들 거에요 그러면 여기서 부터 시작을
해서 제가 볼게요
여기서 부터 시작을 해서 여기까지 총 옆으로 100% 겠죠
그죠 100% 에
에 100% 에 크리드 를 전체 만드는 데 요 간격 구토 락으로 줘 간격
간격을 2% 로 설정 해 놓겠습니다
2% 2%
그러면 이 간격이 총 1 2 3 5 6 7 8 9 10 11
저 11 개정
* 1개 에다가 좌우에 10% 자일 풀업시 더해서 12개로 계산을 할게요
그러면
애가 곱하기 의 12개가 나오니깐 총 24% 를 찾을 겁니다
즉 공백이 중간 중간에 공백이 몇프로 총 24% 를 차지합니다
되겠죠 자 그러면 100% 에서 공간 공간 2
중간에 공백이 24% 찾아 니까 이 그리드 실제 그리드 들이 차지하는
비율이 어떻게 되요
댁에서 2빈칸 76% 겠죠
그죠 자 그래서 그 계산이 나온 겁니다
댁에서 공간을 다 뺀 24% 빼니까 1 76% 나왔어요
자 76% 나온 값을 가지고 어떻게 해요 그리드 1개의 와 한계가 몇
퍼센트 몇 프로를 차지하는지 계산을 하기 위해서 12로 나눈 겁니다
그랬더니 6.3 3 3 3 3 이라는 숫자가 나왔어요
이게 3시 계절에 까지 자 그러면 1개가 몇프로 6.3% 이제 그리고요
간격은 옆으로 2% 라고 우리가 처음에 세팅을 해 놓고 갑니다
되시겠죠 자 다음에 그러면 나는 그리 라인 한계가 1 계셨어요 이렇게
하겠어요 1개
요거 한개 쓸 때는 당연히 왜 6.3% 에요
자 나는 두 개를 쓸 거예요 두개를 쓰면 6.3% 하나 쓰고 6.3%
하나 쓰고 뭘 써야 되어 중간에 중간에 공백도 떨어지겠죠
그래서 6.3
6.3 2개가 존재를 하고 요금 12.6 이 나오겠죠
거기다 이를 다르겠죠 그러면 14.62 나오고 있죠
그쵸 자 이런식으로 해서
1개 쓸 때는 6.3 2개 쓸 때는 몇 14.6% 3개 쓸 때 그리드를
세 개씩 묶어 요 그러면 1 그 한 덩어리가 22.9%
6개를 쓰는데요 그러면 47.8%
12개를 다 쓴 되요 그러면 9 17.6% 가 이렇게 나올 수 있겠습니다
되셨죠 그 표 보름 보시는 방법 아시겠죠 자 자 그러면 조 수취하지
나왔어요 좋지 않았죠
요추 7을 어딜 않아요 소스 코드의 다시 들어가서 1개 일때는 위드가
6.3% 두 개일 때는 14.6% 3개 일때는 22.9% 해서 쭉
여기다가 수치를 입력해 주시구요
나중에는 그냥 100% 사줬어요
자 주고 나서 주고 나서 우리가 이 그리드 123456 중에 이제 3개씩
묶을 것이냐 6개 식물 꽃 것이냐 네 개씩 묶어 신야 2개씩 묶을 것이냐
아니면 12개다 한번에 쓸 것이냐 에 타서 요 수치를 우리가 생각을 해
준 되겠죠
그리고 퍼센트를 작업을 하다보면 27 가 이제 어느정도 틀이 된 수치인데
이 수치로 하더라도 약간 시 레이 없이 깨질 때가 있어요 그러면 그
때마다 수치 소수점을 약간 측 수정하면서 올리거나 내리면서 레이아웃을
그때그때 조금씩 바꿔 주시면 되겠습니다
자 그리고 그래도 1 2 3 5 6 7 8 9 10 11 12 에는
플러터 를 달해 풀 틀어주고 마진 레프트 오늘 왼쪽에 여백을 2+2 다
좋습니다 이게 그 거겠죠 여백에 쪄요 배
저 자 다음에 그리드 이래 첫 번째 차일드 크리드 2 해 첫 번째 찰 등
3 5 6 7 8 9 10 11 12 에 첫 번째 여성 에는 마진을
레프트 이루어졌어요
여기서 레프트 이루는데 첫 번째 녀석의 맞은 레프트 는 이를 중 거에요
그죠
어 절에서 보면 어 예를 들어서 그리드 u 보셨어요
근데 이게 첫번째 차이를 두고 이게 두번째 차일드 줘
1st 차일드 첫 번째는 프 트 맞으니 가 아니라 벼슬 피를로 변경을
해 준 겁니다
이렇게요
그리고 나서 아래쪽은 지난 심 과 동일하게 쭉 같은 코드가 들어갈 수가
있겠죠 자 자 그러면 결과물이 어떻게 나와요
아까 보았듯이 퍼센트 해 지니까 이 제가 변형으로 브라비아 커지면
커질수록 이렇게 같이 늘어나는거 자지 1시간 했던 것 잠깐 다시 살펴보면
지난 시간에 이런 게 아니었죠 지난 시간에는
자 브라우저에서 볼게요 브라우저와 커진다 하더라도 가운데정렬 만 될
뿐이지 같이 웹문서 컨텐츠 자체가 커지거나 하지는 않았습니다
예 그죠 가운데 정말 될 뿐이에요 커즈 같이 들어가지 않습니다
하지만 이제는 가변형 해요 그래서 브라우저와 커지면 커질수록 늘어나고
여 쪼금 해주면 다시 쪽으로 조금 해지는 요런 가변형 그 프라우 적을
쪽엔 문제를 만들 수가 있겠습니다
자 그러면 이거 한번 같이 한번 창 적도 코딩을 해 보도록 하겠습니다 자
코딩 한데 음
지난시간 했던 거 하고 중복된 코드가 많이 있겠죠 그래서 조금 재활용할
코드들은 재활용을 해서 사용을 하도록 하겠습니다 자 새로운 문자
만들었구요
여기다가 저장하고 할까요 저장을 하고 갈게요
잠시 미리 되겠네요 예 됐죠
자 옆에 좀 놓고
재활용할 코트 들은 좀 제 활용하도록 하겠습니다
자 먼저
음 전체선택 해가지고
마진을 되고
스타일 팁을 안됐네요
자 전체 선택자 가지고 선택한 다음에 마진을 0으로 주도록 하겠습니다
자 그 다음에 패딩도 영을 주도록 할게요
자 됐습니다 자넬 아이를 7 건데 li 의 속성 리스트 스타일을 갖다가
어떻게
스테 갔다와 다 빼 벌이도록 하겠습니다
자 그 다음에 a 태그도 쓸 건데요 a 태그에 텍스트 데코레이션 이용해서
그 뭐야 밑에 언더라인 다 빼 주도록 하겠습니다 자 이게 됐고요
자 그 다음에 컨테이너
12
뭐 아까 없는거 같은데 예 자 자 그 다음엔 우자 중에 쓸 거구요 우도
미리 이렇게 탱고 그러겠습니다 잘 o 안에 결과물을 보면 로한의 어떻게
해요
캉 요소들을 다 들어갔죠 그래서 예 오버 플로어 오버플로우
어떻게 히든 줘야 되겠죠 자이덴 주구요
자 2대를 갔다가
100% 로 정하도록 하겠습니다 그러면 브라우저 크기에 상관없이 브라우저
크기가 크면 큰 웹문서 만들어주고 자금 하면 자그만 의문스러운 만들어질
수 있겠죠
자 그 다음에 중요한 거죠 여기서 대충 한 거죠 자 코드를 좀 재활용
할게요 자 크리드 1 2 3 5 6 7 8 9 10 12
자 이건 어떤 공식이 위해서 나온 거에요 결과를 보면
간격을 입 2% 를 했을 때
2% s 때 12개의 간격을 존재한다.고 봤을 때 그 간격이 총 차지하는게
24% 나 뭐 지금 76% 는 이 안에 있는 그 그리드 본문 내용
그리드가 찾아 거고요
그것을 12개로 지금 나눌 거니까 12 로 나눠서 한계가 2.3% 가
나왔죠
자 그러면 1개 있을 때 그 리자인 1개 스탠 6.3% 인데 2개를 써요
그러면 6.3 곱하기 2 해서 12.6% 가 아니라 12.6% 에다가
2개 있을 때는 중간에 공백이 않아 깨야 되니까 플러스 2% 해 줘 되죠
그래서 1전류 프로 3개 일때는 1 2 3 개 를 쓰는데 공백이
2개가 들어 가죠 그래서 6.3% 고파 게 2.3% 곡 6.3% 곱하기
3
자 6.3 곱하기 물에서 나온 수치의 2% 중간중간에 공백을 더 덜
되죠 2% 두 번 더 적을 더 해 줘야 되겠죠
그래서 어 3개 쓸 때 22.9% 나온 겁니다
이런식으로 에서 수치를 다구 하구요 이 수치를 어디로 가져가요 소스를
가져와서 다 이렇게 하시 입력을 해주시면 되겠죠
자 이거 그대로 좀 재활용을 할게요
회사 라 를 넣었습니다 자 그 다음에
그리드 하나하나마다 에 예능 아들이 얘네들 그리드가 플로트 레프트
속성에서 왼쪽으로 정년은 방향이 돼야 되겠구요
그 다음에 얘네들이 래프트 왼쪽에 2% 에 공백을 줄겁니다
그래야지 2% 여기에 2% 들% 들어가고 다 공백이 들어갈 수가
있겠죠
그래서
이 프로의 공백을 주기 위해서 여타 클 곡 개요
그리고 와서 여기다가 이렇게 좋습니다
이 거야 라는 미드 줘 예
자 그 다음에 이렇게 죽은 왔더니 문제가 있죠 자 첫번째 와서
타 2% 씩 주고 났어요 근데 첫번째 여성은
좀 애매 아주 수치가 그래서 얘는 약간 줄게요
줄여주기 위해서 얘네들은
다시 첫번째 그리드의 첫 번째 녀석들은 어떻게
맞은 레프트 를 2% 에서 1% 로 수정 해 준 겁니다
이렇게요
자 이렇게 세팅을 다 이렇게 해놓고 요다 그 다음에 밑에 아랫부분은
그대로 텍 쪽쪽이 코딩을 해 나가면 되겠죠 그래서 html 태그를 좀
가져오도록 하겠습니다
그리고 이야기는 그냥 코딩을 한번 해 볼까요 자 보시는 분들 동영상을
보시는 분들은
코딩을 하는게 낫겠죠 그래서 클래스를 주는데 얘를 컨테이너와 12 라고
있도록 할게요 자 애가 큰 덩어리 구요 안에
div 클래스
로로 주도록 하겠습니다
자 여기에 한 덩어리 씩이나 가는 거겠죠 저기다가 div
그래서 클래스 내는 헤더가 될 녀석이니까 그리듯이 b 를 쓰도록
하겠습니다
다음의 클래스 속성은 하나만 부여할 수 있는건 아니고요 앵 게를 보일 수
있죠 그래서
헤더 라고 또 하나 부여를 해 주도록 하겠습니다
자 그 다음에 여기다가 div 해서
클래스 지앤비 라고 해 주도록 하겠습니다 자 지인 b 에는 뭐가 들어가야
되요
리스트가 들어 가야 되겠죠 그래서 에라이 주고요
4
이렇게 해 주겠습니다
자 이걸 좀 카페에서 쓰면 되겠죠
자수 일정한 좀 바꿔 놓을 게요
자 됐구요 그러면 한 덩어리다 만들어진 거고요
자 여기에서 로고가 나이트 되겠죠 그래서 로 9
tv 전 태그 해서 클래스 르고
만들어 놓고요 안에 tv 저한테 그 tv 태그 놓고 로고 라고 해
주겠습니다
그렇죠 자 한 덩어리 다 만들어 놓고 그 다음에 덩어리 또 노 겠죠
그래서 집이죠
클래스 로 5
자 db 절 그리고
마음이 급하네요 그쵸 자 에서 클래스
자 예 이름은 얘는 6 덩어리 춤 꿀 거예요 그래서 그리드 요구로 해
주도록 하겠습니다 자 그리고 얘 이름 클래스 이름을 섹션이 룰로 하나 더
만들어 놓고요
이전 쓴 다음에
자 그리드 유기 줘 클래스 어떻게 그리드
예 아 여기 잘못했네요 여기가 그래도 여기 앉아
전 순한 요 코딩을 사용했죠
이렇게 되겠죠
자의 섹션 2 여기가 색상니라 여기가 섹션 겠죠
이렇게 됩니다
자 이렇게 되면 되겠죠 자 그래서 6개씩 묶음 두 덩어리 큰 두 덩어리로
나는 녀석이 구요
다음에 이번에는 4개씩 그리드의 네 개씩 묶어서
만드는 녀석을 만들도록 하겠습니다 클래스
얘는 누가 붙고 요다 4
또 섹션 8
일니라 2가 될 꺼구요
그 다음에 디비전 태그 클래스
그리드
네 개씩 묶어 야지 3 덩어리 나오겠죠
섹시한 2가 될 거구요
이렇게요
자 그 다음에 좀 폭소 했을까요 숟가락에 아프네요
자 이렇게 해도 얘는 섹션 3 이 되겠죠
얘는 그리드 3개씩 묶어서 내 덩어리가 나올 녀석이에요
그래서 섹션 참
이렇게요 그래서 섹션 상을 만들어 놓았구요
다음에 또 뭐가 있나요 푸터 이제 마지막 로
제 iv
그래서 제 무제한 태그 들어가구요
자애는 패스
그리드 12 12 개 다 쓰면 되겠죠
자 그리고 예 클래스명 터 하나더 줄게요
티비 전해주고 오피스 인포메이션
예 이렇게 좋습니다
자 그럼 나서 미리보기 한번 해 줄까요
예 이렇게 됐죠 이거 갔다가 이제 그리드를 이용한 면 분할은 다 된거예요
여기서 이제 세부적인 속성들을 넣어 줘야 겠죠 그래서 세부적인 속성들
하나씩 넣어 증자
자 먼저 헤더가 있죠
헤더 그 데루 9
로 거에 div 태그 먼저 놓도록 하겠습니다
해도 에
네로 고요
그랬으니까 이렇게 예 그렇죠
자 헤더에 러브 같은 경우에는 자위 들을 60% 를 줄게요
60% 60% 좋고요 그러면 100% 에서 60% 40% 좌우로 20%
c 의 공백을 나눠 가질 수가 있을 것 같습니다
자 자 그다음에
자 마진을 주도록 할게요 마진은
마신 0 오토를 조적 중앙 정렬을 시키도록 하겠습니다
자 그 다음에 높이를 줄까요 높이는
높인 어떻게 이미지 놓으면 채울 텐데 대략 1 50 픽셀 정도 주도록
할게요
자네 라인의 it's 도 50p x 루 주도록 하겠습니다
작열감 을 볼게요
예 나왔구요
자 그 다음에
해 줘 헤더의
자 헤더가 중앙동 열이 되겠죠 그래서 마지막
0 픽셀을 명을 주고요
g 냄비 내비 개전 바자 dmb 의 미드
비트를 60% 정도 주도록 하겠습니다
안에 중앙 정 열악해서 마진 풀리자
오토 주구요 자네 포도 패턴
까다 같으면 1px
슬라이드에 카드 중 다해서 요정도 색상을 주도록 하겠습니다
자 그 다음에 헤더에 진 비 맞는게 아니라 뭐가 있어 내면 uld 있고
윤 찍고 애라 해도 있죠 예 그렇죠
자유 엘은 오버 플러 점거 히든 줘야 되겠죠 수평 구조 맞춰 되니까
다음에 패딩은 17세 정도 주도록 하겠습니다 자 lif lot 속속 먼저
줘야 되겠죠
리포트 주면 되겠구요 다음에 위드를
메뉴가 여기 봄 5개 니까 하나의 20% 씩 차지하면 되겠습니다 자 폰트
사이즈
1.5 우 예 진하게 타 코딩 텅 것들 다시 지어 루나 한다.는 겁니다
지금 스트

댓글 0개

등록된 댓글이 없습니다.

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

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu