Margin
div {
background-color: yellow;
margin-bottom: 20px;
}
.has-width {
width: 150px;
}해당 프로그램을 실행했을 때 width 값을 주지않는 block 요소는 화면의 크기에 따라 늘어지지만, width값을 줘서 고정시키면 내가 원하는 크기로 고정시킬 수 있게 된다.
이때 margin에 auto를 설정해주면 화면 가운데로 오게 만들어 줄 수 있다.
.center {
margin: 20px auto;
}margin은 기본적으로 1개나 4개의 값을 가지진다.
1개 값이 있을 때는 사방에 모두 같은 margin을 준다는 의미이고,
4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였다.
이렇게 2개의 값만 있을 때의 의미는 첫번째는 위, 아래의 margin이고 두 번째는 왼, 오른쪽에 주는 margin이라는 뜻이다.
위의 css를 풀어쓰면 아래와 같다.
.center {
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}그러니까 즉 margin: 20px auto;는 상하에는 20px 만큼의 margin을 부여하고 좌우는 자동으로 margin을 부여해서 좌우간에 가운데 정렬을 한다는 의미를 가지게 된다.
코드가 의미하는 것을 설명하자면
index.html는 150px 만큼의 너비를 차지하게 되고, 좌우의 나머지 공간은 균등하게 배분되어 여백을 갖게 된다.
List
리스트의 ul 태그를 살펴보면 목록 옆에 작은 원이 생기는 것을 알 수 있다.
브라우저 태그에 따라서 스타일을 부여하게 되는데, 브라우저 각자 태그에 대한 디폴트 값이 있는 것으로 알 수 있다.
위 이미지를 살펴보면 ul 태그에 디폴트로 적용되어 있는 값을 볼 수 있다.
내가 원하는 스타일을 적용하고 싶을 때 디폴트로 정해져 있는 값을 덮어씌우는 형식으로 값을 바꿔줄 수 있다.
Selector
CSS selector를 표기하는 방법 중에 해당 태그의 첫 번째 순서인지, 마지막 순서인지, 홀수/짝수인지 알 수 있는 selector 표기법이 있다.
selector는 tag, .class, #id 모두 가능하다.
li:last-child {
padding-bottom: 0;
}li:nth-child(odd) {
background: red;
}
li:nth-child(even) {
background: blue;
}위 코드와 같은 형식으로 적용할 수 있다.
Table
첫번째 테이블
목록을 표현했을 때 항상 <ul> or <ol>과 <li>의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요하다.
<table>, <thead>, <tbody>, <tr>, <th>, <td> 등이 있다.
한 행을 시작할 때는 <tr>로 시작한다.
tr은 table row의 줄임말이다.
각각의 셀은 <tr> 내에 <td>를 사용한다.
Input
placeholder
placeholder는 도움말을 넣어주는 부분이다.
실제 input에 입력되어있는 텍스트가 아니다.
<textarea>소개:</textarea><textarea>는 input 보다는 더 긴 텍스트를 입력받고 싶을 때 사용한다.
보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용한다.
참고
- textarea에 "소개:"라고 보이는 것은 placeholder가 아니라 텍스트이다.
- input은 시작태그, 끝태그로 구성되지 않는다. 하나의 태그가 하나의 요소이다.
- textarea처럼 input에도 미리 값을 세팅해놓고 싶을 수 있는데, 그때는 value라는 attribute를 사용한다.
placeholder, type 스타일
placeholder에 회색으로 default color가 입혀진다.
그런데 조금 진한 것 같아서 더 연한색으로 바꾸고 싶을 때
placeholder는 attrribute인데 css의 selector를 어떻게 표현해야 할까?
input::placeholder {
color: #bbb;
}input 오른쪽에 콜론 두개를 붙여서 selector를 만들어 줄 수 있다.
attribute를 표현한다고 모두 콜론을 쓰는 것은 아니다.
input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면,
아래와 같이 표현할 수 있다.
input[type="text"] {
}placeholder를 빨간색으로 강조하고 싶을 때는
input[type="text"]::placeholder {
color: red;
}이런식으로 좀 더 선택자를 구체적으로 지정해 줄 수 있다.
Hover
버튼에 마우스를 올리면, cursor 모양을 바꾸고 싶을 때
button:hover {
cursor: pointer;
}위와 같은 표현을 사용하면 된다.
hover라는 것은 마우스를 올렸다는 의미를 가진다.
button:hover {
opacity: 0.8;
}위 코드와 같이 상태에 따른 selector도 있다.
위 코드를 적용하면 마우스를 올렸을 때 색깔을 연하게 만들 수 있다.
opacity는 해당 요소를 불투명하게 만들어준다.
0.8이라는 값은 백분율인데, 원래의 스타일에서 80% 만큼 흐리게 만들어준다는 뜻이다.
만약 opacity에 값을 0을 주게 되면 해당 요소가 0%만큼 흐려져서(완전투명) 화면에서 아예 보이지 않는다.
Position
이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌다.
CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다.
예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있다.
더 구체적인 레이아웃에 대한 설명은 아래 포스팅 참고.
레이아웃의 모든 것
