Seoul Wiz 실전 HTML5 & CSS3 동영상 강좌 제 6강 CSS 기본-I > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 6강 CSS 기본-I

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

Seoul Wiz님의 CSS강의 청각장애인을 위한 자막

안녕하십니까 필수 입니다 자 html 가 우리가 html 과 css 를

살펴보고 있는데요
5강 까지는 html 을 의 기본적인 태그들을 우리가 살펴 보았습니다
자 오늘 부터는 css 란 거에 대해서 살펴보도록 하겠습니다
여러분들이 좀 기억을 더듬어 보시면 css 웹 문서를 만들 때 기본적인
언어가 우리가 html 이 오겠죠
그래서 html 갖고 있는 태그들을 우리가 몇 가지 기본적인 것들만
학습을 해봤습니다
자 다음에 html 갖고 어떠한 문서를 이렇게 정보를 만들었어요
그러나 서 css 가지고 전체적인 레이아웃을 전 되던가 아니면 어떠한
특정한 곳에 색깔을 바꾼다 등 가 어떤 특정한 곳에 부분적 인 레이아웃을
변경 한다.든가 이런 작업을 하는 걸 우리가
어 시 ss 언어라 봅니다
그래서 오늘 서 부터 시작을 해서 css 기공과 속성들에 대해서 하나씩
살펴보도록 하겐은 하도록 하겠습니다 자 먼저 오늘은 선택 잘한거 css
에서 선택 잘한것 이 살펴보고 요 다음에 태그 선택자 자네의 스타 리크
선택하는 뭐냐면 전체 선택자 에요 그래서 태그 선택자 전체 선택자 다음에
전체와 특정 태그를 혼합한
이런 방법에 대해서 하나씩 살펴보도록 하겠습니다
자 먼저 선택자 란 특정 태그를 태그 가 뭐에요
html 문서를 구성하고 있는 요소죠
특정 태그를 선택하여 해당 택의 속성을 변경 하는 목적으로 사용합니다
자 무슨 말이냐면 이게 어떻게 보면 css 를 우리가 사용하는 이후에야
전층 이유에요 이게
어떠한 특정한 태그 했어요 자 그림을 보시면 제목입니다 본문입니다
제목입니다 봉 미자 나오자 자 이거는 우리가 코드를 일단 안 봐도 이건
우리가 h1 정도의 태그를 작성이 되어 있을 것 같고요
물론 다른거 로 작성을 해서 되어 하실 수도 있겠구요
다음에 본문 입니다 이것은 p 태그 를 이용해 썼구요 이용한 것 같죠
마찬가지로 이것도 h1 정도의 태그
다음에 오토 p 태그를 이용한 거라고 예상이 됩니다
이렇게 했을때 위쪽엔 거 달리 아래쪽에는 레크 라운드가 배경색이 노란
으로 지정돼 있죠
이렇게 글자의 색이 라든가 아니면 배경 의 색상을 선택을 해서 그 선택한
태그
h1 태그를 h1 테그 p 태그 면 p 태그
이거를 감싸고 있는 div 태그는 div 태그 등을 태그를 가리켜서 그
태그의 속성을 고치는 걸 변경 하는 거예요 그게 css 의 본질적 n
그 사용 이유입니다
자 그래서 코드를 나가 볼게요 자 lg 템을 문선 해요
아 css 언어는 html 문서를 기반으로 해서 그 안에 갇힌 5개
져있는 얼음 다
물론 css 스타 2 의 css 문서를 하지 원어를 별도의 문서로 뽑아서
거기다가 쭉 css 관련된 코드를 작성을 하고 이 문제를 html 로
링크를 거는 방법도 있습니다
어쨌거나 이 링크를 걸어 따라 하더라도 요 문서가 html 문서 안으로
들어오는 거죠 줘 자 자 어쨌거나 이렇게 해도 마찬가지죠
html 문서를 기반으로 해서 무엇이 작성된다
css 스타의 언어가 작성이 된다고 여러분이 먼저 생각을 하시구요
자 c 그러면 css 스타일이 작성된 위치가 있는데요 그 위치는 헤드
태그 html 보면 헤드 태그가 있고 크게
발이 태그 있다고 했죠 그리고 이 두 개를 묶은 뭐가 있다
html 태그가 있다고 했죠 이중에서 헤드 태그 아내의 이렇게 스타일
시작 태그와 종료 태그를 써 줌으로써 내 css 선택자 와 속성
속성 값을 코딩의 나갈 수가 있겠습니다
좀 구조 아시겠죠 코딩하는 방법 입니다 자 그 다음에 아까 css 의
목적은
html 의 태그 중에 어떠한 특정한 태그를 선택을 해서 그 테크 갖고
있는 속성 값을 변경 시키는 걸 그랬어요
자 그러면 지금 같은 어떤건 분자
자 h1 태그로 일단 제목입니다 타이핑이 되어 있고요 p 태그로
본문입니다 타이핑 되어 있죠 자 여기 어디에요 부분이죠
대부분 이제 자 좀 지우고 깔끔하게 복귀다 시에
자 요 부분이 어느 부분이 냐 면 유부 민자 여기에 이렇게
자 다음에 dr 불 태그 지난 시간에 배웠던 tiv 태그를 이용해서 블럭
방식이죠
그래서 갱 하지 않아도 바로 이렇게 블록을 지정이 됩니다
자 div 태그를 넣고 div 태그 안에 h 원과 p 태그를 이용해서
제목입니다 본문입니다 타이핑이 되어 있죠
자 여기까지 하면 별 내용 없어요 우리가 그동안 배웠던 html 코딩을
내용입니다
자 그런데 여기서 이제 css 스타일 별로 없구요 여기서 달았습니다 닦고
나서 보니까 어
div
밑에서 우리가 봤던 div 태그 하고 이렇게 되어있어요
그리고 그 div 태그에 백그라운드 우는
16진수로 칼라가 들어왔습니다 이게 css 인데 이게 무슨 얘기냐 하면
이 앞에 중 가를 앞에 요걸 우리가 선택 자라고 합니다
선택을 하는 거에요 그럼 무엇을 선택하느냐 태그를 선택한다.고 보심
되겠습니다
div 는 스타일 안에 dav 는 선택자 로 점 누구를 선택해요
div 태그를 선택하는 거예요 예 를 선택하는 거에요 그죠
참 선택했죠 선택한 거에요 이 di 부위를 선택을 해서 css 의 목적은
태그를 선택해서 그 태그의 속성을 변경하는 것이 있죠
그 태그 갖고 있는 div t 가구는 백그라운드 속성을 갔다가
백그라운드를 뭐냐면 배경색 입니다
이 백그라운드 속성을 속성 값 16진수 속성 값으로 이 값으로 변경 을
시키는 거죠 그래서 화면 4개 이렇게 나온 겁니다
자 전체 준코 좋아지겠죠 html 의 구도 안에 구주 안에 css 가
녹여서 코딩이 되는데 일단 css 코딩 하는 방법
내가 어떠한 특정 태그의 속성을 변경을 해야 겠 어 하는 거기 때문에 그
특정 태그에 선택자 를 이용해서 선택을 한다.는 거
태그 를 선택한 다는거 다음에 그 선택한 후에 그 선택한 태그의 속성을
적어 주구요
다음에 속성 값을 적어 줌으로써 속성을 변경 시켜 나갈 수가 있겠습니다
자 이것도 외우는게 아니라 이런 구조 자꾸 하다보면 손에 있겠죠 자 자
이것도 한번 쏘 수 열어서 같이 한번 코딩을 해 보도록 합니다
처음에는 가장 간단하게 여러분들이 가장 간단하게 접근한 게 좋겠죠
자 새로운 파일을 열어 볼게요
자 옆으로 좀 기고 요거는
저장을 하는데
대출 하기 때문 아무거나 되겠죠 차 자 먼저 html 문서 입니다
html 문서에 제가 h 왕 주구요
제목입니다 했습니다 자 그다음에 p 태그 줄게요
예 비 태그 주고
문입니다 자 이거는 이렇게 주고요
다음에 div 태그를 주겠습니다
됐구요 이 안에다가 h1 으로
좋습니다 그러면 div 가 지금 h 웡 가
얘기죠
p 태그를 감싸는 구조가 될 수가 있겠죠
본문 입니다 예 됐죠 자 브라우저에서 확인하면 뭐 별로 특별한 없을 거
같아요
음 이렇게 나오죠 자 여기서
자 스타일시트 css 는 해트 안에다가 타이핑을 한다.고 했습니다 그래서
그래서
스타일
이렇게 닫는 태그 열은 태그 두고요 여기서 일단 어떤 태그의 속성을
변경할 건지 태그를 선택할 수 있어요 누르자 그래서 선택자
태그 선택자 정해집니다 태그 를 선택한다. 로 선택자 의 선택자 에는 속성
선택자 도 있고 여러가지 테 선택지가 있는데
태그를 선택한다.고 해서 태그 선택자 힘들어서 div 태그를 선택하는
거에요
그리고 그 안에 에 백그라운드 컬러 백그라운드 줄 되구요 아니면 컬러까지
풀 되구요
그래서 샵을 붙인 다음에 칼라 16진수 우리가 이 클릭하시면
비주얼스튜디오 이스 플레이스 2013 펌 웹이 좋은 이유가 요런 계획된
지원이 달 되죠 이런게 많이 가 없으면 컬러 피커 응용 프로그램 간단한
응용 프로그램을 이용 하는지 아니면 포토샵 등을 이용해서 컬러를 우리가
정확히 뽐낼 수 있어야겠죠 근데 그런 기능이 컬러 피커 와 대화 상자가
여기 다 있어요 그대 명에 찍음 돼 여기서
좋죠 그걸 찍어서 선택을 하고 그 다음에
속성값을 종료할 때는 반드시 이렇게 세미콜론을 찍어주시면 되겠습니다
이 다음에 다른 속성을 또 변경할 수도 있어요 자 우선 이렇게 까지만
해보고 브라우저를 통해서 확인을 해보도록 하겠습니다
그러면 이렇게 되겠죠 자 왜 그랬냐 면
div 가 지금 div 의 속성을 백그라운드 에서 이런적 지장이 캠 있게
된겁니다
다르게 다른 속성을 축제는 종료할 때는 게 세미콜론 들어오죠 다른 속도
한번 써볼게요
보더 라는 속성이 있어요 이제 앞 보존은 뭐냐면 테두리에 요 그래서
테두리를 내서 o 픽셀 짜릿해 들려주는데
그 테두리 라인의 나중에 다시 할 겁니다
그 선에 스타일을 지정할 수 있고요 그 다음에 선에 칼라 글 또 지정할
수가 있어요
해볼게요 그러면 속성 두가지 백그라운드로 배경색과 그 다음에 보도에
속성을 증거죠 그리고 속성 값을 다 죽죠 마찬가 드리고 또 세미콜론을
종려 태그 종료 명령 조회 되고요
자 이것도 브라우저에서 견해 보면 이젠 이젠 어떻게 되겠어요
텔 3d 까지 나와 있는걸 확인 되어 있죠 자 자 중요한 것은
css 를 우리가 코딩하는 방법 입니다 헤드 태그 알바가 스타일로
시작해서 스타일로 콧날은 택을 지정해주고
다음에 어떠한 태그를 선택할 건지 선택자를 주고요
그 선택자 에다가 속성과 속성 값으로 이렇게 표기를 해 주면 되겠습니다
만약에 여기 div 태그가 또 하나 있어요
여기죠 또 하 1 의 dia 입니다
이렇게 적혀있어요 그러면 여기서 div 태그 선택자 를 선택했죠
얘는 div 태그를 선택하기 때문에 예를 짜 선택 하겠죠
그 다음에 얘는 선택할까 선택하지 않을까요 얘도 물론 선택을 하겠죠 왜
이 문서에 존재하는 div 란 div 는 다 선택하는 태그 선택자 입니다
그래서 확인을 해보면 축제로 이렇게 될 수가 있겠습니다
말게 나는 h1 태그를 탄 타고 싶어요 그러면 h1 태그를 추정 해주면
되겠죠
뒷전에서 h1 태그의 내려서
어 폰트를 약간 뜻 꼭 하고 싶다
너만 싸움 좀 헷갈린다 처음 섭 더한 특허 니까
백그라운드 컬러를 주는 데에 요번에는 나는
음 무인 색을 좋을까요
뭐 녹색 연두색 이런거죠 볼 거야 이렇게 주고 싶다 그럼 어떻게 되겠어
h1 배경색이 이렇게 변경될 수가 있겠죠 자 h1 은 div 밖에도
있고요
div 아랫 있죠 어쨌던 간에 h1 을 선택했기 때문에 모두 다 둘다
선택이 돼서 이렇게 선택이 될 수가 있겠습니다
간단하죠 너 될지 팀에는 문서를 만들어 놓고 거기서 변경 화우 자 속성을
변경하고자 하는 태그를 이렇게 바로바로 선택을 하시면 되요
선택을 해서 속성과 속성 값을 주시면 그 값 때로 적용이 될 수가
있겠습니다
같구요 자람에 이번에 이제 태그 선택자
어 방금 했던게 선택 자랑거리 살아본 거구요
그리고 태그 선택자 방금 알아봤던 내용하고 같이 우리가 다같이 알아본
거죠 그래서 안보면 특정 태그 해요 지금 우리는 div
div 와 h1 을 이용해서 한번 봤어요
특정 태그를 선택하여 css 속성을 정의할 수 있습니다
자 이 같은 경우에는 이 컬러가 이렇게 바뀌었어요
자 이게 뭐에요 유에 언어도 리스트에 리스트 아들 la 에 리스트
아이템이죠
그러면 얘를 갖다가 석상을 이렇게 변경을 싶어요 그러면 어 스타 1
css 스타일시트 에서 어떤 태그를 선택하면 된다
에라이 태그를 한테 험 되겠죠 그래서 여기 보시면 스타일 지정했고 li
태그의 털러
그 글자의 색상을 컬러 이런 속성을 같습니다 컬러를 이 색상으로 변경
한다. 그러면 이렇게 바뀔 수 있는 얘기겠지 바뀔 수 있다는 얘기겠죠
자 워터 한번 예제를 열어서 확인을 해보도록 하겠습니다
자 이거 보시면 에라이 어 시멘트로 되어 있네요 헤드와 들어있고 냄
이들의 꿀 섹션 들어가 있고 포터 들어가 있구요
자 여기서 li 의 컬러를 이걸 바꿔 어때요
그러면 여기 부위 지옥이 회사 쪽의 제품 조 계곡이 있으나 옮기자
요 부분에 그 폰트 컬러가 바키 셋째 이 색으로
자 브라우저에서 확인을 해봅니다
그러면 이렇게 바뀔 테니 얘기했죠
자 만약에 나는 음 여기 피트가 먹구요 p 태그에 배경 색을 빨간색으로
싶어요 그럼 어떻게 하면 된다구요
도장의 치면 되요 p 태그는
어떤 속성 백그라운드를 빨간색 내 되죠
레드 이렇게 시장을 되구요 아니면 16 진수 를 지정해 됩니다 레드 면
ff 00 00
자 이렇게 유기 벙 그러니까 어떻게 컬러 피케 이용해서 빨간색 찍어주고
되구요
자욱한 다음에 브라우저에서 진짜 실제로 확인해 보면 이렇게 되겠죠
되겠죠
자 그 다음에 다음 예제는 또 문제 한번 열어볼까요
자 열어보니까 이번엔 좀 많네요 그죠 헤더 시멘틱 태그를 사용해서 헤더
내비 섹션이 n
푸터 를 이용했는데 자 lip
아 특정 태그 선택자 를
li 와 p 와 h 를 동시에 선택할 땐 이렇게 콤마 로 쭉 나열해
주시면 되요
이렇게 나열을 돼 있으면 어떻게 컬러를 ff d 800 요 컬러 쓰는데
이 컬러가 어떤 칼레 모르셔도 모르겠지만 어쨌든 이 컬러를 쓰는데 2컬러
어디에 들어가면 li 태그의 들어가고 p 태그에 들어오고 h1 태그를
들어가는 얘기에요
자 이렇게 주고 나서 다시 밑에 h1 태그를 뚫어야 그러면 이 기존에
있던 요 값은 h1 에 컬러 ff d8 공이란 이 값은 무시되어 버려요
가장 나중에 코딩된 코드가 됩니다
하지만 li 태그 와 p 택은 살아 있는 거죠
그죠 작은데 밑에 p 태그의 속성을 폰트 왜 틀렸어요
칼라는 살아있지만 추가한 거겠죠 추가해서 폰트의 틈 뭐냐면 글자의 두께
볼드체 있죠
볼드 채 지정을 됐습니다 그래서 펀트 웨이트를 볼 2를 중 거에요
자 그러면
자 먼저 li 태그 p 택을 h1 태그 어디 있는지 볼까요
h1 태그 여기 있구요 그 다음에 li 태그 여기 있구요
다음에 p 태그 여기있네요 여기 dp 태그 있고요
이녀석들의 그 글자 색 쌈 컬러 글자 색상 이다 이 생을 일단 바뀌어요
바뀌고 나서 h1 에 태그는 다시 이걸 바뀝니다 h1 녀석들은 다시
2909 애플 파리라는
여기 되고 찍어 줘야 겠죠 예 1 할 때 이렇게 안쪽은 상관없는데
찍어주는 게 정성입니다
자 다시 들어와서 h1 에 컬러는 이 색으로 다시 지정해 준 거구요
다음에 p 태그의 속성 추가 했어요 어떤 속성 폰트 웨이트 라는 속성을
추가 해서 그 속성의 속성 값을 볼 주체 농어 리 아니라 볼드 제 두꺼운
채로 변경을 시켰습니다
자 실제로 한번 볼까요 경험 이렇게 되겠죠
자 먼저 ff d8 궁 0 으로 다 색깔 바꿔놓고 다음에 h1 의 색깔을
다시 바꿨어요 파란색으로 다음에 p 태그는 볼 쭉 볼드 했을 때 필테 가
섹션 애도 있고 포털 있죠
다 볼 2채를 바뀐거 확인 되실겁니다
되겠죠
자 이거 간단하게 한번 해 볼까요 자 새로운 파일을 하나 꺼냈어요 제가
이걸 똑같이 안하고 제 나름대로 그냥 한번 해 볼게요 자 만약에
헤더 태그 쉼 엔텍 앉지 뜰까요
지표 되고 안 찍게 되는데 이제 이
그 다음에 뭐가 있어요 법문에 들어가는 섹션이
자 그 다음에 또 뭐가 있다 부터
음 되시겠죠
알고
그러다가 제가 h1 태그
date 아
ha lte 아 자 좋고요 b 에다가
ul
li
메뉴 1
자 좋구요 다음 섹션 2 있어요
저장 할까요
자 섹션에 p 태그를 줄게요 그리고
컨텐츠 입니다 아
됐구요 이거는 퇴사 줄수
뇽 예정입니다
예 간단한 해볼게요 자 이렇게 잡고 나서 실제로 웹브라우저에서 보니까
떨어져서 보면
애플용 없죠 그냥 우리 얼굴 턱까지 배운대로 에요
자 여기서 나는 스타일시트 이제 뭔가 꾸며주고 싶어요
그래서 스타일을 주도록 하겠습니다
됐죠 자 준 다음에
어 태그 선택 헤더를 먼저 선택을 해 볼까요 헤더에 & 져 컬러 글자를
나는 몰라 겠다
어 파란색을 하겠다 지정을 했어요
자 조금 줄여 볼까요 이거
가치나 두고 보면 더 편하겠죠 이렇게요
젤크 나와서 새로고침 해 보면 어떻게 되요 헤더의 글자 색상이 변한거
확인이 되시죠
자 그 다음에 나는 만약에 li 태그를 선택을 하겠다
다음에 백그라운드 컬러를 어떻게 어 노란색으로 하겠다 노란색 지정을
해주면 되겠죠
예 그렇죠 자 멘트로 체험이 그대 있구요
자 이번엔 않은 p 태그를 한번 주겠다 잡히 태그도
이렇게 같이 가겠다 그럼 에피 태그 도 마찬가지 패턴 되겠구요
그 다음에 거기죠 p 태그로 다른데서 와 바꿨어요
p 태그에 백그라운드 컬러의 색상은 레드로 가고 싶대요
그러면 아까 제가 그랬죠 나중에 추후에 가장 나중에 적용한 속성이 먼저
적응한 속성을 덮어 씌어 버립니다
li 태그는 그대로 이 세가지만 p 태그에 색 속성 백그라운드 라는
속성은 다시 레드 로 변경되어 있겠죠
되겠죠
자 그 다음에 뭐 하나만 될까요 푸터
자 포터의 보다 먼저 볼까요
ur 보험은 너무 1 픽셀
대쉬 듯 한게 있어요 쩜쩜쩜 실상니라 점성 입니다 컬러는
이렇게 해 줄까요 예 이렇게 줄게요 자 그 다음에
실제로 확인해 보면 이렇게 대해서 이서희 잘 안 보이네요