CSS 스타일시트 사용
이것을 변경하십시오:
<link rel="stylesheet" href="">
이에:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
스타일시트를 사용하려면 스타일을 지정하려는 HTML 요소에 클래스를 추가해야 합니다.
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
HTML / CSS 스켈레톤
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
"Try it Yourself" 버튼을 클릭하여 작동 방식을 확인하십시오!
컨테이너의 배경색을 청록색에서 검정색으로 변경해 보십시오.
해냈어?
축하합니다!
스타일 시트 사용의 기본 사항을 배웠습니다.
계속 읽으십시오!
대응하는 방법
HTML 코드
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
카드를 만드는 방법
정말 발전된 것을 위한 준비가 되셨습니까?
HTML로 된 명함은 어떻습니까?
이미지와 텍스트를 모두 포함합니다.
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>