CSS 언어 정리

CSS↗

CSS 언어 정리

메타플랫폼대표

|2024. 6. 4. 11:21

- 한국어로 되어 있는 HTML, CSS, JAVASCRIPT 최고의 정리

CSS로 가운데 정렬하기 – 이미지 가로 세로 가운데 정렬 팁! - 코딩에브리바디

CSS로 이미지를 가운데 정렬하는 방법을 알려드립니다! 이 글에서는 가로 가운데 정렬과 세로 가운데 정렬을 모두 다루고 있으며, 초보자도 쉽게 이해할 수 있도록 예시와 팁을 제공합니다.

codingeverybody.kr

CSS(Cascading Style Sheets)

1. inline 방식 : tag내에서 style속성으로 직접지정
2. 선언적 방식 : head tag 사이에서 <style></style>사이에서 선언
3. 외부파일 link 방식(external) : <link> tag이용해서 외부파일 연결

상위 폴더 움직이는 경로 : .. 위쪽으로 이동한다
현재 폴더 움직이는 경로 : . 현재 경로 지정

<head>
	<link rel="stylesheet" href="../CSS/mystyle.css">
</head>

<div>External 방식 Style 지정</div>

@charset "UTF-8";

div{
	color:green;
}

CSS Syntax

CSS Selector

id는 서버전송(X), name만 전송

※ id는 단순히 지정해주기 위한 방식이지, 서버로 넘어가지 않는다. name 속성은 서버로 넘어간다.

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
		/* Selector(CSS 대상지정) */
		/* 1. Element Selector tag 지정 */
		p{
			border: 1px solid gray;
		}
		
		/* 2. id Selector #p1 => id="p1" */
		#p1{
			color : blue;
			border : 1px solid red;
		}
		
		/* 3. class Selector .last => class="last" */
		.last{
			color : yellow;
			/*             x   y  blur color */
			text-shadow : 1px 1px 1px black;
		}
		
		/* 3.Group(Multi) Selector */
		#p2, #p3, #p4{
			border-color : orange;
			box-shadow : 1px 3px 2px orange;
		}
		
		
	</style>

</head>

<body>
	<!-- id는 단순히 지정해주기 위한 방식이지, 서버로 넘어가지 않는다. name 속성은 서버로 넘어간다. -->
	<!-- id는 서버전송(X), name만 전송 -->
	<p id="p1">동해물과 백두산이</p>
	<p id="p2">마르고 닳도록</p>
	<p id="p3"><strong title="내 삶에 주인이십니다.">하나님</strong>이 보우하사</p>
	<p id="p4">우리나라 만세</p>
	
	<p class="last">무궁화 삼천리 화려강산</p>
	<p class="last">대한사람 대한으로 길이 보전하세</p>

</body>

</html>

- CSS로 상단메뉴 만들기

- CSS으로 인라인, 블록 지정하기

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/mainmenu.css">
</head>


<body>
	<!-- 전체가 블록요소이기 때문에, 옆으로 배치가 되지 않는다. -->
	<img class = "image" src = "../image/나이키.png" alt = "나이키" width = "200"/>
	<ul id='main-menu'>
		<li><a href="#">HOME &nbsp</a></li>
		<li><a href="#">MAN &nbsp</a></li>
		<li><a href="#">WOMEN &nbsp</a></li>
		<li><a href="#">CLOTH &nbsp</a></li>
		<li><a href="#">SHOES &nbsp</a></li>
		<li><a href="#">GOODS &nbsp</a></li>
		<li><a href="#">SUB &nbsp</a></li>
		<li><a href="#">NONE</a></li>
		
	</ul>
</body>

- 내가 원하는것은 세로로 쭉 배치되는 것이다.

- 앞서서 list-style: none; 으로 앞에 마크를 빼준다. (상단 메뉴로 사용할 것이기 때문이다)

- 인라인 블럭으로 해결

@charset "UTF-8";

#main-menu {
	list-style: none;
}

/* Child Selector 
   parent > child : 바로아래있는 자식
   parent child : 후손요소 모두적용
*/
#main-menu > li {
		display : inline-block;
}

@charset "UTF-8";

#main-menu {
	list-style: none;
	width: 2200px;
	background-color : black;
}

/* Child Selector 
   parent > child : 바로아래있는 자식
   parent child : 후손요소 모두적용
*/
#main-menu > li {
		display : inline-block;
}

#main-menu > li > a {
	color: white;
	font-size: 25px;
	text-decoration: none;
		
	/* 인라인 요소는 크기 지정이 안된다. */
	width: 200px;
	height : 30px;
	display: block;
		
	text-align: center;
}

/* 해당 Selector에 마우스가 올라가면 */
#main-menu > li > a:hover {
	background: green;
}

/* 텍스트 중앙으로 보내기 */
.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

- 수직 메뉴 만들기

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/submenu.css">
</head>

<body>

	<hr>
		HOME SubMenu
	<hr>
	<!-- 두 가지 클래스 명을 지정해줄 수 있다. -->
	<ul class = "sub-menu">
		<li><a href="#">HOME HOME</a></li>
		<li><a href="#">HOME Intodution</a></li>
		<li><a href="#">HOME Editors</a></li>
		<li><a href="#">HOME Basic</a></li>
	</ul>
	
	<hr>
		MAN SubMenu
	<hr>
	<ul class = "sub-menu">
		<li><a href="#">MAN HOME</a></li>
		<li><a href="#">MAN Intodution</a></li>
		<li><a href="#">MAN Syntax</a></li>
		<li><a href="#">MAN Selectors</a></li>
	</ul>

</body>

@charset "UTF-8";

/* class selector */
.sub-menu {
	list-style: none;
}

.sub-menu > li > a {
	text-decoration: none;
	color: rgb(255,0,0);
	
	display: block;
	width: 150px;
	border: 1px solid #cccccc;
	
	
	padding: 5px;
	text-align: center;
	margin-bottom: 10px;
	margin-right: 200px;
}

.sub-menu > li > a:hover {
	color: #0080ff;
	box-shadow: 3px 2px 2px black;
}

- CSS Layout(Content 배치하기)

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout1.css">
</head>

<body>

<div id="main-box">
	<div id="header">header</div>
	<div id="content">content</div>
	<div id="footer">footer</div>
</div>

</body>

</html>

@charset "UTF-8";

/* Universal Selector (모든요소) */

/* 모든요소의 마진/패딩제거 : 모든 브라우저 동일조건 설계 */
* {
	margin: 0; /* 웹브라우저마다 기본 margin들이 다르기에 0으로 고정 */
	padding: 0;
	margin: auto; /* 객체 중앙 정렬 */
}

#main-box {
	width: 800px;
	height: 600px;
	background-color: #cccccc;
}

#header {
	/* block은 부모의 크기를 따라간다. */
	width: 100%; /* 퍼센트는 부모기준 */
	height: 100px;
	background: #ffcccc;
}

#content {
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 400px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : #ccffcc;
}

#footer {
	height: 100px;
	background: #ccccff;
}

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout2.css">
</head>

<body>

<div id="main-box">
	<div id="header">header</div>
	<div id="aside">aside</div>
	<div id="content">content</div>
	<div id="footer">"footer"</div>
</div>

</body>

</html>

@charset "UTF-8";

/* Universal Selector (모든요소) */

/* 모든요소의 마진/패딩제거 : 모든 브라우저 동일조건 설계 */
* {
	margin: 0; /* 웹브라우저마다 기본 margin들이 다르기에 0으로 고정 */
	padding: 0;
}

#main-box {
	width: 800px;
	height: 600px;
	background-color: #cccccc;
	margin: auto; /* 객체 중앙 정렬 */
}

#header {
	/* block은 부모의 크기를 따라간다. */
	width: 100%; /* 퍼센트는 부모기준 */
	height: 100px;
	background: #ffcccc;
}

#aside {
	width: 30%;
	height: 400px;
	background: #ffffcc;
	/* 부유(띄우다)속성 */
	float: left;
}

#content {
	width: 70%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 400px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : #ccffcc;
	
	float: left;
}

#footer {
	height: 100px;
	background: #ccccff;
	/* 부유속성 해제 both = right/left all */
	clear: both;
}

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout3.css">
</head>

<body>

<div id="main-box">
	<div id="header">header</div>
	<div id="aside">aside</div>
	<div id="aside2">aside</div>
	<div id="content">content</div>
	<div id="footer">"footer"</div>
</div>

</body>

</html>

@charset "UTF-8";

/* Universal Selector (모든요소) */

/* 모든요소의 마진/패딩제거 : 모든 브라우저 동일조건 설계 */
* {
	margin: 0; /* 웹브라우저마다 기본 margin들이 다르기에 0으로 고정 */
	padding: 0;
}

#main-box {
	width: 800px;
	height: 600px;
	background-color: #cccccc;
	margin: auto; /* 객체 중앙 정렬 */
}

#header {
	/* block은 부모의 크기를 따라간다. */
	width: 100%; /* 퍼센트는 부모기준 */
	height: 100px;
	background: #ffcccc;
}

#aside {
	width: 30%;
	height: 400px;
	background: #ffffcc;
	/* 부유(띄우다)속성 */
	float: left;
}

#aside2 {
	width: 30%;
	height: 400px;
	background: #ffffcc;
	/* 부유(띄우다)속성 */
	float: right;
}

#content {
	width: 40%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 400px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : #ccffcc;
	
	float: left;
}

#footer {
	height: 100px;
	background: #ccccff;
	/* 부유속성 해제 both = right/left all */
	clear: both;
}

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout5.css">
</head>

<body>

<div id="main-box">
	<div id="header">header</div>
	<div id="aside">aside</div>
	<div id="content">
		<div class="mini-box red-box">[공지사항]</div>
		<div class="mini-box green-box">[최근게시물]</div>
		<div class="mini-box blue-box">[유용한사이트]</div>
		<div class="mini-box yellow-box">[최근댓글]</div>
	</div>
	<div id="footer">"footer"</div>
</div>

</body>

</html>

@charset "UTF-8";

/* Universal Selector (모든요소) */

/* 모든요소의 마진/패딩제거 : 모든 브라우저 동일조건 설계 */
* {
	margin: 0; /* 웹브라우저마다 기본 margin들이 다르기에 0으로 고정 */
	padding: 0;
}

#main-box {
	width: 800px;
	height: 600px;
	background-color: #cccccc;
	margin: auto; /* 객체 중앙 정렬 */
}

#header {
	/* block은 부모의 크기를 따라간다. */
	width: 100%; /* 퍼센트는 부모기준 */
	height: 100px;
	background: #ffcccc;
}

#aside {
	width: 30%;
	height: 400px;
	background: #ffffcc;
	/* 부유(띄우다)속성 */
	float: left;
}

#content {
	width: 70%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 400px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : #ccffcc;
	
	float: left;
}

.mini-box{
	width: 250px;
	height: 170px;
	
	border: 1px solid gray;
	outline: 1px solid black;
	float: left;
	margin: 12px;
	box-shadow: 1px 1px 3px black;
}
.red-box {
	background: red;
}
.green-box {
	background: green;
}
.blue-box {
	background: blue;
}
.yellow-box {
	background: yellow;
}

#footer {
	height: 100px;
	background: #ccccff;
	/* 부유속성 해제 both = right/left all */
	clear: both;
}

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout4.css">
</head>

<body>

<div id="main-box">
	<div id="header"><img class = "image" src = "../image/나이키.png" alt = "나이키" width = "180"/></div>
	<div id="top-menu">
		<ul id='main-menu'>
		<li><a href="#">HOME &nbsp</a></li>
		<li><a href="#">MAN &nbsp</a></li>
		<li><a href="#">WOMEN &nbsp</a></li>
		<li><a href="#">CLOTH &nbsp</a></li>
		<li><a href="#">SHOES &nbsp</a></li>
		<li><a href="#">GOODS &nbsp</a></li>
		<li><a href="#">SUB &nbsp</a></li>
		<li><a href="#">NONE</a></li>
	</ul>
	</div>
	<div id="aside">
	<hr>
		HOME SubMenu
	<hr>
	<!-- 두 가지 클래스 명을 지정해줄 수 있다. -->
	<ul class = "sub-menu">
		<li><a href="#">HOME HOME</a></li>
		<li><a href="#">HOME Intodution</a></li>
		<li><a href="#">HOME Editors</a></li>
		<li><a href="#">HOME Basic</a></li>
		<li><a href="#">HOME HOME</a></li>
		<li><a href="#">HOME Intodution</a></li>
		<li><a href="#">HOME Editors</a></li>
		<li><a href="#">HOME Basic</a></li>
	</ul>
	</div>
	<div id="content1">[공지사항]</div>
	<div id="content2">[최근게시물]</div>
	<div id="content3">[유용한 사이트]</div>
	<div id="content4">[최근 댓글]</div>
	<div id="footer">"footer"</div>
</div>

</body>

</html>

@charset "UTF-8";

/* Universal Selector (모든요소) */

/* 모든요소의 마진/패딩제거 : 모든 브라우저 동일조건 설계 */
* {
	margin: 0; /* 웹브라우저마다 기본 margin들이 다르기에 0으로 고정 */
	padding: 0;
}

#main-box {
	width: 800px;
	height: 700px;
	background-color: white;
	margin: auto; /* 객체 중앙 정렬 */
}

#header {
	/* block은 부모의 크기를 따라간다. */
	width: 100%; /* 퍼센트는 부모기준 */
	height: 100px;
	background: white;
}

#top-menu {
	width: 100%;
	height: 100px;
	background: black;
}

#aside {
	width: 30%;
	height: 400px;
	background: white;
	/* 부유(띄우다)속성 */
	
	float: left;
}

#content1 {
	width: 35%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 200px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : white;
	border: 1px solid black;
	box-sizing: border-box;
	float: left;
}
#content2 {
	width: 35%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 200px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : white;
	border: 1px solid black;
	box-sizing: border-box;
	float: left;
}
#content3 {
	width: 35%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 200px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : white;
	border: 1px solid black;
	box-sizing: border-box;
	float: left;
}
#content4 {
	width: 35%;
	/* 위 객체들이 크기가 커져도 최소 400px은 유지시키겠다. */
	min-height: 200px;
	/* 내용 크기에 따라 증가 */
	height: auto;
	background : white;
	border: 1px solid black;
	box-sizing: border-box;
	float: left;
}

#footer {
	height: 100px;
	background: black;
	/* 부유속성 해제 both = right/left all */
	clear: both;
}

.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#main-menu {
	list-style: none;
	width: 100%;
	background-color : black;
}

/* Child Selector 
   parent > child : 바로아래있는 자식
   parent child : 후손요소 모두적용
*/
#main-menu > li {
		display : inline-block;
		width: 12%;
}

#main-menu > li > a {
	color: white;
	font-size:15px;
	text-decoration: none;
		
	/* 인라인 요소는 크기 지정이 안된다. */
	width: 100%;
	height : 30px;
	display: block;
		
	text-align: center;
}

/* 해당 Selector에 마우스가 올라가면 */
#main-menu > li > a:hover {
	background: green;
}

/* class selector */
.sub-menu {
	list-style: none;
}

.sub-menu > li {
}

.sub-menu > li > a {
	text-decoration: none;
	color: black;
	
	display: block;
	height : auto;
	width: 100%;
	background: white;
	border: 1px solid #cccccc;
	
	padding: 5px;
	text-align: center;
	margin-bottom: 10px;
	margin-right: 200px;
}

.sub-menu > li > a:hover {
	color: white;
	box-shadow: 3px 2px 2px black;
	background: black;
}

잠깐만 여기서 새로고침이 바로바로 적용이 안될때 (캐싱 삭제)

참고한 link

CSS Selectors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

저작자표시

'CSS↗' 카테고리의 다른 글

Bootstrap (0)	2024.06.17
오류해결)CSS 변경 후 적용안되는 오류 (0)	2024.06.09
CSS 선택자2 (0)	2024.04.09
CSS float / Position / Flexbox (0)	2024.04.08
CSS 요소의 배경 설정(background) (0)	2024.04.08