도연2 0

저도 실력이 미천하지만~ 

모두가 어려워하는 css에 대해 설명해보고자 해요 ! 

절대 스트리머가 현생해서 뱅송안킨다고 시위하는거 맞음!! 절대맞음 ! 

기본적인 트게더 꾸미기-!! 

01. Font 변경 ! 

- css에서는 폰트변경은 웹폰트를 써야합니다 !  ( https://noonnu.cc/index ) 

   위 사이트에 들어가서 원하는 폰트를 정하고 클릭을 하시면 

  @font-face { font-family: 'ThecircleM'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/ThecircleM.woff') format('woff'); font-weight: normal; font-style: normal; }

이런 코드를 볼수 있습니다 .  이것을 Custom CSS에 넣으시면 변경됩니다 ! 

2. 모든 객체의 테두리를 꾸며보자 

border : 테두리를 뜻합니다.

적용 코드는

border: 2px dashed #fff000;

 -border : 박스를 치겠다

 - 2px : 두께를 이만큼 하겠다.

 - dashed : 선스타일입니다 

• solid : 실선
• dashed : 짧은 선들의 패턴으로 이루어짐
• dotted : 점선
• double : 두개의 실선
• groove : 캔버스에서 안으로 조각되어진것처럼 보인다.
• ridge : 캔버스에서 튀어 나와 조각되어진것처럼 보인다. groove의 반대로 보임
• inset : 안쪽으로 입체감이 느껴진다.
• outset : 밖으로 입체감이 느껴진다. inset의 반대로 보임
• none : 보더를 지정하지 않는다. [default 값]
• hidden : 테두리 숨기기

- #fff000; 색상코드입니다. 테두리 색을 무엇으로 할지? 

   ( https://encycolorpedia.kr/ )

3. 객체의 배경을 넣어보자

① background: #fff885;

② background: linear-gradient(to bottom, #fff, #fff885, #fff88f, #fff21a, #fff21a, #fff88f, #fff885, #fff);

① 의경우는 단색으로 배경을 넣는 방법입니다.  (심플한걸 좋아할 경우)

② 의 경우는 그라데이션으로  색상선택에 따라 이쁘게 또는 화려하게 꾸밀수 있습니다. (지저분해질수도 있습니다! 각자의 센스!)

4. 객체의 테두리에 라운드를 넣어보자

border-top-left-radius: 5px;

border-top-right-radius: 5px;

border-bottom-left-radius: 5px;

border-bottom-right-radius: 5px;

각 좌측 상단 우측 상단 좌측하단 우측하단에 라운드를 주는 명령어 입니다. 

5. 객체의 테두리에 여러선을 넣어보자

box-shadow:

    0 0 0 3px #fff,

    0 0 0 5px #fff,

    0 0 0 8px #faeb00,

    0 0 2px 8px #faeb00;

테두리에 여러 색으로 효과를 넣을수 있다.

위에 설명한 예시 

header #header-bar>.row {

background: linear-gradient(to bottom, #ffbaa8, #fcffcc, #ffd3c7);

 margin-top: 2px;

    border: 3px solid #ff9d9f;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

    box-shadow:

    0 0 0 3px #fffcb9,

    0 0 0 5px #ff9d9f,

    0 0 0 6px #fff,

    0 0 2px 6px #ff9d9f;

}

이렇게 넣으면 이런 느낌의 테두리가 생깁니다.  선스타일이나 라운드 그라데이션 단색 등등 여러느낌으로 바꿀수 있습니다.

트게더의 각 코드들은 다음 게시글을 참조해주세요 ~ 

혹시 트게더 꾸미시는데 도움이 되셨다면 추천 꾸욱