- ex12
(인라인방식) 바로적용(되도록 쓰지말것 테스트, 웹메일 전송시)
1 | <h1 style = "font-size:12px; font-family:돋움; color:#0066ff";>Windows 7과 Mac OSX 비교</h1> | cs |
- ex13
(임베디드방식) 스타일안의 태그들의 속성이 모두 바뀐다.
1 2 3 4 5 6 7 | <style type="text/css"> h1{ style = "font-size:12px; font-family:돋움; color:#0066ff"; } </style> | cs |
- css 외부파일
권고하는 방식
확장자가 .css파일을 만들어 HTML에 @import, link를 통해 스타일을 불러오는 방식
<head></head>사이에 넣는다. link버전을 선호하는데 구버전에서 @import를 인식못하는경우가 있고 속도가 link가 빠름, 하나의 css파일에서 다른 css파일을 불러올수있다. 그러니 link 를 쓰자.
- ex15
만들어두고 main.css를 link로 불러온다.
1 | <link href = "main.css" rel = "stylesheet" type = "text/css"/> | cs |
- 클래스 선택자
사용자가 직접 이름(class)를 만들어 속성을 지정.
- ex16
css를 만들때 안에다가 import를 넣어준다.
1 2 3 4 5 6 7 8 9 10 11 | @charset "UTF-8"; @import "main" . css; body { background-color: #ff6; } h1 { color: #00f; } | cs |
- ex17
앞서 배운것과 같이 '#'은 id를 지정해준것을 바꿔주고, '.' 은 class 지정해준것을 바꿔준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .headline {color:#333; border:1px solid; solid:#999; margin:25px; padding:10px} #head{height:50px; border:1px solid #09f; background-color: #3cf; padding:10px;} </style> </head> <body> <h1 id="head">Mac OSX 와 Windows 7 </h1> <p>최근 아이폰이 스마트폰의 절대강자로 대두되면서, 맥킨토시에 대한 관심도 더불어 상승하고, 이전과 다르게 맥을 사용하는 사용자들이 많아졌습니다.<br> 하지만 지금도 PC 운영체제의 대부분은 마이크로소프트에서 만든 윈도우가 절대적인데요, 현재 시중에 나와 있는 최신의 버전이 윈도우 7입니다.</p> <p class = "headline">윈도우 7은 전작인 윈도우 비스타의 불편함을 개선하고, 또한 사용자 편의를 위해서 이전 버전에 비해 많은 부분이 보강되었습니다.</p> | cs |
- ex20
종속선택자 태그.아이디나, 태그.클래스, 태그.태그등을 나타낼때 쓴다.
p.txt.1는 p태그의 txt1클래스에만 적용되고, 다른 태그들의 txt1클래스에는 위에것이 적용된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .txt1{ font-weight:normal; color:#f60; } p.txt1 { color:#36f;font-weigjt:bold; } </style> </head> <body> <h1>Mac OSX 와 Windows 7 </h1> <p class ="txt1">최근 아이폰이 스마트폰의 절대강자로 대두되면서, 맥킨토시에 대한 관심도 더불어 상승하고, 이전과 다르게 맥을 사용하는 사용자들이 많아졌습니다.<br> | cs |
- ex21
각 하위 태그들을 적어주고 위에서 각자 다 값을 넣어준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | p { line-height:2em; } p a em{ color: #06F; font-style: normal; } p a {text-decoration:underline; font-weight:bold; color:#f60;} .list1 a{font-weight:bold; color:#f00; text-decoration:line-through;} .list2 a{text-decoration:none; color:#39f;} <p> 원래는 2010년 5월 4일 공개된 글꼴이지만, 다시 여러분에게 안내해 드리겠습니다. 첫번째로 제가 생각한 내용은 대한민국에서 가장 유명한 관광지인 제주를 상징할만한 요소는 많지만 디자인적으로 통일된 무언가가 있어야 하겠다. 두번째로 공항부터 시작해서 관광객들이 접하는 모든 곳에서 일관된 디자인의 통일성과 상징성이 필요하다. 글꼴 자체의 이름이 제주를 상징하는 것이 되면, 사용자들이 이 글꼴을 사용하면서도 제주의 이미지가 자연스럽게 각인되지 않을까? 하는 생각 등등이 종합되어 <a href="#"> 산돌 <em>커뮤니케이션</em></a>을 만나 구체적인 프로젝트를 하나씩 실현해 보기 시작했고, 다행이 이렇게 현실적인 결과물이 나오게 되었습니다. </p> <ul class="list1"> <li><a href="#">제주글꼴의 가장 큰 특징</a></li> <li>제주어를 표현할 수 있어야 한다.</li> <li> <ul class="list2"> <li><a href="#">제주 사투리(고어)를 표현할 수 있어야 한다.</a></li> | cs |
- ex22
중복으로도 걸어줄수있다.
1 2 3 | h1, h2, .txt_box{ text-decoration:underline; } | cs |
728x90
'풀스택 > css' 카테고리의 다른 글
| html/css/javascript (0) | 2019.02.11 |
|---|---|
| 다시시작 (0) | 2019.02.09 |
| 그날그날 정리 1 jdbc dao와 vo (0) | 2019.01.21 |
댓글