개요: 필자가 클론코딩을 들으면서 정리한 게시물이다.(~3-7)
CSS : Cascading Style Sheet
브라우저가 위에 코드를 차례되로 읽는다. 즉 위에서 아래로 차근차근 코드를 읽는다.
CSS 작성하는 구조는 다음과 같다.
<head>
<title>CSH</title>
<link href="style.css" rel="stylesheet" />
<style></style>
</head>
무조건 head 안에 적어야 하며 첫번째 방법은 따로 만든 CSS 파일을 link를 통해 연결하고 rel= 다음과 같이
작성해주면 된다.
두번째는 html에 바로 style을 써서 해주는 방식이다. 보통 앞에껄 선호한다고 한다.
<style>
h1 {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<h1>aaaaaaaaaa</h1>
<h1>The Nico Times</h1>
다음과 같이 style 안에 h1 태그를 가르치는 {}쳐서 다음과 같이 작성하다. 속성들은 되게 많은데 다 외울 필요없고
형식만 알아두면 된다고 한다.
결과는 다음과 같다.
<style>
h1 {
color: blue;
text-decoration: underline;
text-align: center;
font-weight: 200;
font-style: italic;
font-size: 20px;
}
</style>
이렇게 엄청 많다... 엄청...
div {
height: 150px;
width: 150px;
background-color: antiquewhite;
}
span {
color: greenyellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
<span>hello</span>
<span>hello</span>
div 는 박스여서 옆에 아무도 안온다. 하지만 span (img, <a> 등도)은 옆에 다른 요소들이 붙을 수 있다.
이때 box를 block, 반대가 inline(in the same line)으로 정의하겠다.
물론
div {
display: inline;
height: 150px;
width: 150px;
background-color: red;
}
span {
display: block;
color: greenyellow;
}
이렇게 해서 서로를 바꿀 수 있다. 이때 inline은 높이와 너비가 없기 때문에 페이지에 안뜬다.
box의 3가지 특징
1. margin - box의 경계의 바깥에 있는 공간
2. border
3. padding - box의 경계로부터 안쪽에 있는 공간
margin
body {
margin: 0;
margin-top: 50px;
margin: 10px 10px;
margin: 10px 10px 11px 12px;
background-color: black;
}
1번은 전체를 0으로 해서 공간이 없고 2번은 윗부분 공간을 50px 해주겠다. 3번은 위 아래 10px 적용, 왼쪽 오른쪽
10px 적용한다는 뜻이다. 그리고 4번은 위 오 아 왼 시계방향!!
collapsing margins 현상 - box들의 위쪽 경계가 같으면 안바뀐다. 그래서 이 두 box들은 하나의 margin이 되는 거다.
이 현상은 위 아래쪽에서만 일어난다. (3-5 참고)
그래서 저거를 없애고 싶으면 padding이 필요하다.
padding
body {
margin: 0;
padding: 20px;
background-color: black;
}
이렇게 하면 아까말한 현상에서 벗어날 수 있다.
#f {
background-color: teal;
}
#t {
background-color: wheat;
}
span {
display: block;
color: greenyellow;
}
</style>
</head>
<body>
<div id="f">
<div id="t"></div>
</div>
겹치는 태그를 id를 이용해 구분할 수 있다. \
border
div {
background-color: red;
height: 100px;
width: 100px;
padding: 10px;
border: 2px solid darkblue;
border-style: dotted;
}
border는 박스의 경계 저런식으로 구현할 수 있다.
그러면
이렇게 나온다.
적용된 <div>안에 <span>을 써도 border가 적용된다.
border은 block inline 모두 적용된다.