Styling Our Content

스타일링 소개

지난 몇 주 동안 우리는 필요한 모든 정보를 웹페이지에 표시하는 방법에 대해 논의했습니다. 그러나 계속해서 코딩을 해오셨다면 아마도 페이지가 그다지 매력적으로 보이지 않는다는 것을 눈치채셨을 것입니다. 실제로는 꽤 나빠 보일 수도 있습니다…

지금까지 웹페이지에 스타일을 추가하지 않았습니다. 스타일은 HTML 요소가 페이지에서 어떻게 보이길 원하는지 알려주기 위해 브라우저에 제공하는 규칙입니다. 크기, 글꼴, 색상, 위치, 정렬 및 기타 여러 가지를 변경할 수 있습니다! 그런데 어떻게요?

첫 번째 스타일 추가

<p style="color: blue;">This text is blue now!</p>

로그인 후 복사

그렇습니다! 궁금하신 경우 해당 내용을 복사하여 문서에 붙여넣고 브라우저에서 열어보세요. 무엇을 보셨나요? 이제 텍스트가 파란색입니다! 좋아요!

그럼 여기서 무슨 일이 벌어지고 있는 걸까요? 우리는 텍스트 콘텐츠를 단락 요소로 묶고 해당 단락 요소에 스타일 속성을 부여했습니다. 오프닝

에서 style=을 확인하세요. 꼬리표. 속성 값에서 색상 스타일을 파란색 값("color: blue;")에 할당했습니다.

이건 멋지지만 텍스트를 페이지 중앙에 배치하려면 어떻게 해야 할까요?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

로그인 후 복사

우리가 변경해야 했던 것은 스타일 속성의 값뿐이었습니다! 강한! 그런데 해당 값 속성에서는 무슨 일이 일어나고 있나요? 우리는 이전에 해당 구문을 본 적이 없습니다! 그게 바로 CSS입니다! 그런데 잠깐, HTML을 작성한다면 왜 여기에 있는 걸까요?

그렇습니다! 그러나 HTML은 스타일 지정을 위해 설계되지 않았습니다. 이는 구조와 의미론을 위해 설계되었습니다(나중에 게시물에서 다루겠습니다). 페이지의 모양을 변경하려면 스타일시트를 수정해야 합니다. 기본적으로 브라우저는 "사용자 에이전트 스타일시트"를 사용하여 HTML의 정보를 해석하는 방법을 결정합니다. 지금까지 본 글꼴 크기와 색상은 이를 기반으로 한 것입니다! 스타일 속성에 CSS를 추가하면 정의한 스타일이 사용자 에이전트 스타일시트를 재정의하고 정의하지 않은 스타일은 해당 시트로 대체됩니다. CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 의미합니다.

멋지네요. 이제 페이지의 모양을 변경할 수 있으므로 가능성은 무한합니다. 하지만 더 많은 사용자 정의를 원한다고 상상해 보세요.

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

로그인 후 복사

와... 단 두 줄의 텍스트에 대한 코드가 너무 많아서... 무슨 일이 일어나고 있는지 빠르게 확인하기가 너무 어렵습니다! 나중에 이 정보를 편집하기 위해 다시 방문하면 다음과 같은 경우보다 시간이 훨씬 더 오래 걸리기 때문에 문제가 됩니다.

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

로그인 후 복사

이 문제를 어떻게 해결할 수 있나요?

CSS 소개

HTML이 복잡해지지 않도록 모든 스타일을 .css 파일로 옮깁니다! 소규모 프로젝트의 경우 일반적으로 이 style.css를 호출합니다. 단순히 코드를 정리하는 것 외에도 스타일을 새 파일로 옮기는 것도 관심사 분리라는 프로그래밍 개념을 충족시킵니다. 이는 코드를 기능적 구성 요소로 분할하기를 원한다는 의미입니다. 우리 코드는 모든 작업을 수행하려고 하기보다는 한 가지 작업을 잘 수행하는 작은 조각으로 나누어야 합니다!

이 예에서는 콘텐츠를 구조화하고 스타일을 지정하는 하나의 파일 대신 두 개의 파일이 있습니다. 하나는 구조화하고 다른 하나는 스타일을 지정하는 것입니다. 우려가 분리되었습니다! 그렇다면 이것은 어떤 모습일까요?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

로그인 후 복사

아, 훨씬 낫네요! 이제 HTML 파일이 이 모든 스타일로 인해 복잡해지지 않습니다! 위에 보이는 것은 두 가지 CSS 규칙 세트입니다. 규칙 세트는 선택기와 선택기 스타일 지정 방법에 대한 모든 정보가 포함된 두 개의 중괄호로 구성됩니다. 이 예에서 우리가 보는 두 개의 선택기는 h1과 p입니다. 이는 여기에 나열된 모든 스타일이 HTML

또는
요소입니다!

모든 유형의 요소에 대해 이 작업을 수행할 수 있습니다! 실제로 CSS 선택기를 사용하여 개체를 선택할 수 있는 방법은 여러 가지가 있지만 이에 대해서는 한 주 더 기다려 보겠습니다. 지금은 요소 유형을 입력하면 중괄호 안에 스타일을 추가할 수 있다는 점만 알아두세요!

일부 스타일을 정의했지만 브라우저가 어떤 파일에 스타일을 적용할지 어떻게 알 수 있나요?

링크 요소

첫 번째 우리가 배울 요소는 요소. 여기에는 몇 가지 사용 사례가 있지만 우리의 목적에 맞게 style.css를 index.html에 연결하는 데 사용하겠습니다. 즉, 이 요소는 브라우저에 페이지에 사용할 스타일시트를 알려줍니다. 실제로는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

로그인 후 복사

그리고 그게 다입니다! style.css는 HTML 문서에 연결되어 있으며 스타일이 적용됩니다.

이 링크 요소를 분석해 보겠습니다. 첫째, 자체적으로 닫히는 요소이므로 닫는 태그가 필요하지 않으며 내부에 어떤 콘텐츠도 가져오지 않습니다. 이 요소에는 href와 rel이라는 두 가지 필수 속성이 있습니다. 요소는 외부 리소스를 HTML 문서에 연결합니다. 따라서 우리는 브라우저에게 1) 해당 리소스가 어디에 있는지, 2) 해당 리소스가 어떤 용도로 사용될 것인지 알려주어야 합니다. "하이퍼텍스트 참조"를 의미하는 href는 위치를 결정하고, 관계 또는 관계는 용도를 결정합니다!

href 속성을 사용하면 제공하는 경로가 절대 경로이거나 상대 경로일 수 있다는 점에 유의하는 것이 중요합니다. 즉, 루트 디렉터리에서 파일 경로 위치를 제공할 수 있습니다(예: /Users/username/Documents/project/style.css(절대)). 또는 위에서 설명한 대로 작업 중인 파일의 위치를 기준으로 이를 수행할 수 있습니다. 파일 이름 앞의 ./는 브라우저가 style.css에 대한 HTML 파일과 동일한 폴더(또는 디렉터리)에서 검색되어야 함을 나타냅니다. 여기에 URL을 추가할 수도 있습니다. 많은 콘텐츠 제공 네트워크에서는 미리 만들어진 스타일시트를 사용할 수 있으며, 이 스타일시트는 <링크> 요소도 있어요!

도전

자, 오늘은 많은 내용을 다루었습니다. 이제 실천에 옮길 차례입니다. 지난 주 챌린지에서 만든 내 소개 페이지를 가져와서 <링크> style.css라는 새 파일에 추가하세요. (HTML 파일과 같은 폴더에 넣어주세요!)

그런 다음 각 요소에 대한 스타일을 만듭니다. 내 소개 페이지가 더욱 보기 좋게 보일 때까지 할당할 수 있는 다양한 스타일을 시험해보세요! (참고: 및 요소를 타겟팅할 수도 있습니다!)

적용할 수 있는 스타일의 전체 목록을 보려면 Mozilla 개발자 네트워크를 확인하세요. HTML, CSS 및 JS와 같은 웹 개발 언어에 대한 완전한 문서를 호스팅합니다! 다음은 해당 사이트에 대한 링크입니다. 사이드바의 "참조" 아래에 있는 속성 목록을 사용하여 가능한 항목을 확인하세요!

다음주에 만나요!

위 내용은 콘텐츠 스타일링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!