2024-01-15 (26일차) - 메뉴박스 구현에 필요한 요소들

📅2024-01-15, 26일차

TODO

[WiseSaying]
-CRUD 주말에 구현해본거 복습
[프론트엔드]

• 클래스와 id 개념 복습 (치과 대기 중 폰으로)
• padding / margin 개념 복습
• CSS DINER 반복풀기 (치과 대기 중 폰으로)
• 1차메뉴 구현 로직 복습

display

랜덤이미지 제공 사이트

Teacher's Advice

• 외부 세미나, 컨퍼런스 같은 거 많이 참석해보기!
  • 대학교 코엑스 등등.. (코엑스에서 아마존 세미나)
• 능력보다는 인성, 사회생활스킬을 보는 회사들이 늘고있다!
• CSS DINER 26까지 반복숙달

img src

• 이미지의 기본 속성은 inline-block이다
• 이미지의 크기를 바꾸기 위해선, 높이나 너비 둘중 하나만 지정해주면 비율이 잘 맞게 크기가 변경되지만
• 높이와 길이를 동시에 지정해주면, 이미지가 깨진다 (직사각형인 경우)
• 글자는 스스로 가운데 정렬 할 수 없다 (inline, inline-block)
  • 부모의 의해 가운데 정렬이 가능.

  text-align: center

• inline CSS 검색해

여백

• padding은 div 안쪽 내용의 여백
• margin div 바깥쪽의 여백

/*div의 display가 inline-block으로 설정됐을때*/

div {
	padding: 50px;
	margin: 50px;
}

section의 자식들 중 원하는 자식의 색을 주고 싶을때

section > div:nth-child(1){
	background-color:green;
}

section > div:firstchild(1){
	background-color:green;
}

/* 마지막에서 두번째자식 */
section > div:nth-last-child(2){
	background-color:green;
} 
/* 막내 */
section > div:last-child{
	background-color:green;
}

/* section의 둘째 자식 */
section > :nth-child(2){
	background-color:green;
}

/* div 타입중의 두번째자식 */
section > :nth-of-type(2){
	background-color:green;
}

/* 짝수 */
section > :nth-child(2n){
	background-color:green;
}
/* 3의배수 */
section > :nth-child(3n){
	background-color:gold;
}
/* 홀수 */
section > :nth-child(2n+1){
	background-color:gold;
}

inline (글자)요소의 가운데 정렬

부모element > 자식element {
	text align: center;
}

블럭요소의 가운데정렬

body{
 margin: 0; 
}

div {
  height: 100px;
  background-color: #afafaf;
  margin-right: auto;
  margin-left: auto;
  width: 300px;
}

class

• front-end에서 class는 별명!
• java의 class와는 다르다
• .a { 쩜 a라고 하면, 별명 a인 놈!

  <div class= "a">

  section> .a {
  		background-color: gold;
  }

• 별명 하나 더 주고 싶으면, 콤마 대신 공백으로 한다
• 별명이 a도되고 b도 될 수 있음

  <div class= "a b">

• 별명이 a이면서 b이기도 한 놈!

  section> .a.b {
  	background-color = pink;

• id는 하나만 쓸 수 있다

<div class = "">
<div id = "">

모서리를 둥글게~ 둥글게~

border-radius: 50px 50px 50px 50px; 
/*(좌측상단부터 시계방향)*/

border-radius: 50% 
/*원*/

inherit

• 자식 color의 default는 inherit(부모로부터)이다
• 그러나 부모의 모든걸 inherit하진 않는다
  • border, padding은 부모껄 바로 상속받진 않는다. inherit이라고 명시해줘야 함(부모 따라하라고).
• 결론, 자식이 부모 속성의 모든 것을 자동 inherit은 아니니, 잘 파악하고, inherit을 명시해줄지 말지 판단하기
• a의 default color은 inherit이 아니다. 부모의 색을 따라하지 않음. inherit 명시하기 전까진.
  • 왜? 링크라서
  • a의 color은 꼭 normalize해줘야 한다. 다른애들 따라가줘야 한다. 혼자 튀면 안된다.
    • color: inherit;
    • text-decoration: none;
    • 맨 위에 이거부터 명시해주기 (약속)

    a {
    	color: inherit; 
    	text-decoration: none;
    }