margin: 0 auto
로 설정하면 가운데 정렬이 된다.margin: 10px 5px 7px 5px
border: 1px solid red;
text-decoration: underline
을 border-bottom 으로 사용할 수 있다. 특정 엘리먼트가 padding이나 margin, border값을 가진 경우 처음 예상과는 달리 사이즈가 달라지는 경우가 있다.
이 때 box-sizing: border-box;
를 설정하게 되면 border를 기준으로 width, height값이 정렬되고 개발자는 일일이 영역을 계산해야하는 번거로움을 덜 수 있다.
따라서 CSS를 작성할 때 웹페이지의 전체 태그를 의미하는 *(Asterisk)를 사용하여 border-box를 지정한다.
* {
box-sizing: border-box;
}
.className, p, span {
color: green;
width: 200px;
}
.container p .title {
font-size: 50px;
}
// container클래스 안의 p태그 안의 title클래스
p.pTag {
color: gray; // p 태그이면서 pTag라는 클래스 이름을 가짐
}
p#thirdLine {
text-decoration: underline; // p 태그이면서 thirdLine이라는 아이디를 가짐
} //그러나 아이디가 지정된 경우 앞에 태그를 굳이 쓰지 않아도 됨.
tag(1) <<< class(10) <<< id(100) <<< inline styling(1000)
-대표적인 Inline elements : <span>
<a>
<img>
-줄바꿈 없이 다른 element들과 나란히 배치됨.
-해당 태그가 마크업하고 있는 요소의 크기만큼만 공간을 차지하기 때문에 width
, height
속성을 지정해도 무시함.
-margin
, padding
의 경우 좌우만 반영이 되고 상하는 반영이 안됨.
-대표적인 Block elements : <div>
<p>
<h1>
-줄바꿈이 되어 element를 다음 줄로 밀어냄.
-inline element와는 다르게 width
, height
, margin
, padding
속성이 모두 반영
그렇다면 Block elements를 Inline으로, Inline elements를 Block으로 어떻게 바꿀 수 있을까?
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.blockSpan {
display: block;
}
목록 중에서 selector를 표기하는 방법
selector: first-child{} - 첫번째 순서
selector: last-child{} - 마지막 순서
selector: nth-child(odd){} - 홀수
selector: nth-child(even){} - 짝수
<type = "text or number or password" placeholder = "도움말">
- input, button, textarea등은 inline 속성. 이를 block으로 바꾸기 위해서 <div>이용
relative, absolute, fixed
계속 추가 예정