CSS 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<!-- <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css"> -->
<!-- =>외부 css를 사용할때 link를 사용함 -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="wrap">

<header>

<div class="header_container">

<div class="header_left">

<div class="logo">
<a href="#">
<img src="img/logo.svg" alt="">
</a>
</div>

<div class="menu_btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>

</div>

<div class="roundsquare_text">
삼양라운드스퀘어
</div>

</div>

</header>
<!-- header end -->

<section class="section_1"></section>
<!-- section_1 end -->

<section class="section_2">

<div class="title_wrap title_wrap_2">
<h3>Inside Roundsquare</h3>
<p>라운드스퀘어 자세히 보기</p>
</div>

<div class="con_wrap_2">

<div class="con_2">
<a href="#">
<div class="img_wrap_2">
<img src="https://www.roundsquare.ai/_next/image?url=https%3A%2F%2Fmeat-prod-bucket.s3.ap-northeast-2.amazonaws.com%2F_media%2Fimage02.webp&w=828&q=75" alt="">
</div>

<h3>New CI</h3>

<div class="hover_con_2">
<div class="orange_cirlce">
역사와 미래가 담긴 새 얼굴
</div>
</div>
</a>
</div>

<div class="con_2">
<a href="#">
<div class="img_wrap_2">
<img src="https://www.roundsquare.ai/_next/image?url=https%3A%2F%2Fmeat-prod-bucket.s3.ap-northeast-2.amazonaws.com%2F_media%2Fimage02.webp&w=828&q=75" alt="">
</div>

<h3>New CI</h3>

<div class="hover_con_2">
<div class="orange_cirlce">
역사와 미래가 담긴 새 얼굴
</div>
</div>
</a>
</div>

<div class="con_2">
<a href="#">
<div class="img_wrap_2">
<img src="https://www.roundsquare.ai/_next/image?url=https%3A%2F%2Fmeat-prod-bucket.s3.ap-northeast-2.amazonaws.com%2F_media%2Fimage02.webp&w=828&q=75" alt="">
</div>

<h3>New CI</h3>

<div class="hover_con_2">
<div class="orange_cirlce">
역사와 미래가 담긴 새 얼굴
</div>
</div>
</a>
</div>

</div>

</section>
<!-- section_2 end -->

<section class="section_3">

<div class="container_3">
<div class="title_wrap title_wrap_3">
<h3>Inside Roundsquare</h3>
<p>라운드스퀘어 자세히 보기</p>
</div>

<div class="con_3">

<div class="img_wrap_3">
<img src="https://meat-prod-bucket.s3.ap-northeast-2.amazonaws.com/_media/syramen_left_02_v0A6tQE.webp" alt="">
</div>

<h3>불닭볶음면</h3>
<p>
상상 그 이상의, 세상에 없던 매운맛 라면
</p>

<div class="read_more_btn">
<a href="#">
<span>Read More</span>
<div class="line_circle"></div>
</a>
</div>

</div>

</div>

<div class="container_3"></div>

</section>
<!-- section_3 end -->

<section class="section_4">

<div class="container_4">
<div class="title_wrap title_wrap_4">
<h3>Inside Roundsquare</h3>
<p>라운드스퀘어 자세히 보기</p>
</div>
</div>

<div class="container_4">

<div class="con_wrap_4">

<div class="con_4">
<a href="#">
<div class="progress_wrap">
<div class="bar"></div>
</div>

<h4>News</h4>

<div class="con_title_4">
<h3>
김정수 삼양식품 부회장, '대한민국 경영자대...
</h3>

<div class="view_more_btn">
<span>전체보기</span>
<div class="arrow">&rarr;</div>
</div>
</div>

<p>
K-푸드 세계화 및 사회적 책임 경영 제도화 등 공로 인정
(왼쪽)양희동 한국경영학회 회장과 김정수 삼양식품 부회장
</p>
</a>
</div>

<div class="con_4">
<a href="#">
<div class="progress_wrap">
<div class="bar"></div>
</div>

<h4>News</h4>

<div class="con_title_4">
<h3>
김정수 삼양식품 부회장, '대한민국 경영자대...
</h3>

<div class="view_more_btn">
<span>전체보기</span>
<div class="arrow">&rarr;</div>
</div>
</div>

<p>
K-푸드 세계화 및 사회적 책임 경영 제도화 등 공로 인정
(왼쪽)양희동 한국경영학회 회장과 김정수 삼양식품 부회장
</p>
</a>
</div>

</div>

<div class="con_wrap_4">

<div class="con_4">
<a href="#">
<div class="progress_wrap">
<div class="bar"></div>
</div>

<h4>News</h4>

<div class="con_title_4">
<h3>
김정수 삼양식품 부회장, '대한민국 경영자대...
</h3>

<div class="view_more_btn">
<span>전체보기</span>
<div class="arrow">&rarr;</div>
</div>
</div>
</a>
</div>

<div class="con_4">
<a href="#">
<div class="progress_wrap">
<div class="bar"></div>
</div>

<h4>News</h4>

<div class="con_title_4">
<h3>
김정수 삼양식품 부회장, '대한민국 경영자대...
</h3>

<div class="view_more_btn">
<span>전체보기</span>
<div class="arrow">&rarr;</div>
</div>
</div>
</a>
</div>

</div>

</div>

</section>
<!-- section_4 end-->


<section class="section_5">

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>

<div class="con_5">
<a href="#">
<div class="orange_wrap">
<div class="orange_item">
<h3>Group</h3>
<p>
식품과 기술의 무한한 융합으로
더 건강하고 창의적인 미래를 만드는
삼양라운드스퀘어
</p>
</div>
</div>
</a>
</div>


</section>

</div>

</body>
</html>





<!--
1.내부 css
=>html 내부에 스타일을 작성
=>장점: html 파일 하나만 관리
=>단점: 코드가 길어짐, 관리하기 어렵다

2.외부 css
=>css 파일을 따로 제작하여 스타일 작성
=>장점: html 파일이 작아짐, 관리하기 편함
=>단점: 파일을 여러게 관리해야됨, 경로를 잘 못 적으면 문제 발생 -->