CSS style 첫번째 시간이에요.

이번시간에는 전체선택자에 대해서 배워볼까요?



* 전체 선택자 : 말 그대로 모든 태그를 선택해서 속성을 줄 수 있는 태그입니다.

보통은 홈페이지만들때 기본적인 간격을 조정하기위해 전체선택자를 이용해서
*{margin:0; padding:0;} 으로 모든 기본 속성의 간격값을 없애주곤 합니다.

그럼 이제 들어가볼까요?


2016/09/28 - [블로그 강의/CSS3] - [CSS기초] CSS 입문 CSS 시작하기 전 셋팅하기. HTML 편집기 프로그램 써브라임 텍스트 Sublime Text


시작은 저번 포스팅에서 보여드렸던 부분부터 진행하겠습니다.


못보신 분들은 링크로 들어가셔서 확인 먼저 해보세요 :D



자~! 

이제 들어가볼까요 ^^?



먼저 HTML에 태그를 이력해야겠죠??

저는 h1 ~ h6 태그로 입력했어요!
보시는 분들도 편하고 폰트 크기도 커서 알맞을 것이라고 생각됩니다 ^^



태그를 입력했으니 텍스트도 입력해볼게요.

h1 ~ h6 표시도 함께 텍스트에 표시했어요.
HTML을 입력했으니 확인해봐야겠죠?



sublime text에서 웹브라우저로 확인 하는 방법은 마우스 오른쪽 클릭을 한 후
사진에 보이는 위치(아래서 4번째)에 있는 Open In Browser으로 들어가시면 됩니다.



웹 브라우저로 열고 입력했던 텍스트 확인이 가능하죠?



이번엔 CSS Style 속성을 넣으보겠습니다.

전체선택자는 태그에 " * "를 입력하고 뒤쪽에 속성을 입력하시면 된답니다.
표기방법은 *{속성} 입니다.
속성은 추후에 조금씩 더 알아보도록하겠습니다.



속성에는 폰트에 색상을 지정해주는 {color:red;} 을 입력해보도록 하겠습니다.

color 속성에 색상을 넣는 방법은 3가지가 있습니다.
1. 컬러 색상을 영문으로 입력하는 방법 ex) red, yellow, blue…
2. 컬러 코드를 이용하는 방법 ex)흰색=#ffffff, 검정=#000000…
3. 컬러코드 단축표기 방법 
* 단 컬러코드 단축표기 방법에는 6자리중 2자리씩 끊어서 그 2자리가 반복되는 경우에만 가능합니다. 
ex) #ffffff=#fff, #000000=#000



웹에서 확인해 보아야겠죠?


폰트 색상이 빨간색으로 잘 적용되었네요!

다음시간에는 태그선택자에 대해서 배워보겠습니다.


+ Recent posts