dukDukz
2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS 본문
main.html
<!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 rel="stylesheet" href="main_ex.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo"><a href="#"><img src="./img/logo.png"></a></h1>
<div id="menu">
<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>
<div id="visual">
<img src="./img/visual1.png">
<!--
img가 폴더 바깥에 있다면
<img src="../폴더/파일">
..이 두개가 있음!
./ 현재 자기 위치
../ 자기 위치 기준 바깥
-->
</div>
<div id="container">
<div id="contents">
<div class="con_notice">
<ul>
<li class="con_notice1 con_item"> <!--class 두개 넣기-->
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>게임기획자를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice2 con_item">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p>게임프로그래밍을 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice3 con_item">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>게임 원화를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice4 con_item">
<h2>
<span>Programer Coaching</span>
프로그래머 코칭
</h2>
<p>프로게이머 데뷔 Class</p>
<a href="#">바로가기</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
*{margin: 0; padding: 0;}
ul, li{
list-style: none;
}
#wrap{
width: 100%;
}
#header{
width: 1000px;
height: 110px;
margin: 0 auto;
}
#logo{
margin-top: 20px;
float: left;
display: inline-block;
}
#menu{
margin-top: 50px;
float: right;
}
#menu>ul>li{
float: left;
display: inline-block;
width: 130px; /*넓이를 지정해서 메뉴 간의 간격을 주는 것*/
/*text-align: center; /* width 안에서 글자들 가운데 정렬*/
/*넓이를 주는것 - 초보적인 단계 padding-right 줘도 됨*/
}
#menu>ul>li>a{
color: #004385;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
#menu>ul>li>a:hover{
text-decoration: underline;
}
/************뒷 부분***********/
#visual{
height: 500px;
/*사진이 500px 인데 그 바깥에 div가 504px 이라 삐져나온 부분 강제로 500px로 만들어줌*/
}
#container{
width: 100%;
height: 200px;
}
#contents{
width: 1000px;
margin: 30px auto 0 auto; /*t r b l*/
height: 100px;
}
/*회색 네모 박스 크기*/
.con_notice{
width: 700px;
}
/*회색 네모 박스 안에 정리*/
.con_notice>ul>li{
float: left;
width: 40%;
height: 230px;
padding: 3%;
border: solid #ececec;
box-sizing: border-box;
}
/*이미지*/
.con_notice>ul>li.con_notice1{
background: url('./img/main_con_ic_01.png') bottom right no-repeat;
background-position: 160px 100px;
}
.con_notice>ul>li.con_notice2{
background: url('./img/main_con_ic_02.png') bottom right no-repeat;
background-position: 160px 100px;
}
.con_notice>ul>li.con_notice3{
background: url('./img/main_con_ic_04.png') bottom right no-repeat;
background-position: 160px 100px;
}
.con_notice>ul>li.con_notice4{
background: url('./img/main_con_ic_05.png') bottom right no-repeat;
background-position: 160px 100px;
}
/*게임기획/ 게임 프로그래밍/ 게임 원화/ 프로그래머 코칭 부분*/
.con_item>h2{
font-size: 20px;
}
/*Game Architecture .. 부분*/
.con_item>h2>span{
font-size: 14px;
color: #666;
display: block; /*옆에 부분 아래로 보냄*/
}
/*~를 위한 정석 Class 부분*/
.con_item>p{
padding: 30px 0 0 0 ;
width: 130px;
font-size: 11px;
}
/*바로가기 부분*/
.con_item>a{
display: block;
margin: 30px 0 0 0 ;
width: 100px;
height: 30px;
color: white;
background: #81b4f2;
text-align: center;
border-radius: 15px;
line-height: 32px;
text-decoration: none;
}
새로운 개념
1. border-radius : ..px
각진 상자를 둥글게 만들어 준다.
div{
width: 250px;
height: 250px;
background: rgb(193, 180, 206);
display: inline-block;
margin: 30px 50px;
line-height: 250px;
border: 10px solid ;
}
.box-1{
border-radius: 10px;
}
.box-2{
border-radius: 100px;
}
.box-3{
border-radius: 250px;
}
.box-4{
/* border-radius: top right bottom left ;*/
border-radius: 40px 0 40px 0;
}
.box-5{
border-radius: 250px 0 0 0;
}
.box-6{
border-radius: 25%;
}
.box-7{
border-radius: 250px 0 250px 0;
}
.box-8{
border-radius: 250px 250px 0 0;
}[핵심]
.box-4{
/* border-radius: top right bottom left ;*/
border-radius: 40px 0 40px 0;
}
숫자가 커질 수록 더 둥글어짐
2. background-position: 10px, 100px
위치 조정
homzzang.com/b/css-36www.tabmode.com/homepage/background_position.html#gsc.tab=0
%나 px로 xy위치 표현할 땐, 왼쪽 상단 기준으로 얼마나 떨어져 있는지 기재.
(0,0)에서 시작한다고 생각하고, x는 0 에서 얼마나 떨어졌는지 y는 위에서 얼마나 내려왔는지
왼쪽 상단
background-position:left top;
background-position:0% 0%;
왼쪽 중단
background-position:left center;
background-position:0% 50%;
왼쪽 하단
background-position:left bottom;
background-position:0% 100%;
3. border : solid #ececec;
CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정
aboooks.tistory.com/77
출처: https://webdir.tistory.com/341 [WEBDIR]
참고www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
border는 선 너비 선 모양 선 색상을 한번에 지정하며 선 모양은 꼭 지정해줘야함
border: 1px solid red;
4. box-sizing: border-box;
kutar37.tistory.com/entry/CSS-box-sizing-%EC%86%8D%EC%84%B1
width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다.
width: 100px; 을 선언하고 작업을 하다가 padding:10px; 을 추가하면 실제 너비가 120px이 된다. 여러 요소가 얽혀 있다면 깨진 레이아웃을 보며 하나씩 너비를 수정해나가야 할 것이다. 직관적이지도 않고 요소마다 값을 계산하기도 힘들다.
box-sizing: border-box;를 선언해놓으면
우리가 선언한 width값에 padding을 주더라도 자동으로 실제 컨텐츠 부분의 width가 줄어들면서 padding이 안쪽으로 파고들게 되어 실제 웹에서 보여지는 width값이 우리가 선언한 값 그대로 유지된다.
box-sizing:content-box;
이게 디폴트 값으로 안에 흰색 div의 width 값에만 적용이 된다. 둘은 같은 width값을 가짐
그렇지만 border 선에는 적용되지 않음
box-sizing:border-box;
이거는 border의 두깨까지 합해서 width를 150px로 맞춰주는 것. 그래서 두개의 div가 같은 width 값을 갖게 된다.
지정해준 width 안에서 선 굵기가 늘어난다고 생각하면 됨
5. line-height
line-height는 줄 간격을 정하는 속성입니다.
예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 됩니다. 줄 높이는 60px인데 글자 크기는 40px이므로, 글자 위와 아래에 각각 10px의 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹치게 됩니다.
***과제
오늘 처음 쓴 css에 대해 정리!
'웹 개발 > HTML 과 CSS' 카테고리의 다른 글
| 2021.03.16 회색 네모 박스 위치 조정 (0) | 2021.03.16 |
|---|---|
| 2021.03.15 경일 아카데미 홈페이지 만들기 (0) | 2021.03.15 |
| 2021.03.11 경일 홈페이지_공동 코드 작성 (0) | 2021.03.11 |
| 2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기 (0) | 2021.03.09 |
| 2021.03.08 경일 홈페이지 앞 부분 작성 (0) | 2021.03.08 |
