CSS : Cascading Style Sheet

• 기본 특징 - Cascading : 여러 번 작성된 겹치는 스타일 속성은, 하단에서 작성된 속성이 우선순위를 갖는다

  <p class="Hello"> Wa! </p>
  

  p {
  	text-size: 20px;
  }
  
  .Hello {
  	text-size: 30px;
  }
  

• Selector : 선택자

  선택자	적용 범위	예시
  *	문서 내의 모든 HTML Element에 적용
  HTML Tag	모든 해당 Tag Element에 적용	div {}, p {}
  .클래스값	해당 클래스 이름을 갖는 모든 Element	.Hello {}
  #아이디값	해당 아이디를 갖는 모든 Element	#Hello {}

  <p class="myClass" id="myID"> Wa! </p> <!-- 1~4번 CSS 모두 적용 -->
  <p class="myClass"> Sans! </p>         <!-- 1~3번 CSS만 적용 -->
  <p> You Know! </p>                     <!-- 1, 2번 CSS만 적용 -->
  

  * {
  	text-size: 10px;
  }
  
  p {
  	text-size: 20px;
  }
  
  .myClass {
  	text-size: 30px;
  }
  
  #myID{
  	text-size: 40px;
  }
  

  • 선택자 우선순위는 아이디 > 클래스 > 태그 > 전체 순으로 가짐

  • 복합적인 선택자

    • 모든 선택자에 적용이 가능

    형식	적용 범위	예시
    선택자, 선택자	두 선택자 모두에 적용	div, span
    선택자 선택자	첫번째 선택자 내의 두번째 선택자에 적용	div p

    <div>
    	<p class="myClass1" id="myID"> Wa! </p> <!-- 1번 CSS 적용 -->
    </div>
    <p class="myClass1"> Sans! </p>           <!-- 적용되는 CSS 없음 -->
    <p class="myClass2"> You Know! </p>       <!-- 2번 CSS 적용 -->
    

    div .myClass1 {
    	font-size: 10px;
    }
    
    #myID, .myClass2 {
    	font-size: 20px;
    }
    

• 기본적인 CSS 속성

  /* 텍스트 속성 */
  p {
  	color: red | #FFAABB | #FFFFFFFF | rgb(255, 120, 75) | rgba(255, 255, 255, 5);
  
  	text-align: center | left | right;
  
  	font-family: Arial | Georgia ...;
  	font-size: 20px;
  	font-style: normal | italic;
  	font-weight: normal | bold | light;
  }
  
  /* 크기, 여백 속성 */
  div {
  	height: 200px;
  	width: 100%;
  
  	margin: 10px;                  /* 상하좌우 모두 적용 */
  	margin: 10px 30px;             /* 순서대로 상하, 좌우 적용 */
  	margin: 10px 20px 30px;        /* 순서대로 상, 좌우, 하 적용 */
  	margin: 10px 20px 30px 40px;   /* 순서대로 상, 우, 하, 좌 적용 */
  
  	padding: 10px;                  /* 상하좌우 모두 적용 */
  	padding: 10px 30px;             /* 순서대로 상하, 좌우 적용 */
  	padding: 10px 20px 30px;        /* 순서대로 상, 좌우, 하 적용 */
  	padding: 10px 20px 30px 40px;   /* 순서대로 상, 우, 하, 좌 적용 */
  }
  

• 가장 편하게 정렬하는 방법 : Flex Display

  div {
  	/* Flex를 적용함 */
  	display: flex;
  
  	/* 정렬할 기준 축의 방향 지정 */
  	flex-direction: column | row | column-reverse | row-reverse;
  
  	/* 가로 범위를 넘어갈 경우 줄바꿈 처리 형식 지정 */
  	flex-wrap: nowrap | wrap | wrap-reverse;
  	
  	/* 기준 축의 수평 방향 정렬 */
  	justify-content: flex-start | flex-end |
  										space-between | space-evenly | space-around;
  
  	/* 기준 축의 수직 방향 정렬 */
  	align-items: stretch | flex-start | flex-end | center | baseline;
  
  	/* 기준 축의 수직 방향에서, 줄바꿈이 일어날 경우 각 줄의 정렬 */
  	align-content: stretch | flex-start | flex-end |
  									space-between | space-evenly | space-around;
  }
  

  <aside> 💡 Flex 설명 맛집 : https://studiomeal.com/archives/197

  </aside>

반응형 디자인 : Media Query

div {
	width: 2100px;
}

@media screen and (max-width: 2100px){
	div {
		width: 100%;
	}
}

• 일반적으로 스마트폰은 768px, 태블릿은 1024px, PC는 그 이상으로 분류

<aside> 💡 CSS 설명 맛집 : https://developer.mozilla.org/ko/docs/Web/CSS

</aside>

Styled Component : React.JS에서 사용하는 특별한 스타일링

• 고전적인 형태의 div 컨테이너 스타일

  <div class="myClass">
  	<p id="BigTitle"> Hello ! </p>
  	<p id="SmallTitle"> World ! </p>
  </div>
  

  .myClass {
  	height: 200px;
  	width: 550px;
  }
  
  p {
  	color: rgb(255, 255, 120);
  }
  
  #bigTitle {
  	font-size: 50px;
  }
  
  #smallTitle {
  	font-size: 35px;
  }
  

• Styled Component를 이용한 스타일

  npm install --save styled-components@latest
  

  import styled from "styled-components";
  
  const App = () => {
  	return (
  		<TitleContainer>
  			<BigTitle> Hello ! </BigTitle>
  			<SmallTitle> World ! </SmallTitle>
  		</TitleContainer>
  	);
  }
  
  const TitleContainer = styled.div`
  	height: 200px;
  	width: 550px;
  `;
  
  const BigTitle = styled.p`
  	color: rgb(255, 255, 120);
  	font-size: 50px;
  `;
  
  const SmallTitle = styled.p`
  	color: rgb(255, 255, 120);
  	font-size: 35px;
  `;
  
  export default App;
  

뜬금없지만 React.JS 컴포넌트 파일 분리하기

• 다른 파일 내에 작성한 컴포넌트 코드를 호출해 사용하기 위해서는 export 구문이 필요함

  // App.jsx
  
  import Child from "Child_Component";     // 1
  import { Child } from "Child_Component"; // 2
  
  const App = () => {
  	return (
  		<div>
  			<Child />
  		</div>
  	);
  }
  
  export default App;
  

  // Child_Component.jsx
  
  const Child = () => {
  	return (
  		<>
  			<p> Wa! Sans! </p>
  		</>
  	);
  }
  
  export default Child;    // 1
  export { Child };        // 2
  

뜬금없지만 익명함수는 무엇인가

• 일반적인 함수 형태와 달리, 특정 변수에 함수를 할당하는 방식

  // 일반적인 함수 선언
  const sum = (a, b) => {
  	return a + b;
  }
  
  // 익명 함수 선언
  let sum = function(a, b){
  	return a + b;
  }
  

• 일반적인 함수 선언과 달리, 익명함수 방식은 무조건 선언된 이후에 호출되어야함 (호이스팅 불가)

• 일반적인 함수 선언은 스크립트 내에서 항상 메모리를 차지하고 있지만, 익명 함수 선언은 변수와 동일하게 취급되기 때문에, 동적으로 생성되고 사라지는 형태. 메모리 절약에 도움이 됨