[SEB FE] Section1 unit5 회고 | CSS 기본기, 첫 일주일을 보내며👏

💡CSS 기초

CSS : 스타일시트, 색맹이나 장애인에게 친화적인 UI를 만들 수 있다.

기본 구조

div(셀렉터){
			background-color(속성명 : property): red (속성값 : value);
          } 

💡CSS Property

color : 색상코드 //글자 색을 바꿈
text-decoration : underline // 밑줄
text-weight : bold // 글자 굵게
                : 숫자 // 글자 굵기 숫자로 정함, 900이 최대
background-color: 색상코드 // 배경 색 바꿈

CSS -> HTML 적용 방법
HTML에 <link rel="stylesheet" href=""> 작성하여 링크함
CSS에 스타일 따로 적용하는 이유 :

💡박스모델

margin [ boarder [ padding [content] ] ]

다양한 박스의 속성

🎀block

• 한 줄 차지
• 줄바꿈 가능
• width, heigth 사용 가능

🎀inline

• 내용만큼만 차지
• 줄바꿈 불가
• width, heigth 사용 불가능

🎀inline-block

• 내용만큼만 차지
• 줄바꿈 불가
• width, heigth 사용 가능

content-box와 boader-box의 차이와 쓰임새
box-sixing : boader-box; 으로 변경 가능하다
boader-box는 boader, margin, padding 을 포함하고 있어 더욱 직관적인 크기 변경이 가능하다.
content-box 는 content의 크기를 변경하므로 전체 사이즈를 변경하기 위해선 번거롭다.

초기화

* {
	margin : 0;
    padding : 0;
    box-sizing : boader-box;
  }

💡CSS의 다양한 셀렉터

parents > child : 부모 엘리먼트의 직계 자식만 선택
element1 element2 : element1의 모든 element2 후손 선택
element1,element2 : 모든 element1과 element2 선택
element1:nth-child(n) : 모든 n번째 자식 element1 선택
element1:first-child: 모든 첫번째 자식 element1 선택
element1:last-child : 모든 마지막 자식 element1 선택
element1 + element2 : 모든 element1의 가장 인접한 element2 하나 선택
element1 ~ element2 : 모든 element1의 모든 인접 element2 선택

---

📓2022.10.28 금요일

드디어 일주일이 지났다.
뭔가 한달은 족히 된 것 같은데 시간이 잘 가지 않는다.
그래도 일주일 만에 그 전의 나랑 완전 달라졌다.
이번 과제는 계산기 목업을 만들어 오는건데,
이전 기수 분들이 너무 잘해두셔서 놀랐다.
내가 미리 만들어본 목업은... 허름하기만 한데...
이게 뭐람... 😵
그리고 잘 만든 목업은 운도님이 발표 시킨다고 하셔서
관종인 나는 더 들뜰 수 밖에 없었다😆 이건 못 참지!!!
열심히 만들어서 이게 내 계산기다!! 라고 외칠 수 있는 계산기를 만들어내겠어... 아주 귀여운 녀석을 말이야...
그리고 이번에 또 페어가 바뀌었는데 수강생 분마다 느낌이 다르셔서 너무 신기하고 재미있다. 이번에도 많은 걸 배울 수 있었으면 좋겠다.