✣ 오늘 공부한 내용 중 몰랐던 것 ✣
1. 들여쓰기 text-indent
css에서 text-indent 속성은 들여쓰기 효과를 지정한다. 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 한다.
.js-description {
text-indent: 50px;
}이렇게 코드를 작성하면 50px만큼 들여쓰기가 된다.
2. 스페이스 & nbsp;
코드를 작성할 때 스페이스를 10개 추가하여도 하나의 스페이스밖에 적용되지 않는다.
이럴 때는 스페이스를 의미하는 코드를 넣어주어야 하는데 & nbsp;가 스페이스를 의미하는 코드이다.
3. font family
font-family는 폰트 스타일을 지정하는 속성이다.
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻이고,만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다.
"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,
폰트 이름에 띄어쓰기가 되어있으면 ""(쌍따옴표)를 사용 해야한다.
font-family 값에는 보통 여러가지 폰트를 나열하는 이유는 사용자가 어떤 브라우저를 사용할지 모르기 때문에 최대한 여러 폰트를 나열하는 것이다.
가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트이다.
4. selector의 우선순위
selector 표현마다 우선순위가 있는데 이 우선순위는 점수 계산으로 이루어진다.
• inline styling: 1000점
• id: 100점
• class: 10점
• tag: 1점
5. margin auto
margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다.즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다.
그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 된다.
6. 레이아웃의 모든것
- position 속성 - relative, absolute, fixed
- inline, inline-block, block 에 대해서
- float에 대해서
여기에 대해서는 이전에 미리 포스팅을 한 url을 공유한다.
CSS 위치 지정하기(position, float, display)
