[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>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을 적을 때는 좀 더 신중하게 쓰도록 하자.