[HTML+CSS] calc, padding, order-radius, text-align, box-sizing

1. calc() - calcuate 계산하다 - calculator 계산기

/*calc는 계산을 하는 연산자 100%는 계속해서 px값이 변하므로 실시간으로 계산해준다.*/

 

★  - 뺄셈부호는 변수 바로 앞에 붙이면 음수라는 표현이고 한칸 띄우면 뺄셈이다. 사용할 때 유의하기!

 

2.padding

padding-top 윗 내부 여백이 생겨서 글자도 밑으로 밀리고 박스도 늘어남

내 div가 padding-top이 없을 경우 첫줄에 출력되지만 밑으로 글자가 밀린 모습

 

 

박스가 의도치 않게 늘어나면 글자가 밀리거나 잘려서 실무에서 좋지 않음. 

패딩 때문에 늘어나는 것을 방지하는 방법도 있음. >>>box-sizing: border-box;

★ 패딩주면 박스 늘어나니까 박스사이징 보더박스 꼭 써줘야한다!

 

 

3. border-radius:100%, text-align:center;, box-sizing:boder-box;

 

 

 

 

4. css에 넣을 이미지 출력하는 사이트

https://www.toptal.com/developers/css/sprite-generator

CSS Sprites Generator Tool | Toptal®

 

5. 이미지 찾을 때 화질 좋은 이미지 원할 경우

https://images.google.com/advanced_image_search?hl=ko 

Google 이미지 고급검색

 

6. sprite cow 사이트

이미지 스프라이트를 열어서 특정 아이콘 영역을 지어주면 가로, 세로, 위치값이 자동으로 나와서 css파일 작성시 도움이 된다.

http://www.spritecow.com/

Sprite Cow - Generate CSS for sprite sheets

7.font awesome

https://fontawesome.com/

Font Awesome

돋보기 눌러서 검색하면 여러가지 아이콘을 무료로 다운 받을 수 있다.

바로 사용할 순 없고, 라이브러리가 필요하다.

 

7-1. cdnjs

https://cdnjs.com/

cdnjs - The #1 free and open source CDN built to make life easier for developers

라이브러리 사이트 - font awesome 라이브러리 복사가능

(크기, 색깔, 회전, 애니메이션 모두 사용할 수 있다.)

 

검색어에 font awesome을 입력한다.

최신버전의 라이브러리 주소를 복사한다. (예시 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css)

 

라이브러리 주소를 복사해서 HTML의 head부분에 <link>에 넣고

font awesome 홈페이지에서 얻은 i class를 body에 넣으면

<i class="fa-brands fa-facebook"></i> 붙여넣기하면 로고를 사용 할 수 있다.

 

8. background, image삽입

background: url('경로') x좌표px, y좌표px;

x,y좌표는 그림판에서 마우스를 원하는 이미지 왼쪽 위 모서리에 올려두면 픽셀값이 나온다.