교육 썸네일형 리스트형 폰트 설정 폰트는 5종류로 나눌수 있다 serif times new roman 궁서체 끝이 살짝 구부러져있다 sans-serif arial 굴림체 깔끔한 디자인 하기에 좋다 monospace courier courier new 모든 글자 폭이 같다. 프로그래밍 폰트로 많이 쓰인다 cursive comic sans ms monotype corsiva fantasy impact haettenschweiler 지저분해 보일수 있기 때문에 짧은 글귀에 쓰인다 태그 설정 방법 font-family: "Times New Roman", Times, serif; 설치되있는 폰트 운선순위를 정해준다. 설치되지 않은 폰트를 사용하려면, 요즘 가장 많이 쓰이는 구글 폰트를 쓴다. 브라우저에서 fornts.google.com 입력한다... 더보기 Line-height line-height를 사용하면 줄간격을 조절할 수 있습니다. 사실 line-height 속성을 '완벽하게' 이해하려면 타이포그래피 지식이 조금 필요한데요. 우선은 아주 간단하게만 설명드리겠습니다. 위 사진에 파란 줄 보이시죠? 이 파란 줄 사이가 실제 내용이 들어가 있는 'content area'(콘텐츠 영역)입니다. font-family와 font-size에 따라서 'content area'가 정해지고, line-height는 'content area'에 영향을 주지 않습니다. line-height를 통해서는 각 줄이 실질적으로 차지하는 공간을 정해줄 수 있습니다. 예를 들어서 99px로 설정하면 'content area'보다 40px이 많기 때문에 위 아래로 20px의 공간이 추가로 생깁니다. 반대.. 더보기 폰트 크기 폰트크기는 2가지로 나뉜다. Absolute절대적 / Realative절대적 px / em pt / % pt(포인트)가 px(픽셀)의 1.33배정도 크다 1em은 100%와 같고 2em은 200%와 같다. 더보기 텍스트 꾸미기(text-decoration) text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있습니다. 사실 옵션도 몇 가지 없고 딱히 예쁘지도 않지만 한 번 살펴봅시다. Underline underline 값을 사용하면 밑줄이 그어집니다. HTML Hello World! CSS h1 { text-decoration: underline; } Overline overline 값을 사용하면 글 위에 줄이 그어집니다. HTML Hello World! CSS h1 { text-decoration: overline; } Line-through line-through 값을 사용하면 줄이 글을 관통합니다. HTML Hello World! CSS h1 { text-decoration: line-through; } None none 값을.. 더보기 가운데 정렬이 안 돼요 코드를 작성하다보면 a태그 가운데 정렬이 안되는 경우가 생긴다. 개발자 도구를 활용해서 검사해본다. 글이 차지하는 공간이 보이는데, h1태그나 p태그는 가로길이가 화면 전체를 차지한다. 가로공간에서 가운데 정렬을 하면 화면 가운데 오게된다. 반면 a태그는 글자 크기만큼 공간을 차지한다, 그래서 가운데 정렬을 해도 그대로 있는 것 처럼 보이는 것이다. 인라인 디스플레이와 블록 디스플레이에서 내용을 다루도록한다. 이럴때는 a태그를 div로 감싸고 클래스를 지정해준다 Link div는 가로길이가 화면 전체를 차지하기 때문에 css로 div에 정렬을 주면 가운데 정렬이 된다. .menu { text-align: center; } 정리 text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정.. 더보기 몇가지 텍스트 스타일링 텍스트에 사용하는 css 속성 굵기 font-weight: 100~900 까지 100이 가장 얇고 900이 가장 굵다 400이 보통. 700이 b태그와 같다 주의! 110 같은 설정을 하면 기본속성이 나온다. 100, 200,300 식으로 100단위로 증가한다. 폰트와 브라우저에따라 사용 가능한 범위가 정해져있다. 테스트하면서 사용해야한다. 정렬 text-align: left; right; center; 안쓰면 왼쪽정렬 text-decoration: underline; overline; line-through; none; axo그에 밑줄을 지우기위해 많이 쓴다. 정리 폰트 굵기를 설정하기 위해서는 font-weight 속성을 사용하면 됩니다. 사용법 사용 가능한 값은 얇은 순서로 100, 200, 300.. 더보기 텍스트 색 지정 h1태그의 텍스트의 색을 변경하려면 스타일태그 사용한다. 구글에 css color 검색하면 색 이름이 나온다. 좀 더 디테일한 색을 적용하고싶다면 htmlcolorcodes.com 과 같은 사이트를 사용한다. RGB는 레드 그린 블루의 약자이다. 이 비율에따라 색이 결정된다. RGB를 적용한 태그는 혹은 hex값을 사용하여 헥스값은 16진법으로 되어있다. 16진법 61은 10진법 97, 16진법 F9는 10진법 249, 16진법 6B는 10진법 107이다. 색상에 투명도를 적용할때는 hex코드 6글자 뒤에 FF를 추가-가장불투명 / 00추가-투명 정리 텍스트의 색을 지정해주기 위해서는 color 속성을 사용하면 되는데요. CSS에서 색을 표현하는 방식이 세 가지가 있습니다. 색 이름 CSS에서 정해준 색.. 더보기 크롬 개발자 도구, 도움되는 웹 사이트 크롬 개발자 도구를 사용해서 지금 보고있는 웹페이지의 구성을 확인 할 수있다. F12 혹은 오른쪽 상단 설정탭에서 기타-고급기능-개발자도구 에 들어가서 확인할 수 있다. 도움뒤는 웹사이트 구글에서 궁금한 부분을 검색한다. 예를 들어 css text decoration 검색하면 첫 링크로 W3schools 홈페이지가 뜬다. 기본적인건 거의 다 설명되어있다. 다른 예로 get rid of underline a tag stack overflow가 상위에 링크된다. 세계에서 가장 활발한 포럼이다. 영어라고 부담스러워 말고 적극적으로 찾으면 궁금증을 쉽게 해결할 수 있다. jsfiddle.net는 html / css /js를 테스트해볼수있는 사이트다. 저장하면 링크가 생기고, 이 링크를 복사해서 스택오버플로우에 .. 더보기 이전 1 2 3 4 5 6 7 ··· 17 다음
