💻 학습내용

⭐️ html style 태그와 css

• html style 태그 적용 -> 속성값(red) 입력 후 ; 입력해줘야함

<style type="text/css">
		h1 {clolr : red;}
</style>

• html에서 style 태그를 사용하게 되면 코드가 길어지면서 가독성이 떨어지게 되고 유지 보수가 불편해짐
  그래서 html과 css 따로 작성해서 연동해줘야 함

• html과 css 연동하는 법
  ✎ html 시트에 작성

<link rel ="디자인을 담당할 시트" type="구성된 언어 종류" href="css경로 작성">

⭐️ 부모태그와 자식태그

✎ 부모 태그에 css 속성값을 부여하면 자식 태그도 css 속성값을 받게 된다

<header> : 부모태그
  <div> : 자식태그 
    <h2>header h2</h2>
    <p>header p</p>
  </div>
 </header>
 <footer>
   <p>headerf</p>
 </footer>

✎ 자식태그 앞에 부모 태그를 명시해주면 같은 p라도 구별되서 스타일이 적용된다

header p, footer p{color: green ;}

⭐️ css 선택자 종류

1. 타입 : html 태그를 기준으로 접근

<h2>NIce to meet you</h2>
h2 {color: red;}

2. id : html 태그에 고유의 이름을 부여 후 css에 id를 #을 통해 호출

<h2 id ="test1">Nice to meet you</h2>
#id {color: pink;}

3. class : 별명을 부여 후 .을 통해 호출

<h2 class ="test1">Nice to meet you</h2>
.class {color: pink;}

4. 속성 : 속성값(type="")을 사용해서 스타일 지정 가능

<input type="text" placeholder="이름">
input[type="text"]{border: solid 10px red;}

⭐️ 선택자 id 와 class 차이

1. class는 2가지 이상의 css적용 가능

2. class는 같은 별명을 중복으로 사용가능

⭐️ cascading

✎ style > 속성 > id > class > tag 순으로 적용됨
✎ 원본 코드는 유지한 상태에서 새로운 코드를 추가해 디자인을 적용할 때 필요하다

⭐️ css 공간 설정

✎ 공간의 크기에서 가변적인 변화를 주고 싶으면 px대신 %를 사용
✎ 이 때 브라우저의 크기는 body 태그와 동일
✎ max-width : 상한선을 결정 | min-width : 하한선을 결정
✎ border : 테두리 설정 | border-radius : 모서리를 둥글기
✎ opacity : 투명도 설정

div	{
	width:  100%;
	height: 300px;

	min-width: 600px;
	max-width: 800px;

	border: solid 10px red;
	border-radius: 50px;

	background-color: yellow;
	opacity: 0.5;}

⭐️ 폰트 설정

✎ font-family : aaa,bbb,Sans-serif(마지막은 고정)
➡️ 순차적으로 사이트 환경에 적용이 가능한 것 부터 적용이 됨
✎ font-weight : 폰트 굵기 적용
✎ text-decoration underline; 밑줄긋기 | line-through;중간 줄 긋기
✎ a{text-decoration: none;} -> a 태그의 기본값을 없애줌
✎ text-align: 정렬 조정

h1 {
	color: #rgb(123,111,21);
	font-size: 80px;
	font-style:  initial;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: underline;
	text-align: right;
	background-color: pink;
    }

a {text-decoration: none;}

⭐️ 백그라운드 속성

✎ background-image : 이미지를 설정된 공간안에 삽입
✎ repeat x : x축 반복 | y: y축 반복 | no-repeat : 이미지 하나만 생김
✎ position : 이미지의 위치 변경 가능

#bg{
	width: 900px;
	height: 900px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: top left;
   }

⭐️ img태그와 css 백그라운드의 차이

✎ 웹접근성을 위해서 정보성을 담고 있는 이미지는 img 태그를 사용
✎ 데코레이션 용도는 백그라운드 이미지를 사용

💻 학습한 내용 중 어려웠던 점

html과 css 작성 방법이 달라서 버벅거렸다
html은 <> , css는 {}를 사용
선택자 개념중 id와 class 차이점이 헷갈렸다

💻 해결방법

id와 class를 계속 사용하면서 둘의 차이점을 익혀 나갔다.
헷갈리고 익숙하지 않은 것을 익히려면 무조건적인 반복이 가장 좋은 방법인 것 같다.

💻 학습 소감

html만 적용 했을 때의 웹사이트는 밋밋한 느낌이 었는데
오늘 css를 조금이나마 적용해보면서 사이트에 색감들이 더 해져서
수업이 더욱 재미있었다.