CSS의 모든것, 문법총정리2
Devel/HTML&CSS&JAVASCRIPT2020. 9. 5. 12:29
반응형
#색상 단위
:CSS 에서 사용하는 기본 색상 단위이다
#색상 코드 찾는 사이트
RGBA 값 ( alpha:투명도) - 0이면 완전투명, 1이면 완전 불투명이다.
#display 속성(*)
:태그의 영역 표현 방식을 지정하는 속성이다.
inline 안에서는 p태그 줄바꿈이 안된다.
but div는 줄바꿈 됨.
#none태그 적용
-span 태그 안에 disply: block을 넣어 block형식으로 변경한다.
-inline과 inline-block 차이점
: width,height,margin 속성 사용시 차이가 있다
#inline
Inline는 width와 height 속성이 적용이 안된다. margin는 좌우만 적용된다.
#inline-block
Inline-block는 width와 height 속성이 적용이 된다. margin는 상하좌우 모두적용된다.
#visibility속성(*)
: 요소를 보이거나 보이지 않게 지정하는 속성이다.
* display 속성을 none 키워드로 지정하는 것과 달리 영역을 유지한 채로 보이지 않게만 만든다.
#visibility-hidden 일때
#visibility-visibile
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>visibility 실습</title> <style type="text/css"> /* #box{ visibility: visible; } */ #box{ visibility: visible; } </style> </head> <body> <div> <span>Dummy</span> <div id="box"> <span>죽는날 까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.</span> </div> <span>Dummy</span> </div> </body> </html> |
#visibility-collapse
table 자리 감추고 실행된다.
#opacity
- 요소의 투명도를 지정하는 속성이다.
- 0 ~ 1 사이의 숫자를 입력한다. ( 0은 투명이고 1은 불투명 )
#Box 모델
:Box 모델은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 개념으로, 블록 박스와 인라인 박스가 화면에 표시되는 영역과 다른 Box와의 배치 등에 대한 중요한 내용을 담고 있다.
Content: 텍스트 및 이미지등 실제 내용이 보여지는 곳.
Padding: content를 둘러싸고 있는 영역으로서 투명하다.(안쪽 여백) Border : padding과 content를 둘러싸고 있는 영역.
Margin: 다른 요소간의 여백을 의미하는 영역으로서 투명하다.(바깥쪽 여백) , 박스와 박스간의 거리 지정할때 사용.
# width 속성과 height 속성
: width 속성과 height 속성은 실제 내용을 감싸는 영역의 크기를 지정하는 속성이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Box 모델 실습</title> <style type="text/css"> div{ width:100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> </body> </html> |
#max-width 속성
- 요소의 최대 width값을 설정할 때 사용하는 속성이다.
- block-level 요소는 항상 가능한 최대 width 값을 갖는다.(화면 가로로 브라 우저 꽉 채움) 따라서 block-level 요소의 width 값을 설정한다는 것은 화면 끝까지 채우는 것을 막을 수 있다.
max-width차이는 브라우저 조절 시 크기가 짤리지 않고 크기가 조절됨.
* width와 max-width 차이점
- 화면이 클 때는 width와 max-width 간의 차이가 없다.
문제는 브라우저의 크기가 width 보다 작게 될 경우에 발생된다. 명시한 width 영역의 일부가 보이지 않게 된다. 하지만 max-width는 브라우저가 작아지면 알아서 width도 자동으로 조절된다.
'Devel > HTML&CSS&JAVASCRIPT' 카테고리의 다른 글
| CSS의 모든것, 문법총정리 적용예시4 (0) | 2020.11.22 |
|---|---|
| CSS의 모든것, 문법총정리3(margin,padding 총정리)및 적용예시 (0) | 2020.09.05 |
| CSS의 모든것, 문법총정리(선택자, 자식, 자손,형제 개념과 적용예제) (0) | 2020.09.05 |
| [HTML,CSS,JS] workshop예제(기본인적사항만들기) (0) | 2020.08.31 |
| [HTML,CSS,JS] HTML 기초 문법 총 정리와 사용예제2 (0) | 2020.08.31 |
댓글()
