목록Front-end (103)
NULL
사진의 크기도 css에서 설정가능하며 가로(width),세로(height) border: 1px solid red; min-height:60px; max-height:600px; 최소, 최대 길이도 지정할수있다. 쓰다가 글이 넘쳐서 삐져나오는 경우가 있는데 내용물 공간이 부족한 경우 overflow로 해결할수있다. css에 overflow:hidden; 하게되면 삐져나온 글이 사라진다. overflow:visble;를 하면 글이 삐져나온다. 보통 기본값이다. 안쓴것과 동일함 overflow:scroll; 와 overflow:auto; 는 비슷하지만 한가지 차이점이 scroll은 무조건 스크롤바가 있고, auto는 글이 넘칠때만 스크롤바가 생긴다.
padding 테두리 사이의 여유공간 margin 요소주위 여백 (테두리 밖의 공간) 한 줄에 쓰는 법 1. margin: 시계방향;(상 우 하 좌)으로 써주면 된다. 2. margin: 50px; 모든 방향 값이 똑같이 지정된다. 3. margin 50px 25px; 상하 50px, 좌우 25px로 적용된다. 4. margin 가운데 정렬 border: 1px solid blue; width: 500px; margin-left: auto; margin-right: auto; 왼쪽, 오른쪽 auto를 하게 되면 좌우 자동계산이 된다. 상하 마진0인 상태에서 하려면 margin: 0 auto; 하게 되면 상하0에 좌우는 자동 조정된다.
div태그와 마찬가지로 다른 큰 역할없이 요소들은 묶어준다. 하지만 div태그는 줄을 새로운 줄에 놓아버리고 span은 원래 있던 글에 영향을 주지않는다. 특정태그만 스타일링해주고 싶을때 쓴다.
폰트에 대해서(글씨체, 폰트다운파일, 구글폰트)
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: 이름지정 후 사용
폰트크기
pt는 px보다 1.33배 크다. 웹사이트 만들땐 별로 안쓴다. %로 폰트크기를 계산할때는 부모요소에 폰트크기를 기준으로 한다. 1em은 100%와 같고 2em도 200%와 같다.
a태그는 텍스트글자만큼 공간을 차지한다. 가운데 정렬을 하려면 a태그가 아닌 다른 다른 요소에 스타일을 주면 정렬이 된다. link text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있습니다.
CSS폰트 굵기설정
사용법 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여 가지가 있다. 그중에 없는 색깔은 이 사이트에서 찾아서 쓰면 된다.
