[KoKoa Clone]Part11 -CSS개념 간단 정리 및 새로운 개념, git desktop "revert"사용시 유의점

▶ <- 이 마크가 있는 것은 구분을 위해 넣어놓은 것입니다. 각각이 다른 개념을 다루고 있기 때문에 

마크를 기준으로 따로 봐주세용

 

▶CSS코드를 하다보면 명칭이 헷갈릴 때가 있다.

예시코드: h1{color: blue;} 

h1-> selector 선택자
color -> property 속성
blue -> value (속성)값 

 

▶block = box = not inline 

 

▶inline 요소는 크기값을 가지지 않는다. -> width, height를 지정해도 적용 X 

좌우 margin 만 가질 수 있습니다.-> 상하 marginX

*padding은 block, inline 요소 상관없이 가능합니다.

 

▶VSC사용 시 emmet확장 프로그램 단축키 

emmet 단축키 
.find-icons__icon*4>span 
아이콘 클래스가 4개 있고 각각의 내부에는 span태그가 있게 만들기

.find-icons__icon*4>span 결과물

(.find-icons__icon>span)*4 로 해야하는 줄 알았는데 위의 코드로도 똑같은 결과물이 나옵니다.

 

▶중간에 우리가 새로운 css파일을 만들 때마다 까먹지 말아야 하는 것

Do not forget to import the new css file !! 임포트하는 것을 까먹지 마세용

 

▶display:flex; 

flex-direction: column; // row는 디폴트 값입니다. 

row -> 요소를 옆에 오게 만드는 것이고 

column -> 위아래(수직)방향으로 오게 만드는 것입니다. 

즉, flex-direction이 column으로 바뀌었으니 Main Axis랑 Cross Axis랑 바뀌었습니다. 
그래서 Main Axis가 지금은 세로축이겠네요 

 

▶TIP. 폰트 어썸으로 추가된 아이콘 사이즈를 변경하고 싶다면?

1. i 태그에 class 이름을 추가해서 사이즈를 변경하기( font-size로 with CSS)

2. 그냥 .find-icons__icon i{
 font-size: 20px; } 클래스명 추가 없이 셀렉터에 직접 설정
1번의 방법으로 한다면 이게 폰트 사이즈를 변경하는 것이구나 하고 직관적으로 알 수 있음

 

▶CSS파일을 작성할 때,

어떤 속성이 자주 쓰이고 공통적인 모양을 띌 경우, component로 만들어서 따로 css파일로 빼주는 것이 좋다.
사이즈가 작을 경우는 변수(variable)로 빼주시면 됩니다 

 

▶html 코드에서 

대문자로 보이는 영어를 소문자로 작성해주고 CSS로 소문자 -> 대문자로 변경하기

Using [ text-transform: uppercase; ] :

대문자는 디자인적 요소이기때문에 
만일 디자인(보여지는 것)때문에 대문자가 필요하다면 
HTML코드에서는 소문자로 작성해주고 CSS코드에서 대문자로 바꿔주면 된다. 

 

HTML 코드 예시:
<h6 class="open-post__hashtags">#cat#adorable#kitty</h6>

CSS 코드 예시:
.open-post__hashtags {
  text-transform: uppercase;

}

 

▶ | < 이런 모양의 devider 만들기: 직접 키보드로 쳐도 되지만 CSS코드로 만들 수도 있다. 
세로선(devider) CSS로 만들기 
.클래스명 .divider{

  width: 1px;
  height: 10px;
  margin: 0 5px;
  background-color: var(--gray);

} 

▶git desktop에서 커밋시 유의할 점

git desktop에서 커밋할때  description을 잘못써서 revert했더니 내가 작업하던 원본의 파일 내용도 같이
날라가 버려서 당황했다. 어차피 삭제된 내용도 history에 남아있기 때문에 이 부분을 다시 복사해서 
원본 파일의 코드에 붙여넣어주면 된다. 

정리: 간단히 말하자면 revert기능을 사용하면 원본파일에도 영향을 미친다
그렇기 때문에 수정할 때나 description을 적을 때는 좀 더 신중하게 쓰도록 하자.