CSS(Cascading Style Sheet) 사용하기

CSS(Cascading Style Sheet)란?
CSS 사용법
- 선택자(selector)
- 박스모델(BoxModel)
CSS 위치속성
의사클래스, 의사요소

CSS(Cascading Style Sheet)란?

HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.
CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다.[나무위키]

CSS 사용법

CSS 선택자(selector)

CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용

전체 선택자
- CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택
- “*” 로 표기
HTML 요소 선택자
- CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택 가능
- ex) h1, h2, h3, title 등
아이디(id) 선택자
- CSS를 적용할 대상으로 특정 요소를 선택할 때 사용.
- 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해준다.
- 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생하기 때문에 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.
클래스(class) 선택자
- 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용
그룹(group) 선택자
- 그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용
- 그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결
- 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다는 장점이 있음
- ex) h1, h2, h3{ color : red; }

id와 class 선택자

초기화면

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>CSS Example</h1>
<p>id와 class차이</p>

</body>
</html>

id에 대해 css를 적용시키고 싶다면 #을 앞에 써주면 h1이 있음에도 불구하고 #temp의 디자인이 적용되는 것을 알 수 있다.
우선순위 id > seletor (아래의 예에서는 #temp > h1)
class도 마찬가지로 p seletor가 있음에도 불구하고 .tmp에 대해 반응한다.
class는 .을 활용한다.(아래의 예에서는 .tmp>p)

size_main

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

#temp {
  color : blue;
}

p {
  font-family: verdana;
  font-size: 20px;
}

.tmp {
  color : white;
  border-style: dotted;
  border-width: 5px 5px;
}

</style>
</head>
<body>

<h1 id = temp>CSS Example</h1>
<p class = tmp>id와 class차이</p>

</body>
</html>

결합 선택자

CSS 선택자는 하나 이상의 선택자를 포함할 수 있으며, 결합 선택자는 연관된 선택자들 간의 관계를 설정해 준다.
자손 선택자(descendant selector)
- 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택
- ex) div p {} -> <div>태그의 하위 요소 중에서 <p>태그를 모두 선택하여 적용
자식 선택자(child selector)
- 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택
- ex) div > p {} -> 모든 <div>태그의 바로 밑에 존재하는 하위 요소 중에서 <p>태그를 모두 선택하는 예제

동위 선택자

동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택

일반 동위 선택자(general sibling selector)
- 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택
- ex) div ~ p {} -> 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택
인접 동위 선택자(adjacent sibling selector)
- 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택
- ex) div + p {} -> 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택

size_main

	<style>
		div{ border: 3px solid #F08080; }
      	div > p{ border: 3px solid #F04090; }
		div ~ p { background-color: #FFE4E1; }
		div + p { background-color: pink; }
	</style>
	<h1>div > p, div + p, div ~ p의 경우</h1>
	<div>
		<p>div > p인 경우</p>
		<p>div > p인 경우</p>
		<p>div > p인 경우</p>
	</div>
	<p>div + p와 div ~ p인 경우</p>
	<p>div ~ p인 경우</p>
	<p>div ~ p인 경우</p>

박스모델(BoxModel)

모든 HTML 요소는 상자로 간주 될 수 있다. CSS에서 “BoxModel”은 디자인과 레이아웃에 대해 이야기 할 때 사용된다.
개발자 도구만 들어가도 박스모델을 볼 수 있다.(가장 안쪽은 content)

size_main

바깥쪽부터 살펴보면,

Margin : 테두리와 이웃하는 요소 사이의 간격(마진은 눈에 보이지 않음)
Border : 패딩 및 내용을 둘러싼 테두리
Padding : 내용과 테두리 사이의 간격(패딩은 눈에 보이지 않음)
Content : 텍스트와 이미지가 나타나는 상자의 내용

(그림 속 글과 실제 border, padding, margin의 크기는 다름에 유의) size_main

<!DOCTYPE html>
<html>
<head>
<style>
div {
  color : black;
  background-color: skyblue;
  width: 300px;
  border: 20px solid blue;
  padding: 100px;
  margin: 40px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

div 왼쪽, 오른쪽 배치
- float을 사용하여 왼쪽과 오른쪽을 나눠서 div를 배치할 수 있다.

size_main

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

.left {
  height: 20px;
  width: 300px;
  background-color: white;
  text-align: center;
  outline-style: solid;
  outline-color: blue;
  outline-width: medium;
  float: left;
  padding: 20px;
}

.right {
  height: 20px;
  width: 300px;
  float: right;
  background-color: white;
  text-align: center;
  outline-style: solid;
  outline-color: blue;
  outline-width: medium;
  padding: 20px;
}


</style>
</head>
<body>

<h1>CSS Example</h1>
<div class = left>div 사용하여 왼쪽에 글쓰기</div>
<div class = right>div 사용하여 오른쪽에 글쓰기</div>
</body>
</html>

CSS 위치속성

디스플레이

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나.

해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가진다.

1) 블록(block)

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<div>, <h1>, <p>, <ul>, <ol>, <form> 요소는 대표적인 블록(block) 요소.

2) 인라인(inline)

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img> 요소는 대표적인 인라인(inline) 요소.

HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있다. 하지만 display 속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있고 반대로 display 속성값이 인라인인 요소의 속성값을 블록으로 바꿀 수도 있다.

요소를 inline으로 바꾸기

<style>
    div { display: inline; }
</style>

display 속성값이 인라인으로 변경된 <div>요소는 해당 라인의 모든 너비를 차지하는 블록 요소의 특징을 잃어버리게 된다.

인라인-블록(inline-block)

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작.
이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다. (블록 요소처럼 margin을 이용하여 여백 지정도 가능)

size_main

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Display</title>
	<style>
		div { 
          width: 100px; 
          height: 50px; 
      }
		.first { background-color: skyblue; }
		.second { background-color: pink; }
		.third { background-color: yellow; }
		.inline { display: inline; }
		.inline-block { display: inline-block; }
	</style>
</head>

<body>
  <p>아래에 나오는 div 요소는 모두 display 속성값이 <strong>블록</strong></p>
	<div class="first">블록</div>
	<div class="second">블록</div>
	<div class="third">블록</div><br>

	<p>아래에 나오는 div 요소는 모두 display 속성값이 <strong>인라인</strong></p>
	<div class="first inline">인라인</div>
	<div class="second inline">인라인</div>
	<div class="third inline">인라인</div><br><br>

	<p>아래에 나오는 div 요소는 모두 display 속성값이 <strong>인라인-블록</strong></p>
	<div class="first inline-block">인라인-블록</div>
	<div class="second inline-block">인라인-블록</div>
	<div class="third inline-block">인라인-블록</div>
</body>
</html>

position 속성

HTML 요소가 위치를 결정하는 방식을 설정합니다.
CSS에서 요소의 위치를 결정하는 방식에는 아래와 같이 4가지 방식이 존재.

1. 정적 위치(static position) 지정 방식

position: static; 로 표시

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.
정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식.(기본적으로 글을 썼을 때)

2. 상대 위치(relative position) 지정 방식

position: relative; 로 표시

해당 HTML 요소의 기본 위치(정적 위치(static position) 지정 방식)를 기준으로 위치를 설정하는 방식입니다.

3. 고정 위치(fixed position) 지정 방식

position: fixed; 로 표시

뷰포트(viewport)를 기준으로 위치를 설정하는 방식.
웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.

4. 절대 위치(absolute position) 지정 방식

position: absolute; 로 표시

고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작. 단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 된다.
하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다.
위치가 설정된 요소라는 것은 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미.

size_main

스크롤을 내려도 고정위치는 계속 그 자리에 위치하고 있는것을 확인할 수 있음.
정적위치는 top, right, bottom, left 속성값에 영향을 받지 않기 때문에 position에 top이 있어도 적용이 되지않는다.
절대위치는 아래의 예에서는 .container에 대해서 적용된다.
상대위치는 정적 위치에 따라 결정된다.

size_main

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		.container {
			border: 3px solid red;
			width: 100%;
			height: 600px;
			position: relative; //상대위치
		}
		.position {
			width: 150px;
			height: 50px;
			top: 100px;
			left: 120px;
		}
		.static {
			border: 3px solid black;
			position: static; //정적위치
		}
		.relative {
			border: 3px solid green;
			position: relative; //상대위치
		}
		.fixed {
			border: 3px solid orange;
			position: fixed; //고정위치
		}
		.absolute {
			border: 3px solid blue;
			position: absolute; //절대위치
		}
	</style>
</head>

<body>

	<h1>정적 위치(static position) 지정 방식의 특징</h1>
	<div class="container">
		<div class="static position">정적 위치(static position)</div>
		<div class="relative position">상대 위치(relative position)</div>
		<div class="fixed position">고정 위치(fixed position)</div>
		<div class="absolute position">절대 위치(absolute position)</div>
	</div>

</body>

</html>

z-index 속성

겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있기 때문.
스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 된다. z-index: 0과 z-index: -1이 있으면 z-index: -1이 적용된 부분이 뒤쪽에 위치된다.

margin으로 가운데 정렬하기

편의상 style태그와 div태그만 작성

size_main

	<style>
		div {
			border: 3px solid #7B68EE;
			width: 300px;
			padding: 10px;
			margin: auto;
		}
	</style>

	<div>margin의 속성값을 auto로 하면,<br>
	수평으로 가운데 정렬 가능<br>
    글자를 추가하면 칸이 넓어지고<br>
    자동으로 정렬을 해준다.
	</div>

의사 클래스(pseudo-class)

선택하고자 하는 HTML 요소의 특별한 ‘상태(state)’를 명시할 때 사용
문법 : 선택자:의사클래스이름 {속성: 속성값;}
- 클래스 사용 : 선택자.클래스이름:의사클래스이름 {속성: 속성값;}
- 아이디 사용 : 선택자#아이디이름:의사클래스이름 {속성: 속성값;}

[대표적인 CSS 의사 클래스]

1) 동적 의사 클래스(dynamic pseudo-classes)

:link
- 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태
:visited
- 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태
:hover
- 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
- :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작
:active
- 사용자가 마우스로 링크를 클릭하고 있는 상태
- 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작
:focus
- 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태

마우스를 가지고 오기 전에는 회색이였는데, 마우스 커서가 링크위로 올라오니(hover) 파란색으로 바뀐다.
그리고 클릭을 하게되면(active), 빨간색으로 바뀐것을 확인할 수 있다.

size_main

	<style>
		a:link {color: orange;}
		a:visited {color: gray;}
		a:hover {color: blue;}
		a:active {color: red;}
		div {
			background-color: orange;
			width: 300px;
			padding: 20px;
			text-align: center;
		}
		div:hover {
			background-color: blue;
			color: white;
		}
	</style>
	<h1>링크 선택자를 이용한 선택</h1>
	<p><a href="#">홈으로 가기!</a></p>
	<div>링크 선택자를 이용한 버튼 만들기!</div>

2) 상태 의사 클래스(UI element states pseudo-classes)

:checked
- 체크된(checked) 상태의 input 요소를 모두 선택
:enabled
- 사용할 수 있는 input 요소를 모두 선택함.
:disabled
- 사용할 수 없는 input 요소를 모두 선택함.

disabled로 설정되어있는 C++은 아예 사용할 수 없도록 선택되어있다.

size_main

	<style>
		span { margin-left: 5px; }
		input { color: pink; }
		input:disabled + span { color: red; }
	</style>
	<h1>input 요소의 스타일 설정</h1>
	<form>
		<input type="checkbox" name="lecture" value="html" checked="checked"><span>HTML</span><br>
		<input type="checkbox" name="lecture" value="css"><span>CSS</span><br>
		<input type="checkbox" name="lecture" value="java"><span>JAVA</span><br>
		<input type="checkbox" name="lecture" value="cpp" disabled="disabled"><span>C++</span>
	</form>

3) 구조 의사 클래스(structural pseudo-classes)

:first-child
- 모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 모두 선택
:nth-child
- 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
:first-of-type
- 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택
:nth-of-type
- 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택 이외에도, 다양한 구조 의사 클래스가 존재한다.

only-of-type : 자식(child) 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택
아래의 예는 <p>태그가 <div>의 자식으로 있을 때 <p>태그를 단 하나만을 가지는 요소를 선택하여 적용되고있다.

size_main

	<style>
		div{ border: 3px solid skyblue;
      		margin-top : 10px;}
		p:only-of-type {
			color: red;
			font-weight: bold;
		}
	</style>
	<h1>:only-of-type을 이용한 선택</h1>
	<div>
		<p>이 p 태그는 div 태그의 유일한 child</p>
	</div>
	<div>
		<p>이 p 태그는 div 태그의 첫 번째 child</p>
		<p>이 p 태그는 div 태그의 두 번째 child</p>
	</div>
	<div>
		<p>이 p 태그는 div 태그의 첫 번째 child</p>
		<p>이 p 태그는 div 태그의 두 번째 child</p>
		<p>이 p 태그는 div 태그의 세 번째 child</p>
	</div>
	<div>
		<span>이 span 태그는 div 태그의 유일한 child</span>
	</div>

4) 기타 의사 클래스

:not
- not 선택자는 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용하여 선택
:lang
- 특정 HTML 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용

아래와 같이 lang을 설정하여 사용할 태그(예를들어 q)에 작성해준다.

<q lang="en">따옴표</q>의 코드에서는 "따옴표"로 표시가 될 것이다.

<style>
    :lang(en) { quotes: '"' '"'  "'"  "'"; }
    :lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>

의사 요소(pseudo-element)

해당 HTML 요소의 특정 부분만을 선택할 때 사용
문법 : 선택자::의사요소이름 {속성: 속성값;}
하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용할 수 있다.
대표적인 CSS 의사 요소
- ::first-letter
  - 텍스트의 첫 글자만을 선택
  - 단, 블록(block) 타입의 요소에만 사용할 수 있음
- ::first-line
  - 텍스트의 첫 라인만을 선택
  - 단, 블록(block) 타입의 요소에만 사용할 수 있음
- ::before
  - 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
- ::after
  - 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용
- ::selection
  - 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용

드래그한 부분만 색이 변경 되는 것을 확인할 수 있다.

	<style>
		p::selection {
			color: pink;

		}
	</style>
	<h1>::selection을 이용한 선택</h1>
	<h3>아래의 단락에서 원하는 부분을 마우스로 선택해 보세요!</h3>
	<p>본문글 생략</p>

CSS 간단한 정리 끝! 확실히 이번기회에 제대로 정리를 해보니, 몰랐던게 정말 많다는것을 새삼 깨달았다…!! 관심이 있던 분야여서 재밌게 공부할 수 있었다.

w3schools 내용 참고하여 작성
tcpschool 내용 참고하여 작성

bokyeoning

CSS(Cascading Style Sheet) 사용하기

< Css >

CSS(Cascading Style Sheet)란?

CSS 사용법

CSS 선택자(selector)

id와 class 선택자

결합 선택자

동위 선택자

박스모델(BoxModel)

CSS 위치속성

디스플레이

1) 블록(block)

2) 인라인(inline)

인라인-블록(inline-block)

position 속성

1. 정적 위치(static position) 지정 방식

2. 상대 위치(relative position) 지정 방식

3. 고정 위치(fixed position) 지정 방식

4. 절대 위치(absolute position) 지정 방식

z-index 속성

margin으로 가운데 정렬하기

의사 클래스(pseudo-class)

[대표적인 CSS 의사 클래스]

의사 요소(pseudo-element)