노마드코더)코코아톡 클론코딩 - CSS(Cascading Style Sheet)

css 추가법

1. html 파일에 css 추가하기  - <style> 태그 이용 > head 안에 기입 <inline css>

2.분리 > styles.css 파일 만들고 > html의 head 안에                       <external css>

         <link href="styles.css"  rel= "stylesheet" />

 

 

 

body나 h1등 태그 자체를 가르킬땐

 

그대로 selector하고

 

id는 

#id

 

class는

.class

 

전체는 * 로 지시

 

selector{

     속성 : 값 ; 

}

 

이게 기본형식

 

속성값에 띄어쓰기를 하면 안된다.

 

selector을 , 로 묶어 그룹을 만들 수 도 있다.

그럼 보기편해짐 >> 같은 부분은 묶는것

> class로 묶어서 지정하는편이 더 좋긴 함

selector, selector, selector {

       속성:값;

}

 

(상세)pseudo selector 

     ex) div:last-child {

}

         겹치는 태그 이름 : 순서-child

                 or  겹치는 태그 : nth-child( 숫자 )  숫자안에는 곱셈이나 공식을 넣어도 됌

따로 계속 id나 class를 만드는 것보다 훨씬 좋은방법 코드를 고칠 필요가 없다. [ 너무 남발하면 확인하기 어려울듯함 ]                 

 

보통 id 는 제약이 많아서

class를 많이 사용함

 

 

태그안에 태그를 지정하고 싶을때

부모태그 자식태그 {

}     >> 원하는 만큼 부모를 적어도 상관없음

 

 

부모태그 바로 밑 자식태그를 선택하려면

 부모>자식 {

}

 

같은 형제 태그중에 픽하는 것이면

형제 + 지정태그 { 

}  >> 바로 다음에 오는 걸 지정할 때

 

pseudo-elements

형제 ~ 지정태그 {

}  >> 바로 다음에 오지 않을 때

 

태그 [~= ""] {}   ~을 포함하는 태그를 찾을 수도 있다.

 

 

id는 겹칠 수 없지만

class는 가능하다.

 

완전 똑같은 내용이 반복되면 안좋으니 class로 묶어서

가르키기

 

한 태그에 두가지 클래스를 넣을 때

class=""  class="" 가 아니라

class=" 내용  내용" 으로 넣을 수도 있다.

 

 

 

css는 Cascading

차례대로 읽히기 때문에 

속성이 겹치면

제일 마지막에 적힌 속성이 적용됨

 

 

box는 옆으로 올 수 없음 (block)

바꾸려면 속성값을 지정해야함

        - block은 높이와 너비값이 있음

 

box가 아닌 태그는 가로로 적용됨 (inline)

        -inline은 높이와 너비값이 없음

 

 

box를 inline으로  inline을 box로 변경하는 법    

display 속성 이용

   selector {

           display : (inline/block) ; 

           } 

 

 

 

inline은 사방에 paading을 가질 수 있지만

margin은 좌우뿐이다.

위아래 주려면 block으로 변경

   

inline-block도 있지만

화면이 크기가 다르면 또 화면 결과값이 달라짐

자체 문제가 너무 많음 반응형 디자인을 지원하지 않음

있는 정도만 알아두고

flex를 사용하기

 

 

flex는 자식엘리먼트에 적지말고 부모엘리먼트에 적어야함

   ex)) div에 주고싶으면 body에 display :  flex;

      

   flex를 주고 내용을 전체적으로 중간에 두고싶거나 등등 정렬하고 싶을때

   justify-content :       >> 주축 위에서 움직임 >> 수평이 아님>> 주축이 수직으로 움직이게도 바꿀 수 있음

   align-items >> 교차축에서 움직임

  자동계산해주는 반응형 웹을 만들 수 있음

 

주축과 교차축을 바꾸려면 flex - direction  : column;   >>> column-reverse; 서로 바꾼후 상하 순서 변경

 

다 외우지 말고 flexbox를 찾아보고 상황 맞게 쓰기 

 

 

 

height에 vh를 줄 수 있는데 

이건 viewport height를 뜻함 viewport 는 screen을 뜻하기도

100vh 는 화면 높이의 100%를 뜻함

https://ossam5.tistory.com/310

[CSS3강좌] 37강 CSS단위 - px, em, rem, vw, vh 등

 

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN

 

 

 

 

 

 

 

position : fixed;

화면에 고정됨 스크롤해도 움직이지 않음

고정은 초기에 위치한 자리임

top, left, right, bottom 을 하나라도 선택하면 상자가 겹치고

하나도 지정안하면 넘어가지 못함

 

넷플릭스 처럼  위에 메늅바를 고정하는데 쓸 수 있음 안에 영화 컨텐츠 부분만 움직임

 

position : relative; >> 그 자리에서 약간 변경할 때 사용        

                absolute  >> 가장 가까운 relative부모를 기준으로 이동

                이것도 div>>> body가 부모 자기를 애워싸고 있는 태그가 부모

 

근처에 부모 relative를 만들면서 수치를 조정할 수도 있음

 없으면 body기준이 되지요~~

 

디폴트값은 static >> 박스를 처음 위치한 곳에 두는 것

 

 

 

 

 

 

 

margin

 box의 border의 바깥

 

margin 한줄작성

<4값을 줄 때>

margin-top: a;
margin-right: b;
margin-bottom: c;
margin-left: d;
를 합쳐서

 

margin: a b c d;  으로 작성

 

<3값을 줄 때>

top: a
right, left: b
bottom: c

 

margin: a b c;

 

<2값을 줄 때>

top,bottom: a

right, left: b

 

margin: a b;

 

<1값을 줄 때>

top,bottom,right, left: b;: a

 

margin: a;

 

 

 

collapsing margins(마진병합)

-상하만 적용됨

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해

 

 

 

padding

-box의 border로 부터 안쪽 공간

-지정하는 법은 margin과 똑같음

 

 

 

 

border

-box의 경계

-거의 한종류만 사용 (solid)

-width로 사이즈 조절

-너비, 스타일, 색깔 두께

https://developer.mozilla.org/ko/docs/Web/CSS/border-style

border-style - CSS: Cascading Style Sheets | MDN

border-radius >> border를 둥글게 만듬

       값을 50%로 하면 원이 된다.

 

 

 

 

opacity >> 투명도

 

 

 

 

 

states >>> 예시로 버튼 속성 넣기였음 버튼 올리면 색이 뜨거나 누르면 뜨는것처럼

                     input이나 다른곳에서도 사용됨

       부모 : focus-within {}  >>자식태그를 수정함 css   >> 효과주는법 states

        태그 : active {}  >> 이런식으로 보통 자신에게 효과를 줌

 

         태그: 효과 지정태그{}  이러면 태그에 올리면 지정태그에 효과가 나타남

       태그: 효과 지정태그 : 효과 {}  이런식으로도 작성가능

 

states
1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 !
4) visited : 링크에만 적요이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다

state들을 다른 엘리먼트와 연계해서 사용할 수도 있다
1) 부모의 state에 따라 조정
form:hover input {
background-color: slateblue;
}
즉, form이 hover일경우 input의 백그라운드 컬러가 바뀌게된다
부모의 state에 따라 자식의 state를 조정할 수 있다
2) 부모와 자식의 state에 따라 조정
form:hover input:focus {
background-color: teal;
}
이렇게도 supercool하게 사용가능도 하다!

 

 

본 영상에서 앞 부분에 잠깐 나온 pseudo element들은 :(콜론)이 2개인 게 특징입니다.
1) :: placeholder (0:46)
: placeholder의 특성만 바꾸고 싶을 때 사용합니다.

2) :: selection (1:31)
: 클릭해서 긁을 때(1:58) 발생합니다.

3) :: first-letter
: 첫 글자에만 적용됩니다.

4) ::first-line
: 첫 줄에만 작용합니다.


* 11.17 States 복습 내용
1) active
: 클릭할 때 작동 (예: 버튼 클릭 시 색깔 변함)

2) hover
: 마우스 커서를 올려놓으면 작동 (예: 글자 위에 마우스 커서 올려두면 색상 변함)

3) focus
: element가 focused된 상태. 3:50 보시면 키보드 탭 버튼으로 이동하면서 생기는 그 모양을 보시면 될 것 같아요.

4) visited
: 방문한 사이트와 관련하여 일어납니다. (예: 애플 링크 눌러서 방문했는데, 다시 보니 해…

 

 

 

 

 

 

 

::placeholder : placeholder를 스타일링 할 수 있다
::selection : p 태그 내용을 스타일링 할 수 있다
first-letter : 첫글자만 대문자로 바꾸어준다
first-line : 첫 문장에 배경색을 칠해준다

state 정리

active: 눌렀을때 반응하는 것
hover: 마우스 커서를 올렸을때 반응하는 것
focus: 선택되었을때 반응하는 것
focus within: focus(선택된) 상태인 자식을 가진 부모 element(요소)에 반응하는 것
visited: 링크를 방문(클릭)했을때 반응하는 것

 

 

 

combinator 정리

space : 부모 자식 관계를 가진 것    ex)) p span {  }

                                                        부모 자식 { }     

//// 계속 띄어쓰기로 연결 가능, 원하는 만큼 부모태그 붙이기 가능 
> : 부모와 바로 밑 자식 관계를 가진 것    부모 > 자식 {}
+: element(요소) 바로 다음에 오는 형제 관계인 것   형재 + 지정태그 {}
~: 바로 다음에 오지 않아도 되는 형제 관계인 것 

 

 

 

 

attribute 정리

input[] :
input[type="password] 를 적용시켰을때 password라는 type을 가진 input만 선택하는 것

 

 

이해안가는 부분은 구글 이나

https://developer.mozilla.org/en-US/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

 

검색해서 보기

 

 

 

 

 

꼭 알아야할 컬러 시스템 3가지

1. hexadecial color(16진수 컬러)

     # >>컬러코드  ex)) #fffff

 

2. RGB방식   >>red.green,blue뜻

       rgb(xxx.xxx.xxx)

 

3. RGBA >> RGB에 투명도 추가      a는 알파

       rgba(xxx.xxx.xxx.x)

             xxx.xxx.xxx 는 rgb지정이고 

            마지막 x는 투명도  >>  예로 45%면 0.45 , 최댓값은 1 

 

 

 

css에서 같은 속성값을 한번에 바꾸는 방법 >>> 가상클래스

::root

     

     이렇게 관리하면 같은 부분을 바꿀때 루트 속성값만 바꾸면 된다.

ex) :: root {

          --main-color: 값;    (--다음에 변수이름 사이에 공간있으면-로 채우기)

     }

 

     위에 것을 이용해서 값으로 사용하는 법 

     

    태그 {

     속성 : var( --main-color: 값;);

 

}

 

https://designer-ej.tistory.com/entry/CSS-root-%EA%B0%80%EC%83%81-%ED%81%B4%EB%9E%98%EC%8A%A4%EB%A1%9C-CSS-%EB%B3%80%EC%88%98-%EB%8B%A4%EB%A3%A8%EA%B8%B0

[CSS] :root 가상 클래스로 CSS 변수 다루기

 

 

 

 

transitions

 - 지정시간동안 천천히 변화 

 -변화를 애니메이션으로 만들어줌

 

  >>> 먼저 states 상태를 주고 

 

 

    태그1의 기본 css

    태그1의 states css

 

     2개를 적고

     states css부분이 아닌 기본 css 부분에

      transition 을 넣어줌 >> 어떤 것을 얼마 동안 변화 줄 것인지도 적어야 함

                                   + 추가적으로 효과방식을 더 넣을 수 있음

       

          states쪽에 적으면 안되고 무조건 기본 css부분에 transition을 적어야 함

         그리고 변화를 주려는 요소를 두곳에 다 적어야 함

 

 

         속성쪽엔 가장 일반적으론 all을 사용

        

 

위에 내용 ease-in-funtion 부분 

밑에 사이트 들어가면 적용전 확인하기 쉬움

       cubic - bezier을 이용하면 자신만의 가속을 만들 수 있음

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

 

 

transfrom >> 변형시켜줌

         다른 요소에 영향을 주지 않음

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

 

 

animation

 

 

 

 

 

 

 

https://nomadcoders.co/kokoa-clone

코코아톡 클론 코딩 – 노마드 코더 Nomad Coders