티스토리 뷰
기초의 부분의 핵심
<style> - 스타일 시트를 정의하는 태그
* { 속성 } - 문서 전체에 스타일을 적용 하는 전체 선택자
태그 { 속성 } - 태그에 스타일을 적용하는 태그 선택자
.스타일 이름 { 속성 } - class 속성으로 묶은 특정 부분에만 스타일을 적용하는 class 연산자
#스타일 이름 { 속성 } - id속성으로 묶은 부분에만 스타일을 적용하는 id 선택자
이름1, 이름2, ... { 속성 } - 여러 항목에 같은 스타일을 적용하는 그룹 선택자
1. 스타일 형식(태그방식)
p { text-align: center; color:blue; font-size:16px } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */
h2 { font-size:20, color:orange }
' p ' 부분을 선택자 라고 하는데 앞으로 만들 스타일 규칙을 어디에 적용할 것인가 나타낸다. 그 다음 중괄호{}는 어떤
스타일 속성을 어떤 값으로 바꿀 것인가 써 놓는 부분입니다. 속성과 값은 콜론 : 으로 구분짓고 속성과 속성은 세미콜론으로 구분한다.
다른 선택자에 대한 값을 줄 땐 위와같이 따로 분리하여 지정하면 된다.
2. 스타일과 스타일 시트
스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 곳에 묶어 놓은 것을 '스타일 시트' 라고 한다.
스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 연결해 사용하는
'외부 스타일 시트'로 나뉜다.
내부 스타일 시트
먼저 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 내부 스타일 시트라 하는데 스타일 정보는 웹 문서를 브라우저 화면에 표시하기
전에 결정되어야 하기 때문에 모든 스타일 정보는 <head> 태그와 </head>태그 안에서 정의 되어야하고 <style> </style>사이에 작성을 한다.
외부 스타일 시트
대부분의 웹 문서는 같은 스타일을 여러 웹문서에 똑같이 적용한다 그렇기 때문에 외부 파일을 만들어 놓고 여러 웹 문서가 그것과 연결을 시켜
스타일을 적용하는 방식을 많이 사용한다. 파일은 .css 확장자를 갖는 파일이된다. 외부 시트를 연결 할때는 <style>태그 대신 <link>태그로 사용한다. ex) <link href ="외부 스타일 시트 파일 경로" rel="stylesheet" type="text/css"> (head에 적용하면된다.)
인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지않고 바로 적용하는 방법을 말한다.
ex) <p style="color:bule;"> 반갑습니다. 여러분~</p>
3. 클래스 선택자 - 특정 부분에 스타일 적용하기
같은 태그라도 어떤 곳에서는 다른 스타일을 사용하고 싶다면 사용하는 선택자다. 클래스 선택자는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 나중에 기억하기 쉬운 이름으로 사용! 또한 이름앞에 반드시 마침표(.)를 붙여야한다. 기존에 있는 태그와 이름이 겹쳐도 안된다!!
ex)
.bluetext 라는 클래스 연산자를 만들었고 태그 안에 class ="bluetext"라고 이름을 써주면 해당 부분만 바뀌는 것을 확인 할 수 있다.
또한 나아가 요소의 전체가 아니라 글의 일부분만 클래스 선택자를 적용하고 싶을 땐 <span> 태그를 이용하면 된다.
검정색이 기본인 p태그 안에 내가 바꾸고자 하는 부분을 <span>으로 시작해 그 안에 class="redtext"> 으로 색을 바꿔주고 </span>부분까지 적용하겠다고 범위를 지정해준다. 위에 자세히 보면 빨갛게 바뀐 글씨가 보일것이다.
4. id 선택자 - 특정 부분에 스타일 적용하기(오직 1번만 가능)
id 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일 지정할 때 사용한다. 마침표 대신 #기호를 사용한다. 그런데 클래스 선택자는 문서 안에서 여러번 반복이 가능하지만 id 선택자는 문서 안에서 한 번만 적용이 가능합니다.
사용 방법은 클래스 선택자와 동일하다.
5. 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기
간단하다. h1과 h2가 같은 스타일을 지정할 때 한 곳으로 묶어서 스타일 지정이 가능하다.
h1 { text-align:center; }, h2 { text-align:center; }
-> h1, h2 { text-align:center; }
6. 캐스캐이딩 스타일 시트
CSS의 C는 캐스캐이딩이란 뜻인데 이게 무엇이냐하면 예를 들어 텍스트 단락의 글자 색은 문서 전체의 글자 색을 정해 놓은 스타일 규칙을 따를 수도 있고 브라우저에서 기본적으로 정해놓은 글자 색을 다를 수도 있고 웹 제작자가 정해 놓은 선택자의 글자색을 따를 수 있다 이럴 때 어느것을 먼저 따른것인가? 라는 우선순위이다. '위에서 아래로 흐르는 스타일시트' 라는 뜻으로 쓰인다.
이 방법에는 다음 두가지 원칙이 있다.
1. 스타일 우선순위 - 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 적용
2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
스타일 우선순위의 세가지 개념
1-1 얼마나 중요한가? - 중요도(importance)
사용자 스타일 시트가 최우선!! -> 중요 스타일 -> 기본적인 브라우저 스타일 시트
사용자 중요->제작자 중요-> 제작자 일반-> 사용자 일반-> 브라우저 스타일 시트 순이다.
그리고 같은 태그의 스타일이여도 중요표시가 붙은 스타일 태그가 선택되어 적용된다.
<style>
p { font-size: 20px; color:blue; }
p { font-size:10px; color:red; !important; }
</style>
일 경우에 뒤에 important가 붙은게 중요 스타일로 받아 들여져서 2번째 p태그가 적용된다.
1-2 얼마나 한정지을 수 있는가 - 명시도
스타일이 충돌 한다면 스타일 적용 범위에 따라 우선순위를 정할 수도 있다. 스타일 적용 범위가 좁을수록 우선순위가 높아진다.
태그 스타일 -> 클래스 스타일-> id 스타일-> 인라인 스타일 순으로 왼쪽에서 오른쪽으로 올수록 높은 우선순위를 갖는다.
1-3 소스에서의 순서
그렇지 않고 만약 important가 없이 위의 p태그 처럼 나란히 코딩했으면 제일 위에 있는게 적용된다.
스타일 상속
웹 문서에서 사용하는 여러 태그들은 서로 포함 관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 한다.
예를 들어 <body>태그는 <h1>과 <ul> 태그의 부모 요소이고 <ul>은 다시 <li>태그의 부모 요소이기 때문에 body 태그 스타일이 그대로 <h1>과 <li>태그에도 적용이 된다. 하지만 모든게 상속은 되는것이 아니라 배경색이나 배경이미지는 상속되지 않는다.(만약된다면 엄청난 혼란이...)
'front-end > CSS' 카테고리의 다른 글
| CSS 포지셔닝 (0) | 2018.11.13 |
|---|---|
| CSS 레이아웃을 위한 스타일(border,margin,padding등) (0) | 2018.11.13 |
| 색상과 배경을 위한 스타일(background 관련) (0) | 2018.11.12 |
| CSS 목록 스타일(불릿 없애기등) (0) | 2018.11.12 |
| CSS 텍스트 관련 스타일(font, text의 속성들) (0) | 2018.11.11 |