Seoul Wiz 실전 HTML5 & CSS3 동영상 강좌 제 13강 CSS속성-IV > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 13강 CSS속성-IV

본문

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

 안녕하십니까 불수 입니다 자 오늘 13번째 html css 열 세번째

시간 css 속성
네 번째 시간을 갖도록 하겠습니다 자 오늘이 마저 css 속성을 알아보는
마지막 시간입니다
자 오늘은 두가지 딱 두가지 알아보는데 플러 속성 하고 그 다음에
그래야지 어느 적통을 알아보는데요 그러렴 속성 그다지 중요한 건 아니고요
중요한 것은 플루트 속성을 우리가 이해하는 데 어 포커스를 맞춰서 학습을
진행해 주시면 되겠습니다
자 플러 속성을 먼저 살펴보도록 할게요
자 플러 속성은 포지션 속성과 함께 요소의 위치를 설정 하기 위한
속성입니다 너 그래서 포지션 숙성 지난 시간에 했던 우리가 포지션 속성을
잘 살펴보면 일단 스태틱 이라는 포지션에 속성값이 있었구요 다음에 레일러
티브 어업 셀로트 픽스드 라는 그런 속성 값이 있습니다
다 모두 자 어떤 태그의 위치를 설정 하기 위한 속성 값들이 얻죠
자 플로트 는 레프트 학의 라이트 크게 두가지로 나눠지는데
어떠한 태그를 왼쪽 내리지 지금요 쪽 벽이 있으면 왼쪽에 정렬이 되고
있습니다 이럴 때 우리가 레프트 속성 값을 줄 수가 있겠구요
자 다음에 세컨드 왼쪽으로 같이 또 정렬 되겠죠 그래서 여기도 마찬가지
래 프 트 를 중국 했구요
자람이 쪽을 보시면 두번째 보시면 얘는 오른쪽 벽에 정렬이 되고 있습니다
그래서 이거는 플루트 속성을 오른쪽 라이트를 중 거고 세컨드 도 라이트를
준 겁니다 자 코드를 보면 코드를 보면 더 쉽게 이해가 되실 수 있을
거에요
코트로 바로 넘어가도록 하겠습니다
자본을 해서 자 보시면
자 요런 구조는 자 자 html 구조 전 굉장히 간단하게 되실 것 같아요
자 보시면 div 에서 로 1번 div 로 이번 으로 구성되어 있고요 그
div 안에 또 두 개의 div 가 존재합니다 이름은 퍼스트 세컨드 또
퍼스트 세컨드 되어 있습니다
자 이런 심플한 구조 가지고 이렇게 많은 어떻게 만드는지 살펴보도록
합니다
자 먼저 로 1위 에어로 이름 뭐냐면 요 김 덕 2
뭐 일은 가루가 500 픽셀 의 맞음 이영호 투어 가운데 정렬이 냉
가운데 정렬이 되고 있겠구요
다음에 보도는 5 픽셀의 회색 솔리드 타입 으로 오버플로우 힐 좋습니다
잘라 메루 일 안에 있는 1st 1st div 절 퍼스트 2 녀석이죠
저희의 는 가로 세로 다 100 이구요
다음에 플루트 왼쪽 정렬을 하고 있으면서 왼쪽 벽에 붙어 있구요
다음에 마진 코픽스 다음에 패딩 o 픽스를 주고 있고 보도 보면 헤드
팩스를 주고 있습니다
자 담에 두번째 나누게 3 컸는데 자
div 는 블럭 형태로 이 원래는 스타일 시트를 정릉 안하면 1st 와
세컨드 가 위아래로
세컨드 가요 밑으로 이렇게 들어오겠죠 하지만 플루트 속성을 좋아지고
세컨드 도 레포트로 줬어요
그러면 1st 옆으로 해서 계속 왼쪽으로 공간이 있다면 공간이 없습니다
또 떨어집니다 하지만 공간이 있다면 계속해서 그전에 사용했던 태그
뒤쪽으로 계속해서 쭉 옆으로 붙여 나갈 수 있겠습니다
이때 꼭 여러분셔야 될것 이렇게 우리가 플루트 에서 레프트 정렬
플루트를 속성 하셨으면 얘를 감싸고 있는 거 감싸고 있는 태그 에다가
반드시 오버플로 히즈 늘 주제 됩니다
꼭 이건 암기를 하고 넘어가세요
내가 어떠한 태그의 플루트 속성을 줬다
그러면 나를 감싸고 있는 외가 바깥쪽 태그의 다가오고 블러 힌트를 준다
라고
어 그 암기를 하고 계시면 되겠습니다
자 남의 두번째꺼 볼게요 두번째 꺼는 500 픽셀의 마린 영화요 두번째
6 녀석이죠
좀 큰거 거기서
가로 셀과 1st 가로 세로가 100 이구요
이번에는 오른쪽 에 붙인 돼요 그래서 오른쪽에 붙였습니다
다음에 맞은 명 좋구요 자 세컨드 도 마찬가지 를 알트 또 붙였어요
그래서 그 옆으로 해서 또 붙여넣을 수 가 있겠습니다
자 그래서 포지션 속성과 함께 플루트 속성 사용할 방법을 레프트 점령할
건지 라이트 정도라 건지
꼭 잘 사용을 사용할 방법을 꼭 잘 숙지 를 하시면 되겠습니다
자 다음에 플러 속성 포지션 소통과 폴더플러스 정 더 알아 볼게요 자
13 다실 ex 이를 통해서 더 알아보도록 하겠습니다
자 이런 구조가 나오는데요
그 자
자 보시면 html 태그는 div 로 크게 감싸고 있어요 레브르 그리고
그 안에 이미지가 있고요 그 안에 p 태그가 이렇게 존재합니다
그쵸 그래서 p 태그 안에는 그자가 쪽지가 있고요
자 이거 이제 스타일 시트를 어떻게 정렬해 인지 봄 다자 렙 태그가
이렇게 있어요
닦아도 감성 인거 얘는 800 이고요 가운데정렬 해주고 있고
바깥쪽을 1 픽셀로 보도를 주고 있구요 오버플로 는 힘들어지고 있습니다
캣 잉 은 c 픽셀 주고 있고요 그래서 바깥쪽에 이렇게 정열을 했고요
자람에 레바 그 태그 선택자 img 이미지 넣는 태그 선택자 를
선택을 했어요
제일 갖다가 레프트 를 준대요 얘를 왼쪽에 붙였고 요 그 다음에 마진을
쉽을 좋습니다
이렇게 주고 나서 보면 어 그림이 왼쪽으로 붙었죠 그러면 글자는 그
옆으로 자동으로 개 풀어 나올 수가 있습니다
만인에게 레프트 가 아니에요
그러면 이미지가 피가 블럭 태그 줘 그럼 어떻게 밑으로 따로 내려와서
블록 태그로 존재 하겠죠
즉 이렇게 존재를 합니다 근데 나는 옆에 돕고 싶어요 그러면 얘를
왼쪽으로 붙이는 플루트 속성을 줍니다
그러면 급히 태그 아크 옆으로 따라서 붙여 어 나올 수가 있겠습니다
이렇게요
음 많이 사용하는 방법 이니깐 꼭 잘 알아두시면 되겠습니다
자 다음에 플러 속성 그걸 가지고 이런 전체적인 우리가 홈페이지를 만들면
거의 대부분 다 이런 구조 줘 헤더가 있고요 그 다음에 포터가 있고 이
아래 컨텐츠 섹션에서 네비가 있구요 그 다음에 컨텐츠가 있습니다
컨텐츠도 이쪽엔 빈 공간에는 배너 들이 존재할 수도 있고 있구요
어 자 이것을 한번 살펴보도록 할게요
자 이거는 제가 어 그 코드 리뷰만 해드리고 여러분이 반드시 꼭 한번
해보시기 바랍니다
요 그렇게 홈페이지를 나온 자전적인 레이어드 반드시 딱 그러면 일단은
css 와 html 을 허위 대부분 뭐 기능을 다 알고 있다
거제 여러분이 조금씩 부족한거 말 채워넣으면 마스터 했다고 할 수 있을
정도로
음 그 정도 실력이 되는 겁니다 그래서 꼭 직접 여러분이 혼자서 처음 수
까지 해보시고 안되면 또 왜 안되는 지 고민도 해 보시구요
자 전체적인 구조를 보니까 일단 크게 div 태그로 감싸고 있습니다
자 감수하고 있고 그 다음에 헤더 div 태그 한다. 한덩어리 있구요 이게
요거 쪽이 안에
다음에 네비가 있습니다 내비 div div 덩어리가 있구요 내비게이션이
요기 메뉴바
다음에 내비 있습니다
렛 인데 뭘 감싸고 있냐면 컨텐츠와 배너를 감싸고 있습니다
다음에 푸터 가 있네요 맨 마지막에
그래서 전체적으로 보면 큰 덩어리 헤더가 있고요
다음에 네비가 있고 랩이 있고 부터가 있는 내 덩어리 로 그 정도 있고요
렙을 또 그 아래 큰 덩어리 컨텐츠와 배너 라는 큰 덩어리로 분류 해
나가고 있습니다
자 여기 볼게요 먼저 먼저 div 를 보니까
모든 div 에 대해 져 다 적용이 되는 태그 선택자 를 이용해서 속성을
주고 있습니다
자 보존은 1 픽셀이 돼요 그래서 모두 운 div 타 ta 의 구조
애들이 div
보존은 1 픽셀로 해서 주고 있구요 페이징 도호 픽셀 마진도 픽스 그
다음에 모든 글자의 정렬은 센터 가운데 장렬하게 되어 있습니다
자 오랜만에 컴퓨터 볼게 컨이 뭐예요 요 바깥쪽에 전문 전 태그를 다
감싸고 있는 가장 바깥쪽에 있는 여성입니다
얘는 가루가 800 이고요 마진 이영애 오토 레어 제 6 8 맥 의
가운데 녀 브라우저 가운데 정렬을 하고 있습니다
자 그 다음에 오브 플라워 희진을 좋구요
잠의 해 달래요 헤더는
이 부분이죠 이 부분 이 부분은 가루가 781 줬구요
그 다음에
높이는 백을 좋습니다 자 꽉 채우는 데 왜 괄호를 780만원 냐 면
전체가 802 줘 800 인데 패딩의 전 div 태그에 오픽 쎄씨 패딩을
줬어요
그리고 마리도 좋습니다 그래서요 값들을 감안해서 여기서 802 아니라
780 으로 수 철판 줄인 거죠 자 그리고 헤다 욕 글자를 가운데정렬
시키기 위해서 어떻게 높이와 라인 할 특가 붓을 동일한 수치로 좋습니다
그러면 가느 정렬이 되겠죠
그 다음에 네비게이션 욕 이동을 합니다 요 내비게이션은 덩어리는
마찬가지로 가루는 780 좋구요
넘 에 높이는 백을 좋습니다 자 o 플러그 희생을 좋고요
자 내비 안에 넵 이안의 유에 리스트 아이템이 있죠 그래서 내비 안에
요렇게 리스트 아이템인데
애가 쭉 수 수직 구조로 대로만 되고 이렇게 수평 구조로서 가야겠죠
그렇게 하기 위해서는 li ul li 태그의 위드 값을 130 팩스
높이를 40p x 자 라이트를 가운데 주기 위해서 언 오페어 똑같이
40대 좋구요
텍스트 온라인 센터 좋고 리스트 타입은 점점 있어 안되니깐 오늘 줬구요
다음에 플루트를 레프트 를 좋습니다 그래서 출 직후 조 가 아닌 수평
구조로 나을 하게 되어 됐구요
플루트를 레프트 를 주기 위해서는 예를 감싸 그려서 내비 애저 에다가
오버플로우 휘 등을 좋습니다
어 이건 이렇게 줘도 되겠죠 바로 위쪽에서 좀 되니까
이렇게 해서 워 플로 를 여기가 네
뒤쪽으로 옮기는게 조금 더 정석적인 표현방법이 겟습니다
되시겠죠 자 그 다음에 음
넴 그 다음 몸을 긁고 없네요 보도 값 좋구요
자 다음에 levi's 엘르
래 분 여기 저기에 컨텐츠와 배너를 감싸 군데서
자 랩은 781 에드 오버플로 힐링을 좋구요
그 다음에 컨텐츠 콘텐츠가 이쪽이 줘 컨텐츠는
600 의 3대 그 다음에 플루트 레프트 정면 왼쪽 정렬이 에요
콘텐츠도 div 태그 기 때문에 태그 줘 블럭 상태기 때문에
원래는 든 스타일 시트를 적용하지 않으면 컨텐츠가 나오고 그 밑으로
배너가 이미 틀게 나오겠죠
하지만 이것을 수평 구조로 가기 위해서
어떻게 했어요 플러그 콘텐츠 에다가 플루트 레프트 주고 벤 에다가 플로트
래프트 좋습니다 그리고 플로 드래프트 주위에서 얘네 를 감싸고 있는 태그
누구 렙 태그 에다가 오버플로우 히 등을 좋습니다
다음 에프터 에어포트 도 마찬가지고 781 베개 라인의 트 배우 저서
가운데 정렬 시켰구요 그죠
그래서 전체적인 구조 하나씩 따져보면 한덩어리 한덩어리 헤더 덩어리에
내비게이션 덩어리
랩 덩어리 프루트 덩어리 한덩어리 한동안 따져보면 별거 없습니다
그래서 여러분이 직접 처음부터 끝까지 내가 원하는대로 이런 전체를 예약을
잡고 그 다음에 뭐예요
그 안에서 다시 세밀하게 하나씩 한다. 말에 한다. 이렇게 쪽에 나가면서
레이아웃을 잡을 수 있어야 되겠죠
그래야지 홈페이지를 우리가 완벽하게 만들어 낼 수가 있겠습니다
꼭 다시 한번 처음 수 끝까지 꼭 해보시기 바랍니다
자 그 다음에 오늘 알아볼 마지막 그래야 되는 수상 해요
자 css 에서 그라데이션을
이렇게 출 수가 있습니다 이렇게 그 두 가지 이상의 색을 줄수 있는데
사람이 그 색상 값을 여기 밑에 보면 코너 국내 폭정에 있죠 이 복잡한
코드를
26 갯수 코드를 보면서 색깔을 우리가 예상하게 힘들겠죠 그래서 실제로는
값을
이렇게 우리가 입력하지 않고 이런 뉴트 utter 팀메이트 css
그라디언트 제너레이터 라는 이런 유용한 사이트를 통해서 자동으로 소수를
만들어주는 사이트 에어 그 사이트를 통해서 우리가 그 그라데이션을
표현하곤 합니다
그리고 잠깐 보시면 요 사이트 한번 들어가 볼까요
컬러
다 컸
그라디언트
에디터 예
자 여기 들어가서 내가 원하는 색을 만드는 거에요 그쵸
자는
나는 이렇게 두가지만 해볼게요
이런 세계에서
뾰 건 밝은 노란색으로 만들고 싶다
이렇게 어
자요 색상도 변경을 시키겠습니다
그 다음에 요건은
똑같은 색으로 또 변경을 하겠구요 자 다메요 2개를 이렇게 떨어졌나
되는데 뭘 좀 부축해 요 예
그래 대신 거의 안 된 것처럼 보이겠죠 자 이렇게 했고 나서 보면 바로
옆에 이렇게
어떻게 되어 코드가 자 정도로 작성이 되어 있습니다
그래서 이 코드를 복사 해서 가져와서 바로 쓰면 되는데
자 먼저 우리가 하는 코드를 좀 볼게요 소주를 볼게요
그라디언트 는 이처럼 바로 같다 소수를 쓰면 되는데 그거 말고 다른
중요한 01 있습니다
자 보시면 이거 제가 실행을 시켜 볼게요
저런 내용이 나오죠 요 만든걸 시켰죠 이제 제 앎이 태그 했어요
어제 div 태그를 써서 ul li 태그 같은데 왼쪽으로
슈퍼 구조로 가야 되니까 플루트 레프트 를 좀 되겠죠
드 보시면 플러스 애플 좋구요 그 다음에 마진 영어 터져서 감정을
시켰구요
자 이거는 이제 펼 문제 갈건데 그라데이션을 주는게 여기서 또 시작됨
데이 제 8조에서 역과 쭉 되는데
그라데이션을 주기 위한 코드가 한 줄니라 굉장히 많죠
그러데이션 그러데이션 그래 진 그저 대선 그려지는 들어 있고 그 앞에
이상하게 처음보는 코드들이 케 들어가 있습니다
그라디언트 요 태그 하나만 이렇게 써 주면 될거 같은데 이상하게 앞에
요런 내용이 있습니다
자 이것을 우리가 벤더 프리픽스 라고 하는데 자 이게 뭐냐면
그라데이션이 이렇게 요런 기법들 css 가 css3 줘 css3 를
음 발표를 하고 나서 모둠 브라우저에서
css3 의 모든 속성과 속성 값을 다 지원을 하지 않습니다
못하는 거죠 그래서 각 제조사 브라우저를 만드는 각 제조사에서 최대한
대로 많이 반영을 하려고 하지만 it 쪽 미숙한 부분이 있어요 그래서
어떤 브라우저에서는 이 기능이 되는데 어떤 불어주는 이 기능이 안 되고
그런 경우가 있습니다
그래서 그런 걸 막아 주기 위해서 이 앞에 이렇게 모질라 자전거 왜 키트
구글 그 다음에 오페라 쪼 ms 쪽 재조사 품 벤더 프리픽스 태그를
이렇게 넣어주면
넣어주면 제조사 브라우저에 상관없이 모두 다 그 갚지 적용이 될 수가
있겠습니다
이걸 우리가 된 더 프리픽스 라고 합니다 그래서 각 브라우저의 해당되는
값들을 다 넣어주는 뭐 이렇게 코드 같은 내 길어 지죠

어 그래서 아까 사이트 보면
벤더 프리픽스 왜 키트 구글 용 코드 구요
모질라 용 코드 다음에 오페라 은 코드 다음에 여군은 ms 코드 다
이렇게 따로따로 코드 존재합니다
이런 같다 우리는 그냥 갖다 쓰면 되요 카피해서 어떻게 카피 버튼이 있죠
카피 버튼에서 카피할 수 도 있고요 카페에서 어디 여기다가 그냥 바로
붙여 놓고 쓰면 되요
이렇게 그냥 바로 붙여 놓고 걸스 사용될 수가 있겠습니다
이 뒤에 주석처리 에서 설명도 나오겠죠 크롬에서 쓰는거 오페라에 쓰는가
인터넷 익스플로러의 쓰는거 자와 아
자 그래서 백그라운드를 실제로 적용하는 뭐 는 우리가 고민하지말고 어떻게
한다.
이러한 사이트를 통해서 바로 코드 자동 코드를 생성해주는 사이트를 통해서
우리가 그 코드를 얻어낼 수 있고요
그걸 우리가 카피 에서 바로 내가 사용하는 문서에 테스트에서 사용하면
되는데 이때 코드가 이렇게 말하지 읽어 이건 모태는 그런다
벤더 프리픽스 아직 모든 제조사에서 제공하는 브라우저에서 css3 의
모든 기능을 다 제공 하지 못해요 그래서 이 앞에 이렇게 벤더 프리픽스
를 주면 그 지원하지 않는 브라우저 서 지원이 가능하게 됩니다
그래서 우리가 벤더 프리픽스 를 이용하곤 합니다
자 그래서 그라디언트 까지 쭉 다 알아봤는데 중요한 거 그래 저는 그렇게
많이 쓴 일을 조금씩 쓰이는 이를 들어가긴 하는데 아직은 많이 쓰이는
일이었기 때문에 여러분들이 사 용 방 말단 좀 가볍게 알아두셔야 생각
없을 것 같고요
중요한 것은 플루트 속성을 이용해서 포지션 손을 이용해서 이렇게 이런
레이아웃을 전체적으로 여러분이 언제든지 자유자재로 만들어 내실 수 있어야
된다는 거 그 그 부분이 가장 중요합니다
그래서 오늘 했던 내용들을 다시 한번 여러분의 쭉 리뷰를 해 보시고요
음 다음시간에 이제 어 웹페이지 만드는 것에서 한번
어 착 씁 을 진행 하도록 하겠습니다
자 오늘 잡은 여기서 마치구요 반드시 꼬 코딩을 직접 해보시기 바랍니다
자 감사합니다

댓글 0개

등록된 댓글이 없습니다.

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

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

Menu