20210701 CSS를 이용한 네이버 메인 페이지 실습

hae.log·2021년 7월 1일

행동과 관련된 가상선택자

link태그

방문한 적이 없는 링크에 대해 디자인을 적용하는 태그

a: link { color: red; }

active태그

마우스를 클릭했을때 색변경 코드

a:active{ color: blue; }

hover

마우스를 올릴때 색상변경 코드

a:hover { color: pink; }

focus

focus되어있는 상태
input:focus { border: solid 10px red; }

일정한 규칙을 바탕으로 한 디자인

li태그 중 제일 먼저 나오는 자식에게 컬러적용하겠다! li:first-child{ color:red; } 마지막 li:last-child{ color:gray; } 두번째에 적용하겠다!() 괄호안에 해당하는 숫자 입력 li:nth-child(2){ color: gray;} 홀수번째 자식을 기준으로 적용하겠다! li:nth-child(2n+1){ color: gray; } 짝수는 2n으로 하기## ### before after 가상선택자 content 를 이용해서 기호넣기

li:before{ content: "|";}
기호뿐만아니라 글자도 넣을수 있지만
정보성을 띄는건 아님
li:after{ content: "---"; }

프로젝터 폴더 설정하는 법

폴더는 해당 프로젝트 폴더를 만든후
css(디자인)
js(자바스크립트)
img(이미지)

각 해당 항목 폴더들을 만들어야 유지보수하기 쉽다

  html공간에서 
  
  <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
           ##폴더설정하는 방법##
	<link rel="stylesheet" type="text/css" href="css/style.css">
             css폴더안에style.css를 찾아와! 
</head>
<body>

	<h1>Hello World</h1>

</body>
</html>

css 공간에서 이미지 폴더에서 이미지 불러오는 방법
html에서
<div></div>
넣어주고 css에서
div {
	width: 300px;
	height: 300px;
	background-image: url(../img/icon.png); }

네이버 메인페이지 리빙 부분 실습

html부분
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">
	
</head>
<body>	
	<ul class="living-lists">
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
					<p class="paragraph">Nice to meet youNice to meet you 
					Nice to meet you Nice to meet youNice to meet you 
					Nice to meet youNice to meet youNice to meet you </p>

					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>

				</div>

			</a>
		</li>
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">아이있는 집 주방 1년간의 소소한 변화</h3>
					<p class="paragraph">Nice to meet youNice to meet you 
					Nice to meet you Nice to meet youNice to meet you 
					Nice to meet youNice to meet youNice to meet you</p>

					<div class="date-wrap">
						<span class="source">미주</span>
						<span class="date">1개월 전</span>
					</div>

				</div>

			</a>
		</li>
	</ul>



</body>
</html>

css 부분
.living-lists 
	{ list-style: none;}

.living-lists .living-item a 
	{color: #000000;
	text-decoration: none; }

.living-lists .living-item .living-info .type 
	{color: #c08d31;
	font-weight: 700;
	font-size: 12px;}

.living-lists .living-item .living-info .title 
	{font-size: 13px;
	color: #000000;}

.living-lists .living-item .living-info .paragraph 
	{font-size: 13px;
	color: #404040;
	line-height: 20px;}

.living-lists .living-item .living-info .date-wrap .source, .living-lists .living-item .living-info .date 
	{font-size: 12px;
	color: #505050;}

.living-lists .living-item .living-info .date-wrap .date {color: gray;}

.living-lists .living-item .living-info .date-wrap .date:before 
	{content:  '-';}

.living-lists .living-item:hover 
	{background-color: pink;}

.living-lists .living-item a:hover .living-info .title 
	{text-decoration: underline;}