CSS 개념정리 4

soo-hyeon·2021년 2월 8일

목록 보기

4/4

Box Shadow

h-offset / v-offset / blur / spread / color
x / y / 흐린정도 / 그림자사이즈 / 색상

ex) box-shadow : 0 10px 16px 0 rgba(255, 255, 73, 0.35);

👁‍🗨 예시

.cancel-button{
    background-color: #ff4949;
    transition: box-shadow 250ms;
}

.cancel-button:hover{
    box-shadow: 0 10px 16px 0 rgba(255, 73, 73, 0.35);
}

Opacity(투명도)

🔑 0 - 완전 투명 / 1- 완전 불투명

ex) opacity:0.8;

Overflow

visible : 기본값(넘쳐 흘러도 그냥 둠)
auto : 넘쳐 흐르면 알아서 해라(보통 scroll로 처리됨)
scroll : 넘쳐 흐르면 scroll로 표시해라
hidden : 넘쳐 흐르면 숨겨라

ex) overflow : hidden;

Transform

🔑 transform : 모양을 변형시키는 역할을 함 / 다른 요소를 방해하지 않음

🔎 transform 요소에서 쓰이는 함수들

translate() : 위치를 옮김
scale() : 크기를 변화시킴
rotate() : 각도를 변화시킴

👁‍🗨 예시

.box{
    width : 300px;
    height : 300px;
    border-radius : 20px;
    background-color : #0066ff;
    transform : traslate(40px, 50px);
    transform : scale(0.5, 3);
    transform : rotate(45deg);
}

Visibility

🔑 visibility : 요소가 보여질지 안 보여질지 조정하는 속성
-> visible / hidden

ex) visibility : hidden; - 이 경우 존재하지만 보이지는 않는다
그러나 display : none; 을 할 경우 존재 자체가 없어진다

Selector(선택자)

type selector : h1, p, span 등과 같은 html의 기본적인 타입을 선택지로 사용
class selector : html에서 class로 선언해준것을 선택자로 사용,
클래스 이름 앞에 "."을 꼭 찍어 주어야 한다.

예시

<div class = "box">  ->  .box{ ... }

ID selector : html에서 id로 선언해준것을 선택자로 사용,
id 이름 앞에 "#"을 꼭 적어 주어야 한다.

예시

<h1 id = "soohyeon">  ->  #soohyeon{ ... }

Child, Descendant & Sibling Combinators

child combinator(자식 선택자) : parent > child
ex) section > h1 { ... }
descendant combinator(자손 선택자) : parent descendant (한 칸을 꼭 띄어주어야 한다)
ex) section h1 { ... }
sibling combinators : parent+sibling / parent~sibling
ex) .active~li { ... } -> active 뒤에 오는 모든 li들에게 ...을 적용
ex) .active+li { ... } -> active 바로 뒤에 오는 li 하나에게 ...을 적용

Structural Pseudo-classes(구조적 가상 클래스 선택자)

element:first-child - 요소 중 첫번째 선택
ex) li:first-child { ... }
element:last-child - 요소 중 마지막 선택
ex) li:lasat-child { ... }
element:nth-child(n) - 요소 중 n번째 선택
ex
li:nth-child(3) { ... } - 3번째 선택
li:nth-child(2n) { ... } - 짝수만 선택
li:nth-child(2n-1) { ... } - 홀수만 선택

User Action Pseudo-classes(동적 가상 클래스 선택자)

element:hover - 어떤 요소에 마우스 커서를 올렸을때 상태를 표현
ex) a:hover { background-color : #7e5bdf;}
element:focus - 어떤 요소가 focus 됐을 때 상태 표현
ex) input:focus { border-color : # 1fb6ff;}
element:active - 어떤 요소를 누르는 찰나의 상태 표현
ex) a:active { background-color : #592dea;}

CSS 선택자 우선순위

① ID selector ② class/pseudo-class ③ type selector

※ Rule breaker1 : Inline style ( html 태그안에 스타일 주는거 ) ⭐강력

<p style = "color : #ff4949;">

※ Rule breaker2 : !important ⭐⭐제일강력

p { color : #ff4949 !important;}

🔥🔥 Rule breaker들은 사용을 지양하는게 좋다!!!

Grid System

🔑 grid system : 디자이너들이 디자인 하기 위해 만들어둔 일종의 가이드 라인

container : grid가 적용되는 전체 영역
column : 화면의 칸을 나누기위해 사용, 보통 12칸으로 많이 나눔
gutter : 간격을 위한 여백

Bootstrap

🔑 bootstrap : 반응형 웹을 만들때 매우 유용

👁‍🗨 형식

<body>
    <div class = "container">
        <div class = "row">
            <div class = "col-1">
                <p> ~ </p>
            </div>
            <div class="col-12">
                <div class="box">
                </div>
            </div>
        </div>
    </div>
</body>

⭐ ex)

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

▲ 화면 크기(break point)마다 col이 바뀜

soo-hyeon

이전 포스트