Seoul Wiz 실전 HTML5 & CSS3 동영상 강좌 제 26강 CSS3 규칙 > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 26강 CSS3 규칙

본문

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

 안녕하십니까 볼수 있는 다 정말 html css 26번째 시간 cs3

규칙에 대해서 살펴보는 시간을 갖도록 하겠습니다 자 지난 시간에 우리가
지지난 신앙과 지 지난 시간에 css3 에서 지원하는 애니메이션 트랜지션
트랜스폼 등과 관련된 정보들에 대해서 살펴봤는데요
그런 정보들이 그렇게 뭐 중요하게 생각하거나 그런 건 아니라고 했습니다
자 오늘 살펴볼 css3 는 그렇게 중요하거나 아니면 또 그렇다 해서
소홀히 이어질 역 이어질 여정은 아니고요
여러분들이 알고 계셔야 될 내용들입니다 그래서 이 기능들을 알고 있으면
굉장히 편리하고
그래 요즘은 다양한 디바이스 환경에서 내가 만든 내가 제작한 웹브라우저
웹문서 가 정확해 보여지기 위해서 여러가지 기법을 쓰고 있죠 그래서
우리가 흔히 말하기를 반응형웹 이라든가 모바일 웹 등을 어 제작을
하는데요
그럴 때 사용되는 그 기법들이 오늘 배우는 기법들이 입니다
그래서 오늘 하는 내용들은 여러분들이 좀 중점적으로 잘 학습을 해서
정리를 해 주실 필요 해주실 필요가 있겠습니다
자 오늘 할 내용들을 먼저 보면요
첫 번째
css 화일을 우리가 그동안 lh 팀의 문서 안에서만 작성을 했는데요
불릴 을 시켜 보였고요
자매 그것을 임포트 라는 규칙을 에 의해서 한번 또 분리를 시켜보고
다음에 미디어 규칙이란 거에 대해서 살펴보는 시간을 갖도록 하겠습니다
자 먼저
css 파일을 분류한 방법입니다
자 우리가 그동안 이렇게 어떠한 문제를 만들어요 만들면 html 태그를
이렇게 쭉 작성을 했죠
헤드와 바디 태그 로 크게 나누어 져 조 착석을 했습니다
자 그럼 와서 이 안에다가 헤드부분에 다가 우리가 뭘 입력 왜냐면
스타일이라는 태그를 좋고요
그 안에다가 선택자를 활용하고 속성과 속성 값을 이용해서 스타일시트
css 스리 문제를 html 문서 안에 다가 넣어 좋습니다
근데 css 화일 문을 내 달게 넣다 보니까 너무 이 문서가
전체적인 html 문서와 너무 길어져 요
그죠 그러면 코드를 리뷰 하기도 힘들고 나중에 수주가
음 다른 사람의 작업할 때도 소주가 너무 기니까 1 스크롤 한참 내려
되고 파악하기가 어렵겠죠
그래서 css 화일을 갔다가 html 문제로부터 분리시키는 거예요 어 자
그럼 방법에 대해서 살펴봅니다
자 그래서 html 무좀 함께 그림을 보면 이렇게 있구요
그 html 문서에서 css 파일을 여러개로 플릿 1 개로 분리할 수도
있고 아니면 이렇게 3개의 4개 닫게 앵 게로 쪽에서 분리 시켜 놓을
수가 있겠습니다
자 여기 먼저 코드를 보면 스타일로 시작해서 스타일 끝나고 있죠
그리고 전체의 스타 링크에서 전체 선택자
그 다음에 id 선택자 태그 선택자 윤서 이렇게 쭉 하구요
다음에 음 id 선택자 와 클래스 선택자 를 이용해서 렙 타이틀 콘텐츠
데이트에서 쭉 속함을 주는거 이 방식이 우리가 지금까지 사용했던
방식입니다
그런데 이런 방식을 계속 쓰다보면 코드가 양이 코드가 너무 길어져서
htm 소아 너무 길어 지는 거죠 그래서 그걸 막기 위해서 예 추적
잘했죠
예 css 에서 사용하는 추적은
이런식으로 시작과 끝을 이런식으로 해줍니다
자 이렇게 주석 처리를 해 주고요 그럼 이제 없는 거죠 없고 유우 내용을
어디 별도의 문서로 빼는 겁니다
별도의 문제로 빼고 나서 이 html 문서에서는 이렇게 링크 태그로
걸어줘요
링크 태그로 걸어서 현재 html 문서에 는 없지만 어디 외부의 u
경로에 이 경로에 가면 css 화일이 있다 그리고 그 안에 이런 내용들이
있다 라고 명시를 해 준 겁니다
자 그러면 예제를 코드를 보면 여러분들이 더 쉽게 이해가 되실 수가
있겠습니다
자 이게 이제 그 소진되어
자 보시면 디렉토리 구조가 어떻게 된 거냐면 자의 겁니다
26 다시 언더바 1 언더가 2gx2
어이 파일 이죠 이 파일이 있고 2화 1 과 동등한 경로에 동등한 위치에
타이트 css 컨텐츠 css 데이트 css 콘텐츠 css tip css
음 데이트 css 뭐 다 다 같이 들어 있습니다
그래서 그 경로를 다시 경우 지정 하셨어요
그러나 서 원래 이거 원래
html 문서 안했던 css 코드를 다 빼 버리는 거죠
추석 차렸지만 실천을 꽤 빠지는 거죠 그저
자 그러면 타이틀과 컨텐츠와 데이터 안에
내용들이 이러한 내용들이 있어야 겠죠 그래서 먼저 타이틀 먼저 제어 꺼내
보도록 합니다
자 그러면 타이틀의 내용이 있고요
자 타이틀 내용들이 여기에 뜬 내용을 로 옮겨 놓은 거구요
다음에 또 오픈을 해 볼게요 억 컨텐츠 줘 콘텐츠도 오픈을 해 보도록
하겠습니다
예 컨텐츠도 있구요 자 그 다음에 또 뭐가 있나요 데이트 데이트도
여 기록해 보겠습니 그러면 데이트와 콘텐츠 타이트 모두다 css 속성을
갖고 있고요
이걸 누가 쓰는 거에요 링크 태그 를 활용함으로써 이것을
26 언더바 1 이현재 현재 html 문서가 사용을 할 수가 있단
얘깁니다
그래서 css 를 이렇게 분리시켜 놀 수 있겠습니다
자 요거를 한번 실제 코드를 한번 작성을 프라우 재산 보고 갈까요
자 웹브라우저에서 보도록 하겠습니다
음 요런 화면이 줘 그래서 css 가 다 적용이 되어 있습니다
자 간단하게 예제를 한번 해보도록 할게요 자 새로운 문서를 만들고 요 자
좀 깔끔하게 닫아 버리겠습니다
음 그쵸
자 저장을 하고 시작을 하도록 하겠습니다
자 먼저 간단하게 행복해요 작성은 그 html 구조는 간단하게 테러 데만
잡아 보도록 하겠습니다
자 여기를 어 헤더 라고 하겠습니다
자 그 다음에 여기를 뭐랄까요
음 섹션 이라고 할까요 자 그 다음에 밑에를 퓨터 라고 하겠습니다
자 이렇게 해주고 미 쪽을 갖다가
h1 태그로
헤더 라고 입력을 해 주셨구요 그 다음에 섹션
게다가 는
h1 태그와
세태 글을 쓰도록 하겠습니다
섹스한 그 다음에 4
컨텐츠 라고 해 줄게요 자 포터는
포터 라고 해 주겠습니다
요렇게 할게요 자 이 상태에서 이것을
브라우저에서 보면
이런 화면이 나올겁니다 자 그리고 이걸 한번 감싸 줄까요
가운데 정렬을 좀 맞추기 위해서
음 좀 감싸 주도록 하겠습니다 자 다음의 예를 갖다가 아이디를
랩 이라고 하겠습니다
자 스타일을 작성을 하면 되겠죠
됐죠 그 다음에 랩 버터 작업을 할게요
여러분
위드 처음 px 에 에
다음에 마진 0으로 주고 오토 가운데 작렬 시키도록 하구요
좀 보기 쉽게 약해서 보도 값을 좀 주도록 하겠습니다
네 됐습니다 작열 감사하게 되면 요런 내용이구요
자 그 다음에 하나씩 하나씩 보면 헤더가 보이겠죠 그렇죠
랩에 에
테 더
자 얘는 어떻게 할까요 회 다는
h1 선택을 하고요
음 백그라운드로 속성을 들어볼게요 백그라운드를
노란색으로 주도록 하겠습니다 됐구요
그 다음에 가운데정렬 시키기 위해서 텍스트
온라인은 c 센터로 주도록 하겠습니다
됐고요 높이도 좀 줘 볼까요
노비를 2 백팩 셀로 주도록 하겠습니다
그 다음에 섹션이 들어갑니다
자 섹션 같은 경우에는 음 피가 있고 팩 그라운드 주도록 할게요
에 그라운드를
용도 칼라로 지정을 해 놓구요 안의 텍스트 컬러를 하얀색으로 가져가도록
하겠습니다
다 그 다음에 토토가 점
뭐 안 소주로 되는데 5 한거니까 양 써 주도록 하겠습니다 래 자 푸터
백그라운드 칼라를
그린 녹색 으로 오렌지 그럴까요
예 자 높이를 주겠습니다
섹션의 높이도 주도록 하겠습니다
네 됐습니다 자 이렇게 해서 헤다 와 섹션과 푸터 모두 자 작성 했구요
저희 간단하게 만나볼게요 텍스트 라인을
쉼 센터를 주도록 하구요
자 기존에 우리가 했던 방식의 이런 방식이 져 html 문서 안에 다가
css 스타일을 쭉 탁 위브 하는 방식입니다 그런데 계속 작업을 하다보면
면 분할을 하고 레이아웃을 잡고 그 안에 세부적인 글자의 속성 등을 바꿔
나오기 시작을 하면 코드 양이 엄청나게 길어 지겠죠
그래서 코드 양이 길어진다는 것은 나중에 코드를 분석하거나 리뷰 하거나
아니면 작업을 할 때 굉장히 많은 스쿨 을 하게 될 수가 있고요 코드를
파악한 에서 문제가 생길 수가 있습니다
그래서 이러한 것을 다 어떻게 바깥쪽으로 빼 버리는 거예요
버턴 태그를 영장을 링크 태그를 이용해 줘
링크 태그를 이용해서
스타일시트
자 이렇게 링클 태그 해서 바깥쪽을 빼 건데요 그냥 이 바깥쪽에 뺄 만한
눈썹 하나 있어야 겠죠 그래서 그 문서를 하나 만들도록 하겠습니다 자
새로운 문서를 만드는데 스타일 시스 시 타일 시트 문서를 만들도록 할게요
그리고 저장을 하는데 예를 똑같은 경로 대화 저장 을 하겠습니다
자 여기다가 스 폴더를 만들어 볼까요 그냥
css 라고 하구요 css 에다가
어 ex 일이라고
타 볼게요 문서 이름을
자 문서를 만들었구요 자 그러면 여기서 cs css 폴더에 c 2x1
css 를 링크로 하이퍼 링크를 걸어둡니다
자 이렇게 해놓고 실제로 내가 뺄 코드 전부다 뺄 되고요
전부다 예를 다 가지고 어디 이쪽으로 가조 이렇게 넣어줘도 되구요 아니면
난 이게 싫다 그러면
이 상태에서 전체적인 것은 엮어 쓰고 그 다음에 밑에 있는 하위 만난
쓰겠다 부분적으로 쓰겠다 그런 부분들로 쓸 여성만 가져옵니다
써 이 쪼다 다같이 이렇게 타이핑을 해 줍니다
됐죠 자 그러면 여기 코드가 깔끔 1 수가 있는 거죠
링크 태그를 이용해서 작열감 을 확인해 봅니다 그러면 결과물을 암을 편
없어요 단지 우리가 작업할 은 작업환경을 좀 개선을 해 탄 얘기겠죠
그죠 그래서 css 파일을 분리 하는거 요런거 있다는 거 알아 2시면
되겠습니다
아 그 다음에
자 방금 우리가 링크 태그를 이용해서 css 파일을 분리시켜 봤는데요
이번에는 임포트 라는 규칙을 이용해서 그 내용을 또 분리 시킬 수도
있겠습니다
자 css 에서 골 명의의 s 로 시작하는 키워드들을 규칙 이라고 합니다
이렇게 골뱅이가 붙어서
있는 키워드를 우리가 규칙 이라고 합니다
우리가 애니메이션 알아볼때 키프레임 애니메이션 골뱅이 키 프레임이 라는
규칙이 있었죠
그런 것도 규칙입니다 어쨌거나 이렇게 규칙이 있는데 임포트 하는 규칙이
있대요 자영은 임포트 란 굳히게 대해서 알아보는 시간을 갖도록 합니다
키워드를 구축 이라고 하고 이전에 골뱅이 키프레임 규칙을 살펴본 경험이
있습니다
이번에는 골뱅이 인 포투 규칙을 살펴봅니다 자 인 포트 규칙 은 뭐냐면
우리가 그 스타일 실제 내용을 html 문서에서 분리하기 위해서 이렇게
코드 로 바꿨어요
링크 다음에 할 배치할 이 애플에서 그 현재 문서가 있는 경로를
지정해줍니다
자 근데 이거 말고 이 방법을 어떻게 바꿔야 지는 이미 처럼 골뱅이
임포트 라는 규칙을 쓰고 유아를 함수를 써서 이렇게 경로를 지정해 주면
바로 끝날 수가 있어요
어 자 이렇게 해도 되고 이렇게 해도 되고
여러분들 편하신 데로 하면 되는데 추세가 임 퍼트를 하는게 조금 이
추세에 수제 아니고 많이 사용을 하게 됩니다 요즘에는
여러분들이 둘 중에 아무거나 쓰시면 되는데요
임포트 택을 쓸땐 주의할 점이 있어요
스타일 태그 안에 다 쓰셔야 됩니다 링크 태그는 스타일 태그 밖에 헤드
테 헤드 태그 에다가 우리가 작성을 하고 쓰 줘
자 하지만 임포트 택을 임포트 라는 규칙을 쓸 때는 스타일 태그 여기저
스타일 태그 안쪽에 따라
안쪽에서 사용을 하셔야 됩니다
자 그리고 또 한 가지는 치타 1 태그 내부에서 스타일 태그
아래쪽에 위치하며 안되고요 반드시 스타일 퇴근해서 가장 상단에 위치 를
시켜 주셔야 됩니다
그래서 여기서 있죠 링크 태그 를 대신할 수 있구요 다음에 스타일 태그
내부에 위치를 해야되고 스타일 태그 상단에 위치를 해야된다는 이런 규칙에
꼭 있습니다
자 그러면 음 결과물 한번 보고 올게요
자 보시면 여기죠
아까 링크 태그를 이용해서 썼는데 저 이거 는 html 의 추적 입니다
기도 끗이 그래서 그 html 에서 잉크 태그를 이용해서 css 화일을
부르셨고 그것을 우리가 활용했는데 이것을 같다 어떻게 바꿔요
스타일시트 안에 임포트 라는 규칙을 이용해서 url 이라는 함수를
이용해서 이렇게 표현을 할 수가 있겠습니다
자 그러면 결과물 이거 보면 똑같게 쫙 열광을 아무런 차이가 없어요 음
차이가 없죠 아까 처음에 한거나 이거나 이거나 차이가 없습니다 단지
작업을 하는 개발자 입장에서 봤을 때 작업에 업무 효율성을 좀 극대화
시킬 수 있다는 얘기겠죠
그러면 우리가 하고 있는 거
우리가 방금 만들었던 거에요 이것도 바꿀 수가 있겠죠
요 그래서 여자가 어떻게 해요 골뱅이
인 포드 합니다 자유 알의 함수 써 주구요
다음에 여기다가 작은따옴표 쳐서 경로 css 하 일이 있는 경우만
정확하게 입력을 해주시면 되겠죠
어 자 여러분 링크 태그 네 이제 필요 없죠
그런 추적 처리하거나 삭제 하셔도 상관이 없겠습니다
개요 자 다시 협회 확인해보면
자세를 고쳐 놓으면 전혀 변함 없죠 다 스타일시트 적용되던 얘기했죠
어떻게 정 됐어요 임포트 라는 규칙에 의해서 css 폴더에 ex 점
css 라는 화일을 찾아가서
음 다 속성이 결정이 될 수가 있겠습니다
자 그 다음에
자 이번에 미디어 규칙에 대해서 알아봅니다 자 위에 알아봤던 링크 태그를
이용하는 방법은 양님 포트를 태그를 이용하는 방법 우리가 살펴 같고요
자 이번엔 규칙 중에 미디어 귀축 이란 게 있어요 자 이것은 무엇인지
알아봅니다
미디어 규칙은 링크 태그의 미디아 속성을 사용하여 상황에 따른 css 를
적용할 수 있습니다 자기 뭐냐면 우리가 어디 바이스의 종류가 굉장히
많아요
우리가 쓰는 pc 예전에는 pc 하나가 있었지만 요즘에는 스마트폰 환경
이다 보니까 단말기의 싸이즈도 통해 다양하게 바뀌었구요
다음에 태블릿 pc 란 것도 있죠 그래서 고런 미디어의 종류의 상 상황에
따라서 예 래서 피쉬 화면이다
모니터 pc 모니터 일때는 똑같은 웹페이지가 pc 모니터 환경에 어떻게
보여 된다면 스마트폰 환경 이에요
왜 스마트폰 환경에서는 똑같은 웹페이지 인데
조금 다르게 pc 환경 와는 다르게 어떻게 보여준다
또는 이제 타블렛이 에요 차 블러셔는 또 어떻게 보인다
즉 1개의 문서를 만들어 놓고 그 1개의 문제가 각 디바이스 종류에
따라서 어떻게 어떻게 보인다
제어 자 또는 디바이스의 종류 마 있는게 아니라 스크린 tv 아니면
프로젝터
프린터 그죠 그런 것들이 많이 있죠 다양한 디바이스들이 있죠 그래서 그럴
때는 어떻게 어떻게 보여야 된다 날 우리가 더 결정을 속성을 지정할 수가
있습니다
그래서 잘 미디어 종류를 보면 우리 있구요 모든 미디어 타입을 다 결정할
수가 있고 그 다음에 음성합성 장치 점자 표시
그 다음에 손으로 들고 다녀 볼 수 있는 작은 스크린
그 다음에 프린트 용도로 사용될 때의 다음 프로젝션 프로젝터 사용될 때
스크린 컴퓨터도 그 모니터입니다 tv 세상 들 때 그저
이런 다양한 종류의 미디어 종류에 따라서 어떻게 화면을 9종 할 건지 잘
보시면 이게 브라우저에서 보이는 거에요 그러면 얘는 스크린 이겠죠
미디어 타입을 스크립 타입을 합니다 작은데 보시면 바탕에 진한 녹색의
깔려 있죠
이 상태에서 만약에 프린트를 들어가요 그러면 이 오른쪽 화면이 프린트
하면 인데
프린트 들어갈 때도 요 바탕을 색을 다 같이 프린트를 하면 프린트 색상이
e 프린트 그 터너가 낭비 될 수 있겠죠 그리고 이 색깔이 치의 지
무라이 해서 하얀색 글자가 얼룩 얼룩 해지는 가독성이 떨어질 수가 있겠죠
그래서 그런 걸 막기 위해서 새 크림 보실때는 배경색을 빼라
저 이렇게 그 명령을 주는 겁니다
그래서 요거 면 프린트 용도 프린트용 2 때는 똑같은 웹페이지나 만든
거에요 만들었지만 치크 일때는 배경색을 이렇게 지정 하지만
음 프린트용 때는 이렇게 배경색을 빼라 라고 지정을 하는 방법에 대해서
살펴보도록 합니다
자 26 다시 3번을 열어서 보도록 할게요
자의 거죠 자 구조로 걔네 간단해요 램으로 감싸져 있구요
다음에 타이틀이 있구요 다음에 콘텐츠가 있고 다음에 데이트가 있습니다
자 그리고 나서 음 여기 보시면 링크 태그로 이렇게 속성을 답을 분리시켜
놓고 있습니다
그래요 작은데 처음에 이 그 이 부분이 없었죠 미디어 이 부분이
없었습니다
어 근데 미디어 부분을 추가했어요
자 컨텐츠 pc 아고 프린터 라는 화일이 있는데 자 먼저 오픈을 한번 해
볼게요 자 pc 와
어떻게 프린트 란게 있습니다 자 보시면
콘텐츠 pc 와 콘텐츠 프린트 옆으로 좀 문구 놓고 볼게요
자 프린트 인데 프레임 틀 때는 컨텐츠 클래스 선택자 컨텐츠의
칼날을 2칼라 라구요 이 컬러가 무슨 컬러는 모르겠지만 약간 진한 회색
같습니다
다음에 패딩을 상화 30 픽셀의 좌우 10 110만 준다고

댓글 0개

등록된 댓글이 없습니다.

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

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

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

Menu