학습한 내용
css에 대해서 본격 시작
한 문서에 html과 css를 모두 작성할 수 있지만 가독성과 편리한 유지보수를 위해서
연동된 별개의 파일을 만들어 작성한다고 한다.

html과 css파일을 연동시키는 방법은 link 태그를 이용하여 연결 할 수 있다.
예) css파일이 style.css 이름이고 같은 폴더안에 있다는 가정하에

코드를 이용하여 쉽게 연동시킬 수 있다.

코드를 저장할 때는 html과 css 서로 각각 따로 저장을 눌러야 결과물이 반영되니
ctrl + s 자주 저장하는 습관을 들이는 것이 좋다.

css효과를 넣는 태그를 선택하는 방법에 4가지가 있다고 한다.

이를 선택자라고 부르며
1. 태그 선택자
2. id(이름) 선택자
3. class(별명) 선택자
4. 속성 선택자

위 4가지로 나눠진다. 주의할 점은 id 선택자는 중복이 불가능하고 클래스 선택자는 중복이 가능하다. 주로 클래스 선택자가 많이 쓰이는 것 같다.

스타일 적용의 우선 순위로는
속성>> id >> class >> 태그 순위로 우선 순위가 적용 된다고 한다.
태그에서는 중복으로 적용하여도 마지막에 적용된 스타일이 제일 위에 덮어씌어진다고 한다.

스타일을 또 덮어씌우기도 한다고 한다. 여기서 부모 태그 자녀 태그 개념을 설명들었다.
기존에 작업한 내용을 남겨두고 상위 적용 개념을 이용해서 수정한다고 한다.
수정을 하면 되긴하는데 덮어씌우는 것으로 기존 작업을 남겨두는게 중요할 때가 있다고 한다.

폰트
google font로 검색하여 구글에서 흔히 글꼴을 가져오는 것을 배웠다.
그리고 css에서 제공되는 폰트를 사용하는 방법도 배웠다. div로 영역의 크기를 정하고 해당 영역의 테두리나 배경색 등을 지정하는 방법을 배웠다.
border: solid 10px red; 이런 식으로 테투리를 꾸밀수가 있는데 각 영역 선의 모양, 굵기, 색상의 입력 순서는 바뀌어도 관계가 없다고 한다.
예) border: solid 10px red; = border: red solid 10px;

마지막으로 배경에 대해서 배웠다.
앞전에도 html에서 이미지를 넣는 방법을 배웠는데 css에서 이미지를 넣는 방법을 배우고
html에서 이미지를 넣을 때와 css에서 이미지를 넣을 때의 차이점을 배웠다.
가장 큰 차이점은 지정한 공간 보다 이미지가 클 때 html에서는 축소되어 표현되었고
css에서는 전체 이미지에서 해당 공간 크기 만큼만 잘려서 표현이 되었다.
그리고 웹 접근성, 시각 장애인들을 위해 정보를 제공하는 이미지 설명이 css에서는 부여되지 않아서 정석에 가까운 것은 html에서 이미지를 삽입하는 것이 맞는 것 같다. css에서 이미지를 조절할 때 background라는 단어가 사용되는 만큼 웹 페이지의 말 그대로 배경이미지에서만 css를 쓰는 것이 주 목적인 것 같다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들
내용이 어렵지는 않았지만 마음대로 다루기에는 연습이 필요할 것 같다.

해결방법 작성
..

학습 소감
css는 조금 더 복잡하고 어려울 것 같았는데 생각 보다는 쉬웠다. 파일을 따로 만들어 관리를 하니까 확실히 단순하게 보여서 가독성도 좋고 할만하다는 생각이들었다. 가독성과 유지보수를 위해서 html과 css를 실무에서는 대부분 나눠서 작성하는 이유를 확실히 알 것 같다.

html 첫 수업인가? 에서도 웹 접근성, 시각 장애인을 위해서 정보를 입력해둔다는 것이 참 친절하고 신기하다는 생각을 했었다. 그런데 오늘 배경 스타일 부분에서도 웹 접근성을 위해서 html에서 작업하는 것이 좋다는 이야기를 들었을때 소수자를 신경써주는 html 프로그래밍이 따뜻하게 느껴졌다.

---

html 코드

Hello world

Nice to meet you

Welcome

ID 선택자

Class 선택자

Welcome

Out p

스타일 속성>>아이디>>클래스>>태그마지막

Hello World

덮어씌우기

폰트

---

css 코드

h1 {
font-size: 80px;

	}

header {

color: red;

}

header h1,
footer h1
{
color: blue;
}

header p,
footer p
{
color: green;
}

footer h1{

color: blue;

}

footer p {
clor: green;
}

선택자

1.태그선택자

/h1 {
color: red;
}/

2.id(이름) 선택자, 중복 불가

/
#test1 {
color: blue;
}
/

3.클래스(별명)선택자, 중복 가능

.test2 {
color: green;
}

4.속성 선택자

input[type="text"]{
borrder: solid 10px red;
}

input[type="password"]{
borrder: solid 10px red: ;
}

.bg-1{
background-color: red;

}

.fount-size-1{
font-size: 50px;
}

#color-1{
color: red;
}

#fount-size-1 {
fount-style: italic;
}

/*header h2{
color: red;
}

#intro h2{
color: red;
}

header p {
color: blue;
}

#intro.container p {
color: blue;
}

#color-2 {
color: pink;
}

.color-1{
color: green;
}

h1{
color: red;
}

h1{
color: blue;
}

덮어씌우기

#intro.container h1{
color: pink;
}

#intro div h1 {
color: green;
}

#intro h1 {
color: blue;
}

header h1 {
color: red;
}

폰트

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

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

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


background-color: yellow;

}

h1 {
color: rgb(123, 111, 21);
font-size: 80px;
font-style: initial;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
text-decoration: line-through;
text-align: left;

background-color:  pink ;

opacity:  0.5;

}

a {
text-decoration: none;
}

ul{
list-style: none;
}

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