| /* the tree node's style */ |
| .tree-view { |
| overflow-y: hidden; |
| } |
| .tree-view_item { |
| /* immediate child of .tree-view, for styling convenience */ |
| } |
| /* style for the children nodes container */ |
| .tree-view_children { |
| margin-left: 16px; |
| } |
| .tree-view_children-collapsed { |
| height: 0px; |
| } |
| .tree-view_arrow { |
| cursor: pointer; |
| margin-right: 6px; |
| display: inline-block; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| .tree-view_arrow:after { |
| content: '▾'; |
| } |
| /* rotate the triangle to close it */ |
| .tree-view_arrow-collapsed { |
| -webkit-transform: rotate(-90deg); |
| -moz-transform: rotate(-90deg); |
| -ms-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| } |
treeview.css
2021. 5. 4. 01:10
[HTML][tag] span b big address i hr del
2018. 3. 24. 17:00
<tag>에 관하여
-요약설명
- span 요소: div태그와 마찬가지로 특별한 기능을 지니고 있진 않지만 CSS와 함께 레이아웃이나 태그들을 꾸밀때 주로 사용합니다.
- b 요소: font를 굵게 만드는 태그입니다.
- big 요소: font를 크게 만드는 태그입니다.
- address 요소: 주소를 나타낼때 사용하는 태그이며 font가 기울림이 됩니다.
- i 요소: font를 이텔릭체(기울림)으로 만들어 줍니다.
- hr 요소: 수평선을 그어주는 태그입니다.
- del 요소: 삭제되었다는 표시로 font가운데 줄을 그어주는 태그입니다.
-심화설명
· span 요소 / 사용법 <span></span>
div태그와의 차이점은 display의 속성이 width가 100%인 block 엘리먼트가 아닌 inline 엘리먼트라는 점입니다. inline 엘리먼트의 경우 margin과 width,height 값이 먹지 않기 때문에 display속성을 inline-block으로 변경후 주로 사용을 하는 편입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
span{
border: 1px solid red;
margin: 0px 15px;
}
</style>
</head>
<body>
안녕하세요! <span>좋은 아침</span>입니다.
</body>
</html>
결과
위의 예제에서 보면 margin을 가로로 15px씩 주었는데도 불구하고 inline 엘리먼트 특성상 margin이 들어가지 않는 부분을 확인할 수 있습니다. 그리하여 display:inline-block 성질을 주어 변화합니다.
예제
결과
두번째 예제에서 보면 display:inline-block 으로 변경 후 margin이 잘들어간 결과를 확인 할 수 있습니다.
'Rich Venveis의 연구노트 > HTML' 카테고리의 다른 글
| [HTM,L][tag] dl, dt, dd, sup, sub, s, u, blockquoto, q, cite, (0) | 2018.03.23 |
|---|---|
| HTML[tag] p, br, pre, mark (0) | 2018.03.22 |
| [HTML][tag] img (0) | 2018.03.19 |
| [HTML][tag] div (0) | 2018.03.15 |
| [HTML][tag] link (0) | 2018.03.11 |
[CSS] color
2018. 3. 23. 14:24
[CSS] color
-요약설명
- color 요소 : font에 색상을 입혀주는 요소입니다.
-심화설명
color 요소 / 표기법 color: red;
color는 기본적으로 4가지 방법으로 font에 색상을 입힐 수 있습니다. 또한 상속의 개념을 갖고 있어 body에 color을 줄 경우 대부분의 font에 상속이 됩니다. 하지만 자체적으로 색상을 갖고 있는 태그들의 경우 상속이 이루어 지지 않습니다. 예를 들어 <a>태그의 경우 브라우저 자체적으로 color:blue의 색상을 갖고 있기때문에 a태그를 자체적으로 다시 color를 입혀줘야 하는 부분이 있습니다.
빨간색 색상 (프로퍼티 : 벨류) |
||||
color : red |
color : #ff0000 |
color : rgb(255,0,0) |
color : rgba(255,0,0,0) |
color : hsl(0, 100%, 50%) |
예제
<head>
<meta charset="UTF-8">
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>안녕하세요, 벤베스 박사입니다!</p>
</body>
결과
※특징
상속이 되지 않는 <a>태그의 경우 어떻게 나오는지 또한 어떻게 처리해줄 수 있는지 알아보겠습니다. 아래 예제를 보겠습니다.
예제
결과
이런식으로 결과에서보면 a태그가 자체적으로 blue속성을 가족 클릭을 했던상태면 purple로 바뀌는걸 확인 할 수 있습니다. 이럴경우에는 color inherit을 써줌으로써 해결할 수 있고, 또는 a태그에 따로 직접적으로 style일 주는방법이 있습니다. 저는 color: inherit을 사용해보겠습니다. color:inherit를 사용하는 경우에는 직접적인 부모에 있는 값이 상속되게 됩니다. 아래 예제에서 확인해 보겠습니다.
예제
결과
이렇게 됩니다. 마지막으로 바로 부모가 다른색상으로 있을때 상속을 하면 어떻게 되는지 확인해보겠습니다.
예제
결과
'Rich Venveis의 연구노트 > CSS' 카테고리의 다른 글
| [CSS속성][font] font-variant (0) | 2018.03.19 |
|---|---|
| [CSS][font] font-weight (0) | 2018.03.16 |
| [CSS속성][font] font-style (0) | 2018.03.11 |
| [CSS속성][font] (0) | 2018.03.11 |
| [CSS 속성][font] font-family (0) | 2018.03.10 |