01- 오전 팀원들과 회의 결과
팀프로젝트 코딩에 앞서 작업 방향 및 순서 작성
-
페이지 영역 나누기
-
공통 css 클래스명 정하기
- 같은 스타일이 적용되어 있는 폰트 크기 및 색상
-
reset.css : 초기화 css
basic.css : 공통 클래스 css
mainpage.css : 각각의 페이지 css (개인작업영역이 main Home ) -
각자 담당페이지 css 없이 Html문서만 작업
html layout 작성
html 작성 기준
- 모바일 / 태블릿 화면을 적용할때 용이한가?
- 알아보기 쉬운 직관적인 css 명을 사용하였는가?
- 팀원들과 약속한 css명을 사용하였는가?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav_wrap"> <!-- nav 영역에 공통 class -->
<div class="main_gnb nav_gnb"><!-- main_gnb : 페이지1에 대한 폰트 색상 gnb: 1,2,3,4,5, 폰트크기 -->
<div class="left_nav"></div>
<div class="right_nav"></div>
</div>
</nav>
</header>
<div class="container">
<!-- st-wrap : 각 섹션 위아래 마진값 및 패딩 class -->
<section class="resoft_news st-wrap">
<div class="NewsTit_wrap Title_wrap">
<h2 class="main_title">리소프트의 새로운 소식</h2>
<p class="sub_title">RESOFT NEWS</p>
</div>
<div class="NewsCard_wrap">
<a href="#"><!--ReSoft_News 페이지로 이동-->
<div class="N_card_Items">
<img src="" alt="" srcset="">
<p class="N_card_text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt architecto, numquam quia laudantium, facere, repudiandae vero tempore magnam ad vel qui eaque eum veritatis. Hic dolorum ducimus aperiam numquam velit!
</p>
<p class="N_card_date">2022.01.01</p>
</div>
</a>
</div>
</section>
<!-- resoft_New End -->
<section class="resoft_proj st-wrap">
<div class="ProjTit_wrap Title_wrap">
<h2 class="main_title">프로젝트</h2>
<p class="sub_title">RESOFT PROJECT</p>
<div class="TextImg_item">
<p class="ex_text">
첨단 기술 서비스 제공을 위해 사용자 입장에서
생각하고 항상 새로운 도전을 시도합니다.
</p>
<img src="" alt=""> <!-- js import img -->
</div>
</div>
<div class="proj_items_wrap">
<div class="Pro_card_wrap">
<div class="pro_cards">
<img src="" alt="" srcset="">
<div class="Pro_card_txt">
<p class="card_tit">에코스 ECOCE(ECO-Clean Earth)</p>
<p class="card_sub">
국내최초<br/>
탄소중립 실천인증 플랫폼
</p>
</div>
</div>
<div class="pro_cards">
<img src="" alt="" srcset="">
<div class="Pro_card_txt">
<p class="card_tit">모아두(moaDo)</p>
<p class="card_sub">
내 손안의 모바일 회원수첩
</p>
</div>
</div>
</div>
</div>
</section>
<!-- resoft_ Proj End -->
<section class="resoft_service st-wrap">
<div class="SerTit_wrap Title_wrap">
<h2 class="main_title">서비스</h2>
<p class="sub_title">SERVICE</p>
<div class="TextImg_item">
<p class="ex_text">
다양한 기술플랫폼을 제공하여 가능성을 열어주고
<br/>
의미있는 성공으로 인도하는 서비스를 제공합니다
</p>
<img src="" alt=""> <!-- js import img -->
</div>
</div>
<div class="ser_items_wrap">
<div class="ser_card_wrap">
<div class="card_top">
<div class="card_top_img">
<img src="" alt="" srcset="">
</div>
</div>
<div class="card_bottom">
</div>
</div>
</div>
</section>
<!-- resoft_Sevice End -->
<section class="resoft_reference st-wrap">
<div class="RefTit_wrap Title_wrap">
<h2 class="main_title">레퍼런스</h2>
<p class="sub_title">REFERENCE</p>
</div>
<div class="Ref_items_wrap">
<div class="Ref_items_inner">
</div>
</div>
</section>
<!-- resoft_Reference End -->
</div>
<footer></footer>
</html>
