앞 편과 마찬가지로 이건 Yesterday I Learned,,
CSS?
= HTML tag에 디자인을 입혀주는 것
HTML과 CSS파일의 연결:
1. HTML document에 CSS파일 불러오기
<link href=“css파일경로” rel=“stylesheet” type=“text/css”>
rel: HTML file과 CSS file과의 관계를 설명
2. HTML에 CSS적용는 방법(in CSS):
~> Selector: CSS 적용대상
1) 개별 적용
-tag=> 단순히 태그 이름만 기재
-class=> ‘.classname’
-id=> #idname
또는
<style>태그를 활용해서 html문서 내에서 직접 적용하는 방법도 있지만. 나중에 문서를 수정하거나 CSS적용을 고려한다면 CSS요소는 CSS파일에서 따로 적용하는게 좋다.
2) 모든 tag에 적용: "*" selector
*{
box-sizing: border-box;
}
3) 동일한 스타일을 각기 다른 태그와 클래스 등에 적용할 경우
: 각자의 selector에 모두 똑같은 스타일을 적기보다는
한꺼번에 스타일을 지정=> ‘,’ 사용
.what-is-blockquote, span {
color: green;
}
4) 엄청 길게도 작성할 수 있다...
.a div .b .pre span {
background-color: yellow;
}
=> a class 안의 div tag안의 b class 안의 pre class안의 span에 배경색을 노랑으로,,
<div class="a">
<div>
<header class="b">
<h1 class="pre">
<span>제목! 노란색 배경 나옴!</span>
<span class="title">이것도 나옴!</span>
</h1>
<span>이건 적용안 됨</span>
</header>
</div>
<span>이건 적용안 됨</span>
</div>CSS Specificity: Selector 우선순위
: tag <<<<< class <<<< id <<<<<<inline
css거의 대부분의 요소에 class를 부여해주고,
class를 selector로 styling해주기 때문에,
최대한 중복을 피할 수 있도록 작성합니다.
/+ 추가내용
<div>태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다. 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성이 쉽게 무력화된다.
따라서 id를 범용하면 home, banner, nav a 와 같이 길고 복잡한 selector를 사용해야 하므로, id 대신 class를 더 자주 쓴다.
- 밑줄귿는 방법
1)
- text-decoration: overline;
- text-decoration: underline;
2) border 이용하기
- font-family:폰트 스타일 지정하는 속성
주의) "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다.
- text-align: 글씨 정렬
다만
<span>은 inline-element이므로, "span의 오른쪽 정렬"이라는 text만큼 영역을 차지하고 있어 정렬이 되지 않는다.
-
text-indent: css 들여쓰기
-
blockquote
: 인용구문을 넣을 때 쓰는 태그입니다.
: 브라우저는 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용됨.
Q. 문장 사이사이에 스페이스를 추가하고 싶을 때?
: 스페이스를 의미하는 을 넣어주면 됩니당.
/+ 추가내용
CSS selector를 표기하는 방법중에
해당 태그의 첫 번째 순서인지,
마지막 순서인인지,
홀수/짝수 인지 알 수 있는 selector 표기법!
selector: first-child
selector: last-child
selector: nth-child(odd) //홀수
selector: nth-child(even) //짝수