11월 3일 공부일지

오늘 공부에 투자한 순수한 시간:  2시간

학습한 개념 : CSS

1. 글자색 변경
color: rgb(214, 160, 51);
         레드그린블루
빛의 3원색 섞는 비율을 뜻함.
vs코드에서 작은 네모 클릭하면 색선택가능.

2. font-family: 글꼴 종류
글자의 서체를 정함.
종류는 sans-serif 고딕체
          serif 명조체(바탕)
3. Line-height : 줄 간격
공백이 아니라 줄과 줄 사이의 높이를 말함.
line-height: 1.6;
->한 줄의 높이를 글자 크기의 1.6배로

4. .restaurant-card : 식당 카드 배경
.restaurant-card { background-color: white; }

.= class를 찾는다
restaurant-card = html에서 article에 붙인 class를 불러온다.

5. .restaurant-card h3 :카드안의 식당 이름 색 변경
.restaurant-card h3 {

    color: 원하는 색;

}

h3앞에 공백을 둬야됨.

여기서 .의 의미

class=“restaurant-card가 붙은 모든 요소를 찾아서 -> 변경


여기서 잠깐
css에서 주의사항
색이름 띄어쓰지 말기
앞에점 또는 샵을 잘 쓰기
=이게 아니고 : 을사용
끝맺음을 세미콜론;사용
괄호는 {} 중괄호 사용

6. 둥근모서리
border-radius 모서리를 깎는 반지름. 숫자가 클수록 더 둥글게

border : 테두리, 경계선
radius : 반지름

왜 반지름 인가 : 모서리를 둥글게 깎는 방식이 모서리에 원을 대고 그 원의 곡선대로 자르기 때문

이미지카드 또한 같음
.restaurant-card img {

       Border-radius: 12px;
}


css2단계 : 박스 모델(여백,테두리)
개념 : 모든 요소는 상자다
브라우저는 h1, p, article, img 할 것 없이 모든 요소를 네모 상자로 그린다. 그 상자는 4겹으로 되어있다.
margin 바깥여백> border테두리>padding안쪽여백>content내용


content 글자,이미지
(내용물/상자안에 담긴것, contain 담다에서 나온말)

padding 내용과 테두리 사이
(충전재,솜 / 물건이 상자 벽에 부딪히지 않게 채워넣는 완충재)
padding까지 색이 입혀짐 , margin은 투명
padding: 안쪽여백
->카드 안 글자가 왼쪽 가장자리에 붙어있는게 기본값인데 좀 여백을 둠

border 테두리 선
(경계, 가장자리/ 상자의 벽, 국경처럼 안과밖을 나눔)
배경색과 차이가 없을 경우 구분되는 선.
1px-두께, solid -선모양 (solid 실선, dashed 점선)

margin 테두리 바깥, 다른요소와의 거리
(책 페이지에서 글과 종이 끝 사이 빈공관)
margin: 바깥여백
margin: 사방 / margin-top: 20px; 위 / margin-bottom: 20px;  아래 / margin-left: 20px;  왼쪽 / margin-right: 20px;  오른쪽
padding도 마찬가지로 사용됨

- padding을 늘리면 ->  완충재가 많아져서 상자 자체가 커짐 (배경색 영역이 넓어짐)
- margin을 늘리면 -> 상자 크기는 그대로, 옆 상자와 거리만 멀어짐

헷갈리는 부분 간단하게 정리

{} 블록 시작과 끝
콜론: 속성과 값 사이
세미콜론; 명령끝
속성 이름 안에 공백이 없음
숫자와단위는 붙여씀
콜론 뒤에는 한칸 띄우기
}닫는건 새줄에다가.


AI 대화 내역 링크:

(링크 생성 방법)

클로드: https://claude.ai/share/a195690f-4515-4811-b68d-ea8672415f53

오늘 잘한 점: 크게 어려움은 없었습니다. 그리고 html을 이해하니 css는 아직까진! 어렵진 않았습니다. 내일마무리하겠습니다. 그리고 좀더 키워드들을 파고들려고 했습니다. 그리고 조금 꾸밈을 해보았습니다. 뭔가 성과물이 있는것 같아서 재밌게 했습니다.

오늘 부족했던 점: 오늘 시간이 부족했습니다ㅠㅠ

오늘 총평: 키워드들이 오늘은 그렇게 어렵지 않았습니다. 그래서 이해하고 머릿속에 정리하려고 했습니다. 요즘 바빠서 시간이 많지 않아서 아쉽지만 틈틈히 해보도록 하겠습니다. 감사합니다.