div, ul , li의 속성(css)을 꾸며줄 수 있는 재료들 and 홈페이지 따라만들기

카테고리 없음 2021. 12. 23. 14:22

letter-spacing

단어 사이의 간격을 조절한다.

’ * ’

실무할때는 css에 직접 엘리먼트를 적어서 만들어야하기 때문에 '*'을 잘 안쓰는 편이다.

hover

a에 마우스를 올려놨을때 활성화
:hover

div 와 span

div 태그와의 차이점은 display 속성이 block이 아닌, inline 이라는 점이다.
div는 줄 바꿈이 되지만,
span은 줄 바꿈이 되지 않는다.
(가로로 박스를 나열할때 span)
(세로로 박스를 나열할때 div)

width, box-sizing, border-radius, text-align, margin-top, border 응용

width와 box-sizing 응용

박스를 정렬할때 width의 크기를 줄여도 되지만
box-sizing으로 쉽게 조절할 수 있다.

border-radius

박스를 둥글게 만드는것

text-align

텍스트의 위치를 조절하는것
center에 위치시켰지만 조금 빗겨나갔을때,
padding : top 으로 조절가능하다.
line-height : 로도 조절 가능

margin-top

자식들을 모두 relative로 처리했을 때, 자식들의 위치는 서로가 영향을 받게 된다.
그래서 top을 사용했을 때, 정확한 위치를 가늠하기 어렵고, top을 사용했을 때의 남은 공백은 지워지지 않고 그대로 남아있게 된다.
그래서 정확한 위치에 배치하고, 남은 공백도 없앨 수 있는 속성이 margin-top이다.
이 속성을 사용하면 top처럼 위아래 위치를 지정하되 영역도 줄어드는, 혹은 늘어나는 역할을 함

border 응용

border : 1 px solid #000;

굵기를 1px, 선, 검정으로 만들어준다는 뜻이다.

border가 겹치게 보일때 해결법

부모 엘리먼트에 좌,상단에 border를 주고
자식 엘리먼트에 우,하단을 줘서
만든는 방법이 있다.

위 텍스트와 아래 텍스트의 거리를 조절해주는 태그

background-image

css에 직접 적을 수 있다.

반복을 제거하고 싶으면
no-repeat을 url 끝에 적는다

background:url('v1.png') bottom  20px  right  40px  no-repeat;

id , class

id는 하나밖에 없을 레이아웃을 지정할때 쓴다.
class는 반복적인 내용을 함축적으로 사용할때 사용한다.

경일게임아카데미 홈페이지 따라하기 3일차

<!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>
<link  href=".\index.css"  type="text/css"  rel="stylesheet">
</head>
<body>
	<div  id="wrap">
		<div  id="header">
			<h1>
				<a  href="#"><img  src=".\logo_new_2018.png"></a>
				</h1>
				<ul>
					<li><a  href="#">학교소개</a></li>
					<li><a  href="#">교육과정</a></li>
					<li><a  href="#">취업정보</a></li>
					<li><a  href="#">커뮤니티</a></li>
					<li><a  href="#">상담신청</a></li>
				</ul>
				</div>
				<div  id="visual">
					<img  src="1636447014_55997_1.png">
				<div  id="visual_menu">
				<ul>
					<li><a  class="on"  href="#">menu</a></li>
					<li><a  href="#">menu</a></li>
					<li><a  href="#">menu</a></li>
					<li><a  href="#">menu</a></li>
					<li><a  href="#">menu</a></li>
				</ul>
				</div>
				</div>
				<div  id="content">
				<div  id="left">
				<ul>
				<li  class="con1">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				<li  class="con2">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				<li  class="con3">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				<li  class="con4">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				<li  class="con5">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				<li  class="con6">
				<h2>
				<span>Game Architecture</span>
				게임 기획
				</h2>
				<p>
				게임기획자를 위한 정석 Class
				</p>
				<a  href="#">바로가기</a>
				</li>
				</ul>
				</div>
			<div  id="right">
			b
			</div>
		</div>
	</div>
</body>
</html>

css

*{
margin: 0;
padding: 0;
}

ul,li{
list-style: none;
}

a{
text-decoration: none;
}

#wrap{
width: 100%;
}

#header{
width: 1200px;
height: 100px;
margin: 0  auto;
}

#header > h1{
float: left;
margin: 20px  0  0  0 ;
}

#header > ul{
float: right;
}

#header > ul > li{
float: left;
}

#header > ul> li> a{
display: inline-block;
width: 180px;
font-size: 18px;
text-align: center;
color: #004385;
padding: 40px  0;
font-weight: bold;
}

#visual{
width: 100%;
height: 200px;
}

#visual > img{
display: block;
margin: 0  auto;
width: 1200px;
}

#visual > #visual_menu{
position: relative;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.5);
bottom: 50px;
z-index: 2;
}

#visual > #visual_menu > ul{
width: 400px;
height: 50px;
margin: 0  auto;
}

#visual> #visual_menu >ul >li{
float: left;
}

#visual> #visual_menu >ul >li > a{
color: #FFF;
opacity: 0.7;
display: inline-block;
padding:14px  15px;
}

#visual> #visual_menu > ul> li> a.on{
opacity: 1;
background: #000;
}

/* a에서 hover라는 기능*/

#visual> #visual_menu > ul> li> a:hover{
opacity: 0.9;
background: rgba(0, 0, 0, 0.8);
}

/*content*/

#content{
width: 1200px;
background: #eee;
margin: 0  auto;
}

#content>#left{
float: left;
width: 600px;
border-top:1px  solid  #eee;
border-left:1px  solid  #eee;
}

#content > #left > ul > li{
float: left;
width: 300px;
padding: 20px;
box-sizing: border-box;
border-right: 1px  solid  #eee;
border-bottom: 1px  solid  #eee;
}

#content > #left > ul > li.con1{
background:url('v1.png') bottom  20px  right  40px  no-repeat;
}

#content > #left > ul > li.con2{
background:url('v2.png') bottom  20px  right  40px  no-repeat;
}

#content > #left > ul > li.con3{
background:url('v3.png') bottom  20px  right  40px  no-repeat;
}

#content > #left > ul > li.con4{
background:url('v4.png') bottom  20px  right  40px  no-repeat;
}

#content > #left > ul> li > h2{
font-size: 23px;
color: #2d2d2d;
}

#content > #left > ul> li > h2 > span{
display:block;
font-size: 12px;
color: #4689e1;
}

#content > #left > ul> li > p {
width: 50%;
margin-top: 30px;
font-size: 10px;
}

#content > #left > ul> li > a{
display: inline-block;
width: 100px;
height: 30px;
background: #81b4f2;
border-radius: 18px;
font-size: 14px;
color: white;
text-align:center;
line-height: 30px;
margin-top: 22px ;
}

#content>#right{
float: right;
width: 600px;
background:blue;
}

결과

ABOUT ME

hello hello