TIL/Web(HTML, CSS, JS, jQuery)

[SIST] Web_HTML_days03/04_<style> 태그와 CSS

야리니 2022. 5. 17. 00:18
728x90
반응형

- CSS는 디자인을 입히는 것으로 <style> 태그 안에서 선언할 수 있다.

 

[ 선언형식 ]

선택자 {
  속성 : 값;
  속성 : 값;
  ...
}

/* 선택자를 여러 개 줄 수 있음*/
선택자1, 선택자2 {
  속성 : 값;
  속성 : 값;
}

 

[ 선택자명:??? ]

1) 선택자명:hover

- 마우스를 올렸을 때 상태를 지정

 

2) 선택자명:nth-child()

- ( ) 안에 숫자를 넣으면.. 부모의 n번째 자식 요소에 적용

- ( ) 안에 odd, even을 넣으면 odd는 부모의 홀수 자식에 적용, even은 부모의 짝수 자식에 적용

 

3) 선택자명:nth-of-type()

- ( ) 안에 숫자를 넣으면.. 같은 유형의 n번째에 적용

[ 속성 종류 ]

- border : 구분선

  border 속성에 줄 수 있는 값 중..

   solid : 기본선

   dotted : 점선

ex) border: 1px solid gray;

 

- border-radius : 선에 홀을 만드는 속성(라운드 되어짐)

ex) border-radius: 10px

 

- width : 해당 태그(요소)의 너비를 지정, width를 설정하지않으면 기본은 부모 너비의 100% 잡힌다.

ex) width: 400px;

 

- height : 해당 태그(요소)의 높이를 지정, height를 설정하지않으면 내용물에 따라서 자동으로 height가 자동 설정되지만, 지정하면 지정한 높이만큼 잡힌다.

ex) height : 400px;

 

- font-size : 글씨 크기 지정

ex) font-size: 12px;

 

- text-decoration: 글자 장식

underline : 밑줄

overline : 위에 선

lint-through : 취소선

 

- font-family: 폰트 설정

 

- margin : 바깥쪽 여백

  margin: 0 auto; => 아래, 위로 여백을 안주고, 좌우는 자동 정렬하겠다. == 가운데 정렬

 

- padding : 안쪽 여백

  ex) padding: 10px;

 

- background-img : 배경이미지 속성

 * 배경이미지는 우클릭하면 이미지저장이 뜨지않음, 저장하고 싶으면 개발도구를 열어서 저장해야함

  > 선언형식 : background-image: url('이미지경로');

ex) background-image: url('../images/img_girl.jpg');

 

- background-color : 배경색상 속성

> #16진수값 (#rrggbb)

ex) background-color: #dddddd;

ex )background-color: #ddd -> #dddddd를 줄여서 사용한 것

 

> rgb(각각 0~255)

ex) background-color: rgb(150, 212, 212)

 

> rgba => (r,g,b 각각 0~255를 주고 a는 alpha로 색상의 투명도를 말한다. 0~1값을 줄 수 있고 1은 완전불투명, 0은 완전 투명이다)

ex) background-color: rgba(150, 212, 212, 0.4);

 

- border-collapse : 테두리를 붕괴하는 속성

  (테두리가 붕괴 -> 선 위에 선이 그어졌다. -> 겹쳐졌다.)

  ex) border-collapse: collapse;

 

- border-spacing : 선과 선의 간격

  ex) border-spacing: 10px;

<코드>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style type="text/css">
	body{
		border: 1px solid red;
	}
	
	p{
		border: 1px solid gray;
		/* p태그의 width를 설정하지않으면 기본은 부모 너비의 100% 잡힌다. */
		width: 400px;
		/* height를 설정하지않으면 내용물에 따라서 자동으로 height가 자동 설정되지만, 지정하면 지정한 높이만큼 잡힌다. */
		height : 400px;
		/* 안쪽 여백 : padding */
		padding : 5px;
		
		/* 단어가 다 못들어가지면 공백을 두고 다음 줄로 넘어간다. */
		/* 배경이미지 속성 : background-image */
		/* 배경이미지는 우클릭하면 이미지저장이 뜨지않음, 저장하고 싶으면 개발도구를 열어서 저장해야함 */
		background-image: url('../images/img_girl.jpg');
		
	}
</style>
<title>2022. 5. 16. - 오후 2:40:32</title>
</head>
<body>

<h3>ex06.html - 배경이미지</h3>
<!-- emmet/zencoding -->
<p>
  우린 서로 너무도 다른 세상에 살아왔죠
  한번 스쳐 지났을 뿐
  그 후로 난 멀리서 이렇게 기다려왔죠
  언젠가는 내 헛된 꿈이 혹 이뤄질까
  날 기억이나 할까요
  내 이름조차 생각이나 날까요
  누군가 매일 그대를 위해 늘 기도해온 걸 알까요
  그대가 난 부럽죠
  나 같은 사람 너무나 흔하겠죠
  혹시나 그대 알고 있나요
  얼마나 행복한 사람인지
</p>

</body>
</html>

 

- 테이블 헤더에는 마우스를 올렸을 때 스타일 설정이 적용되지않도록하기(22.05.18 내용 추가)

1) tbody 안에 있는 tr만 마우스 올릴 때

tbody tr:hover{
     background-color: #d6eeee;
}

 

2) tr 중에 첫번째 tr은 제외하고 적용하겠다.

형식)  :not(selector)

tr:hover:not(tr:first-child){
   background-color: #d6eeee;
}

 

<코드>

<head>
<meta charset="UTF-8">
<style>
	table{
		width: 100%;
		border: 1px solid gray;
		border-collapse: collapse;
	}
	
	th, td{
		border-bottom: 1px solid gray;
		padding: 5px;
		text-align: left;
	}
	
	/* tbody 안에 있는 tr만 마우스 올릴 때.. */
/* 	tbody tr:hover{
		background-color: #d6eeee;
	} */
	
	/* 형식)  :not(selector) */
	/* tr 중에 첫번째 tr은 제외하고 적용하겠다. */
	tr:hover:not(tr:first-child){
		background-color: #d6eeee;
	}

</style>
<title>2022. 5. 17. - 오전 10:02:08</title>
</head>
<body>

<h2>Hoverable Table</h2>
<table>
	<colgroup>
		<col span="2" style="background-color:gray;">
	</colgroup>
	<!-- <thead> -->
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Points</th>
		</tr>
	<!-- </thead> -->
	<!-- <tbody> -->
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
			<td>$100</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
			<td>$150</td>
		</tr>
		<tr>
			<td>Joe</td>
			<td>Swanson</td>
			<td>$300</td>
		</tr>
		<tr>
			<td>Cleveland</td>
			<td>Brown</td>
			<td>$250</td>
		</tr>		
	<!-- </tbody> -->	
</table>

</body>

 

<결과물>

First Name Last Name Points
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
728x90
반응형