flex-wrap

flex-wrap: nowrap; -> 한줄로 나타내집니다.

flex-wrap: wrap; -> 행으로 나타내집니다. 

flex-wrap : wrap-reverse; ->  가운대빼고 맨위 맨아래 순서바뀌고 행으로 나타내집니다.

참고>

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap

text-overflow: ellipsis;
white-space: nowrap;
display: block;
overflow: hidden;

위 요소를 원하는 태그에 지정해주면 적용됩니다.

cf) 

- display: block; 으로 너비를 가질수 있게 변경해줍니다.

- nowrap 으로 너비를 넘어서면 자동으로 줄바꿈하는것을 막을수 있습니다.

- overflow: hidden; 으로 넘치는 부분을 화면에서 감출수있습니다.

- eclipsis 로 숨긴부분을 (...) 처리 합니다.

<적용된 모습>

클론코딩 웹사이트도중 Noto Sans KR 을 아무리 적용해도 적용이되지않아서 힘들었는데 찾아보니 cdn이나 @import를해서 css링크를 가져와야 작동할수 있는것이였습니다. ㅎㅎ..

글 글꼴 CDN 링크를 붙여 넣는 방법과 CSS 파일에 @import 지시자로 글꼴 링크를 붙여 넣는 방법 2가지가 있는데

import를 사용해서 적용해보겠습니다.

@import를 css파일 원하는곳에 입력후 저장하면 바로 적용됩니다.

적용코드->

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap');

css파일에 입력후 적용된모습입니다.

상속(Inherit)

부모요소를 자동으로 자식요소에 상속되도록 하는 요소들이 있습니다. 이것들은 주로 텍스트와 관련된 요소들입니다. font(font-size, font-weight, font-style, font-family), color, text-align, text-indent, text-decoration 등

<!-- html -->
<div class="Onepiece">원피스
  <div class="Pirates">해적
    <div class="Roger">The Roger Pirates</div>
    <div class="RedHair">The Red Hair Pirates</div>
    <div class="Rocks">The Rocks Pirates</div>
  </div>
  <div class="Marine">해군
    <div class="Sengoku">Sengoku the Buddha</div>
    <div class="Borsalino">Kizaru</div>
  </div>
</div>

body {
  font-family: sans-serif;
}
.Onepiece {
  color: blue;
}

위처럼 한곳(Onepiece)에만 적용해도 전체적용되는것을 보실수 있습니다. 

강제상속

상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있습니다. '자식'을 제외한 ' 후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아닙니다.

<div class="parent1">
  <div class="child1"></div>
</div>

.parent1 {
  position: absolute;
  background-color: green;
  width: 100px;
  
}

.child1 {
  position: inherit; /* 강제 상속 받아 position: absolute; 와 동일 */
  background-color: blue; 
  width: 50px;
  
}

:nth-child

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

<키워드 값>

<예제>

선택자

참고> 

https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

적용방법

문자중간에 기호가 없을경우에는 

id -> id={styles.Hello} 

className -> className={styles.Hello}

이런식으로 작성하며 

중간에 (-), (_)기호가 들어갔을시에는 

id -> id={styles["Hello-Kim"]} 

className -> className={styles["Hello-Kim"]}  

이런식으로 작성합니다.

또한 밑과같이 control 옆 active 사이에 스페이스 상태로 사용하면 적용이 안되는것 같으니 참고해야 될 것 같습니다.

<a href="#none" className={styles["btn_eventControl active"]}>

주의사항

주의사항으로는 예를들면 바로밑 사진과 같이 SimpleSlider.js 이렇게 모듈파일이라고 해도 style 적용시에 

위 사진의 <h2> 부분과 <h3> 과 같이 css module이 적용이 안되어 있으면 module 이 적용안되어서 전체 파일 css에있는 <h2>에 공통적으로 적용되니까 주의해야 합니다.

또한 모듈을 적용해놔도 해당모듈에 css 를 적용하지 않으면 바로 밑사진과 같이 X표시한것처럼 css module이 적용되지 않은 모습을 볼 수 있습니다.

그리고

정의 및 특징

<dd> 태그는 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의할 때 사용합니다.

<dl> 요소는 용어(term)나 이름(name)을 나타내는 <dt> 요소와 해당 용어에 대한 설명을 나타내는 <dd> 요소로 구성됩니다.

ex) 

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

ex) padding/margin : 0 12px 11px 1px;  

  = 12시 -> 3시 -> 6시 -> 9시 방향순서로 각각 적용됩니다. 

ex)  padding/margin : 0 12px 11px;

  = 12시 -> 3시/9시 -> 6시 방향순서로 각각 적용됩니다. (여기서 3시/9시는 같이 적용됩니다.)

ex)  padding/margin : 0 12px; 

  = 12시/6시 -> 3시/9시 방향순서로 각각 적용됩니다.(여기서도 /로 같이쓰인것끼리 같이적용됩니다.) 

ex)  padding/margin : 12px; 

  = 12시/3시/6시/9시 모두 동일하게 12px로 적용됩니다.