1. Property
예 : property-name: value;
Property는 소문자로 써야하며, 중간에는 공백이 없어야 하고 마지막엔 세미콜론을 붙여야 함
2. Selector
Property를 사용하기 위해서는 Seelctor가 있어야 하는데, html에서 사용하는 것들..예를들면 class, h1 등에 괄호를 사용한 것이 Selector이다.
예 :
.class{
property-name: value;
}
h1. class{
property-name: value;
}
홈페이지 상단의 Menus 메뉴에서 만들고자 하는 메뉴 형태를 선택합니다.
Menus - Responsive 메뉴를 선택하면 다음과 같은 화면이 나타납니다. CSS MenuMaker 사이트에서 제공하는 반응형 메뉴는 다음과 같습니다. 총 6개의 메뉴를 지원하고 있는데요. 각 메뉴마다 표시되어 있는 우측 하단의 No Submenus, 1 Submenu, 2 Submenus는 해당 메뉴에서 지원하는 서브메뉴 단계를 의미합니다. No Submenus는 서브메뉴를 지원하지 않는다는 것을 의미하고, 1 Submenu는 1단계, 2 Submenus는 2단계까지의 서브메뉴를 지원한다는 것을 의미합니다.
CSS MenuMaker에서 기본적으로 제공하고 있는 CSS 반응형 메뉴 목록입니다.
위에서 본인이 만들고자하는 메뉴를 선택하면 다음과 같은 화면이 나타납니다. 여기에서 본인이 선택한 메뉴가 어떠한지 미리 확인을 한 후에, 아래쪽에 있는 Build / Download 버튼을 클릭하면 메뉴를 만드는 화면으로 이동할 수 있습니다. 빌드 / 다운로드 버튼 오른쪽에 있는 드림위버용 플러그인과 워드프레스용 플러그인은 직접 돈을 지불하고 구입해야 하는 유료 서비스입니다.
이 두 서비스를 이용하면 드림위버와 워드프레스에서 매우 쉽게 메뉴를 만들 수 있다고 합니다. CSS MenuMaker 사이트에 직접 접속할 필요 없이 드림위버 또는 워드프레스에서 직접 메뉴를 만들 수 있기 때문에 매우 편리하겠죠.
온라인 빌더를 사용하여 CSS 메뉴를 인터넷에서 직접 수정할 수 있습니다.
위에서 Build Online 버튼을 누르면 다음과 같이 메뉴 항목을 설정하는 화면이 나타납니다. CSS MenuMaker는 사용자의 편리성을 위하여 메뉴를 매우 쉽게 만들 수 있게 해주는 100% GUI 환경을 제공합니다. 우측 하단 스크린을 통해서 사용자는 각 메뉴 항목이 본인이 선택한 메뉴에 어떻게 적용이 되는지 실시간으로 확인할 수도 있습니다. 사용자가 직접 복잡한 소스코드를 입력할 필요 없이, CSS MenuMaker는 완전한 GUI(그래픽 사용자 인터페이스) 환경을 제공하기 때문에, 사용자는 매우 간단하면서도 쉽고 빠르게 고급스러운 메뉴를 만들 수 있습니다.
| 무료로 학습 할 수 있는 유용한 사이트 홈런(homelearn) (0) | 2016.07.03 |
|---|---|
| 해외 개발자 채용 인터뷰 기출문제 (0) | 2016.05.14 |
| 와이어프레임 (0) | 2016.01.21 |
| 아이폰 배경화면 무료로 받을 수 있는 사이트 (0) | 2016.01.15 |
| 무료 이미지를 다운 받자 freepik (0) | 2015.12.30 |
오랜만에 포스팅을 하네요~
지난시간 CSS 꾸미는 방법은 3가지가 있다고 했었죠?
1. 각 요소에 직접 적용하는 CSS가 있습니다.
이 방법은 웹 표준의 방법에서 보면 그리 좋은 방법은 아닙니다. HTML안에 하나씩 일일히 적용해야 하는 불편함이 있지만 특별하게 페이지 혹은 게시판을 만들 때 유용하게 사용될 때가 있습니다.
아래와 같은 예제를 하나 만들었습니다.
html보다 조금 복잡해보이죠?
<body> </body> 사이에 집어 넣은 이 예제는 <p> 태그를 사용했습니다. p는 paragraph의 약자로 <p></p> 사이 글자색인 파란색과 배경을 노란색으로 하였습니다.
<span></span>은 Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)"인데, 그 자체로는 아무 역할도 하지 않고, 문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.
DIV 태그의 역할과도 비슷하지만, DIV 태그는 사각형 박스 모양으로 구역을 지정하고, SPAN은 한 문장 단위입니다. 웹페이지 중에서, 어떤 태그도 달려 있지 않은 곳에, 뭔가를 지정하기 위해서는 SPAN 태그를 사용하면 됩니다. 다시 본론으로 돌아오면, font-size를 사용해서 폰트 크기를 변경해라 라는 뜻입니다.
결과를 보면 아래와 같습니다.
파일 예제 다운받기 :
css_0.html
2. style요소를 활용한 방법
<body></body> 내에 CSS를 섞어서 쓰면 헷갈리고 불편할때가 있습니다. 이럴때는 <head></head>사이에 따로 모아 놓는 방법이 있습니다.
그 방법은 아래와 같습니다.
1번의 방법보다 <body></body>부분의 작업이 좀 편해지겠죠? 그런데 head부분에
<style type="text/css">이 있네요? 이것은 <head></head>내에서 CSS를 사용한다고 정의를 해 놓은거예요. p{}와 p span{} 사이에는 1번에서 했던 소스가 있을거예요 대충 감이 오시죠?
<body></body> 내에 <p></p>로 감싼 부분은 파란색 글씨, 배경은 노란색이고 <span></span>으로 감싼 부분은 폰트가 24예요. 결과는 1번과 같습니다.
파일 예제 다운받기 :css_1.html
3. 외부 파일로 만들어서 연결하는 방법
제일 많이 사용하는 방법이고 관리하기도 편한 방법입니다. 2번의 <style> 부분을 따로 빼내서 .css 파일로 만들어서 HTML에서 불러오는 방법이예요.
1,2번과는 약간 다른 방법인데 외부 파일을 불러오기 위해서는 link라는 속성을 써야 합니다.
'rel' 속성은 현재 문서와의 관계를 나타내는 속성이고 'href'를 이용해서 CSS 파일의 경로를 지정합니다.
외부의 CSS 파일 내용은 아래와 같습니다.
간단하죠?
2번의 내용을 그대로 복사해오면 되요 @charset "utf-8";은 문자 코드셋으로 지정을 안하시면 문자가 깨져서 나올때도 있어요.
이렇게 하면 <p>나 <p span>만 바꿔주면 적용된 파일을 하나하나 바꿀 필요없이 한번에 바꿀 수 있는 정말 도움이 되는 방법이예요~
1,2번보다는 3번으로 공부하시는게 많은 도움이 되실꺼에요
다음 시간에는 CSS 문법 을 하나하나 배워보겠습니다
| Box Model (0) | 2020.01.08 |
|---|---|
| CSS Syntax (0) | 2020.01.07 |
| CSS란? (0) | 2015.08.16 |
Cascading Style Sheets(CSS)는 문서가 사용자에게 어떻게 보여질가를 기술하는 언어이다.
HTML,XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
HTML로 문서의 틀을 만들고 그 틀을 화려하게 꾸밀 수 있습니다.
가령 글꼴, 배경색, 위치 등을 지정하여 보여줄 수 있습니다.
스타일 시트 꾸미는 법은
1. HTML 문서 안에 Style 속성으로 사용하는 방법
2.Style 태그 사용하는 방법
3. CSS 파일을 별도로 만들어서 HTML 문서에 연결시키는 방법이 있습니다.
글만 있으니 너무 딱딱하죠? 다음 시간부터는 직접 만들어 보겠습니다~
| Box Model (0) | 2020.01.08 |
|---|---|
| CSS Syntax (0) | 2020.01.07 |
| CSS 적용방법 (0) | 2015.09.05 |
