chapter.04-1

오늘은 수업 내용을 쭉 정리하면서 css관련한 글을 써보려고 한다

 

 

1. html과 css 연결 하는 방법

 

<link href="css파일문서경로" rel="stylesheet">

 

link라는 태그를 사용해서 html과 css를 연결해준다.

이때 rel라는 속성은 relation의 약자로 관계를 뜻한다.

href라는 속성은 hyper reference의 약자로 하이퍼 참조를 뜻한다.

 

link를 쓸때는 반드시 하이퍼 링크를 걸어주고 꼭 작성되는 문서와 하이퍼 링크간의 관계를 적어주어야 한다.

 

 

---

 

 

2.  선택자

html과 css는 여러 선택자가 있다.

css은 스타일 속성이 하나의 요소에 대해 겹쳐지는 경우가 있을 때, 기본적으로 나중에 쓰여진 스타일이 적용된다.

그러나 우선순위에 따라 적용이 달라진다.

선택자 우선순위 : 쓰여진 순서와 관계 없이 적용 되는 순위

선택자	html 작성시	css 작성시	설명	우선순위
아이디	id="name"	#name	하나의 태그에 1개의 id만을 가지며 중복으로 사용할 수 없다	1
클래스	class="name"	.name	하나의 태그에 여러개의 class만을 가지며 중복으로 사용할 수 있다	2
태그	<p> 등 다양한 태그	p	html 문서를 작성할 때 사용되는 태그	3

 

해당 내용 외에 다른 선택자도 있는데 전체 태그에게 적용하고 싶다면 *를 사용하면 된다.

 

아래 링크에서 좀 더 자세한 내용을 볼 수 있다.

CSS 선택자 - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

3. 박스 모델

박스 모델은 해당 이미지를 보면 쉽게 이해할 수 있다.

파란색 부분이 컨텐츠 / 연두색 부분이 패딩 / 노란색 부분이 보더 / 갈색 부분이 마진

총 4가지로 나뉜다. 

 

 

컨텐츠 부분의 대표적인 속성은 width와 height 가 있으며 단위가 px과 %등이 있다.

% 는 컨텐츠가 속한 영역을 기분으로 백분율을 계산한다 > 내가 속한 영역에 관련 값이 있어야 적용이 가능하다

 

** height는 %를 적용이 안 되는 경우가 많은데, 이는 html과 body부분에는 height가 적용이 안 되어있는 게 기본값이기 때문에 적용이 되지 않는다. 그래서 보통 css 적용 전에 html,body 부분에 height: 100%; 주고 시작하는 것이 좋다

 

 

보더 부분은 테두리 스타일을 정의할 때 보여지는 요소로 다양한 속성이 있다.

자세한 속성이 궁금하다면 여기를 클릭하세요

속성명	css 작성 시	용도
border	border: 1px solid #2h2h2h;	테두리의 두께, 모양, 색상 등을 한 번에 지정한다
border-style	border-style: double;	점선, 실선, 겹선 등으로 테두리 모양을 지정한다
border-color	border-color: #ffffff;	테두리의 색상을 지정한다
border-width	border-width: 5px;	테두리의 두께를 지정한다
border-radius	border-radius: 20px	모서리를 둥글게 만들어준다

 

 

패딩부분과마진부분은 비슷하지만 다른 요소이다.

일단 동일하게 적용되는 부분을 먼저 설명하겠다.

개수	css 작성 시	설명
1	margin : 10px;	여백의 모든 면에 동일한 값을 지정
2	margin : 10px 20px;	위아래 여백 / 왼쪽 오른쪽 여백  값을 따로 지정
3	margin : 10px 20px 30px;	위 여백 / 왼쪽 오른쪽 여백 / 아래 여백 값을 따로 지정
4	margin : 10px 20px 30px 40px;	위 여백 / 오른쪽 여백 / 아래쪽 여백 / 왼쪽 여백 값을 따로 지정

 

값이 적용되는 순서는 위와 같이 동일하나,

padding의 여백은 border 안에서 적용되고

margin의 여백은 border 밖에서 적용이 된다.