<style>에 입력하는 꾸밈태그 CSS 기본

1) 꾸밀 구역에 이름 설정

     <h1 class="내가정한이름">

 

2) <style> 태그 안에서 이름 소환 후 꾸밀 것들 지정

     .내가정한이름 { 

                        ~~~~~(꾸밈속성들)

                         } 

---

<기본>

배경관련

• background-color 구역의 배경색 (통째로)
• background-image 이미지 소환. 원본크기 그대로 불러와서 구역크기만큼만 보임.
• background-size 배경이미지 크기 조절   
  • *기본값(미지정)은 원본크기
  • *contain - 구역 안에 이미지 전체가 나오는 정도 안에서 제일 크게 담김. 비율이 안맞아서 비는 부분은 이미지 반복으로 채워짐
  • *cover - 좀 잘리는 한이 있더라도 비는 부분 없이 구역에 꽉차게 채워짐. (제일 많이 사용)
• background-size 배경이미지 구역 내 위치 조절   
  • *기본값(미지정)은 왼쪽 윗부분 맞춤

      => background-image: url("이미지 주소");

           background-position: center;

           background-size: cover;             자주 사용됨

 

 

사이즈

• width 구역의 넓이(가로) 00px
• height 구역의 높이(세로) 00px

 

폰트

• font-size
• font-weight
• font-family
• color  글씨 색깔  font-color아니고 컬러라고만 해도 글씨 색이 바뀜. 백그라운드 컬러랑 혼동 하지 않기

 

간격

• margin 바깥 여백.  인쇄 여백 처럼. 
• padding 안쪽 여백. 들여쓰기 공간 느낌.

        위, 오른쪽, 아래, 왼쪽. 순서. 하나만 쓰면 모든 위치에 적용.

 

---

 

• border-radius 모서리 둥글게 00px

 

***내용을 화면 가운데에 띄우고 싶다면,               최대의 여백을 양쪽에 둔다고 생각해보기

1) 가운데에 두고싶은 내용들을 <div>로 묶고,

2) 그 div에 이름지정.  <div class="wrap"> ~~~ <div>

3) <style> 안에서 꾸미기.

.wrap {

    width: 300px;
    margin: auto;

      구역의 가로 넓이 값 width 을 부여해서 임의의 여백이 생길수 있도록 한다.

      양쪽 여백을 최대로 한다는 의미로 margin: auto; 기입.  ---> auto는 왜 상하에는 적용이 안되는지? 

      창의 크기에 따라 자동으로 여백 조절이 되서 컨텐츠가 위치되기 때문에 auto인 듯

 

그래도 안되면? display:block을 추가! ---->???

 

 

***구역 안의 내용물까지 중앙정렬 하고 싶다면,   

=> display: flex;                               정렬을 시작한다

     flex-direction: column;              하나씩 세로정렬(column) / 기본값: 가로정렬(row)

     align-items: center;                    (가로아이템들) 나란히 :중앙

     justify-content: center;               (세로 아이템들) 나란히 :중앙

 

• .지정이름 > button:hover { ~~~~ }     버튼에 마우스를 올리면 ~~~    button:hover 띄어쓰기 없어야 자동완성 나옴

 

•  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지 주소");

                                            이걸 넣고 수치 조절하면 이미지 어둡게 가능 (글씨 잘 보이는 효과)

 

• display:none  안보이는 상태를 기본으로 할때. (효과줄때 보이게하고 싶은 부분)