비디오: CSS 파일을 만들고 HTML에 로드하는 방법 배우기

우리 인기 있는 웹 개발 시리즈의 또 다른 에피소드에 오신 것을 환영합니다. 여기서는 CSS의 복잡성과 그것이 웹사이트의 시각적 매력을 어떻게 변화시킬 수 있는지에 대해 심층적으로 다룹니다.

오늘의 튜토리얼에서는 웹 디자인 기술을 고급 수준으로 끌어올릴 수 있는 고급 CSS 기술을 살펴보겠습니다. 당신이 기본적인 이해를 확고히 하고자 하는 초보자이거나 스타일링 전략을 미련 없이 다듬고자 하는 숙련된 개발자이던, 이 비디오는 당신을 위해 특별히 준비되었습니다.

이전에 HTML의 기본과 입문적인 CSS를 다룬 바 있으며, 그것들이 오늘 다룰 내용의 기초를 제공했습니다. 이제 외부 CSS 파일에 초점을 맞추고 있습니다 — 이 방법은 코드를 더 잘 구성할 뿐만 아니라 사이트의 확장성과 유지 보수성도 향상시킵니다. H1 및 H2 태그를 스타일링하고 CSS에서의 계층과 상속을 이해하는 것부터 시각적으로 매력적인 웹 페이지를 만들기 위해 이러한 속성을 효과적으로 적용하는 방법을 보여드릴 것입니다.

우리와 함께 외부 CSS 파일을 만들고 링크하는 방법을 설명하고 HTML에서 스타일링을 분리하는 이점을 논의하며 즉시 구현할 수 있는 실용적인 예시를 제공할 거에요. 웹 개발 기술을 향상시키기 준비가 되셨나요? 함께 시작해봐요!

비디오 대본

안녕하세요. 오늘은 드디어 CSS 스타일을 HTML 문서에 추가하여 사용자가 당신의 웹사이트를 방문했을 때 보는 독특한 외관을 만들 수 있는 3가지 방법 중 세 번째 방법을 알려드릴 거에요. 이전 두 영상에서는 HTML 요소에 직접 style 속성을 추가하는 방법을 살펴보았고,

두 번째 영상에서는 HTML 문서의 head에 style 태그를 사용하여 선택자에 CSS를 추가하는 방법을 다루었어요. 선택자는 HTM LM S 태그 이름 또는 클래스 또는 아이디가 될 수 있어요. 아직 클래스와 아이디에 대해 다루지는 않았지만, 미래에 그에 대해서도 알아볼 거에요. 그동안 우리는 HTML의 head에 style 태그를 사용하는 방법을 보았습니다.

웹사이트에 CSS를 추가하는 방법에 대해 이미 배웠는데, 이제 이전 비디오에서 배운 내용을 더 확장해보려 합니다. 따라서 이전 비디오나 그 이전 비디오를 보지 않았다면, 이번 시리즈에서 HTML 기초에 대한 비디오와 이제 CSS를 다루는 비디오, 그리고 나중에는 JavaScript에 대한 비디오를 봐야 합니다.

만약 HTML, CSS, JavaScript를 배우고 싶다면, 이 시리즈가 딱 적합합니다. 그리고 만약 이 비디오와 이전 비디오들을 즐겁게 보았다면, 아래에 있는 좋아요 버튼을 눌러주시기 바랍니다. 실제로 좋아요 버튼을 눌러주고 댓글을 달아주시거나, 인사를 하고 싶다면 언제든지 댓글을 달아주세요. 비디오가 즐겁다는 것을 알 수 있고, 유용한 비디오라고 유튜브에 알리는 데 매우 도움이 됩니다. 여러분이 무엇인가를 배우고 있다는 것을 알려주어 제가成장하고 계속하여 비디오를 만드는 데 도움이 됩니다. 또한 채널을 구독하고 친구에게 공유해주시면 정말 감사하겠습니다.

그럼 이 비디오로 돌아가서, 이전 비디오에서 보았듯이, 우리는 HTML 문서의 head에 있는 스타일 태그를 가지고 있습니다. 이를 통해 CSS 속성을 추가할 수 있는 선택기를 추가할 수 있습니다.

이곳에는 H1 요소 태그 이름이 있는데, 이를 통해 H1 태그가 있는 헤더를 선택하고 이러한 CSS 속성을 부여할 수 있습니다. 안쪽 여백, 마진, 색, 글꼴 크기, 배경색, 테두리 등, 맞죠? 우리는 H2 요소와 단락 요소에 대해서도 비슷한 방식으로 CSS 속성을 추가할 수 있습니다.

그리고 우리의 링크를 위한 앵커 태그와 심지어 우리의 본문, 우리의 전체 HTML 본문이 바로 여기 있습니다. 이것이 본문 요소입니다. 웹사이트의 모든 내용을 선택했습니다. 우리는 그것을 대상으로 삼아 우리가 원하는 색상이나 다른 속성을 가진 배경을 지정할 수 있습니다. 그리고 그 값들이 그 다음 문서에 이어져 적용될 겁니다.

따라서 우리가 문서의 본문 글꼴 크기를 10픽셀로 하고 싶다고 말하면, 모든 글꼴 크기는 기본적으로 10픽셀이 되거나 더 크게 하거나, "이 문서의 본문 글꼴 크기를 20픽셀로 하고 싶다"라고 말해도 됩니다. 이제 모든 텍스트가 기본적으로 20픽셀이 될 겁니다.

따라서 이것을 저장하고 웹사이트로 돌아가보면, 여기에 이 페이지에 우리의 텍스트가 있습니다. 이것은 50픽셀보다 훨씬 작습니다. 현재 우리의 모든 페이지의 텍스트의 기본 크기입니다. 따라서 이제 이 페이지를 새로 고침하여 HTML 문서의 본문의 새로운 기본 글꼴 크기로 돌아가서 어떻게 이어지는지 확인할 수 있습니다.

따라서 모든 텍스트가 기본적으로 우리의 문서에 대해 50픽셀로 설정했던 것과 동일하게 커진 걸 볼 수 있습니다. 따라서 이제 모든 50픽셀이 되었으며 실제로 이것을 증가시켜 100픽셀로 만들 수도 있습니다. 매우 명확하게 보세요, 100픽셀입니다. 이제 이 링크가 100픽셀이 아닌 것을 보실 수 있습니다.

실제로는 조금 더 작은 것 맞죠? 이 링크는 우리가 HTML 문서에서 지정한 대로 우리를 이동시키는 곳인 medium.com 으로 이동합니다. 그래서 이 링크를 좀 살펴 보겠습니다. 여기 있는 이 링크도 똑같이 작아요. 텍스트의 나머지 부분보다 크기가 작죠. 그 이유를 알고 싶어졌어요. 다시 돌아가서 볼까요? 우리의 앵커 태그에 실제로 글꼴 크기를 20픽셀로 지정했다는 것을 알 수 있어요. 이것은 HTML body 에게 모든 글꼴 크기를 기본적으로 100으로 지정하도록 말하는 것이죠. 하지만 다른 요소들은 자신이 원하는 글꼴 크기를 결정할 수 있어요.

만약 100이 되기를 원치 않는다면, 작게 하고 싶다면, 20픽셀로 설정할 수 있어요. 또는 우리가 기본적으로 20으로 지정한다고 했는데, 그것을 변경하여 25로 만들고 싶을 수 있어요. 20이 아니라 25여야 한다고 말하는 거죠. 그게 바로 캐스케이딩이 작동하는 방식이에요. 더 상위 요소인 맞지요? HTML에서 가장 높은 요소는 바로 body 이고, 이곳에 스타일이 있죠.

모든 값들이 그것의 자식 요소들로 닿을 수 있어요. 그들의 자식들에게, 또 그들의 자식들이 자식을 만들어요. 가계도처럼 말이죠. 부모로부터 상속을 받는 거죠. H1은 자신의 부모인 body로부터 상속을 받아요. div 도 body 로부터 상속을 받아요. 그런데 H2 는 div 가 부모인데, div는 body로부터 상속을 받죠.

H2는 그의 부모의 부모인 body 로부터 상속 받아요. 그렇다고 따져보면 CSS 캐스케이딩이 어떻게 동작하는지 그룹 시트차트처럼 생각해볼 수 있어요. 자식 요소가 그럼으로부터 상속을 받아요. 그들의 부모로부터 그럼으로부터 상속 받아요. 이어서 그들은 그럼의 부모님 그리고 더 멀리까지 연결된 조상들로부터 상속을 받아요.

맞죠? 그런 식으로 작동하는 거예요. 이제 세 가지 방법이 있다고 말씀드렸지요. "style" 속성에 대해 다루었습니다. 이제 우리는 HTML 문서의 head 안에 있는 "style" 태그가 어떻게 작동하는지 알게 되었어요. 그리고 그 다음 다루기 원하는 것이 하나 더 있어요. CSS에서 계속 나아가기 전에 다룰 것이 있습니다. 이 다음 부분을 다룬 후에.

이제 실제로 멋진 웹사이트를 디자인하는 방법에 대해 이야기해 볼 수 있게 됐어요. 디자인을 시작하는 방법에 대해 이야기할 수 있습니다. 그렇기 때문에 이 다음 파트를 다루었을 때.

실제로 우리는 어떻게 멋진 웹사이트를 디자인하기 시작해야 하는지에 대해 다룰 수 있을 거예요. 우리 엄마에게 자랑하고 싶은 아름답고 멋진 웹사이트를 디자인하는 방법에 대해 이야기하기 시작할 수 있습니다. 이제 할 수 있어요. 그렇기 때문에 시작하기 전에, 이 비디오를 좋아요를 눌러 주시고, 여전히 즐기고 유용하다고 말해 주시고, 무언가를 배우고 있다는 것을 말씀해 주세요.

물론, 따라오고 있지 않다면 텍스트 편집기를 가져오고 이 코드를 직접 써 보세요. 카피하거나 붙여넣기 하지 말고 직접 입력해서 배우세요. 모두 학습에 관한 것이거든요. 아직 텍스트 편집기가 없다면, 코딩 및 그것이 어떻게 작동하는지에 대한 이전 비디오를 관찰하러 가야 합니다. 이 동영상은 구글 문서나 마이크로소프트 워드와 유사한 워드 프로세서처럼 작동하는 것에 대해 이야기합니다.

그래서 우리가 HTML 문서에 CSS 스타일링을 추가하는 세 번째 방법으로 가봅시다. 이것이 바로 "style" 태그인데요. 우리는 이 모든 것을 지워볼게요. 단순히 모두 자르겠습니다. Command X 또는 Control X를 누르고, 그냥 보관해놓으세요. 저장하면 스타일링이 사라진 것을 볼 수 있을 겁니다. 왜냐하면 "style" 태그 안에 있던 모든 스타일링이 더 이상 없어졌기 때문이죠.

유지된 유일한 스타일은 HTML 요소의 스타일 속성에서 온 스타일입니다. H1, H2, div 및 path입니다. 단락 및 이미지에서도 마찬가지입니다. 따라서 여전히 이러한 스타일이 적용된 요소들은 있지만, 나머지 스타일링은 모두 삭제되었습니다. 우리가 제공하는 것을 확인할 수 있습니다. 여기에 있는 H2도 약간의 스타일이 있습니다.

이것은 색깔, 빨간색 등의 스타일이 적용되어 있지만, 다른 모든 것들은 스타일이 없습니다. 왜냐하면 우리가 스타일 태그를 제거했기 때문입니다. 이 태그에는 아래로 계속 퍼져야 할 것이라고 생각한 다른 여러 스타일들이 포함되어 있었습니다. 그리고 이제 우리는 다시 넣었습니다. 페이지를 새로 고침하고 확인해 봅시다. 다시 복원되었습니다. 이제 다시 제거해 봅시다.

다시 한 번, 이것을 제거하고 지금은 이것을 보관하고 싶습니다. 그리고 어떻게 CSS를 별도의 파일로 만들고, 이 파일에 넣은 다음 HTML에서 가져와 사용하고 확장할 수 있는지 실제로 보여드리고 싶습니다. 따라서 이제 어떻게 할 것인지 알아보겠습니다. 텍스트 편집기나 VS Code로 이동하겠습니다.

VS Code에서 새 파일을 만들 수 있는 방법, 즉 마우스 오른쪽 버튼을 클릭하거나 "새 파일"이라고 쓰인 이 버튼을 클릭할 수 있는 방법을 찾겠습니다. 그리고 현재 폴더 내에서 작업하고 있는데, 제 프로젝트 폴더라고 부르는 폴더에 있습니다. 따라서 모든 파일이 여기 있습니다. 제 인덱스 파일, 저의 연락처 페이지, 모든 파일들이 여기 있습니다.

동일한 디렉토리에 있습니다. 새 폴더를 만들겠어요. "styles"라는 폴더를 만들고, 이 새 폴더를 마우스 오른쪽 버튼으로 클릭해서 "새 파일"을 선택할 거예요. 이 파일을 "home.css"라고 이름 지어줄 건데, css는 캐스케이딩 스타일 시트를 뜻해요. 지금 홈페이지 스타일을 위한 새 파일을 만들 거예요.

우리의 홈페이지인 index.html이 있죠. 그래서 우리의 css 파일은 home.css가 될 거예요. 다시 말해서, 원하는 대로 이름을 지으면 되어요. 저는 "home"이라고 지었어요. "index.css"라고 해도 되고, "homepage.css"라고 해도 되요. 자유롭게 이름 짓으세요. 저는 간단하고 명확한 "home"이라는 이름을 사용할 거예요. 이제 우리가 "home.css" 파일을 가지고 있어요.

이곳에 우리의 홈페이지에 적용할 모든 CSS 정의를 넣을 수 있어요. 그리고 우리가 이 파일을 링크한 후, 그 문서에 가져와서 적용할 수 있어요. 먼저 간단한 CSS 정의를 해보겠어요. 우리가 이 파일을 링크한 후 작동하는 것을 보여주기 위해 간단한 CSS 정의를 하려고 해요. "스타일" 태그에서 했던 것처럼 CSS 정의를 이곳에 정의할 거예요.

저는 h1을 타겟팅해서 모든 h1에 라임 그린 색상을 적용할 거에요. "라임 그린" 색상을 적용할 거에요. 그리고 이제 "home.css" 파일이 있으니, 다시 index 파일로 돌아가서 "home.css" 파일을 가져오는 링크를 추가할 거에요. 그렇게 하면 "home"을 가져올 거예요.

css 내용, 이 파일의 모든 내용, home.css를 index.html 파일로 가져올 거에요. 이를 하는 방법은 link라는 태그를 입력하는 것이에요. L I N K 그리고 닫을 거에요. 우리가 이전에 다룬 것처럼 셀프 클로징 태그에요. 이 이미지처럼, 셀프 클로징 태그에요.

여는 태그와 닫는 태그가 필요하지 않아요. link와 link를 할 필요가 없어요. 자체적으로 닫히기 때문에 그것은 필요하지 않아요. 그래서, 우리는 link를 해요. 정확히 그렇게. link 그리고 그 다음엔 슬래시를 입력하고 오른쪽 꺾쇠를 입력해요. 그리고 여기엔 href라는 속성을 추가할 거에요. hypertext reference의 약자인 href에요. 우리의 링크와 앵커 태그에서 볼 수 있는 href과 비슷해요.

링크의 href는 브라우저에게 우리가 원하는 리소스를 어디에서 찾을지 알려줘요. 그래서, 우리는 프로젝트 폴더에서 파일을 찾고, 그 파일을 찾는 방법을 브라우저에게 알려줄 거에요. 먼저 .을 입력하고 슬래시를 입력해요. 그러면 우리 텍스트 편집기인 VS 코드의 자동 완성에서 확인할 수 있어요. 이 프로젝트 폴더에 styles 폴더가 있음을 보여줘요. 그래서 styles를 입력하고 styles 폴더 안에.

오른쪽 여기에 볼 수 있어요. 우리에게 home.css 파일이 있어요. 그러니까 다시 한 번 슬래시를 입력하고 다음 디렉토리로 이동하고 styles 폴더 내부로. 그리고 home.css를 해요. 저장을 누르면, 우리는 이 연락처 페이지에 링크하는 방법과 비슷하다는 것을 알 수 있어요. 현재 디렉토리에서 시작하는 .을 입력하고 이 파일 contact를 찾아내는 거에요.

HTML입니다. index.html, contact.html 및 styles 폴더를 보유한 폴더에 있어요. 디렉토리를 시작할 거에요, 현재 디렉토리 지납니다. 그리고 contact.html을 찾아요. 그러면 같은 폴더에서 바로 찾아요. 그런데 링크 태그에서 CSS 파일을 가져 올 거에요. 실제로 우리가 해야 하는 비슷한 일을 하게 될 거잖아요, 현재 디렉토리를 시작할 거에요. 그 다음에 styles 폴더로 가요. 그리고 그 폴더 안에서 home.css 파일을 찾을 거에요. 그게 이렇게 되죠. index 파일에서 시작해서 styles 폴더로 이동하고, 그런 다음 home.css 파일을 가져 올 거에요. 그 파일 안에는 홈페이지용 CSS가 포함되어 있고, 여기에는 h1 요소에 적용되는 lime green 색상이 있는데요. 이는 color라는 CSS 속성을 추가하고 값으로 lime green을 갖고 있어요.

이제 이 링크를 완성하기 전에 하나 더 해야 할 일이 있어요. 브라우저에게 이 링크가 어떤 종류인지, 어떤 리소스인지를 알려줘야 해요. 이게 뭘까요? 이겁니다. Relationship입니다. 이겁니다. 현재 파일인 index.html과 이 현재 파일(import하려는 파일인 home.css와의 관계를 말해줄 거에요. 브라우저에게 알려줘요. index.html과 home.css 파일 사이의 관계를요. 그 관계는, home.css가 스타일 시트임을 의미하고요. 그게 다에요. 링크는 스타일 시트라고 알려주고, 이 링크가 어디에 있는지 말해줘요. Href의 링크 경로를 프로젝트의 CSS 파일에 지정해 주세요.

그거에요. 우리는 저장하고 웹사이트로 돌아갑니다. 새로고침을 누르면 이제 모든 H1이 우리가 원하는대로 라임 그린으로 변경된 걸 볼 수 있어요. 이걸 되돌리려면, 일단 제거해서 옳다는 걸 증명할 수 있어요. 저장하고 제거한 다음 저장하고 새로고침을 누르면 사라진 걸 볼 수 있어요, 맞죠?

그래서 다시 돌아가서 이를 추가해요. link rel equals stylesheet href equals period forward slash styles forward slash home.css 우리는 이제 우리의 홈.css 파일을 우리의 인덱스 파일에 연결하고 있다. 저장하면 홈.css가 보여요. 그래서 홈.css로 돌아가서 더 많은 스타일을 추가할 수 있는데, font size equals 40 pixels와 같은 것을 할 수 있어요. 새로 고치면 h1 요소의 폰트 크기가 크게 바뀐 걸 볼 수 있어요.

여기가 우리의 h1요소들이에요. 예를 들어, 보통은 한 개의 h1만 있으면 더 나아요. 하지만 예를 들어, 보여주기 위해 여러 개를 만들었어요. 그래서 우리가 보여주고 있는 걸 볼 수 있어요. 하지만 두 번째 h1은 여전히 30픽셀 빨간 테두리가 있고, 라임 그린 색상은 여전히 홈.css 파일에서 가져옵니다.

이제 CSS 파일을 만들고 HTML 파일에서 이를 링크하여 가져와서 스타일을 적용하는 법을 배웠습니다. 우리는 이제 이전에 style 태그에 있던 모든 CSS를 적용할 수 있어요. 이 모든 것을 가져갈 수 있어요, 맞죠?

이전에 우리가 index에 스타일 태그에 있던 모든 것들은 실제로 이 스타일 태그를 없애고 이 .css 파일에만 의존할 수 있어요. 우리가 할 일은 모든 스타일을 복사하여 home.css 파일로 붙여넣는 거예요. 그럼 이렇게 하죠. home.css 파일은 CSS 파일이기 때문에 이 CSS라고 브라우저에 알려주려면 CSS 파일에 스타일 태그를 입력할 필요가 없어요. 왜냐하면 스타일 태그는 HTML에서만 관련이 있거든요. 현재 우리는 HTML이 아니라 CSS 파일에 있답니다.

index.html은 HTML 파일이니까 거기에 스타일 태그를 넣을 수 있어요. 하지만 스타일 태그는 HTML에만 적용돼요. 그래서 HTML을 CSS에 넣을 수 없어요. 그래서 우리는 그것을 없앨 거예요. 닫는 태그도 없앨 거예요. 저장해보면 이제 우리에게 home.css라는 유효한 CSS 파일이 생긴 걸 확인할 수 있어요. 이 파일엔 이전 영상에서 시작했던 모든 셀렉터들이 들어 있어요. 이제 이 파일이 여기 있어요. 다시 링크해볼게요. 웹사이트로 돌아가서 새로고침해보면 모두 여기 있습니다. 모두 다 여기 있어요. CSS 파일인 home.css로 돌아가서 실제로 이 색으로 해볼게요.

이렇게 나타날 거예요. 이게 이 아주 연한 보라빛 붉은색이죠. 맞죠? 좀 분홍빛이네요. 그리고 우리는 다시 돌아가서, 예를 들어 파란색으로 바꿔볼 수 있어요. 우리는 CSS 파일에서 스타일을 적용하고 index.html 파일은 순수 HTML 용으로 유지할 수 있어요. CSS와 HTML을 같은 파일에 넣을 필요가 없죠. 우리는 관심사를 분리하고 순수 HTML 전용 파일과 순수 CSS 전용 파일을 가지고 있어요. 그리고 이를 HTML에 링크해서 사용할 수 있어요.

그래서 우리가 HTML을 작성할 때는 HTML만을 작성하고 여기로 가서 CSS만을 작성한 다음에 연결할 수 있어요. 그것이 좋죠. 그것이 당신이 원하는 거예요. 이것은 매우 기본적인 프로그래밍 원칙입니다. 관심사의 분리. 이제 CSS 파일을 만들고 CSS를 추가하고 해당 스타일, CSS 선택자 및 속성을 가져오기 위해 HTML에 연결하는 방법을 알게 되었어요.

당신의 HTML 파일에 가져오기 위해서요. 이제 여기 있다니까, 이 비디오 동안 홈페이지에 뭔가를 추가할 수 있도록 여기에 있을 때, 나중에 이 홈페이지에 계속 더해 나갈 수 있도록 실제로 보기 좋게 만들도록 해야 해요. 그래서 지금 이게 지금 어떻게 보이든, 무슨 일이 있든 예뻐 보이도록 좀 더 스타일링해볼 거예요.

이제 목록을 좀 더 멋있게 만들어 봐요. 여기 아래 목록이 있죠. YouTube라고 되어있고, 비디오들 그리고 코드 예제, 그리고 1대 1 가르침이 있어요. 이 것에 몇 가지 CSS를 추가할 수 있어요. 그래서 파일 맨 끝으로 가서, CSS 파일에서 LI를 타이핑해요. 우리는 목록 항목을 대상으로 할 거에요. 이게 바로 이 요소예요.

알겠어요. 리스트 아이템인 'LI'를 본 것 같아요. 이는 우리가 사용하는 우리의 정렬되지 않은 목록인 'UL'입니다. 이는 글머리 기호 목록입니다. 우리는 'LI'를 이용할 수 있어요. 저희가 원하는 색상은, 어떤 걸로 해볼까요? 갈색으로 해볼까요? 네, 갈색. 완벽해요. 그리고 폰트 크기를 30픽셀로 해봅시다. 그리고 폰트 두께를 200으로 해봅시다.

사실 600으로 할까요. 굵게 만들어 봅시다, 맞아요? 저장해 봤을 때, 갈색 폰트 크기가 있습니다. 30픽셀이네요. 사실 70픽셀로 해도 돼요. 가시성을 높이기 위해 좀 크게 만들어 봅시다. 70픽셀, 어마어마하죠? 현재 우리의 폰트 두께가 600이에요.

그걸 없애 봅시다. 너무 무겁게 할 필요 없어요. 그냥 보통으로 유지합시다. 보통 폰트 두께면 충분하죠. 작동하는군요. 이걸 다시 원래대로 작게 만들어 봅시다. 폰트 크기 50픽셀로 해볼까요. 괜찮아요. 저는 이대로 좋아요. 이제 실제로 리스트 아이템을 왼쪽으로 여백을 두어, 현재처럼 글머리 기호에 가깝지 않도록 해봅시다.

금방 보셨죠? 현재 글머리 기호에 아주 가까이 붙어 있어요. 그건 별로에요. 이제 각 리스트 아이템의 왼쪽에 좀 더 여백을 추가해서, 글머리 기호에 너무 가깝지 않도록 해봅시다. 20픽셀로 해봐요. 왼쪽 여백을 20픽셀로 주시죠. 새로고침해 보세요. 옆으로 이동했죠.

여기에는 이제 20픽셀의 패딩이 있습니다. 점을 확실히 찍기 위해 40으로 조정할 수 있어요. 보세요. 여기에는 더 많은 패딩이 있네요. 그래서 좋네요. 좋아요, 좋아요. 20으로 다시 돌아가볼까요. 저는 20을 선호해요. 20이 제게 좋아요. 그리고 이제 우리 HTML 문서에 있는 목록 항목에 StyleLink가 있어요.

이제 StyleLink가 적용되었어요. 왜냐하면 우리가 CSS 파일을 생성했거든요. 이 파일을 우리의 index.html 파일에 입력했어요. 우리의 home.css 파일이 이제 우리의 index.html 스타일에 link 태그를 사용해 임포트되었어요. 이 link 태그는 우리 HTML 문서의 head 부분에 있어요. 멋지지 않나요? 그냥 멋지게 아니세요? 이제 우리는 HTML 요소에 스타일을 추가하는 세 가지 다른 방법을 알게 되었어요.

HTML 요소에 직접 style 속성을 추가하는 방법. 그리고 우리는 style 태그도 있어요. 또 다시 이렇게 해서 H1 요소를 빨간색으로 지정할 수 있어요. 원하는 요소에 대해서 말이죠. 하지만 우리는 관심사를 분리하고 싶으니까 더 나은 방법은 서버나 프로젝트 안에 CSS를 완전히 다른 파일에 둘 수 있어요.

그리고 link를 사용해 HTML에 load하고 싶은 특정 CSS 파일을 여기에 로드할 수 있어요. home.css를 사용하면요. 그런데 이것의 힘을 보기 위해 stylus 폴더로 이동해서 contact.css라는 새 파일을 만들어볼게요. 이것은 우리의 연락처 페이지용이에요. 여기 있어요. 매우 소박한 페이지라서 글쎄 별거 없네요.

하지만 여기에 일부 CSS 스타일을 추가할 수 있습니다. 그래서 CSS 파일과 연락처 html 파일이 여기 있다면, 이제 두 파일을 연결할 것입니다. 하지만 편집을 시작하기 전에 일단 우리의 연락처 페이지로 가서 현재 상태를 확인해봅시다. 연락처하는 방법을 보겠습니다. 여기 우리의 연락처 페이지가 있습니다.

여기에 링크가 있고, 현재 이렇게 보입니다. 그래서 만약 CSS를 사용하여 이 페이지에 스타일을 추가한다면, CSS 파일을 사용하여 이 페이지에 스타일을 추가합시다. 바로 body 전체의 배경을 빨간색으로 만들어보죠, 저장하고 다시 연락처 페이지로 돌아가서 새로고침 해봅시다. 그리고 새로고침 합니다. 분명히 하기 위해서, 아무 일도 일어나지 않는 것을 볼 수 있습니다.

여전히, 빨간색이 아닙니다. 우리 body의 배경이 빨간색이 아닙니다. 그 이유는 지금 이 연락. css 파일만 가지고 있기 때문입니다. 그러나 이 html의 css 파일과 연결되어 있지 않습니다. 기억하세요, 이 css 파일을 html에 링크해야 합니다. 그 css 파일을 가져오고 연결할 수 있게 브라우저에게 알려줘야 합니다. 그래서 우리는 이 연락.

css를 가지고 있습니다. 이 연락. html을 가지고 있습니다. 현재 어떤 방식으로도 연결되어 있지 않습니다. 그러니까 직접 이 모든 내용을 입력하고 실습하는 것이 중요하니까, 이제 입력할 것입니다. 이제 우리의 연락. css를 우리의 연락. html에 가져와서 연결할 것이고, 그렇게 하는 방법은 link라고 타이핑하는 것입니다. rel 속성을 Style sheet로 설정하여 브라우저에 이 링크가 어떤 종류의 리소스인지 알려주고, 그리고 어디에서 이 스타일 시트를 찾을 것인지 말해주는 것입니다. href가 바로 그 방법입니다.

스타일 폴더로 이동하고 그 폴더 안에서 Contact CSS 파일을 찾아 연락처 페이지에 스타일을 불러와야 해요. 그래서 우리는 Contact.html 파일 안에 Contact.css를 불러올 거에요. 다시 말해서, 현재 연락처 페이지에는 바디의 배경이 빨간색이랍니다. 이제 새로고침을 하면 배경이 빨간색으로 나타나요. 성공했어요. 이제 여러 페이지가 있는 웹사이트를 만드는 방법을 아는군요. 멋지네요. 더 많은 것을 추가할 수 있어요. 배경을 변경해 보죠. 빨간색이 아니라 회색으로 변경하겠어요. 저는 회색을 좋아해요. 더 부드러워요. 밝은 회색으로 하죠. 그렇게 하면 좋을 거에요. 이제 페이지에 다른 CSS 선택자를 추가할 거에요. 이번에는 링크를 대상으로 해서 모든 링크를 선택하려고 해요. 라임 색상으로 바꾸고 더 큰 글꼴 크기를 원해요. 지금은 조금 작아요. 20 픽셀로 변경하죠. 그리고 텍스트에 밑줄을 넣을 거에요. 브라우저가 이것을 기본으로 제공하지만 다른 곳에서 바꾸려는 시도가 있을 수 있으니 명확하게 지정하는 게 좋아요. 이제 Contact을 저장하면.

CSS 파일을 다시 한 번 말씀드리자면, link 태그를 사용하여 contact.html 파일에 import한 후 새로 고침을 하면 홈페이지로 돌아가는 링크가 초록색으로 표시됩니다. 그래서 이제 contact 페이지로 돌아가서 계속 진행해 봅시다. 여기 앵커 태그인 a가 있는데, 이것이 이 CSS 정의에서 선택기로 타깃팅한 대상입니다. a를 선택기로 하는 CSS 정의에는 여는 중괄호, CSS 속성들, 그리고 닫는 중괄호가 있습니다.

이것은 a 태그 선택기에 대한 CSS 정의입니다. 좀 더 명확하게 만들어봅시다. 주황색으로 바꿔보죠. 그게 더 나은 것 같습니다. 새로 고침을 하면 링크가 주황색으로 변한 것을 확인할 수 있습니다. 이 페이지에는 p 태그도 있고, 실제로 꽤 작습니다. 저희에게 연락하고 싶다면 이것을 찾기 어렵습니다.

그래서 이것을 크게 만들어봅시다. p 태그의 글ꔟ 크기를 30픽셀로 하고 새로 고침을 해보면 훨씬 커진 것을 볼 수 있습니다. 또한 좀 더 눈에 띄도록 하기 위해 배경을 흰색으로 하고 싶습니다. 그래서 배경을 흰색으로 설정한 후 새로 고침하면 이제 글의 배경이 흰색으로 바뀐 것을 볼 수 있습니다. 이것은 body의 배경과 다른 배경을 가지고 있습니다. body의 배경은 연한 회색이지만, p의 배경은 흰색입니다. 또한 왼쪽 테두리에 텍스트가 닿는 것을 별로 좋아하지 않아서, 패딩을 추가할 수 있습니다. HTML의 모든 요소는 기본적으로 박스이죠. 그들은 모두 투명한 상자에서 시작해서, 단순히 박스인 것을 알 수 없지만, 실제로는 모두 박스입니다.

화이트 배경을 추가하면 이 단락 콘텐츠를 담고 있는 상자가 보입니다. 그래서 이제 이 상자와 그 안에 포함된 텍스트가 닿아 있는 걸 좋아하지 않아요. 좌측에 패딩을 주고 싶어요, 예를 들면 20픽셀 정도. 보세요, 지금 닿지 않게 되었지만 실제로 주변에도 그 패딩을 원해요.

그래서 상단에 20픽셀 패딩을 줄 수 있어요. 하단에도 20픽셀 패딩을 주고 오른쪽에도 20픽셀 패딩을 줄 수 있어요. 아니면 상단 패딩을 30픽셀로 할 수 있어요. 실제로는 일단 저장하고 모두 20픽셀 주변 여백을 보세요. 상단 패딩을 더 크게 30픽셀로 하고 하단도 30픽셀로 하면 이젠 상단은 30픽셀, 하단은 30픽셀, 좌측은 20픽셀, 우측은 20픽셀이지만 이것을 볼 수 없어요. 왜냐하면 이 단락이 전체 너비를 차지하기 때문이에요.

그래서 너비를 '핏 콘텐츠'로 설정해보죠. 필요한 만큼만 공간을 차지하세요. 여기까지이렇시 이 콘텐츠는 여기까지입니다. 제일 잘 맞게 너비를 설정하세요. 너비를 100%로 설정해도 되고, 50%나 25%, 36%로 설정해도 되지만 실제로는 '핏 콘텐츠'로 설정하고 싶어요. 여기서 맞게 설정해주세요. 이해하셨죠? 전체 너비를 차지하죠. 이렇게 설정하겠습니다. 완벽해요. 모양은 가장 이쁘진 않지만 지금 우리의 목적에는 충분하죠.

나중에 이것을 더 멋지게 만들 거야. 여기까지입니다! 이제 여러 페이지가 있는 웹 사이트가 만들어졌어요. 홈페이지가 있고, index.html이 있으며 연락처 페이지인 contact.html이 있어요. 그리고 각 페이지마다 페이지마다 자신의 CSS 파일을 불러와서 각 페이지에 특정한 스타일링을 추가해요, 맞죠?

그래서 home.css가 index.html에 로드되어요. 왜냐하면 그것은 홈페이지이기 때문에 홈페이지 CSS를 로딩하는 거죠. 그리고 contact.css는 contact.html 파일에 로드되어요. 왜냐하면 우리는 그 스타일을 오직 contact.html에만 적용하고 싶기 때문에요. 이제 CSS는 더욱 더 강력해져서 우리가 모든 페이지에 적용할 일반 CSS 파일을 만들어서 로딩할 수도 있어요.

하지만 이건 나중 비디오에서 배울 거예요. 지금까지 이 비디오에서 많은 내용을 다뤘으니 여기까지 하겠어요. 그런데 여러분이 모든 페이지에 추가할 CSS 파일을 만들어 통일된 스타일을 가지고 웹 사이트 전체에 적용하고, 각 페이지마다 특정한 스타일링도 추가하고 싶다면, 우리가 contact 페이지에 한 것처럼 그 페이지에 특화된 두 번째 스타일시트를 로딩하면서 이렇게 할 수 있어요.

contact 페이지에는 contact.css를, 홈페이지 index.html에는 home.css를 로딩한 것처럼 말이죠. 그럼 여러분이 그것을 어떻게 하는지 찾아보시길 적극 권장합니다. 다시 한번 말하지만, 구글은 여러분의 친구에요. 구글링은 지금도 자주 사용하는 중요한 기술이에요. 알지 못하는 것이 있으면 그냥 검색해요. 모든 것을 알 수는 없으니까요.

언제나 구글링하는 법을 배우는 것이 중요하단다. 그러니 이제 그 방법을 찾아보러 가보셈. 그리고 찾았다면 아래 댓글에 공유해주시던지. 이 비디오를 즐겼다면 정말 좋겠고, 무언가 배웠다면 따듯한 마음으로 도와주시라고 한다. 이 채널을 성장시키는 데 큰 도움이 될 거야. 200명 구독자 돌파하는 데 도와주시면 더 많은 비디오를 만들어서 여러분이 선호하고 친구, 가족, 동료, 취업 시 채용 담당자에게 보여줄 만한 풍부한 웹사이트를 만들 수 있도록 도와드리겠다. 이 은혜를 베풀어주시면 계속해서 비디오를 만들어드릴게. 나는 링컨이고, 다시 한 번 감사하다. 다음에 또 만나보도록 하지.