Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 9강 CSS 속성-IV
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 글쎄 입니다 자 오늘 html css 아홉 번째 시간 css
기본 네 번째 시간을 진행하도록 하겠습니다자 오늘도 알아볼 내용은 우리 같이 지난 시간 지난 시안과 지진
1시간에서 쭉 연속해서 알아봤던 선택자 에 관련된 내용입니다
이제 오늘은 중요한 것은 지난 시간 8강까지 에서 선택자 의 기본적인 뭐
id 전 대짜 클래스 선택자 다음에 태그 선택자 후손 선택자 자선 선택자
그런것들 중요한 것들은 다 알아 봤구요 자 오늘은 약방에 감초 식으로
모르면 안되고 꼭 알면은 우리가 아주 유용하게 쓸 수 있는 그런 선택자
문자 선택자 링크 선택자 부정 선택자 에 대해서 살펴보는 시간을 갖도록
하겠습니다
자 이 중에서 우리가 아까 제가 말씀 말 어 방금 말씀드렸듯이
문자를 잉크 부정 선택자 는 다 약방의 감초 식으로
알면은 몰라도 어떻게든지 다른 방법으로 구현해 지가 있어요
하지만 알면은 코드 양을 줄일 수가 있고 조금 더 편리하게 효율성 있게
코딩을 할 수가 있기 때문에 여러분들이 알아 2시면 많은 도움이 됩니다
그래서 하나씩 1 c 5 늘은 쪽 부담없이 지난 시간에 했던 지질 1시간
했던 내용과 어 수준이 조금 난이도가 조금 평이한 순위 도록 여러분들이
학습을 하실 수 있을 겁니다
자 먼저 문자 선택자 입니다 말 그대로 문자를 선택하는 거에요
특정 문자 또는 문자열을 선택하여 더욱 타네요 잠은 수정 국회 이거
자수정 와 같습니다 죄송합니다
자 특정 문자 또는 문자열을 선택하여 아 css 속성을 설정할 수
있습니다
자 보시면 요런게 있어요 설립 개요는 뭐 중소기업 지원 업무 전문성 가입
쭉 나오고 2014년의 사업을 꾸려 보고 있고 10여개 쳐 회사 영향이
우리가 홈페이지를 만들다 보면 회사 00 이라든가 어떠한 이론 쭉
시간대별로 나오는 이런 글들이 많이 있겠죠
자 어쨌든 간에 요런 그래서
1st 레더 말 그대로 첫 번째 결제 첫 번째 글자 첫 번째 글자를 약간
디자인 증 요것도 넘어서 라든가 아니면 가독성을 높이기 위해서 이렇게
조금 크게 준 경우가 있죠
이렇게 1st 레더 또는 토트 라인 첫 번째 라인의 걸을 색상을
이렇게 변경 시켜 주는 거에요
이런 걸 갖다가 문자 특정한 글자 또는 특정 라인의
라인 을 선택하셔서 우리가 어 그거에 대한 css 속성과 속성 값을 줄
수가 있겠습니다
자 그러면 간단한 거니까 바로 예제를 넘어가서 살펴보도록 하겠습니다
폰을 해서
자 먼저 브라우저를 통해서 결과물을 보면 은
자 이러한 결과물입니다 여러분이 많이 보셨을 겁니다 자 html 구조를
먼저 볼게요 자 랩이 있습니다
해당하고 포터는 생략을 했구요
해당이 안 했네요 자 랩으로 감싸 안고 감수하고 나서 그 안에 헤다 와
컨텐츠와 프 터 를 얻었습니다
음 조금 특이한 케이스인데 자 요런 구조도 있을 수 있겠죠
자 그래서 보면 먼저 레비 문자 레븐 위드가 80 이래요 여기서부터
시작해서 10가지
뭐 802 와 800 인데 마 진영의 5 터졌습니다 그래서 어떻게
브라우저 중앙에 정렬 가운데 정렬을 시키고 있습니다
자 마진에 대한 거 굉장히 중요한 여름 그 방식이니 중요하고 많이 쓰기
때문에 다시 한번 설명을 드리면
마진에 원래는 마진에 기본적인 형태가 어떻게 되요
0000 4개의 값을 주어 지죠
여기가 탑 위쪽에 공백 오른쪽 공백 시계방향으로 들어간다고 했습니다
우리가 아래쪽 0 대회가 왼쪽 공백이 줘
작은데 위쪽과 아래쪽을 같은 값을 때 얘를 생략할 수 있고요
다음에 왼쪽과 오른쪽을 같이 쓸 때 얘도 생각해서 2개의 값만을 실수가
이 떨었습니다
자 위쪽에 그렇게 두 개의 값만 쓴 경우 구요 이 두개의 값을 때 위쪽과
아래쪽을 0
공백이 없이 촬영 거고 자 오토 레어 부터 좌우가 오터 인거죠 오른쪽과
왼쪽이 그러면 결과적으로 오른쪽과 왼쪽을 똑같이 동등하게 나눠 가져서
가운데 정렬을
이렇게 시킬 수가 있겠습니다
자 그 다음에
자 이렇게 됐고 그 다음 그 아래는 헤더 볼게요 자 헤더를 보니까
헤더 보드 바텀 아래쪽에 보도를 주는데 보다 중간에 대해 아래쪽만 준데요
1 픽스 s 위드 cc 그래서 아래쪽에 만일 픽셀의 보도 라인 을 생성해
주고 있습니다
별 특별한건 없구요 자 컨텐츠를 볼게요 콘텐츠의 는 p p p 자문 달
세 개의 문단으로 되어 있습니다 첫 번째는 중소기업 전문 효율성을
확보하고 이 부분이죠
3 부분이 는 첫 번째 문단 나오고요 자 두번째 아이디를 좋네요 피해
다흰 스토리 투 라는걸 좋구요 히스토리 원이란 것을 씁니다
그래서 첫 번째 내용이 있고 여기서 데까지 줘 1 첫번째 내용이 에 그저
여기서 에까지 두번째 내용의 6 여기까지 줘
자 그치고 있는데 여기서 어떻게 되어 있냐면 css 가 히스토리 툴의 어
히스토리 트 아이디가 히스토리 트윈 녀석이 이 녀석이죠
이녀석 애
어딨죠 여기 있죠 1st 레더
첫 번째 글자를 뜻해요 첫 번째 글자 그 다음에 히스토리 원의 첫 번째
글자 결과적으로 k3 트와 히스토리 원의 첫 번째 글자 잊어 이 줘
숫자 잊어 요술 짜 이에 대해서 폰트 사이즈 자 em 대수랴 그랬죠 1일
기본이고
1위 기본 사이즈 이구요 그 다음에 p 태그의 기본 사이즈는 16 피스
임자 참고적으로 말씀드리면
그래서 2배 32 픽스 정도 되겠죠 그래서 2개를 증가시켜 때요
그러니까 있자 가 이렇게 두개의 확장이 됐고요
다음에 희수 리투아니아 인스톨이 원의 콤마 니까 원의 퍼스트 라인 이래요
on 1st 레드가 아니라 퍼스트 라인 첫 번째 줄
이주리 줘 자 보시면 br 태그를 얻기 때문에 여기가 첫번째 줄이되 고갱
돼서 여기가 두 번째 줄이 되겠죠
이 첫 번째 줄에 속성을 주는데 어떻게 폰트 웨이트는 돌기를 주고
있습니다 다음의 폰트 칼라는
억제 색상은 2 1 6 0 t1 파란색 정도로 이렇게 표시가 될 수가
있겠습니다
자 다음에 포터 2 포터 ul 가 ui 가 있는데 음 누구는
부터 구조 어떤가요 리스트 형태로 됐네요 리스팅 틀에서 첫 번째 두 번째
타임이 들었는데
어이 lied 스타일인데 리스트 타일의 닭을 짠 놓고 그림을 넣었어요
다음에 리스트 스타일이 눈 이구요
레프트 플루트 래프트 좋고 패딩 21세 좋습니다
그니깐 요런 형태로 구성이 되어 질 수가 있겠습니다
자 이런 구조 굉장히 중요한데 우리가 전에 살펴 쓰니까 여기서는 설명
그다지 설명하지 않고 넘어 갈게요
중요한 것은 1st 라인과 1st 레더 문자 선택자 를 이용해서 이렇게
우리가 간단하게 작업을 할 수가 있습니다
만약에 문자 선택자 를 사용하지 않는다면 앞에 있는 첫 글짜를 높이게
서는 요렇게 할 수도 있어요
좀더 번거롭지만 스 펜 태그를 넣어 갖고
한글자만 어디는 거에요 그래서 스 펜 태그 선택자 선택한 다음에 이 태그
선택자 선택에서 속성을 지정할 수도 있겠죠
번거롭고 코드 양의 드러나고 단자 패 보이겠죠
하지만 문자 선택자 또는 어 문자로 라인과 1st 레더 등을 이용해서 가
이렇게 쉽게 문자를 선택해서 쓸 수가 있겠습니다
음 네요 내용이구요 자 그 다음 내용 또 살펴보면
자 문자의 링크 l 태그 안에 우리가
l 태그 안에 href 라는 속성을 줄 수가 있었죠
경로 를 뜻하죠 2h 알리의 브링크 되어 있는 문자를 선택하여 아 css
속성을 설정할 수 있습니다
자 결과물을 보면 서울산업 찍는거 위지 센터 얍 구글 있어요 여기에다 a
탱크 ahr 이프 택가 들어가 있나 봅니다
그거 에다가 a 태그 d 에다가 콜론 을 땡땡 팽 게 찍구요
다음에 애프터 이 뒤에 어떻게 처리하겠다 라는 속성을 선택 을 선택을 해
주고요
자 보시면 콘텐츠의 - 를 붙인 대시를 붙여요
그러면 여기까지가 html 에서 정보를 제공 이고 그 뒤에 이렇게 대시를
붙인 겁니다
콘텐츠의 대시로 붙이고 그 다음에 어떻게 스스로
href lf 가 뭐냐면 이 서울산업 직능 원의 걸리는 할부 링크 에어
그 하이퍼링크 조절을 뒤에 이렇게 붙여지는 얘기입니다 어서 이 함수를
이용하는데 자요 코드를 보면서 좀 설명을 드리도록 할게요
자 보시면
음욕의 아닌 것 같구요
요 거겠죠 결구 를 브라우저에서 볼게요 자 그러면
예 다시 오픈 할게요 그 다시 예절
예 자 여럿 구요 자 이것을
브라우저에서 미리보기 하면 자 이런 내용입니다
자 보시면 html 구조를 먼저 볼게요 자 보시면 태그를 먼저 감싸져
있고 헤더가 있구요 컨텐츠가 있고 포터가 있습니다
여기까지 뭐 별반 되었구요 자 헤더에 는 리 클리커 웹 사이트 라고
해서 h1 태그로 들어가 있고요
자 여기서 있는거니까 앞으로 더 바텀 을 해서 1 픽셀 정도로 해서 어
솔리드 로 되어 있을 거라 예상이 됩니다
전 야매 컨텐츠 항목 인데 컨텐츠 항목의 ul li 로 돼서 이렇게 어
서울 사업 찍는건 되어 있는데 중요한 것은 여기서 보시면 서울 산업
진흥원 2l 태그로 묶여 있죠 그렇죠
자 그리고 서울 산업 진흥원 뒤에 어떠한 값도 없어요 정보가 없어요 근데
어디 보면 url 조정할 때 통해 즉 나오죠
자위 g 센터 도 마찬가지입니다 티에 보고 없어요
자야 우두 마창 알고도 없습니다 자 이럴 때 이런 것을
여기 보시면 여기죠 컨텐츠의 벨 태그가 걸려 있는 녀석들
에이텍 얼릉 야수들 여기에 그 a 태그 뒤에다가 a 태그 걸려 있는 요즘
뒤에다가 애프터 에다가
어떻게 한다. 개시를 추가 하고요 다음에 어떻게 끝으로
회장의 이 태그가 걸려 있는 거에 하이퍼링크 있죠
http 그 다음에 따따 sba 점 서울 점 kr
이것을 값을 뒤에다가 이렇게 붙여진 다행입니다
그러면 결과적으로 화면에 어떻게 나와요 요런 형식으로 나올 수가
있겠습니다
되겠죠 그래서 그렇게 많이 쓰이는 건 아닌데 이것도 약방의 감초 식으로
간혹 갔어요 만약에 이것을 사용하려면 d 아래가
계속 이렇게 타이핑을 해 줘야겠죠
그저 똑같은 내용을 중복해서 타이핑 하니까 낭비가 되겠죠 그래서 간단하게
이렇게 타이핑을 하고 css 로 요 한줄만 주면 나머지 전부 다 적용이
되어 질 수가 있겠습니다
자 그래서 다시 상표로 하세요
예 링크 선택자 링크를 선택한 다음에 다음에 어떠한 돼요 어떠한 속성을
줄 수 있는데 이 속성도 알아두시면 좋겠죠
자 자 그다음에 부정 선택 자랑에 있어요 푸 정태 잘 뭐냐면
지금까지 했던 내용을 다 바꾸는 거예요 어
나를 제외한 모든 태그의 css 속성을 적용할 수 있다 이게 무슨
얘기라면
어떤 어떤 것을 선택을 해요 레저 서클 sfa 를 선택을 했어요
fl 을 선택을 했는데 부정 선택 짜는 건 내가 어떠한 fa 를 선택하면
나한테 속성이 적용된 게 아니라 fa 가 없는 애들 자 여기서 보면 fa
가 없네요 저 첫 번째 아이템과 3번째 아이템 여기죠
여기에 속성을 지정할 수가 이때는 입니다
그래서 이것도 결과 음을 보면 코드를 보면서 쉽게 이해가 되실 수가
있습니다
자 보시면 브라우저에서 볼게요
됐죠 자 보시면 헤더 태그 가 있구요 다음에 포티 가 있습니다 이것은
중복 아까 설명했던 된거 성냥을 하구요 여기 보시면
유애리 있고 li 로 리스트 아이템으로 이렇게 쭉 타이핑이 되어 있고요
서울산업 지능화 위시 센터 야오 굴이 있고 하이퍼링크로 묶여 있습니다
자 여기서
콘텐츠 l 태그 뒤에다가 이렇게 방금 링크 선택자를 이용해서요 값을 좋죠
그래서 뒤에 춤 나왔습니다
자 여기서 이제 부정 선택 자랑에 나오죠 콘텐츠 콘텐츠가 누구에요 예 적
콘텐츠의 래에 났을 줬어요
내가 이게 부정 선택하는데 fa 클래스가 fa 인 여서 을 선택한게
아니라 fa 가 나 니 녀석을 선택한 거에요
어디 중에서 베라 이 중에서 그저
다시 5 li 를 선택을 확인해요 근데 그중에서 fl 선택을 합니다
죠 근데 앞에 다시 있어요 아
li 중에 클래스가 fa 녀석을 선택하는게 아니라 f 에 가 없는 녀석
여기서 첫 번째 리스트 아이템과 세번째 리스트 아이템을 선택한 된
얘기에요
자 선택을 했으면 그 안에 속성을 주는거죠 속상 로써 백그라운드 컬러는
요런 새기다 지정해 주면 이렇게 색이 바탕 백그라운드에 속성의 값이
변경되어 지는거 확인가능 알겠죠
자 이게 뭐라구요 이게 부정 선택자 입니다
자 그래서 간단하게 3가지에 대해서 한번 살펴봤습니다
첫 번째 했던게 문자 선택자
아 문자 선택자 하나 빼먹었네요 그죠 자 보시면 요거 하고 넘어 게 아까
문자 선택자 에서 1st 레드 하고 퍼스트 라인 을 이용해서 첫번째
글자와 첫 번째 라인 우리가 선택할 수 있었는데
자 이걸 좀 빼 먹었네요
자 이거 보시면 이건 뭐냐면 드래그 셀렉션 2에 셀렉션
드래그 되어 있는 문자의 속성을 설정할 수 있습니다
자 이거 또 잠시 볼게요
오토 코드를 보면 금방 이해 되실겁니다
자 여기서 제가
브라우저를 볼게요
쟈 어떠한 그렇게 선택 해보게 클릭은 들어갑니다 선택이 되죠 그리고
파란색 에서 하얀색 글자가 하향으로 온다 이게 브라우저 갖고 있는
기본적인 디폴트 속성입니다 근데 위에 걸 다른 걸 좀 쉽게 얘는 파란색의
어떻게 노란 새로 되고 있죠
다른 애들과 달리 얘는 파란색의 없지만 파란색의 논란 해보겠습니다 자
이것도 속성 css 를 주면 되요
자 어떻게 된 거냐면 중조 기업지원 여기죠 콘텐츠 id 에 컨텐츠 아
이제 피해 퍼 스타 2
자 셀렉션 태그를 선택자를 주는 겁니다
그래서 보면 콘텐츠 콘텐츠 어디에요 여기죠
여기에 p 태그 p 태그는 여기죠
pt 거역 있고 여기도 있는데 여기서 첫 번째 차일드 우리 구조 선택자
p 태그에 1st 차일드 첫 번째 6 이래요
얘만 선택을 하는 거에요 이 밑에 있는 얘는 선택 안하겠죠 얘는 라스트
차일드 우리 구조 선택자
지난 시간에 했었던 거 기억나 지겠죠 nth 에서 배수를 선택할 수도
있고 이렇게 1st 차일드 라스트 차일드 대응해서 구조를 구조를
따져가면서 선택을 할 수도 있었습니다
자 그래서 p 태그 중에 1st 차일드 첫 번째 아이템을 선택을 했구요
그 다음에 콜론 을 땡 땡 땡 땡 키고 주고 셀렉션 선택에 되었을 때
속성을 이렇게 변경 한다.는 얘기에요
여기서 속성을 선 어 선택을 하면 셀링 되며 이처럼 선택이 되어 지면
셀렉션 되면 백그라운드 컬러를 파란색으로 바꾸겠다 컬러 글자의 컬러는
옐로우 를 받고 있다
선택을 해 준 겁니다 그렇죠 만약에 여기다가 글자를 선택했을 때 폰트
웨이트 두께를 볼드체 를 주는 거예요 그럼 어떻게 되요
가면 선택되는 순간 볼드체 가 될 수도 있겠죠
볼턴의 지원을 안하는 것 입니다 그렇죠
어 뒤에서 말씀 드릴 텐데
모든 html 포트 그 속성에 모든 브라우저에 다 적용되는 건 아니에요
그래서 이거는 지원을 안하고 뭐 있는 상태입니다
자 원치 구요
자 이렇게 해서 우리가 어 1st 레더 퍼스트 라인 을 선택할 수도 있고
아니면 선택 된거 셀렉션 이라는 선택 창을 이용해서 선택되어 있는 글자의
속성을 변경 할 수도 있겠습니다
자장 표로 돌아왔어요 자 그래서 이렇게 문자 선택자 1st 레더 퍼스트
라인 다음에 셀렉션 세 가지 꼭 기억을 해 주시고요
다음의 링크 선택자 그래서 링크 선택자 하는거 예약문의 쉬워요 참고적으로
여기서 속성 컨텐츠 란 속성 요거 사용방법 꼭 잘 알아두시면 유용하게
사용되어질 수 가 있겠습니다
다음에 부정 선택자 이것도 약방에 감초 식으로 간혹가다가 자주 c 에요
어떠한 클래스 에다가 이렇게 그 클래스를 주고 애가 아닌 다른 녀석들에게
속성을 주는 방법 부정 선택자 낫을 붙여지는 거죠
따라서 붙여 주는 방법 이것도 함께 알아 주시면 좋겠습니다
자 그래서 오늘 약간의 감초 라고 할 수 있는 3가지 문자 선택자
지금 그것은 대짜 부장 등 대짜 다시 한번 여러분 여러분들이 리뷰를
하시고 무한 반복 에서 동상을 청취 하시면서 꼭 본인이 직접 타이핑 아
끝까지 처음부터 끝까지 해 보는 습관을 들이시면 좋겠습니다
자 오늘 잡은 여기서 마치도록 하겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.