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를 써서 텍스트 자체의 높이를 키워야함