개발언어/HTML, CSS

CSS 살펴보기

Roxylife 2021. 9. 11. 12:20

CSS (margin, padding, flex)

margin: 경계의 '바깥'에 있는 공간

padding: 경계의 '안쪽'에 있는 공간

- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.

- 하지만 padding은 사방에 가질 수 있다.

- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

 

id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.
- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다

 

CSS Flex 에 대해서 알아보기 좋은 자료 https://studiomeal.com/archives/197 

 

<style>
      body {
        /* 만약 body가 height를 가지고 있지 않다면, align-items를 설정하더라도 바뀌지 않을 것임.(이미 맨 위아래르 차지하고 중심에 있으니깐) */
        /* 그래서 body에 height를 추가한 것.
        /* 화면 높이의 100% */
        height: 100vh;
        margin: 20px;
        /* 자식 div들을 움직이게 하려면 부모 body것을 flex container로 만들어야 함. */
        display: flex;
        /* main-axis(주축)의 디폴트는 수평 */
        /* justify-content는 main axis를 따라 움직임 */
        justify-content: space-between;
        /* corss-axis(교차축)의 디폴트는 수직 */
        /* align-items는 cross axis를 따라 움직임 */
        align-items: center;
        /* 주축과 교차축의 기본값을 바꾸기 위해서는 flex-direction을 사용한다. */
        /* flex-direction의 디폴트는 row */
        flex-direction: column;
        /* flex-wrap의 디폴트는 nowrap. 이 경우는 크기를 줄여서라도 한 줄로 표시함.*/
        /* wrap으로 설정하면 한 줄에 컨텐츠가 들어갈 수 있는 만큼만 보여주고 나머지는 다음 줄로 넘김. */
        flex-wrap: wrap;
      }
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        font-size: 28px;
        color: white;
        height: 300px;
        background-color: teal;
      }
      #second {
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div id="second">2</div>
    <div>3</div>
  </body>

 


Position 의 방법 

1. position: static (default) - 박스를 처음 위치한 곳에 두는 것
2. position: fixed - 처음에 위치한 자리에서 화면의 스크롤에 상관없이 고정되는 것, top,bottom, left, right 속성을 줘서 고정된 위치 이동시킬 수 있음. 단 이동이 되면 가장 위의 새 레이어에 놓이게됨
3. position : relative - 박스가 처음 위치한 곳을 기준으로 이동,
top,bottom, left, right 속성을 주면 첫 위치를 기준으로 이동됨
4. position : absolute - 가장 가까운 부모 엘리먼트에 position:relative를 추가한다면, 그 부모 기준으로 top,bottom,left,right이동하고/ 아닐시엔 body 기준으로 이동된다

<style>
      body {
        height: 1000vh;
        margin: 50px;
      }
      div {
        width: 300px;
        height: 300px;
        background-color: wheat;
        position: relative;
      }
      .green {
        background-color: teal;
        height: 100px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="green"></div>
    </div>
  </body>

가상선택자 Pseudo selector

좀더 세부적으로 엘리먼트를 선택해 주는 것!
(기존 방법 : 태그, id w/#, class w/.)
선택의 복잡한 과정을 pseudo selector로 가능함

 

방법 1. div박스

    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }
      div {
        width: 150px;
        height: 150px;
        background-color: wheat;
        position: relative;
      }
      div:first-child {
        background-color: tomato;
      }
      div:last-child {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>

방법2. span태그일 경우

<style>
      body {
        height: 1000vh;
        margin: 50px;
      }
      span {
        background-color: tomato;
      }
      span:nth-child(2) {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
  </body>

방법3. span태그일 경우 짝수번째만 해당

span:nth-child(even)

별도로, 홀수번째일 경우 odd를 쓴다.

span:nth-child(odd)

방법 4. 3개씩마다 해당일 경우 

span:nth-child(3n+1)

태그 안에 자식을 지정 / 형제 지정하는 방법

div span { } : div 부모태그 밑의 모든 span 자식태그들을 지정한다.

div > span { } : div 부모태그 바로 밑의 span 자식태그를 지정한다.
div + span { } : div 형제태그바로 다음에 있는 span 형제태그를 지정한다. (sibling)

div ~ span { } : div 태그바로 다음에 있지 않는 span 태그를 지정한다. (sibling)

<body>
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod commodi e
        sequi ipsam odio dolorem. <span>inside</span>
      </p>
      <address>hi</address>
      <span>hello</span>
    </div>
  </body>

특정선택자 attribute Selector

- 그냥 input과 required input이 있다면, input:required{}를 통해서, required input에만 속성을 적용시킬 수 있다.

      input {
        border: 1px solid wheat;
      }
      /* class추가없이 form에서 required 필드를 보여줄 때 사용 */
      input:required {
        border-color: tomato;
      }


- input{} 을 통해, [input 이름]에 해당하는 input 속성을 따로 줄 수 있다.
- 여기서, input[placeholder="First name"]은 First name에만 속성을 주지만, input[placeholder~="name"]은 name이 들어가는 모든 input에 속성을 부여할 수 있다.

- "~="은 name을 포함하고 있다는 의미가 되는 것이다.

</head>
  <body>
    <div>
      <form>
        <input type="text" placeholder="First name" />
        <input type="text" placeholder="Last name" />
        <input type="password" required placeholder="password" />
      </form>
    </div>
  </body>
input[placeholder~="name"] {
        background-color: pink;
      }

 

- a[href$=".org"] → "$="는 ".org"로 끝나는 모든 anchor를 선택할 수 있다.

그 외

참고자료 

https://lalacode.tistory.com/6

 

[CSS]css 가상 선택자 정리 및 비교 (nth-child, nth-of-type)

CSS 선택자 정리 :nth-child(N) = 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N) = 부모안에 A라는 요소 중 N번째 요소 :first-child = 부모안에 모든 요소 중 첫번째 요소 :last-child = 부모안에 모든 요..

lalacode.tistory.com

https://www.codingfactory.net/12644

 

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택

www.codingfactory.net

Pseudo Selectors 살펴보기 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

의사 클래스 - CSS: Cascading Style Sheets | MDN

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을

developer.mozilla.org

attribute Selectors 살펴보기 https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

 

특성 선택자 - CSS: Cascading Style Sheets | MDN

CSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

developer.mozilla.org


State

:active 해당 요소를 마우스로 클릭했을 때(마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지) 효과를 적용

:hover 마우스 커서가 대상 위에 있을 때.

 

:visited 방문한 사이트일 경우에 효과를 적용

:focus 키보드나 마우스로 대상이 선택 되었을 경우. (클릭해서 선택하거나, 키보드 Tab키로 선택 가능.)

:focus-within 자식중 어떤 것이든 focus 되었을 때, 부모 엘리먼트의 상태를 의미.

<form>
      <input type="text" />
      <input type="text" />
      <input type="text" />
</form>
form {
      border: 1px solid salmon;
      display: flex;
      flex-direction: column;
      padding: 20px;
      }
form:focus-within {
      border-color: seagreen;
     }

그 외, stage를 다른 element와 연계해서 사용할 수 있음. 즉, 부모의 State에 따라 자식이 바뀌는 경우이다.

/* form이 hover상태가 되었을 때 input의 배경색이 sienna색일 때 */
form:hover input {
        background-color: sienna;
      }
/* form이 hover된 상태에서 input이 focus이면 */
form:hover input:focus {
     background-color: sienna;
    }

:: placeholder  placeholder의 특성만 바꾸고 싶을 때 사용합니다.

:: selection  클릭해서 긁을 때 발생합니다.

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

 

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


 

Colors and variables

1. color code  ex. #2ecc71

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=FFEBEE 

 

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

material.io

2. rgb 

red, green, blue 각각 값을 의미. ex. rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200

3. rgba 

'a(alpha)'는 투명도를 담당합니다. → 0(투명)~1(불투명) 사이의 값으로 조절할 수 있습니다.

color picker 익스텐션을 이용.

4. css custom properties 

:root {
  --main-color: #eeeeee;
  }
  
  .one {
  color: white;
  background-color: var(--main-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

:root {  --main-color }  ▶   var(--main-color)에 적용

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

 

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)

developer.mozilla.org