[음악 연주] ALLISON BUCHHOLTZ-AU : 그래서 우리는 기본적으로 그냥거야 당신에게 설명해주는 CSS의, 우리가 알고 있기 때문에 그것은 포함되지 않았 음을 모든 섹션에서. 그리고 우리가 정말 있는지 확인하려면 당신 얘들 아, 귀하의 처분에이 도구를 가지고 그것을 할 수있는 능력을 가지고 있기 때문에 당신의 웹 사이트가 훨씬 더 예뻐 보인다. 

그리고 당신은 다음 웹 사이트를 구축하는 경우 당신은 아마 꽤 만들고 싶어. 내 말은, 당신이 필요가 없습니다, 하지만 난 그것을 건의 할 것입니다. [웃음] 사용자가 사용하려는 경우, 당신은 수도 그것은 조금 [들림] 만들고 싶어. 그래서 우리는 시도하고 당신을 그냥주는거야 몇 가지 기본적인 도구와 이해, 그래서 당신은 나가서 당신이있을 때 CSS에 관한 일을 연구, 그것은 횡설수설을 완료 할 것, CSS처럼 때로는합니다. 

토마스 라이 머스 : 그래. 앨리슨은 꽤 잘했다. 그래서 제일 먼저 우리를 추측 CSS는 무엇입니다 시작해야합니까? 그래서 CSS는 굉장​​합니다. CSS-- 

ALLISON BUCHHOLTZ-AU : 그 우리 세미나의 이름. 

토마스 라이 머스 : 그래. 그것은 그 정말 중요합니다 당신은 그때까지 이해합니다. 당신은 단지 하나를 데려 갈 경우 멋진하면 것은, 그 CSS입니다. 두 CSS가 약자입니다 CSS 스타일 시트. 그래서 그것의 핵심, CSS는 의미 스타일 시트 당신이 웹 페이지의 스타일을 할 수 있습니다. 그리고 그게 무슨 뜻인지, 그것의 방법은 웹 사이트에 스타일을 추가 할 수 있습니다. 그래서 스타일로, 우리는 모든 것을 의미 그 structural-- 아니에요 그래서 색상 같은 것들, 배경 이미지, 테두리, 등, 패딩, 여백. 우리는 얘기하자 무엇을 모든 조금 의미한다. 

그래서 우리는 바로 앞에 갔어요과 의 gedit에서 그까지 모두 열었다. 그래서이 반드시 index.html 파일입니다. 그리고 이것은 main.css가있다. 그래서 main.css가 아무 상관이있다. ALLISON BUCHHOLTZ-AU : 지금까지는 스타일. 토마스 라이 머스 : 없음. 당신이 볼 수 있듯이, 그것은이다 정말 못생긴 사이트. ALLISON BUCHHOLTZ-AU : 그것은 그냥 일반입니다. 토마스 라이 머스 : 그래. 그래, 추한 아니다 그냥 미니멀입니다. 그리고 여기에 우리가 index.html을 가지고있다. 그리고 빠른을위한 HTML, 앨리슨의 요점을 되풀이하다, 당신은 단지 페이지에 대해 얘기하고 싶어? 

ALLISON BUCHHOLTZ-AU : 네. 그래서 분명히, 우리는 우리의 HTML이 태그, 단지 이름의 HTML 파일. 우리는 CSS와 함께, 여기에 우리의 헤더가 경 외로움, 그게 ... 당신은 돌아 가야합니다. 그 어디? 

토마스 라이 머스 오. 그래, 당신은 볼 수 있습니다. ALLISON BUCHHOLTZ-AU : 그리고 헤더를 통지 바로 여기에이 탭 헤더입니다. 그리고 "안녕하세요, 세계!" 이다 우리가 가지고있는 텍스트 웹에 표시 돌아가 친구는 ... 페이지. 돌아 가기. 어떤 우리의 몸에 일반 텍스트를 이곳에. 또한, 한 가지에 여기에 보면,주의, 토마스는이를 전환 우리의 슬라이드에서 두. 그래서 한 모든 가지고 이 세 가지, 당신은 괜찮아요. 그들은 그들이 원하는 순서가 될 수 있습니다. 무엇 가장 중요한 것은 단지이다 당신은 그 세 가지를 각각 가지고있다. 

토마스 라이 머스 : 차가운. 문서 유형을 추가 하시겠습니까? ALLISON BUCHHOLTZ-AU : 네. 토마스 라이 머스 : 그래. 쿨. ALLISON BUCHHOLTZ-AU : 분명히, 내 마이크가 저를 좋아하지 않는다. 토마스 라이 머스 : 아, 그냥 우리에게 초를 줄 앨리슨 그녀의 마이크를 전환한다. 그래서 그래. 그래서 우리는 우리의 주요 페이지가 있습니다. 그것은 스타일이 적용되지 않은 가지입니다. 우리는 많이 필요가 없습니다. 우리는 기본적으로 텍스트를 가지고있다. 우리는 스타일 시트를 가지고있다. 우리는 제목을 가지고있다. 그러니 그냥 맨발 뼈 구성 요소는 웹 사이트를 확인합니다. 

그래서 거기에서,하자 CSS가 무엇인지에 대해 이야기 그것은 같은 그 모든 모습. 그래서 거기 있었고위한 ALLISON BUCHHOLTZ-AU : 위로 슬라이드. 토마스 라이 머스 : 슬라이드로 돌아 가기. 그리고 앨리슨 이상 걸릴 수 있습니다. 

ALLISON BUCHHOLTZ-AU : 우. 확인을 클릭합니다. 당신의 CSS 파일에 따라서 당신은 할거야 이러한 것들의 많은 선택기를했다. 그건 그냥 될 것 CSS 파일의 기초. 그냥 될 것 많은 이들의 많은. 그래서 선택. 이것은 단지 일반 해부학입니다. 우리는 통과거야 예, 때문에 만약 너희들 결코 내 기분, 내 섹션을 보았다 추상의 일처럼 정말 이해가되지 않습니다. 항상 예를​​ 참조하는 데 도움이됩니다. 

그래서 우리는 몇 가지 선택이있다. 즉, 일부 식별자가 될 것 우리가 원하는 스타일에 적용합니다. 그리고 우리는 어떤을 가질 수있다 규칙과 값으로 설정합니다. 당신이 볼 수있는 선택기 그래서 몸과 같이 될 수 있습니다, 또는 P와 단락, 또는 헤더, 또는 무엇이든, 무엇이든 당신이 당신의 HTML 태그가되고 싶어요. 

이 경우 그래서, 우리는 몸을 가지고있다. 그리고 우리는 몇 가지 규칙이 있습니다, 어떤이는 대응 무엇을 당신의 스타일에 적용됩니다. 이 경우, 우리는이 배경 색상과 글꼴 무게. 그래서이 바꿀 것입니다 아무것도의 배경 우리의 HTML 파일의 body 태그 내에서. 그리고 줄거야 그것은이 밝은 파란색 값. 

그래서 할 것 배경 밝은 파란색. 그리고 신체 내에서 아무것도이다 굵은 글꼴 두께를해야 할 것. 그래서 그냥가는거야 우리의 모든 텍스트를 굵게. 그리고 이것은 단지 하나의 선택이다. 하지만이 매우 많은있을 수 있습니다. 그리고 우리는 보여줄거야으로 나중에, 조금 더 방법에 이 작품과 더 많은 예제가. 추가 할 없나? 

토마스 라이 머스 : 아니오. 앨리슨을 얻었다. 우리는 단지를 잘라거야 여기에 우리의 예를 들어 사이트에서 예. 그래서 실제로이를 보자. 완벽 해. 그래서 난 그냥 복사 및 붙여 넣기거야 우리의 main.css가 파일에 그 권리. 그리고 나는 그것을 저장하는거야. 그리고 우리는 그것을 실행됩니다. 그래서 측면 노트, 하나 가장 절망적 일 당신은 파일을 저장하지 않는 경우 당신은, 같은 페이지를 다시로드, 과 같은 이유는 아니다 일어나는 변화? 이 문제가 발생합니다. 그래서 여기에 우리는 우리가 만든 것을보고 우리 밝은 파란색 배경의 웹 사이트 일부는 텍스트를 굵게. 

또한, 언급해야 당신 경우 사람은 아무것도에 대한 질문이 우리가하고있는, 주시기 바랍니다 우리를 자유롭게 중지하고 우리를 물어. 우리는 완전히 기꺼이 질문에 대해 답변합니다. 

물론, 함께 : ALLISON BUCHHOLTZ-AU CSS는, 모든 것을 자체적으로 구축합니다. 한 가지하지 않는 경우에 따라서 이제 이해가 우리 원하지 않는 나중에 당신을 늪지합니다. 

토마스 라이 머스 : 그래서하자 가지이 해부. 그래서 당신은 시작 하시겠습니까 여기 셀렉터? 

ALLISON BUCHHOLTZ-AU : 네. 내가 전에 말한 바와 같이, 몸 여기에 우리의 선택이다. 그래서 우리는 우리의 index-- 아 다시 갈 경우. 

토마스 라이 머스 : 난 그냥 마감했다. 잠시만 요. 그래서 index.html을, 파일 열기. ALLISON BUCHHOLTZ-AU : 차가운. 그래서 여기가 나는 경우, 우리 오른쪽이 몸 태그가? 그래서 선택 단지에 해당 우리가 이야기하고있는 태그. 바로 여기에 몸 그래서. 그래서 우리가 말하고있는 것은 모든 걸 다 우리는 다시 갈 수 있나요? 난 그냥 싶지만 같은 화면을 터치. 너무 많은 쿨러 것. 

그 안에 그래서 아무것도 우리가 본 body 태그, 단지, 같은 텍스트이었다 그리고 일반적으로 몸 같은, 배경을 의미합니다. 당신은 원하는 경우 배경을 변경, 즉 body 태그에있을 것입니다. 그냥 그들에게 적용이 규칙이 있습니다. 

그래서 만약 우리가로 이동했다 index.html을 그리고 ... 사실, 우리는 무언가를 할 수 있습니다 신체의 외부? 우리가 가진 경우처럼, 바닥 글 또는 볼만이 적용되지 않을 것이다. 그러나 내에서 아무것도 이 몸 태그는 것입니다 몸이 영향을받는 것으로 우리가 만든 것 선택. 사용자가 입력하는 것 인 경우에 따라서 뭔가 다른 저기 

토마스 라이 머스는 :의 그 집 드라이브 보자. 그래서 만약 그 그래서 우리는 div--했다 당신이 가질 수있는 또 다른 태그입니다. 나는 그것을 닫을거야. 또는의이 단락 만들어 보자. 그래서 p는 단락을 의미합니다. 그리고 그 문장에서. 그리고 나서 "이것은 텍스트입니다."라고 쿨. 그리고 나는이 규칙을 적용했다 대신에 본체의 단락. 당신은 단지에 적용하는 방법을 볼 수 있습니다 새로 형성된 단락, 오른쪽, 아니 전부. 그 의미가 있습니까? 

ALLISON BUCHHOLTZ-AU : 그래서이 모든 몸이다, 하지만 지금 우리의 선택 단지 단락에 해당합니다. 그래서 우리는 대담하고 푸른 빛 이 특정 단락, 이 유일한 때문에 그는 p 태그 안에 포함된다. 

토마스 라이 머스는 : 일종의 그 메이크업 감각을합니까 얼마나 가지 다른 일을 캡슐화? ALLISON BUCHHOLTZ-AU : 또한, 단지 같은, 가장 좋은 방법 중 하나를 대답 정말 CSS와 편안합니다 다만이 같은 일을하는 것입니다, 단지 그것을 밖으로 시도. 그것은 뭔가를 입력하는 것은 매우 간단합니다 밖으로, 새로 고침을 명중, 무슨 일이 일어 나는지 참조하십시오. 대부분의 CS와 같이, 실험은 종종 수 훨씬 더 이어질 직관적 인 이해. 더욱 더 우리보다 그냥 같은, 당신에게 얘기합니다. 

토마스 라이 머스 : 물론입니다 100 % 그 시점에 동의합니다. 우리가 이것에 가면 자, 시작하자 이 두 가지가 할 정확히 해부. 그래서 우리는 여기에 두 가지 규칙이있다. 따라서 첫 번째 배경색이다. 그리고 당신은 우리가 설정 한 것을 볼 수 값, 라이트 블루와 동일. 

그래서 CSS에서, CSS는 일종의 방법에 대한 매우 느슨한 당신은 색상을 정의 할 수있어. 그래서 당신은 그들의 이름을 정의 할 수 있습니다. 당신은 또한 같은 것을 할 수 있 느니라 "빨간색입니다." 그리고 우리는이 돌아가 다음 경우, 당신은 배경이 빨간색 것을 볼 수 있습니다. 당신은 또한 당신을 생각 정말 - 얻을 수 있습니다 이 꽤 창조적 얻을 수 있습니다, 당신은 할 수 없습니다? 

ALLISON BUCHHOLTZ-AU : I 당신이 진수를 사용할 수 있습니다 생각합니다. 당신이하면 안돼? 

토마스 라이 머스 : 그래. 그래서 진수를 사용할 수 있습니다. 하지만 이름이 많다는 생각하고 있어요. 하지가 있습니까? ALLISON BUCHHOLTZ-AU : 당신은 꽤 많은 작업을 수행 할 수 있습니다. 대부분의 색상과 같은 꽤 많은 당신 같은 이름 - 수, 나는 연어가 하나라고 생각합니다. 

토마스 라이 머스 : 우리는거야 시도 연어이야. ALLISON BUCHHOLTZ-AU : I 연두색 거기라고 생각합니다. 토마스 라이 머스 : 그래. 참조? 그래서 당신은 매우 창조적 얻을 수 있습니다. 

ALLISON BUCHHOLTZ-AU : 당신 꽤 창조적 얻을 수 있습니다. 마찬가지로, 당신은 생각할 수있는 경우 색상 이름은, 거기에 아마. 당신은 정말 잘합니다 세부 사항, 당신은 진수를 갈 수 있습니다. 

토마스 라이 머스 : 그래. 그래서 진수. 너희들이 다시 기억한다면 이전 PSET에서, 이미지 복구, 너희들은 처리했다 이 16 진수 값으로. 그리고 종류의, 그게 뭔지 다시 정리해 보면 진수는 그 안에 저장된 세 개의 값이 있습니다. 그래서 두 단위의 그룹입니다. 처음 두 빨강의 값을 나타냅니다. 두 번째는 대표 초록의 값. 그리고 마지막은 파란색입니다? 

그래서 FF는 나타 내기 위해 발생 진수 255. 그래서 당신은 255 빨강, 255을 청색, 녹색, 0. 그리고 값은 0에서 255 사이의 범위. 

청중 : 네. 그래서 본질적으로, 우리는 검색 할 수 우리가 원하는 어떤 색상의 인터넷, 그리고 실제로-알려진을 식별 컬러 스펙트럼 콤보, 그리고, 우리는에 넣어 수 있을까? ALLISON BUCHHOLTZ-AU : 그렇지. 그래서 당신은 거의 완벽하게 제어 할 수 있습니다 색상을 통해 당신은 CSS에서 할 수 있습니다. 우리는 이야기 건가요 배경 이미지 나중에? 아니면 그렇게 하시겠습니까? 

토마스 라이 머스 : 그래. 물론. 그래서 일단, 그냥 보여 빨간색과 녹색, 노란색입니다. 그리고 당신은 어떤을 필요로하는 경우 이를 찾는 데 도움이, 당신 구글 뭔가를 할 수 "색상 선택기."와 같은 ALLISON BUCHHOLTZ-AU : 아, 너무 좋다. 나는 색상 선택기를 사랑 해요. 

토마스 라이 머스 : colorpicker.com 좋은 예이다. 그리고 여기, 당신은 당신이 가지고있는 것을 볼 수 있습니다 전체 포토샵 같은 색상 선택기. 

ALLISON BUCHHOLTZ-AU : 그래 그래. 또한, 멋진 일들이 당신입니다 색 구성표를 생성 할 수 있습니다 당신이하지 않도록, 같은 색상을 충돌. 토마스 라이 머스 : 그리고 여기에 여기에 16 진수 값의 최대입니다. 그래서 당신은 항상 기본적으로 온라인으로 찾을 수 있습니다 장소에서 16 진수 값을 얻을 수 있습니다. 그것은, 같은, 그 단지의 정렬 할 것 우리 숫자에 세계의 색상을 참조하십시오. 우리가 온라인으로 이동하는 것이 더 중요한 그리고, 우리가 원하는 어떤 색깔 찾기 다음 수를 내려. 그냥 정말 쉽기 때문입니다 방법은 CS에서 일을 참조하십시오. 

ALLISON BUCHHOLTZ-AU : 그리고 also--있다 나는 사이트의 정확한 이름을 잊어 버려요. 하지만, 분명히 거기 I 어도비에서 무언가를 생각 즉, 당신을 위해 색 구성표를 생성 이는, 정말 멋진 당신 때문에 definitely-- 때때로이다 파악하기 어려운, 오,이 색상을 사용하려는 경우, 어떤 것은 또 다른 유용한 하나가 될 수 있습니다 내 사이트에 다른 곳에서 사용하는, 같은, 그것은 좋은 응집력합니다. 

토마스 라이 머스 : 앨리슨의 소리 Adobe의 하나 Kuler라고, 나는 생각한다. 그것은 K-U-L-E-R입니다. ALLISON BUCHHOLTZ-AU : 저는 그렇게 생각합니다. 나는 그것이 하나 확신합니다. 

토마스 라이 머스 : 내 마음에 드는있다 항상 색 구성표 디자이너이었다. 

ALLISON BUCHHOLTZ-AU : 우. 

토마스 라이 머스 : 지금은 -입니다 

ALLISON BUCHHOLTZ-AU : 아,이 아름답습니다. 

토마스 라이 머스 : 그리고 당신 기본적으로 같은 말을 할 수 있습니다, 나는 서로 옆에 세 가지 색상을 할 수 있습니다. 그리고 다음의 좋은 일을 할 수 있습니다. 그리고 당신은 예를 얻을 수 있습니다 그 모양에 대한. 그리고 당신은 중 하나를 가리키면 그들, 그것은 당신에게 16 진수 값을 제공합니다. 

그래서 그냥 좋은 방법으로 시작합니다 색 구성표에 대한 생각 웹 사이트에서 또는 어떤 색상 함께 잘 갈 수 있습니다. 즉, 놀랍게도 수 있으므로 당신이 생각하는 것처럼 쉽지 않은 선택합니다. 그리고 다른 멋진 것 난 항상이 사이트에 대한 발견했습니다 당신이 예를 칠 경우, 그것은거야입니다 어떤 웹 사이트 예를 보여 그 색상을 사용하여 다음과 같을 수 있습니다. 어쨌든. 

위로 실제 CSS에. ALLISON BUCHHOLTZ-AU :하지만 분명히, 우리 이러한 참조 유용 할 수 있습니다 알고. 토마스 라이 머스 : 아니, 확실히 도움이 될 수 있습니다. 두 번째 규칙, 앨리슨 그래서? 

ALLISON BUCHHOLTZ-AU : 네. 두 번째 규칙은 그냥 우리의 글꼴에 해당. 그래서 글꼴 무게는 종류 집게 리아 그래서 무게는 것 당신은 같은 단지 원하는 경우 수, 정상 또는 같은 얇은 글꼴, 또는,이 경우, Bold 등. 잊지. 당신이 원하는 경우이게 뭐지이 무엇 정상, 같은 단지보다 얇은 하나? 토마스 라이 머스 : 나는 실제로하지 않습니다 얇은 하나가 있는지 알고있다. ALLISON BUCHHOLTZ-AU : 나는 잊지. 그래서 글꼴 무게 일반적으로 우리 단지 굵게 사용합니다. 당신은에 정말 얻고 싶은 경우에 그것은, 우리는 당신을 보여줄 것입니다. W3 스쿨 모든 다른있다 일 당신은 글꼴을 할 수 있습니다. 그러나 기본적으로, 당신은 원하는 경우 글꼴에 대해 아무것도를 변경하려면 그것은 항상 될 것 같은 글꼴 뭔가. 당신이있어 경우에 따라서는, 글꼴 - 가족 같이있을거야 실제 유형을 변경하려고합니다. 그것은 당신이 경우 글꼴 스타일있을거야 필기체처럼 만들고 싶어, 또는 기울임 꼴, 또는 이것 저것. 심지어 글꼴 색, 경우 우리는 그 변경을 원했습니다. 

토마스 라이 머스 : 그래. 그래서 당신은을 변경할 수 있습니다. 그리고 종류의 단지에 지금 요점을 되풀이하다, 당신이 할 수 있도록 우리가 여기에서 선택을 할 수 있음을 볼 수있다. 우리는이 중괄호가 있습니다. 그리고 우리는 규칙을 가지고 세미콜론으로 구분. 그 의미가 있습니까? 그래? 쿨. 그래서이 내키지 경우 

ALLISON BUCHHOLTZ-AU 위로. 토마스 라이 머스 :의 구체적으로 얘기하자 선택기의 종류에 대해 우리는 가지고있다. '지금 우리가했습니다 원인 종류의 단지 태그를 표시. 그러나 너희들은 그럴듯 볼 수 있었다. 두 개의 단락이 있다고 페이지 및 당신에 스타일에 할 수 있도록하려면 하나하지만 다른하지, 당신은 단지 자신을 제한하지 않으 다른 실제 HTML을 사용해야합니다 태그는 그들에게 다른 스타일을 제공합니다. 

그래서 우리는 기본적인 세 가지가 선택기의 유형. ALLISON BUCHHOLTZ-AU : 네. 그래서 우리는 무엇을 인 태그가 우리는 지금 얘기 한 것. 그래서 가지 몸이나 페이지처럼. 그리고 우리는 인 클래스가 우리 CSS 파일에서 정의 할 때, 항상 점 할 것, 어떤 당신은 당신의 클래스의 이름이되고 싶어요. 그리고 이것은 여러 가지에 적용 할 수 있습니다. 

다섯 단락이 있다고 그 중 세 개의 동일한 스타일이 될 필요 당신은 그것에 클래스를 적용됩니다. 그리고 이것은 우리가 할 단지 방법입니다. 우리는 당신의 예를주지 여기서이 실제로 나타납니다. 그러나 당신은 아마 몇 가지 태그를 가지고 있다면 p는, 그 후에는, 작성합니다 클래스는 어떤 클래스와 동일 당신은 그것을 적용 할. 우리가 원하는 그래서 어떤 클래스 선택기 이 특정 단락에 적용, 우리는 다음과 같이 쓸 수있다. 물론, 나는 예를 생각 훨씬 더 구체적인 만들 것입니다. 

우리가 다른 하나 ID는 우리가 나타내고있는 것입니다 해시 또는 파운드, 또는 해시 태그와 함께. 토마스 라이 머스 : Octothorpe. ALLISON BUCHHOLTZ-AU : Octothorpe. 그것도 작동합니다. 그리고이 사람은 정말 고유해야합니다. 그들은 단지에 적용해야 페이지에 한 가지. 즉 특정 단락 여부 그래서, 또는 일부 목록의 항목, 또는 무엇이든, 이 고유해야합니다. 그리고 동일하게 그 우리 단지 말처럼, 클래스 = "클래스 1의 강좌 2" 이것은 단지 우리가 무엇의 ID 일 수 있습니다. 토마스 라이 머스 : 그래. 그래서 확실히 얘기해 보자 여기에 예 약. 그리고 난 그냥 뛰어 갈거야 바로 다시 코드로. 그럼 우리의 HTML을 살펴 보자. 그래서 우리는 지금 한 단락이있다. 이 텍스트입니다. 난 그냥 수정하는거야 그것. "이것은 텍스트 1입니다" 그리고 우리는에 갈거야 이 "이것은 텍스트 2입니다" 

ALLISON BUCHHOLTZ-AU : 두 번째 하나. 토마스 라이 머스 : 그래. 그래서 우리가 지금 가지고있는 권리 "이것은 텍스트 2,이다?" 그리고 우리는 우리가 다시로드하면 것을 보게 될 것입니다 페이지는, 우리는 무엇을 찾을거야 우리는거야입니다 find-- ALLISON BUCHHOLTZ-AU : 우. 토마스 라이 머스 : 그래. 우리는 "이것은 찾을거야 텍스트 1 "및"이 "텍스트 2이다 

ALLISON BUCHHOLTZ-AU : 그리고 밖으로 사랑스러운 노란 색입니다. 

토마스 라이 머스 : 그리고 당신은 볼 수 지금 우리의 선택은 어느 쪽의 적용, 또는 문단 둘 다에 영향 그들 모두를 만족하기 때문 조건 그들은 p 태그를 모두 걸. 즉, 전체 의미가 있습니다. 그래서 질문이 잘된다, 무엇을 우리가 원하는 경우에만 하나를 얻을? 그래서 정확히 앨리슨이 말하는 것처럼, 우리는 그 작업을 수행하는 다른 두 가지 방법이있다. 나는 ID로 시작하는거야. 

ALLISON BUCHHOLTZ-AU : 의 id를 시작하자. 

토마스 라이 머스 : 그리고 모두 이들의 속성이다. 그래서 속성은 HTML에 존재합니다. 그리고 그들이있는 것은 추가 뭔가 인 태그 내부 태그 이름에서 분리합니다. 그래서 여러 속성을 가질 수있다. 그래? 

ALLISON BUCHHOLTZ-AU : 그냥 가고 있었다 PSET 7에서 예에서, 대답, 당신의이 정렬하려고하면 중앙 것들 당신이 사용했을 수 있습니다 "텍스트 = 중심을 맞 춥니 다." 그리고 당신은 아마 그것을 발견 을 중심으로해야 텍스트 또는 당신의 탐색 모음. 그래서는 또한 속성의 당신은 익숙 할 수있다. 토마스 라이 머스는 : 무리있다 의 당신이 볼 수 있다는 특성. 그래. PSET 7 좋은 참고처럼. 우리는 ID를 가지고 있습니다. 당신은 또한 수 있습니다 클래스,이 같은 것들. 하나의 태그는 많은 속성을 가질 수있다. 그래서 아이디로 시작,의 우리 척하자 내가 모르는 집게 리아의 ID를 갖고 싶어. 우리는 특별한 호출합니다 이것 때문에, 우리는있어 굵게 만들려고하고, 밑줄, 무엇이든지. ALLISON BUCHHOLTZ-AU : 그것은 거 슈퍼 특별. 토마스 라이 머스 : 그래서이 하나, 우리는 ID 특별 있습니다. 방법은 그 선택 그래서, 다음입니다 main.css가있어서, p 태그가보다는 당신은 OK, #special합니까? 그리고 그 선택 아이디 특별와 것. 이 모든 사람에게 의미가 있습니까? 청중 : 네. 토마스 라이 머스 : 차가운. 그래서 지금 우리가 가면, 우리는 으악 알아요 ... 것이다. 그래. 이 부분에 대해서는 그것을 만 선택 아이디 특별와 함께 하나. 그래? 멋진 소리. 예. 

청중 : 뭔가를 가질 수 두 클래스와 ID의 속성? 

토마스 라이 머스 : 예. 청중 : OK. 그런 다음 주면 그리고 무슨 일이 그것은 충돌하는 CSS에서 몇 가지 규칙? 토마스 라이 머스 : 물론입니다. 우리는 확실히거야 그 이야기합니다. 그래서 정확히 무엇을 얻고 있었다 에, 당신은 또한 수업을 할 수 있습니다. 그럼 내가 가진 척하자 세 단락 및 I 첫 번째 스타일을 원했다 하지만 두 번째 없습니다. 음, 첫 번째 아이디어는 내가 잘 할 수있다 단지 두 번째에게 ID를 줄 수 있습니다. 하지만 당신은 할 수 없습니다, ID 때문에, 정확히 앨리슨 말하고 있었다처럼, 고유해야합니다. 

그래서 그 대신의 ID, 무엇을 사용할 수있는 당신이 클래스를 사용할 수 있습니다. 그리고 class-- 그것은 허용하는 당신은 기본적으로 말을 할 일은, 이것은 그룹의 일부로 속한다. 이 경우에, 우리 그룹 특별라고합니다. 그리고 우리는 그 다음 무엇을 할 것인지 것은 우리는 오히려 파운드보다 말하길거야 우리는 점을 사용하는 것입니다. OK? 그리고 알이 파운드 점 단지 CSS 파일 내에 존재 하지 HTML 내에서. ALLISON BUCHHOLTZ-AU : 예. 중요한 차이. 

토마스 라이 머스 : 내가 가지고있는 너무 많은 투쟁이 있었다 나는 HTML에 해시를 넣어 때문에 그럼 그냥 오랫동안 바보 느꼈다. 이 모두를 선택하는 방법을 참조하십시오 그 클래스와 사람? 쿨. 

지금 상황은 여러 클래스를 가질 수 있습니다. 이 전 먼저 확인하고 싶었 가정 해 봅시다 두 개의 노란색의 배경을 가지고 두 번째 두가 파란색의 글꼴 색상. 확인을 클릭합니다. 은 나온 이유를 정말 모르는 그렇게하기를 원하지만, 난 할 수있어. 

ALLISON BUCHHOLTZ-AU :하지 않을 수 있습니다 귀하의 웹 사이트를 권장합니다. 하지만 우리의 목적을 위해, 그것은 할 수 있습니다. 

토마스 라이 머스 : 그것은 아니에요 좋은 색상. ALLISON BUCHHOLTZ-AU : 음, 노란색 파란색으로 내 고등학교 색상입니다. 그래도 모른다. 토마스 라이 머스 : 앨리슨의 높은 학교는 좋은 색상을 가지고 있었다. [웃음] 그럼 우리가 부를 수있는이입니다 이 항아리를 호출하자 그래서 우리는 특별이 우리는 꽤있다. 나는이를 위해, 사용, 제안 훨씬 더 설명 적 이름. ALLISON BUCHHOLTZ-AU : 그래, 난 것 노란색 또는 파란색처럼,이를 호출합니다. 

토마스 라이 머스 : 우리는 아니에요 정말, 진짜 웹 사이트를 만들기 이는 우리가 그 일을하지 않을 이유입니다. 하지만 만약 실제로 당신은 진짜 웹 사이트가 있었다 있을 수 있습니다, 같은 문서 헤더, 기사 내용, 첫 번째 단어, 허용 그런 것, 당신은 훨씬 더 설명한다. 이 단지 변수처럼 정말. 그들은 방법 경우에 지정해야합니다 당신은 같은이었다고 나할까요 그래, 할 수있다. 완벽한. 

그래서 배경 색상. 그리고 우리는 그렇게 말하길거야 색상을 변경하는 방법은 "색상"입니다. 그리고 우리는 푸른 만들 것입니다. 그래 좋아. 그래서 지금 우리가 가지고있는 처음 두 개의 특별한있다. 다음 하나에 무슨 "꽤 = 클래스를."이 ALLISON BUCHHOLTZ-AU : 그리고 당신은거야 가운데 하나에 "꽤"를 추가하고 싶다. 토마스 라이 머스 : 그래. 그리고 중간에 하나, "꽤"무슨 일이 추가 당신은 단지 공간이있다. 클래스 속성 그래서 공백으로 구분 된 목록입니다 모든 클래스의 즉, 해당 태그에 적용됩니다. OK? 이 하나가 속한 것 아니에요 라는 특별한 클래스의 어떤 종류의 "특별한 공간, 아주." 그것은 두 classes-- 속한다 특별하고 예쁜. 네? 쿨. 

그리고 우리가 보면 무슨 일이, 우리는있어 첫 번째는 것을 볼 것 노란색 배경, 검정 텍스트입니다. 둘째 보이면 

ALLISON BUCHHOLTZ-AU는 : 굵은 --has 파란색 텍스트와 노란색 배경입니다. 그리고 우리의 마지막 단지가 우리가 할당 파란색 텍스트. 

토마스 라이 머스 : 쿨? 선택기는 어떻게 작동? 신난다. 

ALLISON BUCHHOLTZ-AU : 우리는 원해 이제 다음 충돌에 대해 이야기? 

토마스 라이 머스 : 그래서 그래. 물론. 그래서는 경우 발생 오른쪽 충돌이? 의 첫 번째 하나를 척하자 뭔가를 설정이었다고 나할까요 ALLISON BUCHHOLTZ-AU : 아마 이 하나의 배경을 변경? 토마스 라이 머스 : 그래. 그래서 우리가 만드는거야 "꽤" 연어의 배경을 변경합니다. ALLISON BUCHHOLTZ-AU : 그냥 함께있어 모든 위대한 색상 오늘, 토마스. 토마스 라이 머스 : 그래. 내가 발견 때문에, 난 할 수있어 실제 색상으로 연어를 사용합니다. 그래서 우리는 그렇게 할 것입니다. 또한 일몰 실제 색상 생각합니다. 청중 : 일몰 실제 색상입니까? ALLISON BUCHHOLTZ-AU는 : 현실을 해보자. 토마스 라이 머스 :이 데모 후 다만, 경우에이 엉망 때문에 나는 디버깅되고 싶지 않아. 그래서 우리는 연어 실제 색상 알고있다. 에 따라서 어떤 추측 무슨 일이 일어날거야? 

ALLISON BUCHHOLTZ-AU : 어떤 생각? 

청중 : [들리지]. 

토마스 라이 머스 : 그래. 그래서 당신은 정확한 값을 얻었다. 기본적으로 걸리는 그것은 주어진 마지막 규칙. 

ALLISON BUCHHOLTZ-AU : 그래서이 여기서 연쇄 효과로 제공됩니다. 

토마스 라이 머스 : 어떻게 기억 우리 CSS 스타일 시트 있음을했다? 그게 그래서, 우리는 가지 의미 우리는 규칙을 잔뜩 가지고 이는 각각의 위에 적용하고, 그들은 또한 서로를 대체 할 수 있습니다. 

ALLISON BUCHHOLTZ-AU : 그래서 맨 아래에 어떤의 상단의 것보다 우선합니다. 당신은 완전히 규칙을 가질 수있다 사전에 뭔가를 부정. 당신이되고 싶은 이유이기도 당신이 스타일링있을 때주의, 그래서 당신은 규칙을 작성하지 않을 것을 당신은 완전히 무시하고 있습니다. 

토마스 라이 머스 : 아니면 규칙 덮어 쓰기를 원하지 않습니다. 

ALLISON BUCHHOLTZ-AU : 아니면 당신이. 예. 

토마스 라이 머스는 : 당신이 척 대부분의 것들에 적용 클래스, 하지만 이제 당신이 변경하고 싶은 말은하자 붉은 색과 폰트에 배경 색상 대부분의 대담한 중량 일,하지만 하나, 에만 배경색 할 빨간색으로하지만 당신은 다른 모든을하려는 속성, 당신은 뭔가를 할 수 같은 "글꼴 무게 = 정상" 이는 그 대담한 변경을 취소합니다. 그래? 다시 말하지만, 가장 좋은 방법은, 내 생각 앨리슨은, 그냥 연습 있다고 말했다. 

ALLISON BUCHHOLTZ-AU : 실험. 

토마스 라이 머스 : 연습, 연습, 연습, 실험. 내가 생각하는 사람들을 많이 알고 CSS는 추측 및 검사의 단지 많이 여기서 경우 ​​하루의 끝에서 당신은 그 어떤 것도 같은 작업을 수행 할 당신은 거친 아이디어를 가지고 있지만, 당신은 아마 아직도 필요 확인하기 위해 그것을 밖으로 시도 당신은 어떻게 생겼는지. 

청중 : 당신이 적용하고 클래스 이상의 같은 단락에 또는 섹션, 그것을 않습니다 문제가 어떤 순서로 수행 할 수 있습니다 따옴표로 입력? 

토마스 라이 머스 : 아니, 전혀. 

ALLISON BUCHHOLTZ-AU : 무엇이 문제입니다 당신의 CSS 스타일 시트 내에서 순서. 청중 : 당신이 질문을 반복 할 수 있을까요? 토마스 라이 머스 오. ALLISON BUCHHOLTZ-AU : 내 클래스, 당신이주는거야 클래스 HTML에서 뭔가,하지 그것은 그들이에있어 어떤 순서로 문제? 이 순서를 중요하지 않습니다. 중요한 것은 순서입니다 당신의 CSS 내에서 클래스 선택기, 스타일 시트 내에서. 

토마스 라이 머스 : 좋은 소리? 

ALLISON BUCHHOLTZ-AU : 사랑스러운. 

토마스 라이 머스 : 그리고 우리는 계속 ... 계속 할거야 ALLISON BUCHHOLTZ-AU : 우리는 다음에 무엇을해야합니까? 잊지. 아, 우리는 예제를 가지고있다. 그러나 우리는 종류의 사람들을했습니다. 우리는 즉시 예를 완료했습니다. 

토마스 라이 머스 : 우리는에 도착 곧 선택기를 결합한다. 

ALLISON BUCHHOLTZ-AU : 아, 우리는 선택기를 결합하세요. 토마스 라이 머스 : 그래서 일부 예는 우리가있다 # 루하고 파운드, 또는 해시 태그, 또는 octothorpe, 또는 무엇이든 당신은 거기 있었고 날카로운 전화를 할 수 있습니다. 

ALLISON BUCHHOLTZ-AU : 샤프 개. 

토마스 라이 머스 : 그럼 당신은 .pets 있습니다. 뭔가, 강아지의 ID를 가지고 페이지에 하나의 개있다. 뭔가의 ID를 가지고 고양이는, 단 하나의 고양이가있다. 페이지에 많은 애완 동물이있을 수 있습니다. 우리가 수업 것을 준 이유입니다. 당신은 페이지의 예를 가지고있다. 그리고 하나 때문에 마지막 예를 들어, 어떤 우리가 얘기하지 않은 뭔가 당신이 그들을 결합 할 때 발생하는 것입니다. p.pets 그래서. 

그에 대한 자, 다시 가자 코드와 그래 another-- 소개합니다. 그래서 다시 여기에. 

ALLISON BUCHHOLTZ-AU : I 이것은 정말 - 인 것 같은 느낌 같은 단지 예를 통해보고 정말이 배울 수있는 방법입니다. 그래서 우리가 무슨 일을하는지입니다. 

토마스 라이 머스는 : 그럼 우리 척하자 오른쪽에만 텍스트 2를 선택하려면? 그래서 우리는 확실히 할 수 없습니다 ID가 그렇게. 음, 우리와 그렇게 할 수 ID하지만 ID가 없다. 나는 하나를 추가 할 수 있지만의 척 할 수 나는 하나를 추가하지 않았다 또는 이미 다른 뭔가가있다. 나는 그와 함께 할 수 없어. 태그 바로, 확실히 고유하지? 그리고 둘 다 클래스는 없습니다. 하지만 당신은이 일을 결합 할 수 있습니다. 이제 우리가 뭔가를하고 싶어한다고 가정 해 봅시다 있는 유일한 물건에 적용되는 클래스 특별한을 가지고 이는 클래스가 꽤있다. 

그래서 당신이 할 수있는 것은, main.css가에 당신의 처음이 삭제하자, 말할 수 있습니다. 이러한 결합 할 수 있습니다. 그래서 당신은 .special 할 수 있습니다. 있는 공간이 없습니다. 그냥 .special.pretty. 무슨 의미하는 것은 무엇인가이다 어떤 특별하고 매우 모두이다. 그 의미가 있습니까? 그리고 우리가 여기 가면, 무엇을 당신은 보게 될 것입니다 이 규칙 만 적용됩니다 그 모두가 두 번째. 그리고 당신은 많은 것들을 그렇게 할 수 있습니다. 당신은하자 말하길 수 있습니다 내가 만 원 척 꽤 클래스가 일을하는 또한 단락 태그있는. 그래서 p.pretty. 이제 내가 가진 척하자 태그 본문에 꽤 뭔가. OK? 나는이 프로그램을 실행하고 내가 할 수 그것은 단지하다고 볼 수 있습니다 것들에 적용 할 것 꽤 클래스와 단락. 그리고, 이러한 결합 할 수 있습니다 기본적으로, 당신이 원하는만큼. 그래서 그냥 둘을 합친 수 있습니다. 그 의미가 있습니까? ALLISON BUCHHOLTZ-AU : 그래서 이 종류의 더 유용합니다 때, 토마스는 아마 이전 말하고 있었다 당신은 매우 복잡한 웹 사이트가, 당신은 이미 많이 기록이 규칙의, 당신은 단지 필요 앞에서 두를 결합합니다. 마찬가지로 대신 전체를 작성 새로운 셀렉터와, 거기 변경 당신은 결합 할 수 있습니다 그들 그것은 겹치는. 

토마스 라이 머스 : 또는 때때로 병원을 나온 찾을 수 있습니다 하나의 클래스가있다있는 같은 글꼴의 색상이 파란색이 만들어집니다, 다른 클래스는 거기에있는 배경 파란색을합니다. 그리고 그건 그냥 작동하지 않습니다. 그래서 당신은 특별한 경우를 작성, 어디서, 이 모두있는 경우이었다고 나할까요하지만, 당신은 무엇이야 하기 위하여려고하면가는거야입니다 이 하나에게 '블루'의 그늘을 이 하나의 청색이 다른 그늘. 오른쪽? 

ALLISON BUCHHOLTZ-AU : 좋은 예외의 그 종류. 토마스 라이 머스 님 그래서 문제에 대해 생각 당신이 그들을 결합 할 때이 발생할 수 있습니다. 쿨. 그래서 다시 우리의 프레젠테이션. ALLISON BUCHHOLTZ-AU : 우리는 거의 다 왔어. 토마스 라이 머스 : 그리고 연결이 중지되었습니다. ALLISON BUCHHOLTZ-AU : 오, 이런. ALLISON BUCHHOLTZ-AU :에서 CS 사무실, 인터넷이 내려갑니다. 아, 아이러니. 

토마스 라이 머스 : 그래서 다행히도, 우리는 할 수 인터넷없이 제시, 나는 추측 우리는 여기에 모든 슬라이드를 가지고 있기 때문에. 그럼에 대해 이야기하자 태그의 관계. ALLISON BUCHHOLTZ-AU : 오른쪽. 가는 그러니 그냥 가지 토마스 말의 해제, 이 그것을 할 수있는 또 다른 방법입니다. 그래서 우리는 어떤 부모가 아이 선택기로 선택. 그래서 여기에이 예에서 우리는 몇 가지가 클래스 네비게이션 바, 클래스 버튼으로 몸. 아. 

토마스 라이 머스 : 아, 죄송합니다. 

ALLISON BUCHHOLTZ-AU : 그리고 기본적으로, 어떤이는 의미 같은 아이들을 모두 선택한다 선택기 이러한 종류의 모든 이 부모 선택 내. 그리고 그 유일한 사람입니다 그것은 이제까지에 적용 할 것입니다. 나도 몰라 당신 경우 더 나은 방법이 집게 리아 토마스 라이 머스 : 그래서 생각하는 방법을 생각한다 이것에 대해 어떻게 전에 기억이다 우리는 일종의 함께 넣어 좋아. 그리고 그 하나의 요소를 의미한다 어떤이의 모든 일치합니다. 이것이 말하는 것은 내가있다 당신은 모든 것을 일치시킬 내가 원하는 할일 내 당신은 선택을 찾을 수 있습니다. 그리고 그 안에 내가 원하는 당신은 새로운 일을 개발하였습니다. 오른쪽? 그래서 CSS에서, 모든 약 종류의의 이러한 항목을 일치 할 수있는. 그리고 당신은 일치를 시도 할 수 있습니다 다른 항목 내에서 항목. 

그래서 실제로 예를하자, 우리는 명확히 것 같아요. 그래서 우리가 특별한 가지고 척하자, 특별한 꽤, 뭐든간에. 그리고 우리는 OK, 링크가? 그래서이 링크 잊지 마십시오. 그것은 어디든 갈 않을거야. 그리고 우리는 그것을 줄거야 클래스 링크 같아요. 의이를 줘 보자 나에게 아이디어를 제공 class--. ALLISON BUCHHOLTZ-AU : 차가운. 토마스 라이 머스 :하자 Coo-- 그것은 꽤 클래스 이동합니다. 왜? 

ALLISON BUCHHOLTZ-AU : OK. 토마스 라이 머스 : 그래서 지금 예쁜 것 배경을 만들려고 연어의 파랑, 배경 색상. 즉 의미가 있습니다. 그리고 우리는 이일을한다면 

ALLISON BUCHHOLTZ-AU : 당신은 텍스트를 추가 하시겠습니까 그래서 하이퍼 링크는 실제로 나타? 토마스 라이 머스 : 그 좋은 호출 될 것이다. ALLISON BUCHHOLTZ-AU : '원인 오른쪽 지금 우리는 아무것도 얻지 못할거야 그냥있어. 토마스 라이 머스 : 그래서이 링크입니다. "이것은 링크입니다." 아, 그리고이 것입니다 다른 링크합니다. 의 그것에게 클래스를 줘 보자 "좋아." 당신이 옳아 요. 쿨. 그래서 지금 우리는이를 잡아 것입니다. 우리는 하나를 던질 것입니다. 우리는 하나가 특수 태그, 또한 우리 예쁜 태그를해야 할 것. 그리고 지금 우리가가는거야 무슨 이렇게 우리는 cool-- 만들려고하고있다 우리는 작업을 하시겠습니까? ALLISON BUCHHOLTZ-AU : 우리는 그것을 더 크게 만들 수 있습니까? 토마스 라이 머스 :하자 그것을 테두리를 줘 보자. ALLISON BUCHHOLTZ-AU : 우리는 국경 수 있습니다. 토마스 라이 머스 : 그래. 그래서 우리는 일을 할거야 같은 경계는 ... 우리가있어 모든 초에이를 설명하는 것. 지금은 - 용 

ALLISON BUCHHOLTZ-AU : 박스 모델에. 토마스 라이 머스 :하지만 지금, 우리는있어 단지 그것을 테두리를 줄 것. 그래서 그것이 의미하는 것은 당신이있어입니다 다음 링크를 참조 할 것. 그리고 당신은 그들이 가지고있는 것을 보게 될 것입니다 이 같은 추악한 검은 색 테두리, 어떤 시원하다. 

ALLISON BUCHHOLTZ-AU : 우리의 웹 사이트는 정말 예쁘구나. 

토마스 라이 머스 : 그래. 우리의 웹 사이트는 굉장합니다. 그래서이 두 링크, 그리고 그들은이 나타납니다. 이제 나는 척하자 만 이렇게하고 싶어 그것은 뭔가 내에서가 아닌 경우 하는 연어의 배경을 가지고 있었다. 그래서이 하나의 기억 연어의 배경을 가지고 꽤 클래스 왜냐하면. 

그러나 우리는이 냉각 것을 말하고 싶다 클래스에서 클래스, 특별되지 않는 꽤, 그 경계를해야한다. 그럼, 당신이 할 수있는 것은 당신입니다 .cool, .special, 공간을 말할 수있다. 당신이 생각하는 그리고 그 때, 뭐하는거야 그것에 대해, 그것은 기본적으로 말하는 것입니다, OK, 나에게 모든 것을 찾을 수 그 특별한 일치합니다. 그런 다음 그 태그 내에서 찾기 멋진 날 다. ALLISON BUCHHOLTZ-AU : 그래서 또 다른 방법 즉,이에 대해 생각하는 것이 좋을 것입니다 C로 다시 가져 오는 것입니다 다만 범위의 아이디어 등을들 수있다. 그래서 당신은 어떤이있는 경우 것과 같은 선택, 우리는이 전에 근무했는지, 전체 웹 페이지, 당신의 HTML의 모든 오른쪽, 당신의 범위 내에있다? 그러나 우리는이있을 때 부모 - 자식 관계, 당신이 아래로 위치를 좁히는 것처럼입니다 당신은 특정 장소로​​ 찾고 것처럼, 같은, 우리는 내 찾고 특정 기능 대신 우리의 전체 파일. 청중 : 것, 염두에두고 그래서 우리가 changed--이 있다면 그것은 중요했다있다 ALLISON BUCHHOLTZ-AU : 순서? 청중 : CSS에서 하고요 클래스 공간을 .cool하기 위해, .special? ALLISON BUCHHOLTZ-AU : 네, 때문에 그 범위를에 말할 것 멋진 모든 것을, 다음 어떤 그 ... 봐 I는,이 경우, 같은 의미 나는 그것을 변경 한 것입니다 생각하지 않습니다. 

토마스 라이 머스 : 우리는 무엇을 말했다면? 미안 해요. 

ALLISON BUCHHOLTZ-AU : 우리의 경우 그 다음 냉각하는 범위 특별한에서 일을 찾아, 실제로, 같은 것입니다. 

토마스 라이 머스 : 그래서 그것은하지 않을 것입니다. 

ALLISON BUCHHOLTZ-AU : 그렇지 않을거야? 잘 오, 오. 내가 잘못입니다. 

토마스 라이 머스 : 그래서 이유 그것은 different-- 일반적인 실수해서이다 되는 지금 만 링크 바로, 멋진있다? 너희들이에 나는, 내 질문을 추측 이 페이지에 무슨 일이 .cool에 의해 일치? 두 태그는 바로 여기에있다? 어떤이 하나,이 하나입니다. 모두 멋진 일치합니다. 다른 어떤 것도하지 않습니다. 그래서 당신이 말한 경우, .cool, 공간, .special, 당신이 무슨 말을할지, 이러한 태그 내에서, 특별한 무엇인가? ALLISON BUCHHOLTZ-AU : 흠. 즉, 어떤 거길 권리입니다. 이 여기에 뭔가처럼 때문입니다. 

토마스 라이 머스 : 그래서 그것은 아무것도 선택하지 않습니다. 

ALLISON BUCHHOLTZ-AU :와 반면에 특별한, 우리는 여기에 이​​러한 태그 내에있어. 

토마스 라이 머스 : 그와 그. 청중 : OK. 그래서 앞으로에서 그 태그 슬래시? 

토마스 라이 머스 : 예. 그 의미가 있습니까? 어떻게 기본적이다 범위를 축소하려고합니다. ALLISON BUCHHOLTZ-AU : 네. 그게 아마 생각 가장 쉬운 방법은 그것에 대해 생각합니다. 

토마스 라이 머스 : 그래서 우리는이를 발견하고, 우리는이 양쪽 특별 일치 발견했다. 그리고 우리는 내 요구하고 이 녀석, 멋진 무엇인가? 그리고이 하나,이 하나의 멋진 내. 이 하나의 내, 아무것도 멋진 없습니다. 그래서이 남아있는 유일한 태그입니다. 

ALLISON BUCHHOLTZ-AU : 시원한 반면 그냥 거기에이 태그에 있습니다. 토마스 라이 머스 : 그렇지. 그리고 그 안에 특별한 무엇인가? 아무것도. 지금, 나는 말할 것 무엇이다 공백이 없었다면, 당신은 시원하고 special-- 무엇을 요구하는지 또는 오른쪽, 예쁘고 특별한 무엇인가? 당신이 .special.pretty을 말한다면, 그건 .pretty.special과 동일합니다. 

공간을 제거하는 것은 무엇 때문에 당신이 .special 말할 때, 요구, 당신은 확인을 요구하고 어떤 사람은 특별하다? 그리고, 그 중 어느 사람도 꽤있다, 어떤 문법적으로, 동일, 묻는 등, 꽤 무엇을, 다음 사람들의 특별한 또한 무엇인가? 오른쪽? 그것은의 차이점 무슨 일이 무엇인지 내입니다. 청중 : OK. 토마스 라이 머스 : 그래. 신난다. 그러고 나서 ... 염두에두고 그래서 

ALLISON BUCHHOLTZ-AU : 나는 우리의 마지막을 생각한다 일이 (공상 영국 발음으로)입니다 박스 모델. 

토마스 라이 머스 : 상자 .-- 하하하 나는 앨리슨가 말한다 방식을 좋아한다. 박스 모델 것 그래서. 

ALLISON BUCHHOLTZ-AU : 그냥이 상자, ​​당신의 박스 모델이 될 것입니다. 토마스 라이 머스는 : 그럼 그 얘기하자. 그래서 지금 우리는 많이 보냈어요 시간 선택기에 대해 이야기. 지금까지 너희들처럼, 아마, 당신이 알고 selectors--의 주인, 정확히 내용을 선택하는 방법이 당신은 당신의 화면에 조작 할 수 있습니다. 

이제 문제는 어떻게 정확히 조작 할 수? 그래서 가장 기본적인 것 같아요 그것에 대해 생각하는 방법 잘, 정확히 무엇이며, CSS의 요소는? 우리는 많은 시간을 보냈어요 이야기, 태그 무엇인지, 또는 가장 기본적인 것입니다 태그의 표현? 

에 대해 생각하는 좋은 방법 즉, 연어 모양은 어떤가? 이 같은, 어떤 모양입니다 배경 연어 색? 

청중 : 그것은 사각형입니다. 

토마스 라이 머스 : 그것은 바로, 사각형인가? 

ALLISON BUCHHOLTZ-AU : 트릭 질문이 아니었다. [웃음] 

토마스 라이 머스 : 노력하지 않음 이 말 너희들을 속여합니다. 그래서 우리는이 사각형이있다. 그리고 태그는 페이지 오른쪽입니까? 그래서 우리가 잘 제공 단락 믿음 에서 사각형으로 표시됩니다 브라우저의 마음에서 적어도 한 그 것이다. 

ALLISON BUCHHOLTZ-AU는 : 내 말은, 브라우저는 일반적으로 직사각형 그래서 의미가 있습니다. 

토마스 라이 머스는 : 아이디어는 여기 CSS 내에서 태그의 모든 사각형으로 표시됩니다. 모든 네 개의 사각형을 갖는다 CSS에 따라 부품, OK? 당신은 실제 내용이 있습니다. 텍스트가 자리하고있는 곳입니다. 

ALLISON BUCHHOLTZ-AU : 아마 사진. 

토마스 라이 머스 : 그래. 당신은 어떤 패딩이 공백의 단지 어떤 종류. 그럼 당신은 테두리가. 그리고 당신은, 여백이있는 그 이외의 공백이다. 그건 말도 안돼 그래서 누군가에게, 그래서 우리는있어 잠시 그것에 대해 이야기 할 것입니다. 그래서 여기, 우리는 무엇을 할 것인지 우리는 OK, 일부의 div를 만들려고하고 있는가? 날 동안 실례 내가 .. 

ALLISON BUCHHOLTZ-AU : 내가 좋아하는 느낌 우리는 귀여운 사진을 넣어해야합니다. 

토마스 라이 머스 : 우리는 확실히해야한다. 

ALLISON BUCHHOLTZ-AU : 나는 모두 같은 느낌 혜택을 누릴 수 있습니다 귀여운 그림이 전부입니다. 

토마스 라이 머스 : 수 우리 치아는 모든 혜택 

청중 : 네, 그럼요. 토마스 라이 머스 : OK, 멋진. 그래서 우리는 귀여운을 넣어해야합니다 어딘가에서 사진. ALLISON BUCHHOLTZ-AU : 나는 기분 귀여운 토끼 지금은 유용 할 수 있습니다. 토마스 라이 머스 : 물론. ALLISON BUCHHOLTZ-AU : 일주일의 끝. 뭔가를 adorab-- 

토마스 라이 머스 : 어떻게 새끼 고양이의 한판 승부? 

ALLISON BUCHHOLTZ-AU : 고양이도 작동합니다. 

토마스 라이 머스 : 차가운 때문에 그에 대한 사이트가있다. 그것은 PlaceKitten라고. ALLISON BUCHHOLTZ-AU : 잘입니다. 토마스 라이 머스 : 예. ALLISON BUCHHOLTZ-AU : 그냥 같은, 대한, 당신의 웹 사이트에서 자리 표시 자 이미지. 토마스 라이 머스 : 그래 그래. PlacePuppy도 있습니다. 그리고 PlaceBacon이있다. 

ALLISON BUCHHOLTZ-AU : PlaceBacon? 정말? 

토마스 라이 머스 : 아, 우리는하지 않습니다 여기에 인터넷에 액세스 할 수 있습니다. 

ALLISON BUCHHOLTZ-AU : [신음 소리] 비극. 토마스 라이 머스 : 그렇지 않으면, 네 녀석들에게 보여줄 것입니다 어떻게 당신의 웹 사이트에 이미지를 넣어. 우리는이를 얻으려고 할거야 우리가 가야하기 전에 작동합니다. 하지만 지금, 우리는 그저 다음 색상으로 이야기 할 것입니다. 우리는 kittens-- 사진을 넣을 

ALLISON BUCHHOLTZ-AU : 우리는 않았다. 

토마스 라이 머스 : 하고요 인터넷의 잠시 다운되는. 그래서 우리는 두 가지의 div가 있고, 우리는있어 그들에게 두 개의 ID를 줄 것. 우리는 그것을 호출하는거야 "첫 번째"와 "두 번째." 그래서 ID = "처음." 그리고 우리는 그들에게 두 가지 색상을 제공하는 것입니다. 그래서 우리는 뭔가를 선택 어떻게 "첫 번째"의 ID가? ALLISON BUCHHOLTZ-AU : 도트 또는 해시? 청중 : 샤프. 토마스 라이 머스 : 샤프, 완벽한. 샤프, 해시, 어떤 우린 ... 

ALLISON BUCHHOLTZ-AU : 많은 것들이 그것을 호출합니다. 

토마스 라이 머스 : OK. 우리는 해시 태그에 정착하려고하고있어 그것은 우리가 함께 갈거야거야. OK? 

ALLISON BUCHHOLTZ-AU : 해시 태그. 

토마스 라이 머스 : 그래서 해시 태그의 첫 번째. 

ALLISON BUCHHOLTZ-AU : 그래서 당신은 seminar--을 트윗 할 수 있습니다 해시 태그 CSS, 멋진 해시 태그. 토마스 라이 머스 : 해시 태그의 awesomeness. ALLISON BUCHHOLTZ-AU : 해시 태그의 awesomeness, 예. 토마스 라이 머스 : OK. 그래서 우리는 "첫 번째"와 "두 번째."이 그래서 첫째, 우리는 할 겁니다 적색의 배경색. ALLISON BUCHHOLTZ-AU : 어, 대장. 토마스 라이 머스 : 그래. ALLISON BUCHHOLTZ-AU : 나는 당신의 자리 검사기 수있을 것입니다. 토마스 라이 머스 : 앨리슨은 저를 얻었다. 파랑 -의 배경 색 

토마스 라이 머스 : 퍼플! 

토마스 라이 머스 : 퍼플. ALLISON BUCHHOLTZ-AU : 예. 보라색의 내 좋아하는 색깔, 우리는 아직 사용하지 않았습니다. 

토마스 라이 머스 : 바이올렛. ALLISON BUCHHOLTZ-AU : 바이올렛. 그 작동합니다. 

토마스 라이 머스 : 그래서 우리는있어 두 가지의 div를해야 할 것. 그들은 완전히 비어있을 것입니다. 우리는 아마 일부 텍스트가 있어야합니다. 그래서 "첫 번째"가 될 것입니다 "안녕하세요." 그리고 "두 번째"말하길합니다 

ALLISON BUCHHOLTZ-AU : 안녕. 

청중 : - "세계." 안녕, 안녕하세요. ALLISON BUCHHOLTZ-AU : 나는 보았다 콘서트에서 그 주에. 토마스 라이 머스 : 비틀즈? ALLISON BUCHHOLTZ-AU : 실수하십시오. 그들은 위대한 아니에요. 나는 그것을 좋아하지 않는다. 

토마스 라이 머스 : 우리는이 "HELLO"와 "안녕히 가세요." 그리고 다시, CSS, 그냥 끝내 그것은 우리의 색상을 인식하고 있기 때문이다. 도를 할 필요가 없습니다 그들이 존재하는 것을 우려하고있다. 그들은 않습니다. 

ALLISON BUCHHOLTZ-AU : 그들은 존재한다. 

토마스 라이 머스 : 그래서 CSS 나는 것 같아요 255 단어는 색에 대해 이야기합니다. 당신은 외부의 색상을 생각할 수있는 경우 그 (255)는, 같은 감동 할 것이다. ALLISON BUCHHOLTZ-AU : 네. 나는 너희들이있을 수 있습니다 생각 바로 후 들어온다. 

토마스 라이 머스 : 그래서 여기, 당신은 우리가 두 개의 상자가 표시됩니다 서로의 바로 오른쪽 상단에? HELLO과 작별. 

ALLISON BUCHHOLTZ-AU : 중간에 공간이 없습니다. 그들은 단지 smooshed있어 오른쪽 서로의 상단에. 

토마스 라이 머스 : 그래서 제일 먼저 나는 우리가 이야기해야 같아요 의도 그래 말하길 할 수 있습니다. 그래서 CSS는 상자의 종류로를 나타냅니다. 그리고 상자로, 그들은 내용을 가지고있다. 그리고 그 내용은 지금 일종의입니다 HELLO 또는 안녕 그거야. OK? 

첫 번째 것들 중 하나 그래서 할 수있는 당신이 패딩을 추가 할 수 있습니다. 패딩은 얼마나 많은 공간을 말한다 각 측면에 두어야합니다. 그럼 내가하고 싶은 말은 가정 해 봅시다 각 측면에 10 픽셀. 그리고 두 번째로 그 해부합니다. ALLISON BUCHHOLTZ-AU : 여기에이 모든 것들이 픽셀 대부분이 될거야 세미나의 나머지 부분에 대한. 당신은이 것을 보게 될 것입니다 주위 몇 공간, 오른쪽? 그래서 당신은 여기에 표시되지 않는 것을 거기에있다 패딩이 눈에 보이지 않는 종류 같은 말한다 각면에, OK, 당신은 content--의 당신의 상자가 

ALLISON BUCHHOLTZ-AU : 당신이하고 싶지 않음 단지 검사 요소를 당겨? 

토마스 라이 머스 : 그래, 그건 좋은 생각이다. ALLISON BUCHHOLTZ-AU : 또한, 발견 검사 요소는 좋은 방법입니다 뭔가 것인지 알아낼 잘못, 예상치 못한 일이 발생, 태그를 검사하고보고 무엇을 덮어 도움이됩니다 같아요. 

토마스 라이 머스 : 그래서 나는 확실하지 않다 너희들은이 색상을 볼 수 있습니다. 당신이 할 수 있습니까? 이 패딩을 볼 수 있습니다 가장자리의 종류에. 그리고 당신은 실제를 참조하십시오 푸른 콘텐츠, 오른쪽? 그래서 아주이다 박스 모델의 기본. 당신은 내용을 가지고있다. 그럼 당신은 패딩을 가지고있다. 

청중 : 그냥하지 않습니다 엥 내부 상자를 사용하여 

ALLISON BUCHHOLTZ-AU : 오른쪽. 그냥 선택하는 것 때문에 지금 요소입니다. 

토마스 라이 머스 : 그래. 다른 것들. 그래서 그것에 대해 이야기 해 봅시다 두 번째 패딩 명령. CSS, 측정에 따라서 유닛이 필요합니다. 그래서 처음에는 양이있다. 이 경우, 우리는 (10)를 말한. 그리고 다음 하나 말했듯이 우리는 픽셀, 픽셀입니다. 당신이있을 다른 사람은 센티미터, 인치 같은 것들. 당신은 일을 좋아 할 수있는, 10인치 무엇인가? 그리고 그것은 말도 될 것. 

ALLISON BUCHHOLTZ-AU : 오, 이런. 

청중 : 우와. 

토마스와 ALLISON : 네. 토마스 라이 머스 : 그래서 그 모든 패딩입니다. 나는 픽셀로 돌아 갈거야. 

ALLISON BUCHHOLTZ-AU : 픽셀 표준, 같은 경향이있다. 당신은 많은 웹 사이트에서 볼 때, 그들은 주로 픽셀 단위로 작동합니다. 토마스 라이 머스 : 그래서 당신은 보게 될 것입니다 중 당신이 볼 다른 사람을 pixels-- 하나 그들이다 인 그들이다 글꼴의 높이와 동일 이는 현재 사용하고 있습니다. 

ALLISON BUCHHOLTZ-AU : 음. 토마스 라이 머스 : 그것은 말할 수있는 좋은 방법입니다 같은, 내 글꼴로 많은 공간을 원하는 복용입니다. ALLISON BUCHHOLTZ-AU : 몰랐어. 당신은 새로운 것을 매일 배웁니다. 토마스 라이 머스 :있다 CS에서 측정을 많이합니다. 나는 당신이 그들을 찾아 좋습니다. 모든 경우에, 나는 생각한다 픽셀은 충분합니다. 그리고 그들도있어 어떤 당신은 보게 될 것입니다 온라인으로 수행 사례의 대부분에서. 그래서 우리는 픽셀에두고 있습니다. 

또한, 그렇게 말하길해야 할 수 있습니다 패딩 세트 패딩의 모든. 당신은 또한 같은 것을 할 수 있습니다 다만 set--에 "패딩 탑" ALLISON BUCHHOLTZ-AU : 아마 우리는 우리의 "HELLO"다시를 얻을 수 있습니다. 토마스 라이 머스 : 그냥 설정 --to 상단과 아무것도에 패딩. 그래서 네 개의 명령은 패딩 정상입니다, 패딩 - 바닥, 패딩 왼쪽, 패딩 오른쪽. 

ALLISON BUCHHOLTZ-AU : 그냥 같은 당신은 상자 기대. 

토마스 라이 머스 : 그래. 아무것도가 너무 미친. 그 의미가 있습니까? 그래서 패딩입니다. 나는 모든 설정거야 다시 10 가스켓. 그리고 나는 경계로 이동거야. 

그래서 국경 인 것은 국경 이상한 명령입니다. 그것은 한 번에 세 가지 종류의 걸립니다. 그래서 첫 번째는 얼마나 큰 이 측정으로되고 싶어요. 다시 말하지만, 난 단지 픽셀을 사용하고 있습니다. 그리고 마지막 I 측정에 추가해야합니다 한 가지입니다 장치를 필요로하지 않는 것은 0입니다. 사실은 잘못이다 0에게 유닛을 제공하기 위해, 0 0 인치에 걸쳐 있기 때문에, 픽셀 센티미터, 뭐든간에. 이 모든 것은 바로, 0을 의미? 그래서 먼저 그것을 측정을 제공합니다. 

그럼 당신은 그것에게 스타일을 제공합니다. 그래서 내가 말할거야 "고체." 그리고 우리는 무엇을 의미하는지에 대해 이야기 할 것입니다. 그리고 마지막으로, 당신은 그것을 색상을 제공합니다. 그래서 내가 말할거야 "블랙을." 그리고이 우리가했습니다 모든 것들 지금 스타일을 제외하고, 이전에 본, 그러나 우리는 그것에 대해 이야기 할 것입니다. 그래서 너희들은 측정을 보았다, 당신은 색상을 본 적이있다. 그리고 무슨 일이 장면이있다 주위에 좋은 검은 테두리, 오른쪽? 우리가 어떻게했는지 너희들은 보이지? 

청중 : 네. 

토마스 라이 머스 : 차가운. 그래서 무엇입니까? 그래서 우선, 그것은 하나의 픽셀이다. 그건 바로, 충분히 자명입니까? 마찬가지로, 그것은 하나의 픽셀 두께입니다. 아니면 하나의 픽셀이 될 것입니다,하지만 난 그것은 조금 더, 그래서 확대 보다. 

ALLISON BUCHHOLTZ-AU : 그리고 우리는이 이 말도 해상도 TV. 

토마스 라이 머스 : 그래. 당신은 그것을 더 크게 만들 수 있습니다, 작은, 뭐든간에. 그래서 여기에 두 개의 픽셀 테두리입니다. 당신은 두꺼운 두 배입니다 볼 수 있습니다. 당신이 다음 일은 색상입니다. 즉 흥미 아니다. 내가 얘기하지 않을 것 정말, 그것에 대해. 

ALLISON BUCHHOLTZ-AU :하지만 스타일 조금 흥미로운 일이 될 수 있습니다. 

토마스 라이 머스 : 그래. 스타일 그래서, 몇 사람이 있습니다 나는 일반적으로 사용되는 참조있다. 먼저 하나의 고체, 다음 중 하나의의 점선, 마지막 하나의 점선. 그리고 여기에 점을 찍는다. 당신은 그들이있어 것을 볼 수 있습니다 점의 무리, 오른쪽? 종류의 좋은 테두리를 얻을 수있는 좋은 방법 가는 대시도 꽤 인기가 있습니다. 

ALLISON BUCHHOLTZ-AU : 그리고 물론, 난 확실히 다른 많은있다 당신이 얻을 수있는 스타일. 그리고 우리의 큰 세트를 가지고 너희들의 끝에 링크 가지 정독하고, 더 멋진 CSS 봐. 

토마스 라이 머스 : 그리고 마지막, 우리는있어 에 대해 이야기 할 것 상자 모델 잽싸게. 아, 그리고 다음 테두리, 정확히 패딩과 같은, 당신은 또한 같은 것들을 가지고 국경에서 왼쪽으로, 국경 오른쪽, 국경 탑, 국경 바닥, 당신을 허용 특정 경계에서 얻을 수 있습니다. 그래서 여기에 그냥 테두리 왼쪽 정의입니다. 그 의미가 있습니까? 

ALLISON BUCHHOLTZ-AU : 그것은 멋진 방법은 일을 강조하거나 추가 다른 요소 사이의 선. 토마스 라이 머스 : 물론입니다. 그래서 우리의 경계입니다. 그리고 마지막의 마진. 여백의 같은 패딩 그것은 within-- 아니에요 제외 ALLISON BUCHHOLTZ-AU : 그것은 아닌 요소 주위 실제로 전체 약 상자 우리는 보게되었습니다 그. 

토마스 라이 머스 : 그래. 앨리슨 완벽하게 말했다. 그것은 당신의 내부에, 같은, 아니다 소자는 그 전체 주위의 상자. 즉 같은 것들을 의미 배경은 적용되지 않습니다. 그리고 그것은 기본적으로 말한다 같은, 난 아무것도 원하지 않는다 나를 위해이 공간에. 우리가 여기처럼 그래서 10 픽셀의 여백. 10 픽셀 이내 그래서 아무것도 내 옆에 있어야한다. 즉 가지의 그 공간 만 가지 없습니다. 그래서 아주이다 박스 모델의 기본. 그 의미가 있습니까? 쿨, 쿨. ALLISON BUCHHOLTZ-AU : 신난다. 그래서 지금은 우리 생각 우리의 멋진 자원을 가지고 우리는 너희들을 가져 가지 매우 빠르게 통해. 그리고 우리는 잘 ... 사실상 것이다, 우리는 아직 인터넷을해야합니까? 

토마스 라이 머스 :하자 나는 전혀 우리 열 수 있는지 나 그냥 경우 보자 I 신속하게 인터넷을 얻을 수 있습니다 앨리슨은 아무것도에 대해 이야기하면서 앨리슨에 대해 얘기하고 싶어. ALLISON BUCHHOLTZ-AU : 그래서 basically-- 난 아냐 나는이 시점에서 말할 수있는 그 밖의 무엇을 알고있다. 그러나 이러한 몇 가지 정말 좋은 자원. 이러한 것들 그 토마스 내가 사용하고 있습니다 우리 실제로 이를 위해 예비 학교에 사용. W3 스쿨 하나입니다 당신을 사람들은 전에 볼 수 있어야합니다. 우리는 그것을 추천 CSS와 많은 것. 나는에게 추천 알고 내 섹션의 모든 시간. 

큰 일 중 하나는 것입니다 CSS 엉망 가지로 할 수 있습니다 변경 사항을 참조 순간적으로이에, 같은 두 번 창은 가지고 볼 수 있습니다. 그래서 당신에 대해 걱정할 필요가 없습니다 자신의 웹 페이지를 설정, 나에 가상 호스트를 설정하기 로컬 기기 및 로컬 호스트, 그리고 모든 물건의 작업을 받고. 그것은 바로 페이지 내에 포함된다. 

그리고이 작은있다 수업 당신이 할 수 배우 통과 선택기에 대한 자세한, 또는 조작에 대해 알아 당신의 글꼴, 또는 배경, 또는 이미지. 그리고 당신이이 즉각적인 결과 당신 어떤 작업을 수행 할 필요가 없습니다 다른 준비 작업. 그래서 W3 스쿨을 사랑 해요. 그것은 멋진입니다. 그것은 작동합니까? 

토마스 라이 머스 : 그래. 아니, 아니에요. 당신은 내가 시도하고 싶지 않음 내 컴퓨터를 다시 시작? 아니면 우리가 바꿔 .. 않는다 

ALLISON BUCHHOLTZ-AU는 : 내 말은, 물론, 이것은 또한 온라인으로 될 것입니다. 모든 슬라이드는 온라인으로 될 것입니다. 그래서 난 그냥 매우 이러한 일을하는 것이 좋습니다. 

이것은 단지 위대한입니다 컨닝 페이퍼있다. 그냥 모든 기본적인이다 당신이 가진 것을 명령한다. 먼저있을 때 그것은 위대한 당신의 웹 사이트를 시작. 어쩌면 당신이하지 않기 때문에 모든으로 싶어 껄끄 러운 진짜 핵심적 디자인 - 무거운 물건. 당신은 방법으로 포맷해야 그런 종류의 느낌과 뜻한다 당분간 않습니다. 그리고 당신이 정말로 원하는 경우 그것으로 얻을, 나도 알아 이것은, 등 중 하나이다 토마스의 마음에 드는 참조. 우리는 그것을 사용하고 준비는하고 멋진입니다. 그것은 모질라의 개발자입니다. 

토마스 라이 머스 : 그래서 모질라는 파이어 폭스를 만드는 사람들. 그리고 그것은 단지 자신의 개발자 내가 생각하는 기준은 굉장합니다. 그리고 그것은 멋진있다 자원의 목록입니다. 그래서 우리는 드 니스, 니가 

ALLISON BUCHHOLTZ-AU : 그리고 마지막 음이다 때 당신이 노력하고 당신의 웹 사이트를 디자인 일에서 영감을 그립니다 것을 당신은 꽤 생각합니다. 요소를 검사, 소스 코드를 검사 슈퍼 도움이 될 수 있습니다 알아 내려고 노력에 대한 어떻게 자신의 웹 사이트를 스타일. 

종종, 나는 최고의 기분 방법, 실험 외에, 그냥 보는 것입니다 예쁜 것들. 나는 그냥 열심히 정말로 발견 가지 자신의 물건을 설계, 특히 처음에. 그래서 웹 사이트에서 찾아보세요 당신이보고 즐길 수있다. 만드는 게 무엇인지 그림 그들 당신에게 호소. 그리고 부담없이 시도하고 그 복제합니다. 

토마스 라이 머스 : 오른쪽. 심지어 웹 사이트 등 이처럼, 당신은 볼 수 있습니다 상단 사업부는 확실히있다. 그리고 당신은 내 다른 사업부가 여기에, 이는 CSS의 경 외로움입니다. 그리고 당신은 여기에 링크의 무리가있다. 당신은 정말 그냥 검사하는 경우 요소, 당신의 정렬 할 수 있습니다 웹 사이트 무엇을보고 시작 같이보고, 내가 어떻게 할 수 내가 원한다면 것을 다시 작성하십시오. 그 의미가 있습니까? 그래서 우리는 왼쪽 3 분 있습니다. 질문 그래서? 그들 중? 예. 

청중 : 색상 사각형, 어떻게 당신에게 것 당신이 그것을 원하는하지 않은 경우 그럴거 ... 전체 페이지에 걸쳐 수있는 것 당신은 단지를 가로 질러 이동 만든 반 페이지 나 텍스트 만? 

토마스 라이 머스 : 네, 절대적으로. 그러니 실제로 보자. 나는 두 가지 아이디어가 있습니다. 모든 그래서 일단, 당신 또한 퍼센트를 사용할 수 있습니다. 

관객 : 정말? 

ALLISON BUCHHOLTZ-AU : 그래서 뭔가 조회하는 것은 상대 위치입니다. 그것은 뭔가가 우리 에 들어갈 시간이 없어, 하지만 내가 확실히 뭔가 너희들이 체크 아웃하는 것이 좋습니다. 

토마스 라이 머스 : 그래서 퍼센트. 우리가 그것을 만들 었는지 그리고 참조 폭의 단지 50 %? ALLISON BUCHHOLTZ-AU : 만약에 당신 실제로 픽셀의 수를 알고 당신은 그런 식으로 더 정확하게 할 수 있습니다. 당신은 주변에 바이올린 할 수 있습니다. 그러나 50 %. 우리가 우리의 브라우저의 크기를 조정한다면, 그것은 작게 만들 것입니다. 

토마스 라이 머스 : 글쎄, 그건 기본적으로 50 % 지금, 나는 생각한다. 그런 다음 마진 50 %, 그리고 이 추가되었습니다. CSS는 단점을 많이하고있다. 그래서 지금이입니다 페이지 폭의 50 %. 그러나 당신이 10를 기억 픽셀은 각각의 측면에서 이륙. 그래서 경우에 대한 것을 이동했다 브라우저의 왼쪽 가장자리, 다음은 50 % 같을 것이다. 내가 말한 것처럼 다시, CSS는 수 추측 및 체크 많이있을. 마찬가지로, 당신은 뭔가 생각 한 방향으로 행동 할 것, 그러나 그것은 완전히 다른 방식으로 동작합니다. 

ALLISON BUCHHOLTZ-AU : 그리고 당신은, 똑똑 당신은 단지 더 얻을 그것에 대한 직관은 당신을 따라 이동. 

토마스 라이 머스 : 그리고 더 악화 가져옵니다. 그래서 정말 그냥 경주입니다. 

ALLISON BUCHHOLTZ-AU : 즉 슈퍼 고무적이다. 우리는 그들이 CSS를 좋아하고 싶다. 

토마스 라이 머스 : CSS는 굉장​​합니다. 그 기억. 다른 질문? 

ALLISON BUCHHOLTZ-AU : 한 가지. 다른 건? 쿨. 

토마스 라이 머스 : 신난다. 

ALLISON BUCHHOLTZ-AU : 음, 경우 얘들 아, 나중에 질문이 우리는 항상 평소에 따라 사용할 수있어. 당신은 아마 일부를 볼 수 있습니다 최종 프로젝트에 대한 우리의 확실히 핵킹 마라톤에서. 

토마스 라이 머스 : 물론입니다. 그리고 박람회. 

ALLISON BUCHHOLTZ-AU : 그리고 박람회. 오. 

토마스 라이 머스는 : 최선을 다하겠습니다 네 awesome-- 모두 보는 

ALLISON BUCHHOLTZ-AU : 우리는 볼 수 있습니다 당신의 멋진 웹 사이트의 모든 그 아름다운 것입니다. 토마스 라이 머스 : 당신은 항상 할 수 같은, 웹 사이트를 참조하십시오 자, 다음과 같은 좋은 CSS와 있었다 CSS을하려고하지 않은 사람 등을들 수있다. ALLISON BUCHHOLTZ-AU : 또한, 다른 물건으로 보는 한 가지 더 부트 스트랩입니다. 그래서 부트 스트랩은 중대하다. 

토마스 라이 머스 : 구글이 경우 당신 ... 

ALLISON BUCHHOLTZ-AU : 구글 그것. 그것은 멋진입니다. 당신은 그것을 사랑합니다. 그리고 지금 당신은이 있는지 CSS의 기본 이해, 그것은 더 많은 의미가 있습니다. 신난다. 감사합니다, 여러분. 

토마스 라이 머스 : 정말 감사합니다.