요소들 사이의 간격을 의미한다
Border안에 내용물 사이의 간격을 의미한다
간단하게 말하면 Margin은 Border의 바깥영역을 의미, Padding은 Board의 안쪽영역을 의미한다
See the Pen Untitled by Lee (@mondaymonday2) on CodePen.
margin:auto는 자기 자신이 여백을 가지고 있는 경우 좌우의 간격을 동일하게 가져가 가운데 정렬이 됩니다
display:flex랑 같이 적용하는 경우 세로 정렬도 되어서 한 가운데 위치하게 됩니다
class로 접근하는 방법이 있습니다. .을 붙히면 class 명을 찾아가라는 것 입니다.
body.main의 경우 body태그 안에 main이라는 class 명에다가 이 CSS를 적용시키겠다는 말입니다.
id명으로 접근할 수 있습니다. 이 경우에는 #을 씁니다.
어디안에 어디안에 어디라고 지정할 때 ul이란 할아버지에 li이라는 아버지에 strong이라는 자손입니다.
div이란 아버지의 strong이라는 자식입니다.
어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터입니다.
40개 이상의 많은 가상 클래스 셀렉터 있으니 한번 쭉 보면서 자주 쓰일 거 같은 건 메모를 하든 기억을 하는게 좋다고 생각됩니다.
@import url을 이용해 불러올 수 있습니다. 또는 <link rel = "stylesheet"href="mystyle.css"> 로 불러올 수 있습니다.
따로 css를 안 만들고 html 안에 넣을 수 도 있습니다. <style> </style>
<a href=“http://www.naver.com” style=”text-decoration : none”>네이버</a>
태그 안에다가 style을 지정할 수도 있습니다.
속성 : 값
앞에서 알려준 거 와 같이 클래스로 접근할지 id로 접근할지 그 자체 태그로 접근할지에 따라
이름을 정해주고 중괄호 안에 적용시킬 목록을 적습니다.
#two{
color:blue;
}
.three{
color:green;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<div style="color:red">안녕하세요</div>
</div>
<div>
<div id = "two">안녕하세요</div>
</div>
<div>
<div class="three">안녕하세요</div>
</div>
</body>
</html>
<link rel="stylesheet" href="style.css"> 이렇게 해당 분리한 파일을 지정시킬 수 있습니다.
파일로 별도 분리하고 클래스별로 적용시키면 (웬만해서 클래스명으로 지정함) 유지보수에 매우 용이합니다.
#로 id나 .으로 클래스를 지정할 수 있습니다.
------------ 인라인 스타일 요소 --------
<div style="border-color: red;">
-------- id 셀렉터 -----------
#leftBanner{
background-color: black;
color:white;
height :100%;
}
-------- 클래스 셀렉터 -----------
.leftBanner{
background-color: black;
color:white;
height :100%;
}
-------- 요소 스타일 -----------
<style>
div{
border-color:black;
border-width:10px;
border-style:solid;
}
</style>인라인 스타일시트 > id셀렉터 > 클래스셀렉터 > 요소 스타일순입니다. 가장 먼저 인라인 스타일이 가장 마지막에 적용되서 최종적으로 나옵니다.
같은 속성을 여러번 정의했을 때 우선순위가 높은 설정값이 최종적으로 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙이면 됩니다.
애초에 여러곳에 같은 속성을 쓰고 강제로 !important 주는 상황이 이상한 상황이라 이러한 상황을 아예 만들면 안 됩니다.
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>
인라인 스타일은 힘이 강하죠 그래서 blue가 적용되는 것입니다.
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black !important;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>
하지만 !important를 적용시켰을 때 이렇게 바뀝니다.