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
웹에서 확인해 보아야겠죠?
폰트 색상이 빨간색으로 잘 적용되었네요!
다음시간에는 태그선택자에 대해서 배워보겠습니다.
'Publisher > Mark Up' 카테고리의 다른 글
반응형 테이블 데모 모음 링크 (0) | 2018.07.26 |
---|---|
[CSS STYLE 태그선택자] CSS 기초 CSS 입문. Sublime Text 사용. HTML 편집기 프로그램 써브라임 텍스트 (0) | 2016.09.28 |
[CSS기초] CSS 입문 CSS 시작하기 전 셋팅하기. HTML 편집기 프로그램 써브라임 텍스트 Sublime Text (0) | 2016.09.28 |
HTML5 기본 용어정리 및 사용법! (2) | 2016.09.08 |
HTML/CSS 입문 사용 할 HTML 편집기 프로그램 선택하기. 써브라임 텍스트 (0) | 2016.09.06 |