목록Front-end/HTML,CSS (40)
NULL
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bAiu3y/btqEKwMI2Kk/IAvpsatcnqnRQM3yUJkQg0/img.png)
font-family: 폰트1, 폰트2, 폰트3; 폰트1이 없다면 폰트2. 폰트2도 없다면 폰트3. 이런식으로 적용된다. 구글폰트 fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 이 사이트에서 링크로 폰트를 불러와서 적용시킬수도 있고 폰트를 다운받아서 사용할수도 있다. 폰트파일 사용하는법 폰트파일을 다운받은 후 css파일에 font-face { src: url(폰트주소) } font-family: 이름지정 후 사용
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b2zCIi/btqEJDerefV/oyuAAmDgqBKh5waHkTrlgk/img.png)
pt는 px보다 1.33배 크다. 웹사이트 만들땐 별로 안쓴다. %로 폰트크기를 계산할때는 부모요소에 폰트크기를 기준으로 한다. 1em은 100%와 같고 2em도 200%와 같다.
a태그는 텍스트글자만큼 공간을 차지한다. 가운데 정렬을 하려면 a태그가 아닌 다른 다른 요소에 스타일을 주면 정렬이 된다. link text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GSGVQ/btqEIJsJnuu/hhEkyGEBtKYFaZe0fR89xK/img.png)
사용법 100부터 900까지 100이 젤 얇고, 900이 젤 굵다. font-weight: normal;은 font-weight: 400과 같고, font-weight: bold;는 font-weight: 700과 똑같다.
htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com HTML 색깔은 140여 가지가 있다. 그중에 없는 색깔은 이 사이트에서 찾아서 쓰면 된다.
코멘트 장점 1. 너무 오랜만에 보면 코드를 까먹을수도 있기때문에 써두면 효율적이다. 2. 혹은 복잡한 코드를 설명하기 좋다. 사용방법은 간단하다. HTML 코멘트 CSS 코멘트 /* 내용 */ 단축키 Ctrl+/ 여러줄 Ctrl+Shift+/ or 여러줄 드래그 후 컨트롤 + / 코멘트는 결과물에 반영되지않는다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/M1Vnr/btqEKfcX0fv/kEo6myuVIwSJFpKRO0XpyK/img.png)
class는 중복 클래스가능 id는 중복 아이디 불가능 , 태그에서 중복되는 아이디가 있으면 안된다. class는 여러 클래스가 가능한 반면 id는 하나만 가능하다. 여러요소를 스타일링 한다면 class 하나만 스타일링하고 싶다면 id css에서 class는 .으로 선언했지만 id는 #으로 선언해준다.
폰트 크기 폰트 크기도 픽셀로 설정하는 경우가 많다. 폰트 크기가 16px로 설정되있으면 폰트 세로 길이가 16px이라는 뜻입니다. 퍼센트 길이는 픽셀 말고 퍼센트(%)로도 설정가능하다. 이미지 가운데 정렬 img { display: block; margin-left: auto; margin-right: auto; }