[CSS] 내가 사용해본 CSS에 기능

---

 

까먹을까봐 또

 

미리미리 포스팅하려고 하는

 

언덕위의 제임스 입니다......

 

---

			
	 	body {
	 		font-family : KoPubDotum Bold; // 어떤 폰트를 사용할 것 인가?
	 		background-color: #2a2a2a; // 배경 색깔은 어떤거로 사용 할 것인가?
	 	}
	 	
		.backimg{ // 배경 이미지
			height: 800px; // 배경 이미지의 높이는?
	 		background: url(../../img/main2.png); // 배경 이미지 가져오기
  			background-size: cover; // 배경 이미지 확대/ 축소 기능
			position: relative; // z-index의 기준을 잡는 기준점 / z-index 사용시 필수요소임
			z-index: 1; // 요소의 몇번째 층으로 사용할 것인지?
			
		}	 	

	 	
	 	.bodycontent h4 {
	 		font-size: 56px;  // 폰트 크기 54픽셀
	 		color: #00bfff;  // 폰트 컬러 
	 		width: 500px; // 폰트의 넢이 (깨지는것을 방지하기위해 하였음)
	 		position: relative; 이하동문
	 		z-index: 1; 이하동문
	 		margin-top: -400px;  아래에서 400px 올림
	 		margin-right: 680px; // 오른쪽에서 680픽셀 밀음
	 	}
	 	
		.bodycontent { // 바디 컨텐츠
			flex-direction: column; // flex-direction : 가운데로 요소를 사용
			display: flex; // 세로로 요소를 사용
			justify-content: center; // 컨텐츠 가운데
			align-items: center; // 아이템 가운데
			align-content: center; // 글짜들 가운데
		}

	 	.KoPubDotumBold {
			font-family: KoPubDotum Bold;	 		
	 	}
	 	
	 	.KoPubDotumMedium {
			font-family: KoPubDotum Medium;	 		
	 	}
	 	
	 	.KoPubDotumLight {
			font-family: KoPubDotum Light;	 		
	 	}
	 	
	 	.mainButton {
	 		font-family: KoPubDotum Bold;
	 		background-color: white;
	 		border-radius: 5px; // 테두리 둥글게
	 		padding: 10px; // 패딩 상하좌우 10픽셀
	 		padding-left: 50px; // 페딩 왼쪽으로 50픽셀 더 채워주기
	 		padding-right: 50px; // 오른쪽으로 50 픽셀 더 채워주기
	 		font-size: 16px;
	 		cursor : pointer; 클릭할 때 사용하는 마우스 손가락 변경
	 		margin-right: 1000px; // 오른쪽에서 -> 왼쪽으로 1000픽셀 밀음
	 		top : -230px; // margin-top 이랑 같은애임
	 		position: relative; 
	 		z-index: 2;
	 	}
	 	
	 	/*  자사 제품 스타일  */
	 	.main_div div{
	 	
			float:left;		
			
	 	}
	 	
	 	.main_div .productcontent {
	 		color: #FFFFFFE6;
			width: 275px;
			background: #424242;
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;
			border-style: solid;
			border-color:#2a2a2a;
			border-left-width: 60px; 왼쪽 경계부분을 60px 늘림 

		}			
	 	
	 	.main_div .productcontent img{
	 		width: 23px;
	 		height: 23px;
	 		float: right; 
	 		background-color: white;
	 	}
	 	
	 	.main_div .downwhite{
	 		color: #FFFFFFE6;
	 		font-size: 24px;
	 	}
	 	
	 	.main_div .contentpixel{
	 		font-size: 15px;
	 		line-height: 22px; // 위 아래 글짜 사이의 간격을 정해줌 
	 		font-family: KoPubDotum light;
	 		height: 80px;
	 		color: #FFFFFF99;
	 	}
	 	
	 	.main_div .contentbutton{
			color: #FFFFFFE6;
	 		background: #FFFFFF0D;
	 		border-color: #FFFFFF0D;
	 		font-size: 15px;
	 		font-family: KoPubDotum Medium;	 		
	 		margin-top: 70px;
	 		cursor : pointer;
	 		border-style: none; // 테두리 없앰
	 		padding: 10px;
	 		text-align: center;
	 		padding-left: 35px;
	 		padding-right: 35px;
	 		margin-left: 8px;
	 	}
	 	
	 	.main_div .title {
	 		font-size: 30px;
	 		color: #FFFFFFE6;
	 		float: left;
	 		margin-right: 1050px;
	 	}



		/*  O2Platform 스타일 */	 

		.main_property div {
			float: left;
		}
	 	
	 	.main_property .downwhite {
	 		font-size: 24px;
	 		color: #FFFFFFE0;
	 	}
		
	 	.main_property .propertycontent{
	 		color: #FFFFFFE6;
			width: 315px;
			padding-left: 60px;
			padding-right: 10px;
			padding-bottom: 20px;
	 	}
	 	
	 	.main_property .propertycontentfont {
	 		font-size: 15px;
	 		font-family: KoPubDotum medium;	 
	 		line-height: 20px;
	 	}

		.main_property .titles {
	 		font-size: 30px;
	 		color: #FFFFFFE6;
	 		float: left;
	 		margin-right: 950px;
	 	}
	 	
	 	/* 버전 */
	 	
	 	.main_version .title {
	 		font-size: 30px;
			margin-right: 1130px;
	 		color: #FFFFFFE6;
	 		float: left;
	 	}
		 
		 .main_version li {
			 color: #FFFFFFE6; 
			 font-size : 16px;
		 }
	 	
	 	/* 헤더 영역 */
	 	header{
	 		border: 1px;
	 		position: relative;
	 		z-index: 9999; 
	 	}
	 	
	 	header a {
	 		color: white;
	 		float: left;
	 	}
	 	
	 	.menu {
	 		float: right;
	 	}

	 	.menu li{
	        font-size : 1.3rem;
	        margin-right: .3rem !important;;
	 		color: white;
	 		list-style: none;
	 		float: left;
	 	}
	 	
	 	.menu a{
	 		color: white; 
	 		padding: 0 15px;
			text-decoration: none;// a 테그 사용하면 아래 밑줄 생기는데 그거 없애줌
	 	}
	 	
	 	.wrapper {
			margin: 0 auto;
	 	}
		
		@media (max-width: 2560px){ // 2560 px 미만부터 새로 속성 적용
			body{
				overflow-x: hidden; // overflow-x : hidden 아래 x축 스크롤을 숨김
			}
		}
	 	
	 	@media (max-width: 1280px){
	 		
	 		.bodycontent{
	 			width: 1280px;
	 		}
	 		
	 		body{
				width: 1280px;				 
			 }
		}

 

 

---

 

 

To be continue..