🌷[20230216] 코드스테이츠 부트캠프 D+4

🦄 오늘은 CSS의 레이아웃을 조정할 수 있는 "FLEX" 녀석에 대해서 배웠습니다. 

 

 

🍀 오늘의 날짜 : 23년 02월 16일 

🍀 오늘의 주제 : CSS /html 활용

• flex 

---

 

 

🌷햇깔렸던 부분들 + TIP🌷

 

 

와이어프레임 (wireframe)

웹/애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 - 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것.  = 진짜 말 그대로 단순하게 레이아웃과 제품의 구조만 보여주는 용도임(UX 판단 노)

와이어프레임을 보고 어떤 목적을 가진 프로그램인지 유추할 수 있다면 이 와이어프레임은 목적을 성공적으로 달성한거임.

 

 

레이아웃 리셋

HTML문서는 기본적인 스타일을 가지고 있어서 가끔 요놈들때문에 레이아웃을 잡는데 방해가 되기도 해서 처음부터 리셋 시켜주고 작업하면 편함. 

* {
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
}

 

 

👇🔹class이름 선언하는 방법[ CSS Architecture: Atomic CSS ]

 

 

 

🌷오늘 작업 :: 계산기 묵업 01 🌷

 

완성품 

 

💡💡회고.01

<div>안에 <div>자손 요소의 중앙 정렬이 안되었던 건.

➡️ CSS로 margin-bottom 으로 위로 올려버림. 

 

 

💡💡회고.02

<div.calc-button-mark>부분의 width가 원하는 만큼 넓어지지 않고 오른쪽에 빈 보라색 공간이 없어지지 않았던 건. 

➡️ 기존 CSS width: 20% 했던 거를 25%로 수정해서 100중 각각 25: 25: 25: 25로 맞출 수 있었음. 

 

 

 

 

---

 

 

 

🌷오늘 작업02 :: 계산기 묵업 02 🌷

 

시간이 조금 남아서 계산기 V.2를 만들어봄. 

 

💡💡회고.01

< = > 을 빨간색 화살표처럼 늘리고 싶었던 건.

➡️ 23년 02월 16일 해결 못함. 😫

UP. 해결쓰 _ [🌷D+4 기록]

 

 

 

🔖 내가 만든 계산기 묵업 코드

 

---

🌱 오늘의 생각                                               

🔹FLEX 미쳤, GRID 녀석도 확인 필요 

🔹역시 난 디자인 고자ㅜ

 

🌱  공부 중 참고 사이트                                   

🔹CSS로 요소 우측 정렬하기

🔹

 

🌱 도움이 될 만한 사이트 추천쓰                     

🔹이미지에서 색상 추출 : ADOBE COLOR

🔹색상 팔레트 추천

🔹CSS 네이밍 규칙

🔹CSS Position 속성