728x90

class 2

1. 선택자

CSS 관련하여 첫 포스팅입니다. CSS의 기본부터 차근차근 알아보겠습니다. 이번 포스팅에서는 선택자에 대한 포스팅입니다. 다음과 같은 레이아웃을 만드는데는 div를 이용하여 크기를 지정하고 안에 글자를 쓴 것입니다. 바로 코드를 보겠습니다. 선택자 /* id 선택자 : 요소 한개만 선택 '#' 키워드 class 선택자 : 요소 여러개 선택가능 '.' 키워드 */ #red { color: #FF0000; } #blue { color:#0000FF; } #green { color:#00FF00; } .box{ /* border : 가장자리 border 속성 값 : 선의두께, 선의모양, 선의색상 */ margin:20px; padding: 50px; border:1px solid black; width: 2..

Front-end/CSS 2018.08.13

7. Font Awesome

이번 포스팅은 폰트 어썸 (Font Awesome)에 대하여 알아보겠습니다. 다소 생소할지도 모르지만 특히나 대학교 전공수업때 웹 프로그래밍을 배우셨던 분들도 모르시는 분들이 꽤나 많은데요 우선 폰트 어썸이란 폰트를 아이콘처럼 사용하는 방법을 말합니다. 쉽게 이야기해서 우리가 많이 본 아이콘들은 사진으로 많이 사용을 하는데 이 폰트 어썸을 이용하면 사진이 아닌 폰트 그자체로 아무리 확대를 해도 깨지지가 않습니다. 폰트어썸을 사용한 실제 웹사이트를 한번 볼까요 ? 다음 사진을 보면 제가 font awesome을 사용하기 위해 찾는 사이트인데요 사이트의 주소는 https://fontawesome.com/ 입니다.지금은 현재 사이트를 캡쳐해와서 사진으로 나오기 때문에 확대를 하면 이미지가 깨질겁니다. 하지만 ..

Front-end/HTML 2018.07.25
728x90
반응형