2022.04.15
img 아래쪽에 여백이 있는 이유
- img는 inline요소. 글자를 취급하는 요소
- baseline이라는 기준선이 존재하게 됨
- 또한 inline요소는 margin, padding의 top, bottom 여백 값을 제대로 줄 수 없다
해결방법
display: block; vertical-align: bottom;
position
position: absolute, position:fixed
- display: block;의 값을 갖고 있기때문에 해당css영역에 display: block;이 있으면 생략가능
- viewport에 영향을 받아 width: auto; 가로너비가 줄어들려고 시도하기 때문에 width: 100%로 줄것
정렬방법
수직정렬
- 부모요소에 position: relative;를 주고 정렬을 시도하려는 영역에 position: absolute;
- 기준을 잡아줘야 하기 때문에 top: 0;, bottom: 0;으로 수직정렬
- margin: auto; 해주면 수직정렬완성(실제 이미지 크기아 같은 사이즈로 정확한 height값을 줘야함)
수평정렬
- 부모요소에 position: relative;를 주고 정렬을 시도하려는 영역에 position: absolute;
- 기준을 잡아줘야 하기 때문에 left: 0;, right: 0;으로 수직정렬
- margin: auto; 해주면 수직정렬완성(실제 이미지 크기아 같은 사이즈로 정확한 width값을 줘야함)
가운데정렬은 left, right, top, bottom값을 모두 0으로 주면 가능
<body>
<div class="header">
<div class="logo"></div>
</div>
</body>.header {
background-color: pink;
width: 600px;
height: 600px;
position: relative;
}
.header .logo {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 50%;
background-color: tomato;
}CSS 메뉴 구분선
- 가상요소 ::before, ::after사용
- content: ""; 를 꼭 넣어줘야함
- ::before, ::after은 inline요소
<body> <ul class="menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body>.menu { display: flex; list-style: none; } .menu li { padding: 0 20px; position: relative; } .menu li::before { content: ""; width: 1px; height: 15px; background-color: black; top:0; bottom:0; left:0; position: absolute; margin: auto; } .menu li:first-child::before { display:none; }
CSS calc()
- calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 겨로가가 최종값이 됨
- 표현식은 단순 계산식은 무엇이든 가능
- 표준 연산자 우선순위를 따름
- +(덧셈), -(뺄셈)연사자는 좌우에 공백이 있어야함
- *(곱셈), /(나눗셈)은 좌우 공백 필요없음
FHD = 1920 x 1080
비율 16 : 9 = 100% : 56.25%
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS Grid속성 (0) | 2022.04.13 |
|---|---|
| CSS filter속성 (0) | 2022.04.13 |
| 가상클래스(pesudo class)와 가상요소(pesudo element) (0) | 2022.04.08 |
| CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0) | 2022.04.07 |
| CSS 속성 (0) | 2022.04.06 |