Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 8강 CSS 기본-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 인다 자 오늘 html 여덟번째 시간 css 기본 세
번째 시간을 진행하도록 하겠습니다자지가 1시간에 우리가 css 에서 후손 선택자 자손 선택자
자동의 선택자 등 선택자 태그 선택자 그 다음에 id 클래스 선택자
그러한 선택자를 유지해서 css 에 뭉 껏 구조를 살펴 봤습니다
전을 도 지난 시간에 이어서 예전 시간 했던 것들과 연결을 해서
선택자 들 중에 반응 선택자 상태의 선택적 구조 선택자 에 대해서
살펴보는 시간을 갖도록 하겠습니다 자 먼저 반응 선택자 는 우리가 어떠한
반응이 있을 때 우리가 아직 배우지 나왔지 나 html 중에 an 끝에
가 있었죠 그 엔텍 깨끗해 그 위해 마우스를 올린 상태를 우리가 오버
상태 오버 상태라고 합니다
그럼 뭔가 반응이 있을 때 어떤 속성을 변화시키는 걸 우리가 반응성 택
자료입니다
자 상태의 선택자 같은 경우에는 님프 태그 경우에 포커스가 맞춰져 있을
때 또는
선택을 해서 사용하지 못할 때 그런 상태에 대한 선택을 할 때 그걸
우리가 상태의 선택 짜려고 하구요
자 구조 선택자 까지 나오도록 합니다 그래서 구조 선택자 도 오늘 1c
알아보고
오늘까지 해서 반응 선택자 상태의 선택자 구조 선택자 를 하면 우리가
기본적으로 css 에서 어떤 속성을 지정하기 위해서 선택자 를 이용해서
그 html 에 있는 태그를 정확하게 선택할 수 있어 되겠죠
그런 선택자 에 거의 대부분을 다 살펴본 겁니다
그래서 여러분들이 조금 힘을 내서 오늘 마저 반응 상태의 구조 선택까지
하시면
어이 젬마 난 선택자 앤 만한 구조에 대한 선택 짜는 다 하실 수가 있을
겁니다
자 그러면 하나씩 하나씩 또 반응성 택 자에 대해서 살펴보는 시간을
갖도록 하겠습니다 자 마우스의 반응에 따른 속성을 설정할 수 있습니다
자기 보시면 결과 화면을 보시면 비스트 구조 제어 그리고 음 언 오더
리스트 게 짜 123 자 없으니까 이유에서 u 애가 에라이 를 통해서
리스트를 만든 구조 줘 자 이런 구조에서 메뉴 3 에단 마우스를 올렸을
때 마우스 가 올라가 있는 메뉴의 속성 짐 같은 경우에는 색상의 변동
되고 있죠
글자의 컬러라는 속성과 그에 대응하는 속성 값을 반환 시켜서 그 칼날을
텍스트의 컬러를 변화 중 겁니다 자 그래서 뭐 예치 10ml 태그는
요금은 될거 같아요
그저 div 태그가 있고 그 다음에 그 안에 ul 태그 와 li 태그가
교육에서 리스트로 나오구요
다음에 스타일 을 보면 위의 안에 자 이건 뭐 라 구요 자손 선택자 줘
el 아래에 있는 에라이 얘를 타 겠죠 자손
자자 전에 대해서 폰트 살리는 20 일이에요 그리고 폰트 웨이트 폰트의
두께는 볼트로 좋구요 다음에 컬러는 오렌지 래요
요게 노무라 쎄다 절합니다 다음에
li 의 오버 가 됐을 때 이게 상태에서 과연 반응성 택 짭니다
내가 마우스 열 달 올려 나요 올라왔을 때 반응이 된거죠
어떤 반은 5 버렸을 때 그때 컬러를 블루 로 바꾼 단 얘기입니다
자 이것도 마찬가지로 말로 표현하거나 레퍼런스 문제 등을 통하면 어려워요
실제로 코드를 보면 굉장히 심플하다 는 것을 여러분이 느끼실 수가 있을
겁니다 자 예제를 한번 꺼내서 보도록 할게요
자 코드 굉장히 심플하죠 자의 벌떼가 일단 미리보기로 브라우저에서
살펴보는 시간을 같고요
그럼 됐죠 자 내 녀 1 2 3 4가 인 점
자 여기서 제가 어떤 메뉴에 마우스 롤링 어떻게 되요
색상이 변경되고 마우스 다시 빠져 나온 순간 색상이 변경 되는거 확인이
가능하겠죠
자 그럼 어떻게 이런 구조 되는지 먼저 html 구조를 보면 div
태그로 감싸 있구요 블럭 태그 로 감싸 있고 전에 리스트 루 어 유에
태그와 li 태그로 쭉 나열되어 있습니다 덜 특별한 구조로 없네요
자 스타일 헤드 안에 스타일을 선언해 같구요
유행 밑에 자전 태가 나오네요
ul 밑에 라이저 전 택을 선택해요 un 대 자정이 누구누구 있어요
모든 리스트의 라 좀 타죠 이제 와 닿아 자손들이 있는데 아 물론 후 전
이기도 했구요 호전이 더 큰 개념 이라고 외치는 이제는 우리 설 것
같습니다
자 그래서 기본적으로 li 에 속속 능한 폰트 사이즈는 20 픽셀 입에
다음에 폰트 웨이트는 볼 두고 요 컬러는 오렌지 를 좋습니다
자 여기까지가 그냥 별 다른거 없어요
만약에 여기 없다 요거이 없는 상태에서
자 보면은 고양이 거죠 아무런 변화가 없습니다
하지만 이 상태에서 베라 이 에다가 이렇게 콜론 을 찍고 오버 라는 호버
라는 상태의 선택자 로 선택했습니다
자허 보라는 상태 상 작자는 어떤 거냐면 마우스를 올린 상태 가 호
거에요 그래서 호버 를 호흡을 상태에서는
컬러 어떤 컬러 텍스트의 컬러죠 텍스트의 컬러를 불로 파란색으로 변경을
해 라고 명령을 좋습니다
자 이 상태에서 새로 고침 안고 다시 마우스를 올려보면 이제 어떻게 된다
이렇게 되겠죠 그죠 그래서 호버 이런게 상태 상 독자 어떤 마우스 올려
왔을 때 상태가 변한 거죠
그것을 선택하는 게 상태의 선택자 입니다
자 요거 어 한 번 간단하게 딱 해볼까요
문서에 저장을 하고 할게요
어서 장을 했구요
자 먼저 div 책을 을 제가 넓구요
그 다음에 게다가 위의 태그 다음에 li 태그
물론 여기 유애리 아니라 ol 이어도 상관이 없겠죠
자 그 다음에 잘 보다가 옌 6
이렇게 하고 요구를 몇 개 복사를 하겠습니다
2번 3 번 4번 을 받고 났구요
자 이 상태에서 브라우저로 미리보기를 해보면
뭐 아무런 변화 없이 그냥 평범한 자 자 그저 스타일을 넣어주기 위해서
어떻게 스타일
자 먼저 div 태그를 태그 선택자 줘 여기다가
자위 들을 먼저 좀더 줄까요 자위 들을 선배 픽셀로 하겠습니다 자 마 징
가 운데 중 졌는데
자 맞은 일하는거 우리가 아직 정확하게 알아볼 지났는데 맞은 이제 좀
설명하고 넘어갈게요
자 맞은 뭐냐면 음 여기서 대학교로 설명하고 좀 설명을 하고 다음에 마진
속성에서 전문적으로 중점적으로 알아보는 시간에 다시 알아보도록 할게요 자
맞은 뭐냐면
자 백그라운드 컬러를 중 줘 볼까요 그걸 쉽게 레드 한번 해 볼게요 자
이 상태로 들어가 보면
300 픽셀 인거죠 이게 자 여기서
빠진 을 준다 마진을
결제해서 3시 픽셀을 주겠다
그러면 내가 선택한 요소 요기 정 300 픽셀의 div 태그 입니다
여기서 상하좌우로 다 300 에 30 픽셀 만큼 바깥쪽으로 공간을 드는
거예요 그래서 새로 고침 을 보면 이렇게 떨어질 수 없겠죠
33:00 다 30p 섹시 떨어지는 겁니다
자한테 어서 이걸 약간 응용해서 0000 을 익혀 주면
첫 번째 있는 값은 첫번째는 것은 탑 이에요
위쪽에 여백을 얼마나 즐거운지 얘는 시계방향 들어갑니다
오른쪽에 여백을 얼만큼 줄 건지 세번째는 아래 쪼 바 틈에 영역을 저
공백을 얼만큼 줄 건지 맨 마지막엔 은거한 레프트 왼쪽에 영역을 얼만큼
공백을 줄 거니 설정합니다
아까는 값이 하나였죠 이렇게 하면 상하좌우 몬자 동일하게 30p 섹시
중단 얘기고 요
값을 이렇게 따로따로 정 을 지정할 수가 있어요
그래서 마진을 갖다가 여길 갖다가 백을 준다
그 다음에 레프트 가 여기저 레포트를 대해서 50 픽셀을 주겠다
그러면 위쪽이 100 이구요 오른쪽 안주고 아래쪽 안주고 왼쪽 50 픽셀
입니다 그러면 위쪽에서 100 떨어지게 있구요
다음에 왼쪽 여기서 51세 떨어지고 이쪽은 다 떨어지지 공덕이 없겠죠
자세로 치매 보면 이렇게 나온다는 뭐 결과 나올 수 있습니다
자 이걸 좀 이용해서 영을 주고요
오토를 줘 볼게요 그쵸 자 두 개의 간 맞으면 예 같아 빅 탑 에 값이
구요 탑은 0 이네요
자라 매고 요 오른쪽이 줘 오른쪽이 오토 일단은 값이 없어요 이럴 때는
다시 이제 아래쪽 값이 없는거죠 아래쪽 값이 없을 때는 다시 처음
들어와서 애가 아래쪽 값까지 적용이 됩니다 그래서 아래쪽도 공백이 없다는
거에요 즉 첫 번째 값이 탑과 아래쪽 바텀 에 공백을 좀 결정하고 요 자
오토 예가 오른쪽 인데 다음에 갚지 없죠 그러면 내가 왼쪽 까지 같이
값을 설정합니다
따라서 애가 오토 오른쪽과 왼쪽의 오토 주세요 이렇게 되면 어떻게 되냐면
브라우저 내가 지금 보고있는 브라우즈 의 좌우 여백을
동등하게 처리 해요 즉 이렇게 어떻게 가운데 정 4를 시킬 수가 있단
얘깁니다
그래 여기 하고 여기를 똑같이 등등 분야입니다 브라우저를 이렇게 늘려
보면 항상 가운데 정렬이 되요
어 다음에 또 다시 살펴볼 기회가 있을 텐데요
요 방법이요 기법이 굉장히 중요하고 우리가 홈페이지를 중앙 정렬 하고자
할때 많이 이용됩니다
자 어쨌거나 지금은 상태의 선택자 에 포커스를 맞춘 거니까 마진은 이
정도에서 넘어가고 있도록 하고요
자 그 다음에 상태는 투자 자위의
게다가 제가 음 폰트 사이즈의 그래서
3배 3 이행으로 주고
컬러를 화이트로 줄까요
화이트를 좋습니다 자 폰트 웨이트를 폴더로 주도록 하겠습니다
잠 어떻게 되요 하얀색의 글자 3배 커지니까 커지고 볼 주체로 이렇게
바뀔 수가 있겠죠
자 그런데 새로 저항 막히죠 타고난 박하 아 여기가 5 앱 줘 그러면
이거 유애리 아니라 뭐겠어요
왜 왜 일로 이렇게 해줘야 겠죠 자 우선 선택자 를 사용했습니다
여기서 자존 선택해 를 사용해도 지금 상황에선 똑같아요 와 결과가 자
일단 휴전 선택 차로 갈게요
제거하면 이렇게 되겠죠
자 이 상태에서 음 이제 상태 선택자 웰 li 에 어떤거 오버 됐을 때
마우스 올라갔을 때 어떻게 해라 컬러를
그림을 줘 볼까요
크린 으로 받겠다 다음에
폰트 사이즈를 좀 작게 해 볼까요
음 2.5
0.5 보여주겠다 그 다음에 새로고침 한번 해보도록 합시다 그러면 그 자
잡아 지겠죠
자바 진데 잡아 지다 보니까 이게 안 되겠죠 킹이 않겠네요 지금
예제에서는 1 4로 해볼까요
그러면 예 점점 커지는 거 확인이 되실 겁니다 이렇게
그래서 삼태성 탁자는 이런 방송 콜론 을 찍어서 우리가 활용을 하실 수가
있겠습니다
반응 선택했다 줘 반응 선택자 는 이렇게 어떤 반응이나 3 마우스의
반응이 일어 났을 때 속성을 변경하는 것을 것이라고 정리를 해주시면 될것
같구요
다음에 상태 선택자 가 있습니다 3 선택하는 뭐냐면
자 여기 보니 코드가 보이네요 하자 인 프테 가 있어요 임프 태가 있고
타입의 자가 텍스트 아이콘 텍스트 라이코펜 스워드 가 있습니다
여타 입에
타입이 텍스트 냐 패스워드 냐에 따라서 어떤 속성을 변경 한다.는 것이
하셔야 고 했죠
속성 선택자 라고 했죠 그래서 그것을 사용할 수 있는데 오늘은 상태
선택합니다 이게 무슨 얘기 하면
자인 푸 3 포커스 했을 때 우리가 어떠한 여기다가 빈곤과 에 대한 링크
태그 에다가 글을 입력할 때 포커스가 맞춰진 다고 합니다
그 포커스 가 되었을 때는 포도가 이 픽셀이 고 솔리드 실선으로 색상은
요런거 로보 독가스를 만들어라
다음에 패딩은 c 팩스를 졸아 자인 앱을 사용할 수 있는 거 얘는
사용할수가 없어요 지금 보시면 뒤 접을 상태죠
그래서 패스워드는 변경이 불가능하여 사용자가 직접 입력을 할 수 없는 양
됩니다
g 접을 상태 이렇게 이내 입을 상태일 때와 d 접을 상태
이런 상태에 대해서 다 속성을 줄 수가 있단 얘깁니다
자 요것도 한번 소수를 오픈을 해서 소스를 보면 더 빨리 이해가 되실
수가 있겠죠
자 브라우저를 보겠습니다
자 보시면 폰 태그가 있구요 물론 여기 액션 태그와 매수 주택은 생략을
한거 같구요
다음에 이름 아이디 비밀번호가 있는데 자 이름 먼저 임프 타이 텍스트
에서 이전에 다 좋습니다 아 뭐 별 특별하게 없이 n 타입의 찌가 있고요
대담에 id 가 들어가 있네요 아이디도 음 타입은 텍스트 고 유저
아이드림 들어가 있고요
다음에 비밀번호 비밀 광택이 하죠 빈부 는 선택이 안되요 포커스가 맞춰질
수 없습니다 이는 왜 그런가 봤더니
인투 타이 패스워드 인데 뉴 전에 힘들었고 * 유는 1 2 3 5 기
분 조 들어갔는데
업해서 되니까 이렇게 기회로 털이 되고요 잣 잊어버리 라는 속성을
이용해서 뒤져 브 내는
어예 들어서 서버 에서 가져온 값으로 비밀번호는 변경할 수가 없노 프 닝
따는 그런 표지로 이렇게 지저분 상태로 줍니다
자 이 상태에서 상태 선택자 는 이렇게 상태 성적순 마찬가지로 콜론 으로
이렇게 병실을 합니다
임프 태그 중에 포커스가 맞춰진 태그는 보도가 이고 솔리드 패딩 20
이래요
지금 자 포커스 이름인 프테 그대가 포커스를 맞춰 볼게요
콩 하고 찍으면 포커스 들어가죠 그럼 어떻게 이렇게 지금 커서가 요우
면하고 요안 떨어졌죠
이게 바로 패딩입니다 패딩 팬도 나중에 다시 쓰 점점 그 중 전적으로 할
시간이 있을 텐데요
일단 패딩을 좋구요 그 다음에 보도가 이 픽스 이 픽셀의 보도 값을 중
겁니다
자자 메인에 $1 상태 컬러 웨이트 고 색상이 요런 거래요
어 주황색 이래요 자 이내 불 상태가 제가 가면 어떻게 되요
이렇게 주황색 앱의 볼드 채 들어온거 확인이 가능합니다
자음의 d 접을 상태에서는 빨간색 이래요 그래서 빨간색 키우 로 표시된
거 확인이 가능할 겁니다
이렇게 어떠한 상태에 따라서 상태에 따른 선택을 하는거 상태의 선택
자라고 합니다
자 그러면 그 다음 검은 볼까요 자 구조 선택자 입니다 상태에 따라서
아니죠 못하죠 잠수정 해볼게요
4승 나중에 있습니다 구주의 따라서 css 속성 2 이 변화는 설정을
할수 있습니 이게 무슨 얘기하면
자 이게 리스트 겠죠 리스트로 쭉 나열 되는데 이때
여기고 좀 구조가 첫 번째 항목 아이템이 오구요 두번째 할 땐 이렇게 첫
번째 아이템 2번째 아이템 3번째 아이템 4번째 아이템 다섯 번째 이땐
아이템의 이런 구조로 쭉 흘러 가고 있죠
이런 구조에 따라서 첫 번째 있는 녀석은 바탕을 노랑 거래 라
마지막에 있는 녀석은 노란색을 해라
다음에 홀수 에는 여자건 빨간색으로 바탕으로 해라 뭐 짝수의 읽는 구조의
구조 중에 짝수 해는 아이템은 회색으로 해야 바탕을 그 구조를 우리가
따라가면서 선택을 하고 속성을 변경할 수 있다는 겁니다 자 이것도 예제를
보면 금당 여러분이 이해 하실 수 있을 것 같아요
골 을 열어 볼게요 자 들어서 한번
브라우저를 먼저 보고 자 이런 결과 봄에는 색상이 다르고 처음과 맨
마지막 것을 이렇게 모서리가 둥근 사각형 되어 있습니다
자 먼저 html 태그를 보면 html 태그의 div 로 감싸져 있구요
다음에 유이의 언어 더 리스트 하고 리스트 아이템으로 쭉 감싸져 있습니다
여기까진 별 내용이 없습니다
만약에 스타일 시트가 없다 그러면 뭐 통 범한 거겠죠
이런 거에요 자 이걸 갖다가 우리가 구조를 구조를 따져가면서 선택을 하는
거에요 자 먼저 억 컨텐츠 컨텐츠 grb 네요 얘는 위드가 300 이래요
그러니까 300 300 짜리 div 를 만든 거고요
자 여기서 또 중요하죠 유 엘의 li 리스트 스타일이 눈 이래요
니스 틈은 여기 안에 u 엘의 언어도 니까 쩜쩜쩜 이 쭉 나와야 겠죠
근데 리스트 스타일의 1 속성을 논을 주면 크게 안나와요 짬짬이 안나와요
눈 없는 거에요 그래서 리스트 리스트 스타일을 없었구요
다음에 보도는 2px 어유 엘의 보도가 아니라 lid 아이템 하나 하나에
보덤 다 그래서 하나하나에 다 1픽 쎄씨 지금 보더 값이 들어가 있구요
패딩은 10 이래요 다씨 픽스 씩 패딩 들어가 있고요 백그라운드가 ef
이 애플의 요
그래서 ef 이프 가 기본적으로 100 가운데 들어있고
폰트 웨이트는 볼드 폰트 사이즈는 20 픽셀 기본적으로 다 적용이 되어
있습니다
자 여기서 ul li 에 다 여기 보면 하이퍼링크를 있죠 자 a 태그에
컬러는 0 이래요
그래서 a 태그가 들어갔으면
얘를 0 0 이면 블랙 인데 시 꺼면 3의 글자를 다 검정색 으로
바꿨습니다
만약에 이게 없다 그러면 기본적으로는 약간 파란색 파란색 을 튈 수가
있어요 이렇게 파란 새 이게 브라우저가 기본적으로 갖고 있는 색상입니다
하이퍼 링크에 걸린 책사
자금 지만 나는 여기서 검정 색으로 바꿔 놨어요
다 먹었구요 자 여기서 부터가 이제 구조 선택자 입니다 아 자 보시면 벤
th 차일드 라 나오죠
자 mth 차일드 뭐냐면 구조 정택 짤을 선택할 때 쓰는 방법인데 함수에
함수 남는데
있 n+ 시리즈 애니 이제영 습도 시작한 거에요 그래서 여기 0이면
결과적으로 첫 번째 일이 남자의 값이 나오죠
이렇게 일이 나오죠 그래서 베라 2 아이템 중에 레알 팀 이어 수처리
시장에서 애까지 흘러 가고 있죠
이 중에 첫 번째 0은 오니까 일이죠 1 초
첫 번째 여자에게 백그라운드 는 t2 구성 9 3
노란 색으로 만든 얘기에요 그죠
자 다음에 n 에다가 이를 넣어보세요 이르려면 3의 되죠
3 요 김 덕 이에 그래서 에다가 d 구상 부상을 입고
1을 넣으면 5가 되죠
그러면 다섯 번째 1사 뭐 예정 그래서 결과적으로 홀수 이녀석들의
백그라운드 칼라를 이 색으로 바꾼 아니겟죠
이게 바로 구조 구조를 어떻게 분 약 구조에 따라서 속성을 선택을 해서
그 선택한 속성의 속성 값을 변경해 주는 이겠죠
그 어 이게 구조 선택자 입니다
저러면 en 으로 함 어떻게 되겠어요 짝수 를 선택하는 거겠죠
여러분들이 요거 한번 해 보세요
댓글 0개
등록된 댓글이 없습니다.