[CSS] 태그에 직접 스타일 속성 적기, 표기법 종류

리액트를 사용해서 프론트를 만들고 있다. 더해서 스타일 컴포넌트도 이용하고 있다.
스타일 컴포넌트에 적는 속성의 형식과 태그에 직접 적는 속성의 형식이 달라서 매번 헷갈린다. 
 
스타일 컴포넌트 같은 경우

const OneSentenceContainer = styled.div`
    display: flex;
    justify-content: center;
`;

와 같이 세미콜론으로 속성들을 나누고, 케밥 표기법을 사용한다.
케밥 표기법이란 꼬치에 고기가 끼워져 있는 것 처럼 '-' 하이픈으로 단어와 단어 사이를 이어준다. justify-content같은 형식이다.
 
그에 반해 태그에 직접 속성을 지정하는 경우는 

<div style={{ display: 'flex', justifyContent: 'center'}}>
</div>

이와 같이 일단 style을 {{}} 중괄호 두개로 감싸고, 쉼표로 속성들을 나눈다.
속성명에는 카멜 표기법을 사용하고 지정하는 속성을 따옴표로 감싸주어야 한다.
카멜 표기법은 첫 단어를 제외하고 이어지는 단어의 첫글자를 대문자로 표기하는 것이다. justifyContent처럼 말이다.
 
표기법에 대해 더 말하자면 표기법의 종류에는 파스칼 표기법과 스네이크 표기법이 있다.
파스칼 표기법은 카멜 표기법과 비슷하지만 첫 단어까지 대문자로 표기한다는 점이다. JustifyContent와 같이 표기한다.
스네이크 표기법은 단어 사이를 '_' 언더바로 이어준다. justify_content와 같다.
 
 
 
참고 블로그
https://togll.tistory.com/53