margin, padding

1. margin: 숫자;
    margin: 10px; 네군데(상/하/좌/우) 모두 10px 여백 지정

2. margin: 위아래여백 좌우여백;
    margin: 10px 20px; 위아래여백 10px 좌우여백 20px

3. margin: 위 오른 아래 왼; (시계방향)
    margin: 10px 20px 30px 40px; 위10 오른20 아래30 왼40

자동여백 속성으로 가운데 정렬 가능
1) 사이즈가 있어야함
    >블럭 요소에만 적용되는 사항
2) auto속성 부여하면 됨
3) 수평정렬 가능
    수직 정렬은 제한적인 정렬을 지원함
        position 속성(absolute, fixed), display: flex; 등


margin-top 속성은 마진 겹침 현상이 일어날 수 있음
부모 요소의 첫 번째 *블록요소*에 margin-top(위쪽 여백)을 적용한 경우, 위쪽 여백이 부모의 위쪽 여백과 겹쳐짐
위쪽에 여백을 주고 싶다면 부모 요소에서 padding-top으로 여백을 지정해야함

 

1. padding: 숫자;

    상하좌우, margin과 똑같은 안쪽여백 설정

2. padding: 위아래, 좌우;

    상하, 좌우. 각각의 숫자에 해당하는 안쪽여백

3. padding: 위, 좌우, 아래;

    각각 숫자에 해당하는 안쪽여백

4. padding: 위, 우, 아래, 좌;

 

padding을 지정하면 지정된 수치만큼 사이즈가 늘어남

사이즈가 늘어나지 않게 하려면?

    >box-sizing: boder-box;속성을 추가 작성

 

box-sizing: boder-box;

   >속성 작성시 백그라운드 사이즈가 늘어나지 않게 해줌

   >무조건 써야하나? ===>X

 

bacground: 색상 이미지(url) 반복여부 x위치 y위치

 

반복여부

    >기본이 반복이라 no-repeat 써줘야함

bottom right top left, (xy 값)등으로 위치 지정

 

background-size: 가로(위치), 세로(비율);

    >배경이미지 사이즈 조정

background-size: cover

   >요소의 전체 영역을 비율유지하고 빈 공간 없이 배경이미지로 덮음

 

background-attachment: scroll / fixed;

    >배경이미지가 스크롤 될지 고정될지를 결정하는 속성

fixed: 배경이 브라우저 창에 고정됨. 스크롤 해도 배경은 움직이지 않음

 

border: 선두께 선종류 선색상;

이미지로 만들래요!

{border: 20px solid transparent; border-image: url(imgs/border.png) 30 30 round;}

보더 사이즈로 이미지 조정

굵기가 있어야함

투명하게 할래요!

이미지 경로 위쪽자르기 아래자르기 반복스타일(stretch, round...)

 

text-arlin 은 인라인 요소에 쓰면 안댕!

대신 부모 요소에게 써야한다

 

a{color: inherit;}

이라 하면

앵커(링크)가 바디의 색상을 상속받음

밑줄 없애려고 text-decoration: none 을 붙임

 

a{color: inherit; text-decoration: none;}

자주 씀

 

앵커는 원래 개작은데

 

display: block

으로 인라인이나 블록요소로 바꿀 수 있게된다

 

가끔 배경색 호버가 안먹을때가 있는데

그건 부모 색이 입혀져서 그럼

그래서 

li{list-style: none;}
.list>li>a{background-color: #c0c0c0; display: block;}
.list>li:hover>a{background-color: #555;}

 

이것처럼 마지막 자식 요소한테 색을 입혀야함

실은 이해 제대로 못함ㅋㅋ

근데 레이어 요소로 생각하면 될듯

 

인라인에서 패딩을 위아래로 주면 부모요소가 인식을 못함 갑자기 왜 키가 2m가 됐냐고 당황함

그래서 옆으로 살을 찌워야함

.menu{margin: 30px auto; border-top: 1px solid red; border-bottom: 1px solid red;}
.menu>li{display: inline; padding: 0 30px; text-transform: uppercase;}

이런식으로

그리고 이렇게 높여줄거면 차라리 text-height를 써서 텍스트 자체의 높이를 키워야함