2023.02.07_CSS

 

단축키 모음

 

• 새로고침 : F5
• 저장 : command + S
• 전체선택 : command + A
• 잘라내기 : command + X
• 콘솔창 줄바꿈 : shift + enter
• 코드정렬 : option + command + L
• 들여쓰기 : Tab
• 들여쓰기 취소 : Shift + Tab
• 주석달기 : command + /

        ㄴ CSS 에서는 /* */, html 에서는 <!-- --> 이므로 그냥 command + / 만 기억하면 된다.

 

---

 

 

padding 과 margin의 차이 

정확한 개념을 정리를 해본다.

 

• padding : border와 content 사이의 여백
• margin : border의 바깥 여백, 주변 요소와의 거리

padding 과 margin의 쓰임

 

• 속성 4개 : 시계방향 순서로 부여된다.(위, 오른쪽, 아래, 왼쪽)

ex) margin : 10px 20px 10px 20px;

 

• 속성 2개 : 위,아래 / 오른쪽,왼쪽

ex) margin : 10px 50px;

• 속성 1개 : 위, 오른쪽, 아래, 왼쪽 다 같은 값 / 가운데 정렬은 auto; ( padding은 auto x )

 

---

 

 

CSS 정리

 

• 배경으로 이미지를 넣을 때 같이 다니는 세줄

background-image: url('');
background-position: center;
background-size: cover;

 

 

 

• 화면 가운데로 오게 하기 > 양쪽 여백이 동일하다는 뜻

     하나의 div 로 묶은 뒤 margin: auto; (상하좌우 최대한 미세요)

.wrap {
    margin: 10px auto;
    width: 300px;
}

 

• style에서 *

<style>
    * {
        font-family: 'Gowun Dodum', sans-serif;
        /* *는 모든 태그에 적용하겠다*/
    } 
</style>

 

 

• 내용물을 가운데로 정렬

display: flex;
flex-direction: column; //row는 가로로 정렬
justify-content: center;
align-items: center;

 

 

• 모서리 둥글게

border-radius: 50px;

 

 

• 선굵기  실선  흰색 선

border: 1px solid white;

 

 

• 마우스 올렸을 때 선 굵기 변화

.mytitle > button: hover {
   border: 1px solid white;
}

 

 

 

• 모바일 처리

max-width: 500px;
width: 95%;

최대 500px , 그전까지는 95% 유지