Programming/HTML&CSS
HTML/CSS 첫걸음
Pendine
2024. 11. 26. 21:53
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div class="container">
<header>
<div class="bar">
<div class="logo">
<a href="#" > 로고 </a>
</div>
<div class="top_menu_container">
<ul class="top_menu">
<li class="top_item"><a href="#">홈</a></li>
<li class="top_item"><a href="#">뉴스</a></li>
<li class="top_item"><a href="#">연락처</a></li>
</ul>
</div>
</div>
</header>
<div class="maincontents">
<ul class="newsList">
<li>
<article class="news contents_backgound">
<ul>
<li><h1>뉴스 제목1</h1></li>
<li><p>뉴스 요약</p></li>
</ul>
</article>
</li>
<li>
<article class="news contents_backgound">
<ul>
<li><h1>뉴스 제목2</h1></li>
<li><p>뉴스 요약</p></li>
</ul>
</article>
</li>
<li>
<article class="news contents_backgound">
<ul>
<li><h1>뉴스 제목3</h1></li>
<li><p>뉴스 요약</p></li>
</ul>
</article>
</li>
</ul>
<aside class="requestNewsLetter contents_backgound">
<form class="newletterRequsetForm" action="#">
<h1>뉴스레터</h1>
<label for="email">이메일</label>
<input type="email">
<button type="submit">구독하기</button>
</form>
</aside>
</div>
<footer>
<div class="bar">
<div class="copyright">
<p>© 2024 뉴스 웹사이트. All rights reserved.</p>
</div>
<div class="footer_menu">
<ul class="footer_menu_list">
<li class="footer_menu_list_item"><a href="#">개인정보처리방침</a></li>
<li class="footer_menu_list_item"><a href="#">이용약관</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>a{
text-decoration: none;
color : white;
}
.container{
margin : 0px;
padding: 0px;
width:100%;
left:0px;
top:0px;
/* overflow: hidden; */
}
.bar{
width: 100%;
height : 50px;
background-color: black;
opacity: 85%;
color:white;
padding : 5px;
margin : 0px;
top:0px;
left:0px;
display: flex;
position: relative;
}
.logo{
display : block;
position: absolute;
margin: 15px 15px;
left : 10px;
}
.top_menu_container{
/* position: absolute; */
/* right : 10px; */
}
.top_menu{
display:flex;
list-style-type: none;
position: absolute;
right : 10px;
}
.top_item{
width: 45px;
}
.maincontents{
display: flex;
}
.newsList{
display:block;
width: 70%;
height: auto;
position : relative;
padding: 0px 5px;
margin : 20px 0px;
li{
list-style-type: none;
}
}
.contents_backgound{
background-color: rgba(172, 172, 172, 0.432);
}
.news{
padding: 15px 10px;
margin : 20px 10px;
}
.requestNewsLetter{
display:block;
width: 25%;
position : relative;
left : 20px;
box-sizing: border-box;
margin : 40px 0px;
padding : 0px 10px;
}
.bottom{
display:block;
padding: 1px;
margin:0px;
}
.copyright{
position: relative;
text-align: center;
font-size: 12px;
margin : 0px auto;
padding: 0px;
}
.footer_menu{
left : 10px;
}
.footer_menu_list{
display: flex;
position: absolute;
left :10px;
}
.footer_menu_list_item{
width:160px;
list-style-type: none;
display:block;
}웹백엔드에서 실무에서 백엔드만 할 줄 안다는 것과 여러 회사에서 원하는 인재상이 다른 것을 느끼고 프론트엔드 국비수업 듣는중인데
어중간하게만 알고있던 자바스크립트를 더 공부하는걸 그만두고
HTML과 CSS를 하니까 복잡해진다.
시작한지 얼마 돼지도 않았는데 9 to 6 로 시간 쏟아붇고 복습을 해야하는데 과제 조금 복잡해졌다고 이게 이해가 안돼네
나름 구조화해서 상단,하단 메뉴바 만들고 여기서 상하단의 좌우측에 보여줘야하는 구성을 조금 바꾸는것도, 정렬하는것도 생각하면 조잡해짐.
html에서 메뉴 종류를 전부 div 태그로 처리해버리면 될 줄 알았는데,
다른분들이 하신 과제를 살펴보기도하고, 네이버의 메인화면을 살펴보면서 따라해봤음.
소켓프로그래밍만하다가 웹 백엔드해보고, 웹백엔드하다 답답해서 프론트엔드 국비 직업훈련 수업듣고, 이거랑 합쳐서
미니PC의 도커 + 나스의 깃랩 이랑 연동해서 CI/CD 구축하고, 미니pc의 도커에서 DB랑 프로그램연동하고, APM도 달아서 해보고싶은데
대충 주저리주저리 작성하고보니 너무 혼자서 다하려고 하는건가 싶다
728x90