'CSS' 태그의 글 목록

CSS

[IT·CSS] CSS 텍스트 표현, 다양한 스타일 2022.07.31
[IT·CSS] CSS기초에 대해서 알아보기 2022.07.31
[IT·HTML+CSS] CSS 선택자 종류와 정의 설명하기 2021.07.15
[IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) 2021.07.01

[IT·CSS] CSS 텍스트 표현, 다양한 스타일

햇살아빠 2022. 7. 31. 20:48

2022. 7. 31. 20:48

728x90

글꼴을 지정하는 font-family
속성 CSS에서 사용하는 단위 em/ rem/ ex/ px/ pt

font-family:<글꼴 이름> | <글꼴 이름>, <글꼴 이름>]
body{font-family: "맑은 고딕", 돋움, 굴림} 

font-style: normal | italic | oblique
font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900

@font-face { font-family: <글꼴 이름>; src: <글꼴 파일>[글꼴 파일>, <글꼴 파일>,.....];

@font-face{ 
	font-family: 'Ostrich';
	src: local('Ostrich Sans'),
			 url('fonts/ostrich-sans-bold.woff') format('woff'),
			 url('fonts/ostrich-sans-bold.svg') format('svg');

글자색을 지정하는 color속성 16진수나 rgb(또는 rgba), hsl(또는 hsla) #000000 → #000 표기가능 hsl과 hsla로 표현하는 방법 hsl : hue(색상), saturation(채도), lightness(명도) / alpha(불투명도)

h1{ color:rgb(0,0,255);}
h1{ color: rgba(0,0,255,0.5);}

텍스트를 정렬하는 text-align속성 문단의 텍스트 정렬 방법을 지정 합니다.

text-align: start;  > 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다.
text-align: end;  > 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다.
text-align: left;  > 왼쪽에 맞추어 문단을 정렬합니다.
text-align: right;  > 오른쪽에 맞추어 문단을 정렬합니다. 
text-align: center;  > 가운데에 맞추어 문단을 정렬합니다. 
text-align: justify;  > 양쪽에 맞추어 문단을 정렬합니다.
text-align: match-parent;  > 부모 요소를 따라 문단을 정렬합니다.

텍스트의 줄을 표시하거나 없애주는 text-decoration속성

text-decoration속성은 텍스트에 밑줄을 긋거나 취소선을 표시합니다.

<body>
	<h1>text-decoration 속성</h1>
	<p style="text-decoration:none">none</p>
	<p style="text-decoration:underline">underline</p>
	<p style="text-decoration:overline">overline</p>
	<p style="text-decoration:line-through">through</p>
</body>

text-shadow: none | <가로거리> <세로거리> <번짐정도> <색상>
text-shadow: 1px 1px 1px black;

텍스트의 대소 문자를 변환하는 text-transform 속성

.trans1{text-transform:none;}
.trans1{text-transform:capitalize;}
.trans1{text-transform:uppercase;}
.trans1{text-transform:lowercase;}
.trans1{text-transform:full-width;}

글자 간격을 조절하는 letter-spacing, word-spacing 속성 letter-spacing 속성은 글자와 글자 사이의 간격을 조절 word-spacing 속성은 단어와 단어 사이 간격을 조절

.spacing1{letter-spacing: 0.2em;}

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

disc → ●
circle → ○
square → ■
decimal → 1,2,3,...
decimal-leading-zero → 01,02,03...
lower-roman → i,ii,iii...
upper-roman → I,II,III...
lower-alpha 또는 lower-latin → a,b,c...
upper-alpha 또는 upper-latin → A,B,C...
none → 불릿이나 숫자를 없앱니다.

.book1 {list-style-type : none;}

list-style-image: <url(이미지 파일 경로)> | none

ul{list-style-image: url('images/dot.png');}

목록을 들여 쓰는 list-style-position 속성 불릿이나 번호의 위치를 들여 쓸 수 있습니다.

list-style-position: inside | outside;

inside: 불릿이나 번호를 기본 위치보다 안으로 들여 사용합니다. 
outside: 기본값입니다.

list-style-type, list-style-image, list-style-position -> list-style

표 제목의 위치를 정해주는 caption-side 속성

caption-side: top | bottom

table { caption-side: bottom;}

셀 사이의 여백을 지정하는 border-spacing 속성

table { border-spacing: 수평거리 수직거리;}

표와 셀 테두리를 합쳐 주는 border-collapse 속성

border-collapse: collapse; 표와 셀의 테두리를 합쳐 하나로 표시합니다. 
border-collapse: separate; 표와 셀의 테두리를 따로 표시합니다. 기본값입니다.

font-family : 글꼴 종류
font-size : 글자 크기
font-style : 글자를 이탤릭체로 표시할지 지정
font-weight : 글자의 굵기 지정
color : 글자색을 지정
text-decoration : 텍스트에 밑줄이나 취소선 표시여부
text-transform : 텍스트 전체, 또는 첫 글자를 대문자로 표시
text-shadow : 텍스트에 그림자 추가
letter-spacing : 글자 사이의 간격을 지정
word-spacing : 단어 사이의 간격을 지정
text-align : 텍스트 정렬 방법 지정
line-height: 줄 간격 조정
16진수 : 빨강, 초록, 파랑 각각 두 자리씩 총 여섯자리의 16진수로 색상을 표현
rgb, rgba :
hsl, hsla :

저작자표시 비영리 변경금지

[IT·CSS] CSS기초에 대해서 알아보기

햇살아빠 2022. 7. 31. 18:09

2022. 7. 31. 18:09

728x90

■ CSS(Cascading Style Sheets)란 무엇인가?

CSS에대해서 혹시 궁금하셨던 부분이 있으시다면? 어디까지 알고계셨을까요? 그렇다면 지금부터 꼼꼼하게 설명드리도록 할게요.

■ 웹 문서에서 스타일(style)이란 어떻게 또 정리해볼 수 있을까요?

HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가르킵니다. 반응형 웹 디자인이란 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말합니다. 스타일규칙이란 속성과 값이 하나의 쌍으로 이루어진 것을 말합니다. 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 합니다. 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 사용자 스타일은 다시 인라인 스타일과 내부스타일 시트, 외부 스타일 시트로 나누어집니다. 스타일시트를 사용하지않고 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 합니다. 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다. 전체선택자는 스타일을 문서의 모든 요소에 적용할 때 사용하고 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다. 테두리 사이에 여백은 약간 두는데 이것을 마진과 패딩이라고 합니다. 타입선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용 id선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용.

즉, id스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용 #아이디명 { 스타일규칙 } 클래스 선택자와 id선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것이죠.

선택자1, 선택2 { 스타일 규칙 } !important를 붙이게되면 그 스타일은 다른 스타일보다 우선순위가 높아짐을 뜻합니다.

h1 { background-color: blue; !important; }

인라인스타일: 태그 안에 style속성을 사용해 해당 태그만 스타일을 적용

id 스타일: 한 문서에 한 번만 적용(선택자 이름 앞에 #기호를 사용)

클래스 스타일: 선택자 이름앞에 .를 사용

타입스타일: 웹 문서에 사용한 특정태그에 스타일을 똑같이 적용

- 전체선택자: * {margin:0;}

- 타입선택자: p {font-style: italic;}

- 클래스 선택자: .bg {background-color}

- id선택자: #container {windth: 500px;}

- 그룹선택자: h1, h2 {text-align: center;}

저작자표시 비영리 변경금지

[IT·HTML+CSS] CSS 선택자 종류와 정의 설명하기

햇살아빠 2021. 7. 15. 23:40

2021. 7. 15. 23:40

728x90

CSS선택자에대한 정의

이번에는 html의 기본적인 요소에이어 CSS 선택자에대해서 설명해보려한다. 선택자selector는 html 문서 내부의 특정요소를 선택하는 방법이다. 반드시 작업하는데 있어서는 문서 내부의 특정요소를 선택할 수 있어야된다. 그래야 해당요소에 스타일을 적용하거나 기능을 입힐 수 있기때문이다. 사실상 CSS에서 선택자에는 답이없다는 말이있다. 예를들면 A라는쪽에서 B에게 어떠한 것을 시켰다고 가정해보자, 하지만 B는 그 지시를 그대로 따르지않고 한 가지로 다양하게 풀어 해석을 해보았다. 이러한방식으로 한가지에서 다양한 방법으로 풀어볼 수 있다는 것이다. 결국 실질적으로 다른 프로그래밍 언어에서도 웹의 데이터를 수집할 때 선택자를 많이 사용한다. 따라서 CSS선택자에대해 종류와 정의에대해서 분석할 필요가 있다.

CSS선택자는 무엇인가?

CSS선택자는 특정한 html태그를 선택할 때 사용하는 기능이라는 의미를 가지고있다. 이에 가장 큰 이유는 선택자를 사용하여 특정한 html태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다는 것이다. 사실상 그냥 일반적으로 레이아웃 및 포멧만 구축하는 것이아니라 원하는 방향과 그대로 구축할 수 있어야 그만큼 더욱 더 가치있는 것이 아닐까 싶다. 그래서 먼저 설명하기에 앞서 CSS블록의 예시를 아래처럼 공유하려한다.

h1{color:red;} 이렇게 CSS블록을 예제로 들어볼 수 있다. 여기서 h1은 선택자를 의미하고 color는 스타일 속성, red는 스타일 값을 의미한다. 이러한 방식으로 짜는 것을 CSS블록이라고 부른다. 이에대한 코드는 style 태그내부에 입력하여 사용하게되는데 이때 style 태그 내부에 입력되는 코드를 스타일시트라고 부른다. 하므로 스타일시트 풀예제를 아래와같이 짜보려한다.

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic</title>

<style>

h1 {

color: red;

background-color: orange;

}

</style>

</head>

<body>

<h1>CSS3 selector basic</h1>

</body>

</html>

따라서 선택자 종류 개요에 대해서 간단하게 알아보려한다. 선택자의 종류에는 이렇게 나열해볼 수 있다. 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 후손 선택자, 자손 선택자, 속성 선택자, 동위 선택자, 구조 선택자, 반응 선택자, 상태 선택자, 링크 선택자, 문자 선택자, 부정 선택자 이렇게 구분해볼 수 있다. 이렇게 간략하게 정리해본데이어 구체적으로 선택자 형태와 선택자 예에 관련하여는 하나씩 상세히 보려한다.

전체 선택자란 무엇인가?

html문서 안에있는 모든 태그를 선택할 때는 전체 선택자를 사용한다. 전체 선택자의 예를 들어보면 선택자의 형태는 *, 설명은 html 페이지 내부의 모든 태그를 선택한다. 그러면 전체 선택자에 대해서는 아래처럼 간략하게 코드를 짜볼 수 있겠다.

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic page</title>

<style>

/* 모든 태그의 color 속성에 red 키워드를 적용한다. */

* { color: red; }

</style>

이렇게 일반적으로 전체 선택자를 사용하게되면 body태그내부에 있는 요소에만 스타일 속성이 적용된 것처럼 보인다. 따라서 이렇게 body태그에만 적용되었다고 생각하기 쉬울 수 있기 때문에, head 태그, title 태그, style 태그까지 모두 선택하여 jQuery를 사용하여 적용해야한다. 따라서 전체선택자의 범위는 아래와 같이 정리해볼 수 있다.

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic page</title>

<script src="http://code,jquery.com/jquery-3.3.1.slim.min.js"></script>

<script>

/웹 페이지가 모두 준비되면 /

$(document).ready(function () {

/* 모든 태그의 border 속성에 5px solid black을 적용합니다. */

$('*').CSS('border', 5px solid black');

이러한 방식으로 간단하게 정리를 해볼 수가 있다. 다음으로는 태그 선택자에대해서 간략하게 설명해보려한다.

태그 선택자는 html 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하게되는 선택자이다. 즉, 간단히 의미를 풀어보면 h1태그의 color 속성에 red키워드를 적용하고 p태그의 color 속성에 blue 키워드를 적용시키는 것이다. 따라서 아래와 같이 정리해볼 수있겠다.

<style>

/* h1태그의 color 속성에 red 키워드를 적용합니다. */

h1 { color: red; }

이런식으로 코드를 입력하면 h1 태그에는 빨간색이 적용되고 p 태그에는 파란색이 적용되는 것을 확인 할 수 있다. 다음으로는 아이디 선택자와 클래스 선택자를 간단히 설명해보려한다. 사실상 이 두가지 선택자는 스타일시트에서 가장 많이 사용되는 선택자이다. 대부분 웹페이지의 레이아웃을 구성하고 디자인을 적용할 때 사용되는 태그이므로 반드시 꼭 숙지해야할 필요가있다.

아이디선택자란 무엇인가?

특정한 id속성을 가지고있는 태그를 선택할 때 사용하는 선택자라고 이해하면 된다. 사실상 웹 표준에 id속성은 웹 페이지 내부에서는 절대 중복되면 안 된다라는 규정이있다. 그래서 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용하는 것이다. 예를들면 선택자의 형태는 이러하다. #아이디, 설명은 아이디 속성을 가지고있는 태그를 선택한다. 아이디 선택자를 적용한 코드의 틀은 이러하다.

<style>

/* id 속성값으로 header를 가지는 태그의 스타일을 지정합니다. */

#header {

with: 400px; margin: 0auto;

background: red;

}

/* id 속성값으로 wrap을 가지는 태그의 스타일을 지정합니다. */

#wrap

이러한 방식으로 여러가지 자료를 조금 더 찾아보며 기본적인 내용을 적용시켜 계속해서 반복해볼 필요가있다. 실질적으로 웹사이트 구축할때 가장많이 사용되는 부분이므로 그냥 넘어가면 안되는 부분이다. 이렇게 아이디 선택자와 클래스 선택자의 심화과정 및 내용을 조금 더하여 나머지 선택자에 관련해서 다음편에서 구체적으로 정리해보려한다.

'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글

[IT·HTML+CSS] HTML에 필요한 기본적인 응용태그 정리9(4) (0)	2021.07.07
[IT·HTML+CSS] HTML에 필요한 기본적인 태그 의미와 사용법(3) (0)	2021.07.04
[IT·HTML+CSS] HTML에 필요한 각종 여러 태그 알아보기(2) (0)	2021.07.02
[IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0)	2021.07.01
[IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0)	2021.07.01

[IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1)

햇살아빠 2021. 7. 1. 14:46

2021. 7. 1. 14:46

728x90

HTML의 기본적인 코드와 설명

위 이미지는 대표적인 코딩프로그램 VISUAL STUDIO CODE에서 간략하게 기본 HTML 포멧을 구성해보았다. 여기서 보시면 우선 첫 번째 줄의 <!doctype html> 태그는 웹 브라우저가 현제 웹 페이지가 HTML5문서임을 인식하게 만들어주는 역할을 한다. 반드시 W3C의 HTML5 명세에따르면 모든 HTML5 문서는 반드시 <!doctype html>태그를 표기해야한다. 그냥 단순 표기한다고 모든것이 해결되는게 아니고 문서의 가장 첫 문단에 위치해주어야한다.

그리고 두번째 줄의 HTML태그는 모든 HTML 페이지의 루트요소이다. 일단 처음에 <!doctype html>로 큰 틀을 잡았다면 전체적인 언어가 어떻게 다른 웹사이트에의해서 검색되고 인식하기 알아야하기때문에 반드시 <html>이라는 태그와 함께 Language의 약자인 Lang="ko">로 표기해주어야한다. 여기서 미리 알고 넘어가야할 부분은 언어표기 부분이다. 다만, 여기서 착각하실수도 있는 부분이있다면, 아 언어를 <html>라는 태그와 함께 표기를 한게 웹사이트에서 언어가 어떻게 보이는지라고 생각하시는 분들도 있을 수 있지만 아래와같이 참고해야할 필요가있다. 이는 구글(Google)과 같은 검색엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식하게 만드는 구조라고 보시면된다. 따라서 언어속성은 아래와같이 이렇게 정리된다고 보시면 됩니다.

html의 언어코드

한국: ko

일본: ja

중국: zh

미국: en

러시아: ru

독일어: de

html 태그tag를 활용한 기본적인 사용법과 예시

다음으로는 <head>태그 내부에 넣을 수 있는 태그가 별도로 있어서 정리해보려한다. 이를 적용하는 방법은 아래와 같이 정리해볼수가 있다. 일단 표기하고자 하는 모든 정보는 <head>와 </head>사이에 들어가야한다. 그 안에 제목을 웹사이트 제목을 넣으려고한다. 제목이다보니 <title>이라는 태그를 넣어볼 것이다. 마찬가지로 <title>의 시작이있으면 마치는 </title>이라는 태그도 있어야한다. 거기에 제목을 "I live in Seoul"로 넣어보려한다.

meta => 웹페이지에 추가정보를 전달한다.

title => 웹페이지의 제목을 의미한다.

script => 웹페이지에 스크립트를 추가한다.

link => 웹페이지에 다른파일을 추가한다.

style => 웹페이지에 스타일시트를 추가한다.

base => 웹페이지의 기본경로를 지정한다.

<head>

<title>I live in Seoul</title>

</head>

이렇게 간략하게 표기해볼 수 있다. 여기서 한가지 짚고 가야할 점은 title 태그의 경우 웹페이지 제목과 관련된 정보를 검색엔진에 전달하게 되므로 입력을 해야 검색시 엔진이 쉽게 찾아낼 수가 있어서 훨씬 유용하다는 것이다.

<글자태그 Tag>

다음으로는 글자태그에대해서 간략하게 설명하려한다. 글자태그는 웹 페이지에서 가장 많이 비중을 차지하는 태그이다. 정말 글자태그가 따로 설정되어있지 않는다면 아마 웹사이트를 들어갔을때 정말 복잡한 구조를 보실 수 있을 것이다. 모두가 동일한 글자(Text)로 구성되어있을 것이며 레이아웃/디자인(Layout/Design)적으로 봐도 구분하기 쉽지않을거라고 생각한다. 그리하여 글자태그를 이런식으로 정리해볼 수가 있다. 간략하게 풀이하면 글자폰트 크기를 의미한다. 글자 폰트 크기의 변수를 주기위해서는 반드시 이러한 태그가 삽입되어야한다. 여기서 h는 heading을 의미하며 구체적인 의미를 보면 크기와 우선순위를 나타내는 부분이다. 따라서 특히나 h1같은 경우에는 보통 큰 제목을 의미하고 h6는 작은제목을 의미하는 부분이다.

h1 =>첫번째로 큰 제목 글자 태그

h2 =>두번째로 큰 제목 글자 태그

h3 =>세번째로 큰 제목 글자 태그

h4 =>네번째로 큰 제목 글자 태그

h5 =>다섯번째로 큰 제목 글자 태그

h6 =>여섯번째로 큰 제목 글자 태그

<Example>

<!doctype html>

<html lang="ko">

<head>

<title>I live in Seoul</title>

</head>

<body>

<h1>heading 1</h1>

<h2>heading 2</h2>

<h3>heading 3</h3>

<h4>heading 4</h4>

<h5>heading 5</h5>

<h6>heading 6</h6>

</body>

</html>

다음으로는 본문태그에대해서 정리해보려한다. HTML5는 아래 예시와 같이 본문태그를 제공하곤 한다.

P => 본문 글자 태그

<!doctype html>

<html lang="ko">

<head>

<title>Seoul</title>

</head>

<body>

<h1>Explain about city</h1>

<p>There are so many huge buildings in Gangnam</p>

<p>People always live busy life everyday</p>

</body>

</html>

<body>안의 <h1>태그는 문단의 제목을 의미하며 아래 <p>태그는 첫번째 문단, 두번째 문단 이런식으로 생성되기 위함이다. 저는 이렇게 <p>를 두줄 입력했으므로 두 문단이 생성됨을 알 수 있다. <P>태그 이외에도 아래와같이 또 다른 본문 태그가 있다.

br => 줄바꿈 태그

hr => 수평줄 태그

<!doctype html>

<html lang="ko">

<head>

<title>Seoul</title>

</head>

<body>

<h1>Lorem ipsum</h1>

<h2>dolor sit amet</h2>

<hr />

<p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<br />

<p>2Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<br />

<p>3Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>

</html>

으로 할때, 아래와 같은 결과물을 만들어 냅니다.

Lorem ipsum

dolor sit amet

1Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3Lorem ipsum dolor sit amet, consectetur adipiscing elit.

'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글

[IT·HTML+CSS] HTML에 필요한 기본적인 태그 의미와 사용법(3) (0)	2021.07.04
[IT·HTML+CSS] HTML에 필요한 각종 여러 태그 알아보기(2) (0)	2021.07.02
[IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0)	2021.07.01
[IT·HTML+CSS] HTML5 기본적인 태그(Tag) 입문과 속성 (0)	2021.07.01
[IT·HTML+CSS] HTML을 위한 VISUAL STUDIO CODE(비쥬얼스튜디오코드) 설치방법 (0)	2021.06.30

PREV 이전 1 2 NEXT 다음

햇살아빠의 IT이야기

CSS

[IT·CSS] CSS 텍스트 표현, 다양한 스타일

[IT·CSS] CSS기초에 대해서 알아보기

■ CSS(Cascading Style Sheets)란 무엇인가?

CSS에대해서 혹시 궁금하셨던 부분이 있으시다면? 어디까지 알고계셨을까요? 그렇다면 지금부터 꼼꼼하게 설명드리도록 할게요.

■ 웹 문서에서 스타일(style)이란 어떻게 또 정리해볼 수 있을까요?

선택자1, 선택2 { 스타일 규칙 } !important를 붙이게되면 그 스타일은 다른 스타일보다 우선순위가 높아짐을 뜻합니다.

h1 { background-color: blue; !important; }

인라인스타일: 태그 안에 style속성을 사용해 해당 태그만 스타일을 적용

id 스타일: 한 문서에 한 번만 적용(선택자 이름 앞에 #기호를 사용)

클래스 스타일: 선택자 이름앞에 .를 사용

타입스타일: 웹 문서에 사용한 특정태그에 스타일을 똑같이 적용

- 전체선택자: * {margin:0;}

- 타입선택자: p {font-style: italic;}

- 클래스 선택자: .bg {background-color}

- id선택자: #container {windth: 500px;}

- 그룹선택자: h1, h2 {text-align: center;}

[IT·HTML+CSS] CSS 선택자 종류와 정의 설명하기

CSS선택자에대한 정의

CSS선택자는 무엇인가?

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic</title>

<style>

h1 {

color: red;

background-color: orange;

}

</style>

</head>

<body>

<h1>CSS3 selector basic</h1>

</body>

</html>

전체 선택자란 무엇인가?

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic page</title>

<style>

/* 모든 태그의 color 속성에 red 키워드를 적용한다. */

* { color: red; }

</style>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 selector basic page</title>

<script src="http://code,jquery.com/jquery-3.3.1.slim.min.js"></script>

<script>

/*웹 페이지가 모두 준비되면 */

$(document).ready(function () {

/* 모든 태그의 border 속성에 5px solid black을 적용합니다. */

$('*').CSS('border', 5px solid black');

이러한 방식으로 간단하게 정리를 해볼 수가 있다. 다음으로는 태그 선택자에대해서 간략하게 설명해보려한다.

<style>

/* h1태그의 color 속성에 red 키워드를 적용합니다. */

h1 { color: red; }

아이디선택자란 무엇인가?

<style>

/* id 속성값으로 header를 가지는 태그의 스타일을 지정합니다. */

#header {

with: 400px; margin: 0auto;

background: red;

}

/* id 속성값으로 wrap을 가지는 태그의 스타일을 지정합니다. */

#wrap

'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글

[IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1)

HTML의 기본적인 코드와 설명

html의 언어코드

한국: ko

일본: ja

중국: zh

미국: en

러시아: ru

독일어: de

html 태그tag를 활용한 기본적인 사용법과 예시

meta => 웹페이지에 추가정보를 전달한다.

/웹 페이지가 모두 준비되면 /