[HTML] HTML Basic Syntax-(2)

CSS Basic Selector(html 에서 css 적용)

1

<style> "여기 안에 디자인을 적용할 CSS 코드 구현" </style>

CSS 디자인은 HTML 문서에서 <style> 태그 안에 구현된다.

1

<link rel="stylesheet" type="text/css" href="css/mystyle.css">

하지만 만약 CSS 파일이 외부에 작성되어 있을 경우 위와 같이 HTML 문서의 <head> 태그 안에서 경로를 알려줘야 한다. 이 때 <link> 태그를 이용하여 작성하는데, link 태그 안에서 href 속성의 경로로 CSS 파일을 가져온다.

Universial Selector(전체 선택자)

1

* { 속성: 값; 속성: 값; .....}  <!-- 기본 syntax -->

1

* { background-color: lime; }

전체 선택자는 말 그대로 전체를 선택한다는 뜻이다. 문서의 모든 요소에 스타일(디자인)을 적용할 때 사용한다. 가장 앞에 전체를 나타내는 * 기호를 사용한다.

예시의 경우 body 부분에 텍스트 요소들만 있다면 글의 배경색은 모두 라임색이 된다.

Type Selector(타입 선택자)

1

태그명 { 스타일 규칙 }  <!-- 기본 syntax -->

1
2
3
4
5
6
7
8
9
10
11
12

..
<style>
	p {
		font-style: italic;
	}
</style>
..
<body>
    <p> 예시입니다. </p>
    <p> p태그의 모든 텍스트에 </p>
    <p> 기울임 글꼴 스타일이 적용됩니다. </p>
</body>

타입 선택자는 특정 태그를 사용하는 모든 요소에 스타일을 적용한다. 따라서 블럭이 시작되기 전 태그명을 명시하고 스타일을 적용한다.

Class Selector(클래스 선택자) / Id Selector(id 선택자)

1

.클래스명 { 스타일 규칙 } <!-- 기본 syntax -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

...
<title>CSS study</title>
<style type="text/css">
	li{
		color: orange;
	
	}
	/*
		css 선택자 : 클래스를 선택할 때는 .클래스명 , 아이디를 선택할 때는 #아이디명 으로 사용 
		디자인쪽에서는 class 를 많이 사용하고 개발 부분에서는 1개만 선택해야 해서 id 많이 사용
		
		class 나 id 지정해준 애들을 우선순위가 더 높다?
		기본적으로 순차적인 구조지만 지정해준 애들이 우선순위 더 높음
	*/
	.ct{ 
        color: lime; 
    }
</style>
</head>
<body>
	<ul>
		<li>css는 웹사이트의 디자인 스타일을 담당</li>
		<li>html은 웹문서의 컨텐트를 담당</li>
		<li class="ct">javascript는 웹문서의 행위를 담당</li>
		<li>jsp는 서버의 동적인 페이지 구현을 담당 </li>
		<li class="ct">Servlet은 java web application의 기반기술로서 컨트롤러의 역할을 담당</li>
	</ul>
</body>
</html>

클래스 선택자는 특정 부분만 선택해서 스타일을 적용한다. 앞서 살펴보았던 타입 선택자는 해당하는 태그의 모든 요소에 스타일을 지정하지만 예시와 같이 list의 속성 <li> 으로 class 이름을 부여한다면 원하는 부분만 스타일을 적용할 수 있게 된다.

기본형은 클래스명 앞에 . 을 적어 특정부분만 적용시킨다 .

위의 예시에서 배경색은 <li> 태그 안의 전체에 해당하는 텍스트의 색깔을 오렌지 색으로 적용했다.하지만 <li> 의 속성 중에서 이름이 ct인 클래스의 텍스트는 라임색으로 지정하여 해당 클래스의 색깔은 다르게 나오게 된다.

기본적으로 CSS는 순차적인 구조로 적용이 되긴 하지만 (일반적으로 순서대로 코드가 작성되기 때문) 범위가 좁아질 수록 우선순위가 높아진다고 할 수 있다.(전체 선택자 - 타입선택자 - 클래스 선택자 / id 선택자)

1

#아이디명 { 스타일 규칙 } <!-- 기본 syntax -->

id 선택자도 역시 클래스 선택자와 비슷하게 웹 문서의 특정 부분을 선택하여 스타일을 적용시키는데 사용된다. 대신 클래스와의 차이점이라면 클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것이다.

클래스 선택자와 id 선택자는 속성값으로 사용된다.

div / span

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

...
<head>
...
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<body>
<!-- css는 div, 개발자는 span을 많이 사용 ==> 영역을 잡는 부분에서 차이가 있다 -->
<div>이 부분은 div 영역입니다</div>
<span>이 부분은 span 영역입니다</span>

<!-- css selector 는 class는 .클래스명, id는 #아이디명 
	 testDiv class 는 orange 색상, testSpan id 는 yellow 색상 적용시켜 본다
-->
<div class="testDiv">이 부분은 testDiv 클래스가 적용된 div 영역입니다</div>
<div>이 부분은 div 영역입니다</div>
<div class="testDiv">이 부분은 testDiv 클래스가 적용된 div 영역입니다</div>
<span id="testSpan">이 부분은 testSpan 아이디가 적용된 span 영역입니다</span>
</body>
</html>
  • div 와 span 태그는 영역을 잡는 부분에서 차이가 있다. div는 div의 내용과 div가 자리하는 한 줄 전체의 영역(빈 공간까지)을 포함하고 span영역은 내용이 자리하는 영역만을 나타낸다.

You may also enjoy