Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 7강 CSS 기본-II
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 필수 입니다 자 오늘 html css 7번째 시간 css
기본 두 번째 시간을 진행하도록 하겠습니다 자 지난 시간에 우리가 css란 게 무엇이고 css 를 어떻게 코딩을 해 나가는 g
html 헤더 헤드 문서 헤드 태그 안에다가 우리가 스타일이라는 태그를
이용해서 시작 태그와 종료 태그를 입력해 주고요
그 안에다가 선택자 를 이용해서 속성과 속성 값을 이용했습니다
자 그래서 지난 시간에는 우리가 선택자 중에 특정한 태그 지하 이브 태그
라든가 h1 태그 라든가 p 태그 아니면 li 태그 아니면 에 스타리그
로 전체를 다 선택하는 특정 태그를 선택하는 음 태그 선택자 에 대해서
살펴 보았구요
자 오늘은 보시면
아이디
id 가 뭔지 몰라도 일단 id 와 클래스 란걸 우리가 살펴볼 거고요
다음에 태그 태그 를 선택하는게 아니라 아이디와 컬렌 스 를 선택하는
선택자 가 있습니다 id 선택자 클래스 선택자 다음의 속성을 선택하는
선택자 도 있어요
다음에 후손 및 자선 선택자 란 것도 있고
동의 선택 잘한것 있는데 이게
css 의 그 외 래 어 져 외래 외래어 아니라 외국 말이죠
외국어 널 왔다 우리나라 말로 젊게 강제로 어떻게 좀 이렇게 반여
하다보니까 후손 자손 동의 모이게 조금 어설픈 넣 단어들이 선택이 되고
있는데
어 이렇게 보면 어렵지만 실제로 코드를 보고 저와 같이 오늘 학습을 진행
하면 아무 어려운 내용닙니다 굉장히 쉬운 내용들입니다 그래서 하나씩
하나씩 우리가 부담없이 학습을 해 나가실 수가 있습니다
자 그럼 먼저 하나씩 하나씩 살펴보도록 합니다
먼저 id 와 클래스 랑 거에 대해서 살펴봅니다
태그의 id 와 클래스를 이용하여 css 의 속성을 설정할 수 있습니다
자 무슨 얘기냐 하면 자 오른쪽에 그 태그 html 문서 먼저 장안
볼게요 자 여기 보시면 우리가 그동안 봤던 div 태그가 있고 div
태그 도안에 하나가 있구요
예약 우회하고 쌍이 겠죠 또 이해하고 애하고 쌍이 고
이해하고 이해하고 싸이 겠죠 그 안에 h1 태그가 있고 ul 태그 가
이렇게 씁니다 l 지원되고 있고 앵커 태그가 있고요
그렇죠 이럴때 태그 안에다가 이 태그의 고유한 유이 크 한 갑 id 값을
줄 수 있다는 거예요
이래서 div 태그 매 바깥쪽에 있는 t 10부 태그 너는 아이디가 레비
라는 녀석이 야 라고 우리가 유니크한 이중 을 붙여 주는 거예요 id
값을 주는 거죠
다음에 그 안에 있는 div 는 또는 컨텐츠 아 그리고 너는 사이드 배너
이렇게 뭔가 id 값을 주면 날 위해 css 에서 속성을 줄 때
div 태그를 중요하니 라이 id 값을 선택자 로 사용할 수 있던
얘기에요
이제 우리 치안에 div 그 다음에 이렇게 해서 이렇게 해서 어떤
속성들을 날렸죠
이게 아니라 어떻게 앞으로 이제 어떻게 할 수 있다 사비 량을 앞에 붙여
주고
내리면 내부 굴비 렇게 선택을 해주고 그 다음의 속성을 쭉 변경을 시켜요
그죠 이렇게 하면 모든 dive 문서에 존재하는 모든 d 에바다 산행
되지만
렙을 이렇게 줬어요 일단 여기는 누구 만 예만 4만 2 da 테고요 분만
선택을 할 수가 있단 얘깁니다 다름 div 는 선택이 안되구요
잘해서 id 와 클래스 자 클래스 했는데 id 아킬레스는 똑같다고
생각하시면 되요 여러분들이
근데 아이디로 이렇게 지정할 수가 있는가 하면 또 클래스라는 이런
속성으로 클래스 값을 지정할 수가 있어요
자 l 아이가 지금 1 아이템 리스트 아이템의 1 2 3 5 개 줘
다섯 개인데 이때마다 클래스 로 첫 번째 너는 메뉴 일이야 너는 메뉴
이야 메뉴 3 2 1 메뉴 5 이렇게 이름을 주는 거에요
아이디어 똑같은데 이름이 단지 클래스 한거 그리고 css 에서 사용할 때
아이디를 id 를 선택할 때는 앞에 # 을 붙여 이렇게 # # 을
붙여주고 id 이름을 절입니다
자 반면에 클래스가 이렇게 지정되어 있으면 클래스를 선택할 때는 점 을
찍어요 점 한 다음에 클래스명을 써 주면 되겠습니다
자 그러면 요 예제 한번 실제로 보도록 할게요
자 비쥬얼 스튜디오를 실행을 시켜서
예제를 보면 굉장히 쉽게 여러분 더 빨리 해 말로 한거 보자 더 빨리
이해될 수 있어요
자 먼저 어유 뭐 4는 시멘트 택을 안쓰고 요렇게 씁니다
헤드 di 밑에가 한 덩어리 그 다음에 두 덩어리
좀 뛰어 보면 3 덩어리가 있어요
근데 첫번째 덩어리는 헤더 헤더 에는 해당 되구요 이게 뭐 시멘트 침
nt 태그로 보면 뭐예요
이거죠 이거 뭐죠 이거 이렇게 해야 되는데 div 테고 약간 고전적인
방법으로 이렇게 해서 상관이 없겠죠
자 그 다음에 내부 했어요 우리가 보통 맵을 주는 이유는 콘텐츠 를
갔다가 이렇게 바깥쪽 한번 감싼다 우리가 골에 불 우리가 많이 씁니다
그 안에 컨텐츠와 사이트 배너가 2개의 div 덩어리가 있어요
잠 애프터 와 존재를 합니다
음 이렇게 되어 있고요 자람에 이제
스타일 시트를 봐야되는데
자 스타일 시트를 볼 때에 먼저
어 # 헤더 라고 했어요 제가 #2 붙어있으면 id 를 지칭한다. 로 쪼금
헤더 라는 id 값이 있겠죠 자 봅니다
헤더 란 id 값이 여기 있네요 그래서 얘는 어떤 속성 같군요 면 미드가
150 이래요
가로 사이즈가 150 백그라운드 컬러는 요런 새기고 그 다음에 보더 보던
은 테두리에 여태 들이라 의 보도는 1 픽셀의 솔리드 면 그냥 실상입니다
그리고 칼라는 요런 색으로 지정 했대요
다음에 텍스트 올라 인데 이건 가로 정렬이 에요 그래서 센터 면 중앙
정렬을 할 수 있겠습니다 일단 여기까지 실행시켜 온것 결과만 볼게요
자외 웹브라우저에서 실행을 딱 쓸 경우 이거예요 요 밑에 일단 보지
마시구요 유품 보면
자보 더 500 픽셀 이래 500p 3 미드 해서 500 픽셀 위드가
가져왔고 요 그 다음에
텍스트 온라인 센터 레오 그래서 가운데 정렬
가로축 가운데 정렬 다음에 보도가 1팩 셀 레 어 실선 솔리드 미실 선임
들어서 바깥쪽에 1 픽셀의 라인이 보도 값이 들어 왔구요
다음에 백그라운드 는 요런 세계를 외 글 백그라운드 정 안정되어 있습니다
이게 어디 di2 첫 번째 덩어리
요기 속성을 준 겁니다
쉽죠 자 그 다음에 두 번째를 대로 급 네비 이 때 열에 매분 뭐였냐면
본문의 해당되는 전체를 감싸오는 큰 덩어리 됩니다
자네 배도 속성을 들어가 있네요 자 500 이래요
다음에 백그라운드 칼라 이런 색 이래요
그래서 500 가로 베개에 폐 크라운 칼라 이런 청록색 들어가 있습니다
다음에 이번에는 포도가 이 픽셀이 고 실수 아니고 요런 색이 돼요 그래서
이 픽스 위 쪼꼬 헤더 보다는 약간 두껍게 들어가 있죠
두껍게 epx 에 들어가 있는건 눈으로 확인 되구요
다음에 텍스트 온라인 센터 래요 야 다음에 업어 플러 아직 안 배운
기능인데 5블럭 히든 뭐 일단 너무 학교 다음에 다시 약해요 이거는
다음에 레벨 속성 좋은데 램 안에 이렇게 두개가 있습니다 두 개가 dab
중 투기가 또 있어요
자 그리고 와 1 뉴쭉 에 있는 녀석의 이름은 아이디는 컨텐츠 아래쪽은
사이드 배너 래요
그래서 둘다 컨텐츠와 사이드 배너에 속성이 주어지고 있습니다
자 위드가 351회 먼저 컨텐츠 그래서 컨텐츠 위 350 들어간 거에요
다음에 보도일 픽셀 솔리드 레드 빨간 색으로 1 픽셀의 외각 테두리 라인
들어갔구요
다음에 플러 기능이 있는데 자 이거는 나중에 다시 본격적 설명 드는데
간단하게 만 설명드릴께요
자 풀러 lfg 정열의 관련된 거에요 그래서 레프트 면
큰 덩어리 예 저의 내비 바깥 좀 감싸고 있는 데에 밤 싸 비스트의
컨텐츠 예를 왼쪽에 붙이 했던 얘기에요 이렇게 왼쪽에
정렬이 가는겁니다 그리고 이 컨텐츠 다음에 나온 외도 그 옆으로 케
붙여줘야 개
그래서 자크 옆에 나오는걸 사이드 배너 줘
음 여기죠 사이트 뱅크 다음 덩어리 자 사이드 배너 도 보시면 플롯
속성의 값이 래 프 트 웨 어
왼쪽 붙여요 근데 얘 를 먼저 붙었죠 컨텐츠를 그래서 콘텐츠 옆으로 푸터
나올 수 있습니다 즉
다음에 다시 설명할 텐데 조금 자세하게 설명 되게 보도 까고 들어가는
것은 이제 아시겠죠 요 자 플러스를 레프트 레프트 졌죠
잘 생각해보세요 div 라면은 블럭 타입이라고 l 타입 2
그래서 갱을 안시켜도 애가 우리가 레고 블럭 쌓듯이 에 나오고 그다음 그
밑으로 애가 이렇게 나온 떠오르세요
즉 컨텐츠가 나오고 큰 밑으로 사이드 배너 가 나와야 되죠 근데 결과
모음 다르죠
콘텐츠가 나오고 사이드 매너가 밑으로 떨어지게 여기 나와야 되지 원래
하지만 이쪽에 나왔죠 옆에 왜 그러냐면
블럭 형태가 기본인데 플롯 이자는 플로트 라는 속성을 주구요 거 자
레프트 를 주면
옆으로 이렇게 붙어서 나와요 그 공간이 없으면 떨어지지만 공간이 있으며
프로 붙는 섬기겠습니다
우리가 이제 레이아스 잡을 때 계속해서 허위 플룻과 코마 있어요
굉장히 중요합니다 그리고 이 플러 기능을 쓸 때는
2 div 를 감싸고 있는
바깥쪽 예전에 랩 죄와 내 베다가 오브 플로우와 히든 이라고 줘야지
됩니다
예 조금 어려울 수 있는데 일당 약도 생각하세요
div 가 블록 타임이 땜에 떨어져 되는데 밑에 떨려 되는 데에 레포트를
주면 공간이 있을 때 옆으로 봅니다 공간이 없으면 떨어져요
이제 제가 그리고 바깥쪽에 오버플로우 히든 이라는 속성을 줘야 된다 라고
일단 안개를 하시구요
자 그 다음에 푸터 가 있어요
자 포터와 인데 포터는 음 여기 있네요
자 클리와 보수를 좋고 클리어 보스는
그래서 안 줘도 될 거 같은데 플루트 lf 틀어 줬어요
그러면 이 속성이 계속해서 이어 이 밑에까지 내려올 수가 있습니다
영향을 미쳐요 그래서 그것을 깨끗이 u+ 속성 - 없애고 그 없애기
위해서 클리어 보수 좋구요
잠의 위즈 5배 502 고백 브라운 컬러 이런 새기고 보도 3 팩스의
약간 두껍지 요 그 다음에 텍스트 올라 에 가운데 좋습니다
이렇게 들어가 있고 음 이게 전부 다 뭐예요
아이디가 아이 직 선택자 를 이용한 css 속성 변경 입니다
아이디는 정리하면 이렇게 # 을 이용해서
우리가 선택할 수 있다는 거 그리고
html 태그 안에는 아이디는 땡땡 해서 이렇게 id 값을 지정 하실수가
있겠구요
자 다음에 밑에 보시면 메뉴 1 메뉴 1 산모가 있죠 자 메뉴 1 앞에
본점이 있어요 이거는 누굴 선택한다.
클래스 선택 할 때 사용하는 클래스 선택자 입니다
그래서 메뉴 1 여기 있네요 자매 뇨 135
다 여기 있죠 그래서 메뉴 일에 컬러를 누런 색으로 하겠다 폰트 했든
볼도 메뉴 1 가보니깐 컬러 받는 됐고 폰트 웨이트 볼트로 되어 있습니다
사람의 메뉴 135 의 폰트 사이즈 20으로 안되요 그래서 20 픽셀로
커진거 확인이 되십니다 그래서
id 늘 샵으로 선택을 하시구요
클래스 는 이렇게 점 으로 선택을 해서 속성을 그때그때 병가 힘
되어있구요
어 이거는 예전엔 봤죠 이렇게 선택자를 여러 개 서 나열 했을 때는 콤마
로 9분해서 계속 연결해서 쓰시면 되겠습니다
자료 것 좀 나오니까 한번 코딩을 한번 해 보고 넘어가도록 할게요
html 문서 저장을 할게요
자 먼저 시민 택을 안 하고 그냥 d 열 9일 할게요
얘가 헤더가 텔레 저 구요 자네
애가 봇물 색상이 되게 되고
토 터가 될 녀석까지 지정했습니다
포터 라고 이렇게 써 볼까요 다음에
자 hair 해도 됐구요
자 본문은 두 개로 나눠 줘 컨텐츠와 배너 나라 준다 그래서 테러의 v
한덩어리 나두고 또한 덩어리 되어 에그 2 넣었습니다
자애를 먼저 id 값을 하나씩 지정 해 줄게요 아이디는
페더 라고 할게요 다음에 여기 아이디는
뭐랄까요 랩으로 감싼 자로서 내 불알 게요
다음에 여기는 id
컨텐츠 라고 해주고 또 id
사이트
변화 라고 할게요 사이드 란 말 쓰는데 너 어쨌든
지금은 그런 게 중요합니다 div 를 id 를 준비 된 거죠 자 푸터 도
마찬가지로 id
토 터 라고 하겠습니다 자 일단 이렇게 놓고 그 다음에 여기 컨텐츠의
리스트가 있네요
그래서 ul 주고요
에라이 주면 되겠죠 그래서 애미 예
일반 3
2345 죽 없구요
자 여기는 배너와 들어갈 한국 인가 봐요 그래서 이거는
뭐라고 할까요 이미 tan 팔로어 질까요
img 속성 srg 넣어 줘야 겠죠
자 일단 그냥 비워 주도록 하겠습니다
자 전체의 구조와 된것 같아요 그래서 이거를 브라우저에서 한번 확인해
볼게요
그러면 이런 구조 줘 자 이미지 깨진 것은 당연 깨지 겠죠 이제 우리
니까 자 이미지 먼저 조금 찾아왔고 넣어줘 갈까요
자 sba 홈페이지 들어서 아무 이미지를 한번 가져올게요
요거 가 줘 볼까요
예 요 경로 가져와서 재활용 하겠습니다
되겠죠
됐구요 자 문제는 일단 헤더 부터 하나씩 볼게요 헤레라 보더를 하나
주는데
그리고 스타일 들어가게 서 스타일 태그 시작 태그 주택을 좋고요
자 여기다가
음 선택의 되니까 아이리 선택할 땐 # 으로 시작한다. 고 있습니다
헤더를 선택을 했구요 자 너는 먼저 보도 구루 좀 주께 1 픽셀 다음에
솔리드 타입의 색상은 타라 2 3 다하여 쉰 후 그냥 좋겠습니다 2
그레이 칼라의 요 자 다음에 넓이도 좀 주고 싶어요 그래서 w 위드
값을 주는 데 미 제값을 500 을 주도록 하겠습니다
자 그 다음에
저 빠졌죠 이게 그 다음에 또 속속 뭐 줄까요
폰트 사이즈 줄까요 폰트 사이즈의 폰트 사이즈를
어 단위가 em 이란 단어를 쓸 수가 있는데요 이다해 뭐냐면 12m 이면
기본 원래 크기에요
그래서 여기서 2가 되면 두 배가 되는 거고 배수로 나오는겁니다 1.5
면 50% 큰 글자 기본 글자 크기가 일이고요 1보다 크면 커지는 보고
일반 자금 잡아 지는 거겠죠
그래서 음 애걸을 하니 정도 줄게요
그 다음에 두껍게 하기 위해서 톤 트 웨이트를 볼 두루 주도록 하겠습니다
사람의 가운데정렬 시킬 게요 않음 특히 에서 텍스트 온라인을 센터 로
지정을 하겠습니다
이렇게 좀 많은거 같지만 별거 아니죠 500의 1 픽셀의 보도에 폰트
사이즈 2배 키웠고 두껍게 볼드체 있고 가운데 적용시켰습니다 작열감 을
재생 하면 이렇게 되겠죠
자 포터 드하 할까요 쉬운거 먼저 하고 갈게요 자부터
붙어도
쓸께요 요거 그걸 뭐 특별한 것도 없을 거 같아요
되겠죠 포터의 는 좀 더 많으니까 건 드릴까요
백그라운드 마 하나 더 좋을까요 예 그라운드 칼날을
어떻게 주황색으로 한번 바꿔 보도록 하겠습니다
됐죠 자 문제는 그 다음에 이제 요구에 요기
자 이걸 만드는 데 먼저
넵 을 선택해 되겠죠 커다란 r 앱을 선택을 해서
자 위드
500 픽셀로 할게요 자 다음에 보도를 줍니다
1 픽셀의 술 이드의
회색으로 어 주도록 하겠습니다
됐구요 자 그 다음에 내가 이쪽 덩어리 div 이쪽 덩어리와 이쪽
덩어리가 옆으로 횡으로 가야 되겠죠 그래서 고거 를 지정하도록 하겠습니다
제가 레벨 랜 밑에 뭐가 있냐면 뭐였죠 컨텐츠가 있는 거죠
이렇게 지정을 해서 사용을 하셔도 되구요 아니면 어차피 컨텐츠 란 id
가 유익한 여기 이문세 예 밖에 없죠 그래서 앞에 랩을 생략해도
상관이 없겠습니다 자유를 왼쪽으로 계속해서 붙여 나가면서 정열을 시키고
싶다 해서 플로트 라는 것을 준다고 했어요
웹 툴 주변 되겠구요 자 마찬가지로 밑에 있는 거
뭐예요 사이드백 애너 얘도 마찬가지로 플루트를
레프트 를 주도록 하겠습니다 자 좀 그 보약이 위해서 보도를 줄게요
텍스
솔리드
요렇게요 카피해서 대너 쪽에도 똑같이 주도록 하겠습니다
자 그리고 이렇게 아래쪽 이다 플루트를 주면 위쪽에 다가
오버 플로어 시즌 을 줘야 됩니다
자 확인해보면 이제 옆으로 붙었죠 자 부 터 인데 너무 간격이 좀 대 매
한거 같아요 그래서 여기다 위드가 술좀 줄게요 미드를
뭐 1
300 정도 일까요 예
주면 이렇게 되겠죠 차
음 이렇게 되겠죠 300억 나머지 부분은 내가 차지합니다
자 그 다음에 클래스 클래스 값들을 한번 주도록 해요 미라클 li 에다
클래스 한번 써볼게요
클래스 는 여기다가 메뉴
그래서 클래스 값들을 e
3 4
뭐라고 수정을 했고요 자 클래스 이제 줌 되겠죠 그래서
둘다 주가의 왜냐 메뉴 이래
이건주 좋을 거야 li 태그의 다가
컬러 폰트 컬러 를 갔다가
해서 진한 남색 1 바꿔 볼까요
꼬 요 작은 데에 라이가 이렇게 되었기 때문에 이 상태에서 보면 li
태그의 색상 갑이다 박혀 있겟죠
자 그래서 나는 저 파란색의 메뉴
메뉴 이래 컬러를 저 파란색이 말을 안들어요 빨간색으로 싶어요
저 이렇게 바꿨다 하면 메뉴 1만 색깔이 빨간 받겠죠
그 다음에 나는 메뉴 삶도 적게 받고 싶어 그녀 패커 쭉 드릴께요
5번 선배 그러면 1사 몸 안 자 이렇게 변할 수가 있겠죠
댓글 0개
등록된 댓글이 없습니다.