START! 스타일 시트 만들기

그럼 style 창에서 new를 클릭하니 또다른 창이 떳죠 집중해서 들으세요..스타일 시트는 아주 중요한 것입니다..멋진 기능이고

첫번째 메뉴인 make custom styles (class) 은 해석 그대로 스타일 시트를 직접 만드는 것입니다. 두번째 메뉴인것 Redefine HTML Tag는 스타일 속성의 태그의 정의를 바꾸는 것, 마지막으로 Use CSS Seletor는 확장태그들에 각각에 속성을 부여하는 것입니다. 먼저 첫번째 메뉴부터 알아 보도록 합니다. make custom styles (class) 메뉴를 선택하고(점찍고 ) 아래 name 부분은 우리가 만들 스타일 시트의 이름을 정하는 것인데 기본값인 .unnamed1 으로 하세요 ( . ) 쪽 찍으셔야 합니다. 그리고 ok를 누르세요 그림과 같은 창이 나오죠.

일단 간단하게 스타일 시트를 만들어 보도록 하겠습니다. 무조건 따라사헤요. 카테고리에 기본적으로 font메뉴가 선택되어 있죠. 이것만 정해줘도 된답니다. 카테고리 font에서 font 는 굴림 size에는 12 line height에는 120 % 로 정하고 color부분에 파란색으로 지정해 줍니다. 이뜻은 글자크기 12에 줄간격 120% 글자색깔은 파란색으로 지정을 한다는 뜻입니다 그리고 ok버튼을 클릭하세요 그럼 edit style sheet 란에 여러분이만든 .unnamed1 라는 제목의 스타일이 생겼죠. edit style sheet 창에 .unnamed1까지 만든것이 확인 하셨으면 edit style sheet 창도 닫으세요 가장 처음에 스타일 시트 만들기 위해연 style창에 [none] 말고도 우리가방금 만든 .unnamed1이라는 스타일이 새로 생겼죠. 이렇게 스타일 시트를 우리가 간단한게 만듭었습니다. 만든 스타일을 지정할려면 아무 글자나 치고 난 다음에 블럭을 정한 상태에서 style창에 잇는 .unnamed1 을 클릭해보세요. 우리가 만든 스타일대로 글자의 크기가 12로 색깔은 파란색으로변한것이 보이시죠. 안된다면 다시 연습해 보세요. 그냥 아무생각없이 따라하셔도 금방 됩니다.

이것이 스타일 시트의 다는 아니지요. 계속해서 설명이 이어집니다.

Top