안녕하세요, 여행벌입니다.

오늘은 전체 선택자와 태그 선택자에 대해서 포스팅해보겠습니다.

전체 선택자(*)

전체 선택자는 말 그대로 스타일을 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고 전체 선택자로는 * 을 사용합니다. 전체 선택자는 주로 문서의 여백이나 글꼴, 크기 등 기본 스타일을 초기화할 때 사용합니다.

<style>
          *{ 속성 : 속성값; }
</style>

태그 선택자

태그 선택자는 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다. 예를 들어 p 선택자를 정의하면 웹 문서의 모든 p 태그의 요소들에 스타일이 적용됩니다.

<style>
          태그 { 속성 : 속성값; }
</style>

태그와 요소의 차이점

HTML 공부를 하다보면, '태그'와 '요소' 라는 단어가 자주 등장합니다. 둘은 비슷하지만 다르기 때문에 차이를 알아두시면 앞으로 공부하시는데 도움이 될 것 같습니다.

<p> 얘가 요소입니다. </p>

<p>, </p> 가 우리가 말하는 태그이고, 태그가 적용된 '얘가 요소입니다.' 가 요소입니다. 우리가 적용하는 스타일은 태그 안에 있는 요소에 적용하는 것입니다.

예시 - 전체 선택자

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		* {
			font-size: 3em;
		}
	</style>
</head>

<body>
	<div class="head">Header영역에 속하는 친구</div>
	<p> 그냥 p 태그로 글씨 쓰기1 </p>
	<p> 그냥 p 태그로 글씨 쓰기2 </p>
	<p> 그냥 p 태그로 글씨 쓰기3 </p>
	<span>span 태그~~~~</span>
</body>

</html>

전체 선택자를 이용해서 font 크기를 키워보겠습니다. 

태그 종류와 상관 없이 모든 요소들에 스타일이 적용된 것을 확인할 수 있습니다.

이번에는 p 태그만 태그 선택자를 이용해서 글씨에 빨간 색깔을 적용해보겠습니다.

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		* {
			font-size: 1.5em;
		}
		p{
			color : red;
		}
	</style>
</head>

<body>
	<div class="head">Header영역에 속하는 친구</div>
	<p> 그냥 p 태그로 글씨 쓰기1 </p>
	<p> 그냥 p 태그로 글씨 쓰기2 </p>
	<p> 그냥 p 태그로 글씨 쓰기3 </p>
	<span>span 태그~~~~</span>
</body>

</html>

태그가 p인 요소들만 스타일이 적용된 것을 확인할 수 있습니다.

전체 선택자와 태그 선택자는 클래스 선택자, 아이디 선택자 만큼

많이 사용되므로 꼭 익혀두시길 권장합니다!

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 구글 웹폰트 적용하기  (0) 2020.04.07
[HTML+CSS] 글꼴 관련 스타일 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그  (0) 2020.04.05
[HTML+CSS] 드롭다운 목록 만들기 <select> 태그  (0) 2020.04.04

안녕하세요, 여행벌입니다.

오늘은 클래스(class), 아이디(id) 선택자에 대해서 포스팅해보겠습니다.

클래스(class) 아이디(id) 선택자

 클래스와 아이디 선택자 모두 특정 요소를 대상으로 스타일을 적용하기 위한 선택자입니다. 둘의 차이는 문서 안에 반복해서 쓰이냐 안쓰이냐 입니다. 아이디(id) 선택자는 문서 안에 단 한 번만 사용해야 되고, 클래스(class) 선택자는 문서 안에 여러 번 사용해도 됩니다. 아이디(id) 선택자도 문서 안에 여러 번 사용해도 스타일을 적용할 수 있습니다. 하지만, 아이디(id) 선택자는 문서 안에 단 한 번만 사용하기로 사회적 '약속' 을 했기 때문에 꼭꼭 문서에 단 한 번만 사용해야 합니다. 반대로 클래스(class) 선택자는 반복해서 사용해도 되기 때문에 문서 안에서 여러 번 반복해서 사용해도 문제가 없습니다.

아이디(id) 사용 방법

<태그 id="id명"> </태그>

 아이디(id)는 태그 안에 id="아이디명" 으로 값을 부여할 수 있습니다.

 스타일을 적용하기 위해서는 #아이디명 을 이용하면 됩니다.

<style>
          #아이디명 { 속성 : 속성값; }
</style>

클래스(class) 사용 방법

<태그 class="class명"> </태그>

 클래스(class)는 태그 안에 class="클래스명" 으로 값을 부여할 수 있습니다.

 스타일을 적용하기 위해서는 .클래스명 을 이용하면 됩니다.

<style>
          .클래스명{  속성 : 속성값; }
</style>

클래스(class) 와 아이디(id) 우선순위

 클래스와 아이디의 우선순위는 아이디가 더 높습니다. 따라서, 동일한 태그에 클래스와 아이디를 이용해서 서로 다른 스타일을 적용하면 아이디로 적용한 스타일이 적용됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		body{
			background-color : black;
		}
		p{
			font-size : 3em;
		}
		#testId{
			color : blue;
		}
		.testClass{
			color : red;
		}
	</style>
</head>
<body>
	<p class="testClass" id="testId">클래스는 빨간색, 아이디는 파란색 적용</p>
</body>
</html>

 동일한 p태그에 "testClass"라는 class와 "testId"라는 id 를 부여했습니다. 그 후, class 선택자를 이용해 글씨 색깔을 빨간색으로, id 선택자를 이용해 글씨 색깔을 파란색으로 부여했습니다.

 결과는 위와 같이 id 선택자를 이용한 스타일이 적용된 것을 볼 수 있습니다.

예시

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
	</style>
</head>
<body>
	<div>블록1</div>
	<div>블록2</div>
	<div>블록3</div>
	<div>블록4</div>
</body>
</html>

 다음과 같은 html 태그가 있을 때, 우리는 블록1, 블록3 은 너비를 키우고 글씨 색깔을 파란색으로 부여하고 싶고, 블록2, 블록4 는 높이를 키우고 글씨 색깔을 빨간색으로 부여하고 싶다면 블록1, 블록3 / 블록2, 블록4에 각각 동일한 클래스 명을 부여해 한 번에 스타일을 적용하면 됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
		.widthBlue{
			width : 500px;
			color : blue;
		}
		.heightRed{
			height : 200px;
			color : red;
		}
	</style>
</head>
<body>
	<div class="widthBlue">블록1</div>
	<div class="heightRed">블록2</div>
	<div class="widthBlue">블록3</div>
	<div class="heightRed">블록4</div>
</body>
</html>

 위와 같이 특정 요소에게 스타일을 적용하고 싶을 때 클래스(class)와 아이디(id)를 사용하면 됩니다. 정말 정말 많이 쓰이는 선택자이므로 꼭 둘의 차이점에 대해서 알아두세요!

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 글꼴 관련 스타일 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그  (0) 2020.04.05
[HTML+CSS] 드롭다운 목록 만들기 <select> 태그  (0) 2020.04.04
[HTML+CSS] 사용자의 입력을 받는 <input> 태그  (0) 2020.04.03

안녕하세요, 여행벌입니다.

오늘은 그래프 탐색 기법 중 깊이 우선 탐색(DFS)에 대해서 포스팅해보겠습니다.

깊이 우선 탐색(DFS)

 깊이 우선 탐색은 탐색할 때 한 방향으로 갈 수 있을 때까지 계속 가다가 더 이상 갈 수 없게 되면 다시 가장 가까운 갈림길로 돌아와서 다른 방향으로 탐색을 진행하는 순회 방법입니다. 깊이 우선 탐색은 재귀 함수를 이용해 구현하고 너비 우선 탐색과 마찬가지로 방문한 정점들을 체크하는 bool 배열이 필요합니다.

예시

 DFS 탐색은 다음과 같은 순서로 진행됩니다.

 1) 현재 탐색 중인 노드와 연결된 노드 중, 방문하지 않은 노드가 있다면 방문하지 않은 노드로 재귀 함수를 호출하며 탐색을 진행.

 2) 1의 과정을 가능한 모든 노드를 탐색할 때까지 반복한다.

 너비 우선 탐색과는 다르게 현재 탐색 중인 노드에서 연결된 노드로 탐색을 진행하지, 시작 노드에서 가까운 노드부터 탐색을 진행하지 않습니다.

코드 구현 (C)

인접 행렬로 표현된 그래프에 대한 DFS

bool visited[MAX_VERTIECES];

void dfs_mat(GraphType* g, int v) {
	visited[v] = TRUE;
	printf("%d 노드 탐색 중 \n", v);
	for (int w = 0; w < g->n; w++)
		if (g->adj_mat[v][w] && !visited[w])
			dfs_mat(g, w); // 재귀점으로 다음 노드 호출.
}

인접 리스트로 표현된 그래프에 대한 DFS

void dfs_list(GraphType* g, int v) {
	GraphNode* w;
	visited[v] = TRUE;
	printf("%d 노드 방문 중\n", v);
	for (w = g->adj_list[v]; w; w = w->link)
		if (!visited[w->vertex])
			dfs_list(g, w->vertex);
}

코드 구현 (C++)

2차원 배열로 표현된 그래프에 대한 DFS

int graph[MAX_VERTICES][MAX_VERTICES];
bool visited[MAX_VERTICES];

void dfs_mat(int v) {
	visited[v] = TRUE;
	cout << v << "노드 탐색 중 \n";
	for (int w = 0; w < MAX_VERTICES; w++)
		if (graph[v][w] && !visited[w])
			dfs_mat(w);
}

벡터 배열로 표현된 그래프에 대한 DFS

vector<int> graph[MAX_VERTICES];
bool visited[MAX_VERTICES];

void dfs_mat(int v) {
	visited[v] = TRUE;
	cout << v << "노드 탐색 중 \n";
	for (int w = 0; w < graph[v].size(); w++)
		if (graph[v][w] && !visited[w])
			dfs_mat(w);
}

 정점의 수가 너무 커 그래프를 2차원 배열로 표현할 수 없는 경우, 벡터 배열로 표현해야만 그래프를 표현할 수 있으므로, 벡터 배열로 표현하는 그래프에 대한 DFS를 익혀두시면 알고리즘 문제를 푸는데 도움이 될 것 같습니다.

깊이 우선 탐색의 시간 복잡도 분석

 정점의 수가 n이고 간선의 수가 e인 그래프

● 그래프가 인접 리스트로 표현되어 있는 경우 O(n + e)

● 그래프가 인접 행렬로 표시되어 있는 경우 O(n^2)

 

'Computer Science > Algorithm' 카테고리의 다른 글

[알고리즘] 최단 경로 알고리즘 - 다익스트라(Dijkstra)  (0) 2020.04.29
[알고리즘] 트라이(Trie) 란  (0) 2020.04.23
[알고리즘] 너비 우선 탐색(BFS) 이란  (0) 2020.04.03
[알고리즘] 서로소 집합(Disjoint set) & 유니온-파인드 (Union-Find) 란  (1) 2020.04.01
[알고리즘] 합병 정렬(Merge sort) 란 - travelbeeee  (0) 2020.01.15

안녕하세요, 여행벌입니다.

1장 연습문제 5번 문제풀이를 포스팅해보겠습니다.

저도 아직 배우고 있는 입장이라, 틀린 부분이 있을 수 있습니다!

공부하실 때 참고용으로 사용해주시면 감사합니다 :)

05 Boolean 추상 자료형을 정의하고, 다음과 같은 연산자들을 포함시켜라.

 And, Or, Not, Xor

 

객체 정의 := 참 또는 거짓을 담고 있는 요소

연산 정의

   Create( ) := 부울 자료형 요소를 생성한다.

   True(b) := 부울 자료형을 참으로 초기화한다.

   False(b) := 부울 자료형을 거짓으로 초기화한다.

   And(b1, b2) := 부울 자료형 b1과 b2가 모두 참이라면 참, 아니라면 거짓을 반환한다.

   Or(b1, b2) := 부울 자료형 b1과 b2가 모두 거짓이라면 거짓, 아니라면 참을 반환한다.

   Xor(b1, b2) := 부울 자료형 b1과 b2가 다르다면 참, 같다면 거짓을 반환한다.

   Not(b) := 부울 자료형 b가 참이라면 거짓, 거짓이라면 참을 반환한다.

 

 

'Computer Science > C언어로쉽게풀어쓴자료구조' 카테고리의 다른 글

[C언어로 쉽게 풀어 쓴 자료구조] 10장 연습문제 해답 - travelbeeee  (22) 2020.01.14
[C언어로 쉽게 풀어 쓴 자료구조] 9장 연습문제 해답 - travelbeeee  (10) 2020.01.13
[C언어로 쉽게 풀어 쓴 자료구조] 8장 연습문제 해답 - travelbeeee  (12) 2020.01.09
[C언어로 쉽게 풀어 쓴 자료구조] 7장 연습문제 해답 - travelbeeee  (8) 2020.01.08
[C언어로 쉽게 풀어 쓴 자료구조] 6장 연습문제 해답 - travelbeeee  (19) 2020.01.07

+ Recent posts

티스토리툴바