[음악 재생] 

DOUG 로이드 : 그럼 한 번 더 보자 비디오는 하나 이상의 언어에 대해 이야기합니다. 우리는 CSS에 대해 이야기 할 것이다이 시간. 에 대한 짧은 그래서 CSS, CSS 스타일 시트, 우리가 사용하는 또 다른 언어입니다 웹 사이트를 구성 할 때. 이런 식으로 생각해보십시오. HTML은 우리가 구성하는 데 사용하는 것입니다 경우 우리가 우리의 페이지에 넣을 내용, CSS는 우리가 일반적으로 사용하는 도구입니다 우리의 웹 사이트를 보는 방법을 사용자 정의하고, 어떻게 사용자 경험 정말로 우리의 웹 사이트와의 상호 작용이다. 

HTML과 유사한, CSS는 하지 프로그래밍 언어. 그것은 논리가 없습니다. 이 변수가 없습니다. 그것은 그 어떤 종류의가 없습니다 C가 수행하는 관련 일을 흐른다. 그것은 스타일의 언어입니다. 그리고 문법은 꽤입니다 단순하고, 단지 설명 방법의 요소 우리 페이지가 특정 HTML을 가지고 요소를 수정해야합니다. 이를 위해, 당신은하지 않은 경우 아직, HTML에 우리의 비디오를 시청 또는 익숙하지 않은 HTML 일반적으로, 당신을 그 살펴 할 수 있습니다 CSS의 제 때문 논의 에 의존하는 것입니다 HTML에 대한 지식. 

그래서 여기 정말 간단한 CSS 스타일 시트. 당신은 적이없는 경우에도 전에 CSS로 프로그램, 당신이 알아낼 수 나는 확신 이 스타일 시트는 않습니다 정확히. 그것은 무엇을합니까? 글쎄, 우리의 웹의 몸에 적용 body 태그 사이의 페이지, 모든 우리의 HTML에, 그것이 설정 파란색에 해당 페이지의 배경색입니다. 음, 아주 간단한 스타일 시트입니다. 그것은 실제로 매우 인간이다 쉬운 언어, CSS. 그래서 당신은, 그것을 전에 사용한 적이 경우에도 당신은 아마 무슨 짓을했는지 추측 할 수있다. 사실, 경우 우리는 페이지를로드 이 스타일은, 어떻게 든 내장 된 우리의 페이지의 배경색 것 블루, 표준 흰색하지합니다. 

그래서 우리는 어떻게 스타일을 만들 수 있습니까? 그럼 먼저, 우리는해야 선택기를 식별합니다. 마지막 예에서, 그 선택은 몸이었다. 그 다음 우리는 개방을 중괄호, 우리는있어 정의를 시작하려고 그 선택에 대한 스타일. 중괄호 사이에, 우리 다만 키 값 쌍들의리스트를 가지고있다. 이전 값 쌍이었다 배경 색상 블루 세미콜론, 그러나 우리는이 점점 더 많은 일을 할 수 있습니다. 여러 가지 적용 할 수 해당 태그, 그 선택의 몸에. 그들 각자로 구분됩니다 세미콜론, 우리는 그들 각자 전화 선언, CSS 선언. 우리는 모든 스타일링 우리가 함께 할 때 특정 태그에 적용 할, 우리는 그냥 닫는 곱슬이 스타일 시트를 종료 중괄호, 우리는 스타일 시트를 정의 완료 특정 선택합니다. 

몇 가지 일반적인 CSS 속성은 무엇인가? 글쎄, 어쩌면 당신은 넣을 뭔가 주위에 테두리. 당신이 말할 수 있도록, 테두리, 그게 당신의 열쇠가 될 것입니다, 다음 값이 될 것이다, 어떤 스타일, 색상 및 폭 당신이 원하는. 그래서 스타일은 고체가 될 수 라인, 점선, 파선, 물결 모양의 줄 것 능선. 아마 당신은 그것을 갖고 싶어 파란색 또는 검정색 또는 녹색합니다. 어쩌면 당신이 원하는 1 또는 2 또는 10 픽셀 (폭). 당신은 그 모든 일을 지정할 수 있습니다. 어쩌면 당신은 배경을 설정하려면 특정 방식으로 페이지의 색상. 우리는 이미 설정, 그 보았다 본문의 배경은 파란색합니다. 

그럼 당신은 핵심 단어를 사용할 수 있습니다, 그래서 CSS는 특정 색상을 가지고 즉, 그것으로 녹색, 파랑 구축 블랙, 우리가 알고있는 아주 간단한 색상. 하지만 당신은 어떤을 지정할 수 있습니다 당신이 좋아하는 것 진수 색상입니다. 색이 식별​​ 될 수 리콜 세 진수 숫자 세트로 0에서 255, RG와 B에 적색, 녹색 및 청색 성분. 그래서 우리는 지정할 수 있습니다 우리가로 원하는 색상, 대신에 파란색 또는 녹색 또는 검은 색의 사용, 파운드를 사용하여 진수의 다음 여섯 자리, 그것은 우리에게 줄 것이다 여섯 자리 색상. 그래서 배경색이다. 

또한 전경을 일반적으로 색상, 페이지의 텍스트가 될 것. 그리고 당신은 유사 것을 할 수 핵심 단어와 6 자리의 진수와 함께. 그래서 당신은 어떤 색상을 지정할 수 있습니다 당신 페이지의 텍스트를 원하는 특정에 대하여 배경 색상, 최대 위. 또한 변경하고 처리 할 수 글꼴, 그리고 그 길을 텍스트 페이지에 렌더링됩니다. 

그래서 당신은 당신의 글꼴 크기를 변경할 수 있습니다. 당신은 이러한 추가 등의 키워드를 사용할 수 있습니다 매우 작은, 또는 작은 XX, 또는 중간, 큰, 등. 당신은 고정 된 포인트를 사용할 수 (10) 점, 12 점, 등등. 당신은, 백분율, 80 %, 20 %를 사용할 수 있습니다 여기서 100 %는 기본 글꼴입니다 일반적으로 것입니다 크기, 11 또는 12 포인트 같은합니다. 아니면 심지어을 기반으로 할 수 있습니다 가장 최근의 글꼴 크기의. 당신이 뭔가를 쓰고 당신이 알고있는 경우 이 작은을 위해 당신이 원하는 것은,이다 하지만 당신은 몰라 정확히 크기를 이 수, 음, 그냥 말할 수 할, 글꼴 크기를 작게. 그리고, 떨어져 기반합니다 그냥 위는 글꼴 크기입니다. 그리고 당신은 더 작거나 더 클 수 있습니다. 그래서 다른 많은있다 방법은 글꼴 크기를 지정합니다. 

당신은 또한 무엇을 지정할 수 있습니다 당신이 원하는 글꼴 가족. 당신은 특정가있는 경우 이름에 방법이 CSS-- 우리는 그것에 대해 얘기하지 않을거야 here--은 매우 특정 글꼴을 정의 그리고 귀하의 페이지에 그것을 포함. 또한 일반적인 이름을 사용할 수 있습니다. 웹 안전 글꼴이 많이있다 즉, CSS에 미리 정의되어 있습니다. 그리고 당신은 마이크로 소프트의 사용자 인 경우 지난 20 년에 사무실, 당신은 아마에 익숙 이러한 웹 안전 글꼴을 많이 이미, 굴림, 굴림, 새, 조지아, 굴림, 굴림 택배 등등. 사람들은 모든 웹 안전 글꼴 간주됩니다. 의 그리고 실제로, 일부 이유 그들은있게되었습니다 모든 페이지를 web--하게 사용될시켰다 이 기본에 액세스 글꼴을 설정했다 다양한 세리프, 모든이와 우리가 들어갈 수 없습니다 글꼴 물건, 그러나 이들은 보통 당신의 CSS에 접근, 당신이없는 경우에도 그렇지 않으면 글꼴을 정의합니다. 마지막으로, 당신은 당신의 텍스트를 정렬 할 수 있습니다, 가되는 대신, 기본적으로 정렬 왼쪽에, 당신은 할 수 오른쪽으로 정렬 또는 당신은 중앙에 정렬, 또는 수 이 두 여백을 칠 수 있도록 정당화. 그 그래서 당신이 사용할 수있는 모든 옵션은 텍스트의 모양을 변경하려면, 그것은 페이지에 어떻게 표시입니다. 

귀하의 선택기는하지 않습니다 태그 만해야한다. 우리는 이전에 body 태그를 보았다 선택 및 태그 선택기 그냥 같이 않습니다. 당신은 당신에게 다음 태그 이름을 지정하고 해당 태그에 대한 스타일을 정의합니다. 하지만 당신은 뭔가를 할 수 ID 선택했다. ID 선택은 매우 비슷합니다. 하지만 지금은 사용하지 않는거야 그, 통지 HTML 태그, 난,이 경우, 사용하고 있습니다 #unique, 또는 고유 해시. 당신은 기억이 있다면 우리의 HTML 비디오, 우리는 이야기 태그 속성을 가질 수있는 방법에 대해. 

그리고 하나의 속성은 그 적용 거의 모든 HTML 태그에, 그러나 우리는 그것에 대해 얘기하지 않았다, ID 태그라는 뭔가가있다. 그래서이 특정 CSS는 것 만이 HTML 태그에 적용 매우 구체적인 ID, 당신의 이름을 지정했는지. 당신이 어딘가에있는 경우에 따라서 코드에서 어딘가에 HTML 파일, 태그와 당신의 이 태그에 속성으로 지정, ID는,이 독특한 같습니다 특정 스타일 여기에 단지 사이에 적용됩니다 고유의 ID와 해당 태그. 

또한 뭔가를 할 수 클래스 선택했다. 갖는 이외에 그래서 ID는 또한 할 수있는 속성 HTML 태그에 클래스 속성을 추가 할 수 있습니다. 그리고 당신은 클래스 속성을 사용할 때, 이는 여러 개의 태그에 적용될 수있다. 그래서 당신은 몇 가지가있는 경우 그 어쩌면 당신이 말하는 유사한하려는, 열린 태그 ㅋ, ㅋ, ㅋ, ㅋ, 클래스는 학생들과 같다. 그리고이 특정 스타일 시트가 적용됩니다 그 클래스의 모든 태그 명입니다. 이 경우, 우리는을 설정하려는 노란색에 배경 색상, 우리는, 불투명도를 설정할 것하는 우리가 얘기하지 않은 태그입니다 하지만 얼마나 투명 취급 일이 경우에, 70 %이다. 

두 가지 옵션이있다 쓰기 스타일. 당신이 그들을 쓸 수 있습니다 직접 HTML로 스타일 시트를 배치하여 스타일 태그 사이에. 그리고 그 스타일 태그의 내부에 이동 웹 페이지의 헤드 태그. 아마 더 좋은 방법이해야 할 일 별도의 .css 파일을 작성하는 것입니다, 한 다음에 링크하여 링크 태그를 사용하여 문서. 링크 태그는, 다시, 아르 하이퍼 링크는 다른, 당신은 우리의 비디오에서 HTML을 기억합니다. 그리고 링크 태그는 방법이다 우리 별도의 파일에 당깁니다. 그것은 일종의의 등가 등 웹 프로그래밍에 대한 #INCLUDE. 

그럼 table.HTML 살펴 보자. 당신은 기억이 있다면 우리의 HTML 비디오, 내가 보여 매우의 일례 간단한 곱셈 꽤 보였다 표 못생긴, 어쩌면 거기 방법과 더 나은 만들려면 CSS는, 실제로 보이게하기 곱셈 같은 더 테이블, 또는 무엇인가 그건 그냥 붙어 있지 않습니다 실제 부서와 행과 열 사이. 그럼으로 향할 수 있도록 CS50 IDE, 그리고 좀 봐 CSS는, 일종의, 조정할 수있는 방법에 우리가 전에 시작, 그리고 훨씬 더 뭔가합니다. 

그래서 우리는 CS50 IDE에있어 지금, 낯선 경우, 우리는이에 끌어합니다 테이블 HTML 페이지가. Table.HTML 기본적으로 단지 내용을 정의 multiple--의 그것이 있어야했다 네 개의 포 곱셈 테이블. 그것은 매우 간단합니다. 그리고 우리는 것이라고 생각 꽤 잘 조직 된 보인다. 그러나 사실, 우리는이 페이지를 미리 볼 때, 우리는 종류의 추한, 바로 볼? 분명히 우리는 여기에 행과 열을 가지고있다. 이 분리의 일종. 그러나 의미있는 분리 아니다. 우리는 실제로 못하고있어 여기에 너무 많은 정보. 그리고 사이에 분리가 없습니다 측면에서 행과 열의 수평 또는 수직의 규칙. 우리는 아마이 만들 수 조금 더 나은 모습. 그럼 해보자. 그래서 여기까지이 탭을 닫으려고하고있다. 그리고 나는 나의 table.HTML을 닫으려고 나는 여기에 또 다른 버전이 table2.HTML했다. 우리는을 열 수 있습니다. 페이지의 본문입니다 거의 같은, 하지만 변경했습니다 상단에 조금. 그리고 여기에 스크롤합니다. 난, 그이 시간을 주목하라 임베디드 스타일 태그를 사용. 나는 스타일 태그를 열 었는데, 나는 지금이야 단지 내부 CSS 스타일 시트를 정의 그것의. 나는 테이블을 말한다 스타일 시트를 가지고있다. 그건 내 태그 선택기입니다. 나는 점이나 해시를 사용하고 있지 않다, 어느 나는 경우 일을 할 것입니다 ID 또는 클래스 선택기를 사용했다. 나는 태그 선택기 here-- 테이블이 있습니다. 이 스타일에 가고 모든 테이블 태그에 적용됩니다. 분명히 나는​​ 1 점을 추가하는 듯 싶어 넓은 픽셀 청색 테두리, 내 테이블 내부. 즉, 같은 아마 것 소리 오른쪽, 상황에 도움? 우리는 할 겁니다 상황이 훨씬 더 봐. 그래서이 괜찮습니다. 문체, 난 그냥했습니다 여기에 내 스타일 시트를 포함. 그것은 확실히이다 그것을 할 수있는 허용 방법. 의이 어떻게 생겼는지 보자. 그래서 아래로 여기로 이동하고 있습니다 내 table2.HTML를 미리 것입니다 것입니다. 글쎄, 그건, 내가 원하는 것을 확실히 아니다 그러나 그것은 우리가 요구 정확하게이다. 우리는이 스타일은 말했다 우리 테이블에 적용 할 것. 우리의 테이블은 이제 하나의 픽셀이 주위 넓은, 청색 테두리입니다. 우리는 실제로 못하고있어 표 셀에서. 우리는 테이블에 있어요. 그래서 CSS는했다. 그것은 적용했다 우리 테이블에 스타일. 하지만 확실히하지 않았다 무엇을 우리가하고 싶었다. 우리는 무엇을 어떻게합니까 우리는하고 싶지? 

음, 한 번 더 살펴 보자 table3.HTML에서이 버전. 그래서 난 그냥이 탭을 닫으려고하고있다. 나는 여기에 다시 가서거야 내 트리를 파일 및 table3.HTML을 엽니 다. 다시 말하지만, 그것은 꽤 볼 것 여기에 처음에 유사한. 그러나 통지,이 시간, 대신에 사용 거기에 포함 된 스타일 시트, 나는 링크를거야 링크 태그를 사용하여 스타일 시트. 그래서 나는 분명히에 연결 해요 tables.CSS라는 스타일 시트, 이 잘 같음 스타일 시트는 그냥 잘 means-- 이 파일에 상대적인 것입니다 무엇 나는 난 스타일이다 doing-- 해요 내 페이지에 사용. 내가 정말 무엇을보고 싶다면 나는, 여기에 CSS로하고 있어요 그 열기 갈 필요 table.CSS뿐만 아니라 파일. 그래서 우리는 여기에 다시 갈거야 다시 우리의 파일 트리에. table.CSS이있다. 우리는 그것을 열린 팝업됩니다. 이제 우리는 CSS를 조금보고있다. 분명히, 나는 몇 가지있다 것들을 여기에 무슨. 나는 분명히 다섯 가지를 넣어 원하는 넓은 픽셀 고체 빨간색 테두리, 내 테이블 주위. 우리는 이미 그 무슨 알고 단지 주변에 이동합니다. 우리는 table2.HTML에서 그것을 보았다. 각 행으로, 나는 분명히 지정하려면 그 행 높이가 50 픽셀 높다. 그래서 모든 행에 대한 기억 즉, TR 태그가하는 일이다 나는 50 픽셀 높은 만들고있어. 

마지막으로, 나는이 댓글이 있습니다. 그리고 이것은 우리가 CSS의 의견을 방법이다. 이 블록을 점유하는 것은 매우 유사 의견 구문 슬래시 스타. 당신이 원하는 모든 텍스트입니다. 더 슬래시 슬래시는 CSS에서 비록 없습니다. 짧은 인라인 주석을 위해, 우리는이 여기에이 특별한 형식을 사용합니다. 내가하고 있어요 것 같습니다 내 TD 태그에 많은 것. TD 태그, 또는 테이블을 기억 정말이다 데이터, 내부 컬럼 우리의 행, 분명히 데이터의 각 부분에 대한 내 테이블에, 내가 원하는 배경색을 설정 검은 색, 색상은 흰색이어야합니다 색상은 전경 색상입니다. 그래서이 될 것입니다 내 페이지의 텍스트. 나는 큰 글꼴, (22)을 원하는 글꼴을 지적, 내가 원하는 그것은, 폰트 패밀리의 조지아합니다. 그래서 않을거야 기본 글꼴이 있습니다. 언젠가는 조지아를 지정거야하는 이들 웹 안전 글꼴 중 하나입니다 우리는 이전에 본 적이있다. 내 텍스트를 정렬 할 중앙, 상자의 중간에, 나는 그것이 남아있을 싶지 않아 정렬 또는 오른쪽 정렬됩니다. 그리고 나는 나의 열 너비를 원하는 넓은뿐만 아니라 50 픽셀이어야합니다. 이제 살펴 보자 이 같은 모습, 이것은 어쩌면 개선 인 경우를 참조하십시오. 그래서 table3.HTML에 갈거야하는 리콜, 링크로 table.CSS를 포함 우리는 그것을 미리 볼 수 있습니다. 그건 바로, 훨씬 더입니까? 이 사실을 보이기 시작 더 곱셈 테이블 등을 많이합니다. 나는 빨간색 테두리가 내 테이블 주위하지만 지금은 나는 또한 지정한 각각의 행은 50 픽셀 폭 아니면 tall-- 변명 50 픽셀의 가구 있구만 각 열은 50 픽셀 폭입니다. 각 컬럼의 데이터, 만 데이터는 검정색 배경이 있습니다. 그래서 왜 사람들이다 흰색 선이있다. 공간 때문에 그 모든 셀 사이, 그것의 국경이 아니다 그 자체로, 그것은 단지 난 단지에 작성 해요 세포, 실제로 어느 테이블의 경계를 만든다 분명히, 모두 함께 그 존재 않았다 그냥 얇은 흰색 선이었다. 이제 그들은 볼 수있어. 이제 그들은 화면에 나올 것. 그래서 이것은 매우 간단하다 나는 적용한 스타일, 지금 내 표는 더처럼 많이 보인다 네 네 곱셈 테이블, 대신 그냥 뒤죽박죽 엉망,의 모든 것이 명확하게 행과 열입니다, 하지만 슈퍼 잘 조직. 우리는 정말로 단지 표면을 긁는거야 여기에 CSS로 무엇을 할 수 있는지. 다행히 CSS 문서 아주 간단합니다. 당신은 몇 가지를 사용할 것이다 그 상당히 자주, 속성. 우리가 이야기들 이번 비디오. 당신이 몇 가지 있습니다 아마 모두를 사용하지 않습니다. 그리고도 괜찮습니다. 그러나 단지가 있다는 것을 알고있다 거기에 문서의 많은. 그래서 우리는 모든 것을 포함하지 않은 경우에도, 당신은 확실히 자신의 왼쪽 아닙니다. 그러나 CSS는 정말 재미 실험합니다. 그리고 난 강력하게 당신을 격려 것 귀하의 웹 페이지에 놀러, 당신이 그들을 만들 수있는 방법 참조 보고 사용자를 개선 느낌 페이지를 방문 경험. 나는 더그 로이드입니다. 이 CS50입니다.