HTML을 사용하여 홈 본문을 만드는 방법

HTML을 사용하여 홈 본문을 만드는 방법

2022-05-31 last update

10 minutes reading HTML Spin Up
이 강좌에서는 HTML<div> 요소와 HTMLstyle 속성을 사용하여 본문이나 중간 부분을 다시 만듭니다.

우리는 사이트의 중간 부분에 큰 측면 이미지와 작은 단락이 나란히 표시되는 텍스트를 포함하고 있음을 보여 준다.우리는 <div> 용기를 사용하여 이런 구조를 실현할 수 있다. 이 용기들은 우리가 본 시리즈demonstration website에서 배운 것이다.CSS 등 프런트엔드 기술을 계속 배우면 본 강좌에서 사용할 수 있는 방법을 토대로 웹 페이지의 내용을 배정할 수 있습니다.

어떻게 대형 개인 자료 이미지를 웹 페이지에 추가합니까


우선, 우리는 프레젠테이션 사이트에 표시된 대형 프로필 이미지를 추가할 것이다.시작하기 전에 사용할 대형 프로필 이미지나 다른 이미지를 선택했는지 확인하십시오.우리는 400 x 600 픽셀로 그림을 표시할 것이므로 그림 크기가 이 크기와 일치하는지 확인하십시오.이미지가 없으면 previous tutorial 가능합니다.이미지를 가져온 후 이미지 폴더에 저장합니다.(HTML을 사용하여 웹 페이지에 이미지를 추가하는 방법에 대한 복습은 본 시리즈의 강좌 앞의 강좌download the image from our demo site를 방문하십시오.
다음 "index.html"파일의 마지막 끝 표시</div> 이후와 끝 표시<body> 전에 다음 코드 세그먼트를 복사합니다.
...
<!--Second section-->
<img src="images/large-profile.jpg" style="height:600px; margin:100px; float: left;" alt="A pretend invisible person wearing a hat, glasses, and coat.">
...
잠시 멈추고 이 코드 세션의 모든 부분을 살펴보겠습니다.
  • <!--Second section--> 는 브라우저에서 읽을 수 없는 주석으로 사용자가 쉽게 읽을 수 있도록 조직html 파일을 돕는 데 사용됩니다
  • <img> 브라우저에 그림을 웹 페이지에 삽입하고 있음을 표시합니다.
  • src="images/large-profile.jpg" 브라우저에서 표시되는 이미지를 어디에서 찾을 수 있는지 알려 줍니다.
  • style속성은 height,marginfloat속성을 정의할 수 있습니다.margin 속성을 사용하면 HTML 요소 주위의 공백 크기를 지정할 수 있습니다.float 속성을 사용하면 이미지를 모니터의 좌우 측면에 "부동"하고 텍스트를 이동할 수 있습니다.
  • alt 속성을 사용하면 화면 판독기를 사용하는 방문자의 사이트 액세스 능력을 향상시키기 위해 이미지에 HTML Images 속성을 추가할 수 있습니다.이 코드 세그먼트의 선택 가능한 텍스트를 이미지와 일치하는 설명으로 바꾸는 것을 잊지 마십시오.
  • "index.html"파일을 저장하고 브라우저에 다시 불러옵니다.현재 웹 페이지 상단 아래의 섹션은 다음과 같습니다.

    오류가 있으면 index.html 파일의 올바른 영역에 모든 HTML 코드가 추가되었는지 확인하고 이미지가 src 속성을 사용하여 지정된 파일 경로에 있는지 확인합니다.

    어떻게 웹 페이지에'나에 대하여'부분을 추가합니까


    다음은 그림 오른쪽에 텍스트를 추가합니다.이 예제의 가상 텍스트를 사용자가 선택한 텍스트로 대체할 수 있습니다.
    컨테이너를 만들고 텍스트 내용을 삽입하여 텍스트 섹션을 만듭니다.
    "index.html"파일에서 상기 절차에 추가된 이미지 후와 닫기<div> 표시를 하기 전에 다음 코드 세그먼트를 추가합니다.
    ...
    <div style="height:600px; margin:100px;">
      <h1>Hello </h1>
      <p style="line-height: 2.0; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes 
      nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum mattis. Turpis in eu mi 
      bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet 
      bibendum enim facilisis gravida. Cursus turpis sa tincidunt dui ut ornare lectus. Enim nec dui nunc 
      mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Tussa 
      ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis 
      dis. Enim tortor at auctor urna nunc id cursus metus.</p>
      <p style="line-height: 2.0; font-size:20px;">Email me at <a 
      href="mailto:[email protected]">[email protected] </a></p>
    </div>
    
    잠시 멈추고 이 코드 세션의 모든 부분을 살펴보겠습니다.
  • </body> 요소 생성alternative text, 그 <div style="height:600px; margin:100px;"> 600 픽셀, <div> 100 픽셀.
  • height 요소는 우리의 내용에 텍스트 제목을 추가합니다.
  • 두 개margin 태그가 두 단락을 만들었고 행 높이는 2.0이고 글꼴은 20픽셀입니다.
  • The“사미 <h1> container.com 전자 메일 주소에 전자 메일 링크를 추가합니다.
  • 닫기<p style="line-height: 2.0; font-size:20px;"> 라벨 닫기</div> 컨테이너.
  • "index.html"파일을 저장하고 브라우저에 다시 불러옵니다.현재 웹 페이지 상단 아래의 섹션은 다음과 같습니다.

    이미지와 텍스트는 현재 프레젠테이션 사이트의 이미지와 텍스트로 표시되어야 합니다.코드 세그먼트의 스타일 속성을 조정하여 내용의 높이, 여백, 글꼴 크기 또는 다른 스타일 속성을 변경할 수 있습니다.
    브라우저 뷰포트가 크게 축소되면 텍스트가 페이지의 다른 요소로 유입됩니다.일련의 장치에 응답하는 레이아웃을 만들려면 CSS(튜토리얼 시리즈가 출시될 예정)와 @SampleEmail 같은 다른 프런트엔드 기술을 배워야 합니다.
    이제 <div> 용기, <div> 속성과 스타일 속성을 사용하여 이미지와 텍스트를 나란히 배열하는 방법을 알아야 합니다.이 시리즈의 다음이자 마지막 강좌에서 우리는 HTMLstyle 요소를 사용하여 사이트 페이지를 만드는 방법을 배울 것이다.