저는 뉴스기사 페이지를 html과 css 파일로 나누어서 제작하였습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뉴스 기사</title>
<link rel="stylesheet" href="./css/news_style.css">
</head>
<body>
<header>
<h2>뉴스 기사</h2>
</header>
<main>
<h1>금감원, 감독업무에 ‘생성형 AI’ 사용…네이버와 MOU</h1>
<em>입력 2024.04.03 (10:29)</em>
<br>
<img src="images/news.jpg" alt="뉴스">
<p>
금융감독원이 생성형 인공지능(AI)을 금융감독 업무에 적용하기로 했습니다.<br>
금감원은 오늘(3일) 네이버와 이러한 내용을 담은 ‘디지털 금융 협력을 위한 업무협약(MOU)’을 체결했습니다.<br>
이에 따라 네이버의 생성형 AI ‘하이퍼클로바X’를 비롯한 최신 디지털 기술을 금융감독 업무에 적용할 계획입니다.<br>
또 금융권에서 인공지능(AI) 기술을 활용하기 위한 연구 협력도 강화하기로 했습니다.<br>
이복현 금감원장은 “이번 협약으로 네이버의 정보기술(IT) 기술력을 활용해 금감원 감독·검사 및 금융소비자 보호 역량을 강화할 것으로 기대한다”고 밝혔습니다.<br>
최수연 네이버 대표는 “금감원 업무를 혁신하고 디지털 시스템을 고도화하기 위해 맞춤형 AI 솔루션을 구축할 수 있도록 지원하겠다”고 말했습니다.<br>
[사진 출처 : 연합뉴스 / 네이버 제공]
</p>
</main>
<nav>
<ul>
<li><a href="resume.html">자소서</a></li>
<li><a href="favorite.html">즐겨찾기</a></li>
</ul>
</nav>
</body>
</html>
css
body {
font-family: Arial, sans-serif;
line-height: 2.6;
margin: 0;
padding: 0;
}
h1 {
font-size: 30px;
line-height: 42px;
font-weight: 700;
}
em {
font-size: 14px;
font-weight: 500;
color: #7c7c7c;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 20px;
}
p {
text-align: justify;
margin: 20px 0;
margin-bottom: 20px;
color: #484848
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: center;
}
ul li {
display: inline;
margin-right: 10px;
}
header {
background-color: #f5f5f5;
padding: 10px 20px;
text-align: center;
}
header h2 {
font-size: 24px;
font-weight: bold;
margin: 0;
}
main {
max-width: 800px;
margin: 0 auto;
}
nav {
background-color: #f5f5f5;
padding: 10px 20px;
text-align: center;
}
결과:
'웹 개발' 카테고리의 다른 글
| 11.웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 3 (1) | 2024.04.09 |
|---|---|
| 10. CSS 배경과 박스 모델 (0) | 2024.04.09 |
| 9. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 2 (0) | 2024.04.08 |
| 8. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 1 (0) | 2024.04.08 |
| 7. CSS: 웹 프로그래밍의 필수 요소 (0) | 2024.04.08 |
