.png)
CSS를 사용하여 웹 사이트의 내 정보 섹션을 구축하는 방법 (2 섹션)
소개
이 강좌에서는 CSS 재작성 demonstration website 의 두 번째 섹션을 사용합니다.맞춤형 사이즈를 원하신다면 언제든지 Sammy의 정보를 자신의 정보와 교환하십시오.여기에서 학습한 방법은 다른 CSS/HTML 웹 사이트 프로젝트에 적용될 수 있습니다.
사이트의 두 번째 부분은 두 개의 내용 상자를 포함하는데 하나는 텍스트를 포함하고 다른 하나는 대형 개인 자료 사진을 포함한다.
선결 조건
본 강좌를 배우려면 본 시리즈의 이전 강좌How To Set Up You CSS and HTML Practice Project의 설명에 따라 필요한 파일과 폴더가 설정되어 있는지 확인하십시오.
오른쪽 컨텐트 상자에 프로파일 이미지를 배치해야 합니다.프로필 이미지가 없으면 this image 를 사용하여 프레젠테이션을 수행할 수 있습니다.
참고 대형 프로필 이미지를 다운로드하려면 this link 에 액세스하고 이미지의
CTRL + Left Click (Mac에서) 또는 Right Click (Windows에서) 을 클릭한 다음 다른 이름으로 저장 을 선택하고 large-profile.jpeg 폴더로 저장합니다.계속하기 전에 선택한 이미지가
images 폴더에 저장되어 있는지 확인합니다.텍스트 및 이미지 컨텐트 상자에 대한 스타일 규칙 만들기
두 컨텐트 상자를 만들려면 먼저
images 파일에서 이 설정 상자의 스타일을 위한 열 클래스를 정의해야 합니다.그런 다음 텍스트와 이미지 내용을 HTML 문서에 추가합니다.large-profile.jpeg 파일로 돌아가 다음 규칙 세트를 복사하여 파일 하단에 붙여넣습니다.스타일css
. . .
/* Include padding and border in total box size*/
* {
box-sizing: border-box;
}
/* Create two equal columns that float next to each other */
.column-2 {
float: left;
width: 45%;
padding: 40px;
padding-left:70px;
padding-right: 70px;
height: 475px;
margin:30px;
margin-right:30px;
margin-bottom: 70px;
background-color: #FEDE00;
line-height:2;
}
첫 번째 규칙 집합은 "
styles.css"선택기를 사용하여 이 규칙 집합이 모든 HTML 요소 및 클래스에 적용되어야 함을 나타냅니다.이 규칙 세트는 styles.css 속성의 값을 * 로 선언하며, 채우기와 테두리 크기를 포함하여 CSS 요소의 총 계산 너비와 높이를 조정합니다.기본적으로 요소의 너비와 높이 크기는 요소의 내용만을 가리킨다.box-sizing 속성을 border-box 로 설정하면 요소의 총 폭과 높이를 쉽게 조정할 수 있고 페이지에 내용을 배치할 때 도움이 됩니다.CSS 상자 모델에 대한 자세한 내용은 저희 강좌How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS를 참조하십시오.두 번째 규칙 집합은'column-2'라는 class 를 정의했는데, 그 크기 규격은 페이지에 두 열을 나란히 표시할 수 있도록 한다.이 클래스는 다른 크기의 열과 구별하기 위해
box-sizing 로 명명되었습니다. 이 강좌 뒤에 클래스를 만들 것입니다.이 강좌에서는 이 규칙 세트의 일부 값과 속성에 대해 설명하지 않았습니다.
border-box 요소는 해당 컨테이너의 왼쪽(이 예에서는 뷰포트 자체)으로 부동하고 주위 내용이 오른쪽을 중심으로 이동할 수 있음을 나타냅니다.본 강좌에서 column-2 값을 사용하여 프레젠테이션 사이트를 다시 만들더라도 float:left; 속성 값을 float 또는 right 로 설정할 수 있습니다.none 요소의 너비를 용기 너비의 45%로 설정하는 것을 성명합니다. 이 예에서 용기는 뷰포트 자체입니다.요소가 있는 용기의 크기에 따라 크기를 조정하려면 픽셀 대신 백분율을 사용하여 크기 (예: 너비) 를 설정할 수 있습니다.그러나 동적 크기 조정은 까다로운 과정일 수 있습니다. 여러 가지 방법으로 응답 요소를 만들 수 있습니다. 이러한 방법은 CSS에 기반을 둔 후에 실현될 수 있습니다.left 요소의 배경색을 HTML 색상 코드'#FEDE00'으로 설정합니다. width: 45%;는 선 사이의 간격을 증가시킵니다."나에 대해" 내용 상자 추가
다음에 방금 만든
background-color: #FEDE00; 클래스를 사용하여'나에 대하여'내용 상자를 웹 페이지에 추가합니다.line-height:2; 파일을 저장하고 column-2 파일로 돌아갑니다.머리글 부분의 끝 styles.css 표시 후 끝 index.html 표시 전에 다음 코드를 추가합니다.. . .
<!--Section 2: About me-->
<div class="column-2">
<h1>About me</h1>
<p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www./community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
<p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>
</div>
. . .
현재 웹 페이지 왼쪽에 텍스트를 포함하는 노란색 상자가 있어야 합니다.
웹 페이지에는 이 시리즈의 이전 강좌 How To Build the Header Section of Your Website With CSS 에 추가된 제목 내용이 포함되어 있어야 합니다.
HTML 코드의 기능을 간략하게 살펴보겠습니다.
</div>은 HTML 컨텐트를 구성하는 데 도움을 주는 주석입니다.브라우저에는 표시되지 않으며 나중에 참조할 수 있도록 여기에 포함됩니다.</body> 는 <!--Section 2: About me--> 파일에 정의된 <div class="column-2" style="background-color:#FEDE00;"> 클래스의 스타일을 지정하고 HTML 내연 <div> 속성을 사용하여 배경색 column-2 을 지정하는 컨테이너를 만듭니다.styles.css 및 style 태그에는 나에 대한 텍스트 상자를 삽입할 텍스트가 포함되어 있습니다.본문 끝에 #FEDE00 용기를 닫았음을 주의하십시오.만약 네가 사이트를 개성화하려고 한다면, 너는 자신의 텍스트로 사미의 텍스트를 바꿀 수 있다.프로필 이미지 내용 상자 추가
다음은 대형 개요 파일 이미지를 포함하는 두 번째 내용 상자를 추가합니다.이미지 상자를 추가할 수 있는 여러 가지 방법이 있지만, 이 강좌에서는
<h1> 클래스로 지정된 다른 <p> 용기의 배경 이미지로 만드는 큰 윤곽 이미지를 추가합니다.<div> 파일로 돌아가 문서 하단에 다음 코드 세그먼트를 추가합니다.스타일css
. . .
/* Large profile image */
.large-profile {
background: url('../images/large-profile.jpeg');
background-size: cover;
background-position: center;
}
<div> 를 만들고 정의합니다. 이 코드를 사용하면 대형 개요 파일 이미지를 저장하는 상자의 스타일을 설정할 수 있습니다.이 규칙 세트에서 column-2 는 브라우저에서 지정된 파일 경로에서 찾은 이미지를 요소의 배경 이미지로 사용하도록 선언합니다.styles.css 이미지는 해당 컨테이너의 공간을 덮어쓰기에 적합하고, large-profile 이미지는 컨테이너에 가운데 배치됩니다.다음은
background: url('images/large-profile.jpeg'); 클래스와 background-size: cover 클래스를 동시에 분배하여 큰 윤곽 이미지로 사각형을 다시 만드는 background-position:center 용기를 추가합니다.<div> 파일을 저장하고 column-2 파일로 돌아갑니다.첫 번째 열의 끝 large-profile 태그 아래와 끝 styles.css 태그 위에 다음 코드 세그먼트를 추가합니다.. . .
<div class="column-2 large-profile">
</div>
index.html 클래스와 </div> 클래스에 설명된 규칙에 따라 스타일링된 </body> 용기를 만듭니다.두 파일을 저장하고 브라우저에서 다시 로드합니다
<div>.웹 페이지는 현재 웹 사이트의 텍스트 상자와 이미지 상자 스타일을 보여 주어야 합니다.웹 페이지에는 이전 강좌에서 작성한 제목 내용도 포함되어야 합니다.당신은 계속해서 column-2 및 profile-picture 클래스에서 설명한 값을 시험하여 서로 다른 설계 가능성을 탐색할 수 있습니다.결론
이제 CSS를 사용하여 텍스트와 이미지에 컨텐트 상자를 만들고 스타일을 설정했습니다.다음 강좌에서 웹 사이트의 세 번째 부분을 다시 만들 것입니다.이 과정에서 내용을 두 줄에 네 개의 상자로 배열하고 위조 클래스를 적용합니다. 사용자가 커서를 상자 위에 놓으면 이 클래스는 상자의 색을 바꿉니다.