o 구성
span { color : blue; font-size : 20px;} /*-주석*/
셀렉터 프로퍼티 값
o 스타일 적용
- <style></style> 태그로 작성
- <p sytle = "color:magenta;"> 태그 내에 속성으로 적용
- main.css와 같이 외부 파일로 작성 (<head><link href="myStyle.css" type="text/css" rel="stylesheet"> </head>)
o selector 대상
- tag name: 예) h3, li {color: brown;}
- class : 예) .warning {color: red;}
- id : 예) #list {background:yellow;}
o 셀렉터 조합하기
- child selector : div > strong { color: bule;}
- descendent selector : ul strong { color; dogerblue;}
o 가상 셀렉터
- : hover (마우스가 올라 갔을 때)
*참조 https://amaze9001.tistory.com/44
o 스타일 종류
- 색깔
- 텍스트 : 들여쓰기, 정렬, 라인표시
- 폰트 : 종류, 크기, 스타일(이탤릭), 굵기,
o CSS 단위
- em : 배수, px: 픽셀....
o 박스모델
- 콘텐츠, 패딩, 테두리, 여백으로 구성
*참조 https://yjshin.tistory.com/entry/CSS-5-CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%ED%8C%A8%EB%94%A9-%ED%85%8C%EB%91%90%EB%A6%AC-%EB%A7%88%EC%A7%84-%EC%95%84%EC%9B%83%EB%9D%BC%EC%9D%B8
. border-radius: 20px;
- 배경
div {
background-color: skyblue;
background-image: url("media/cat.png");
background-position: left center;
}
o 박스의 유형 제어(display)
- 블록 박스 - display: block
- 인라인 박스 - display: inline
- 인라인 블록 박스 - display: inline-block
*참조 https://velog.io/@younoah/css-display
o 박스의 배치(postion)
- 정적 배치 > position: static
- 상대 배치 > position: relative
- 절대 배치 > position: absolute
- 고정 배치 > position: fixed
- 유동 배치 > float: left or right
*참조 https://velog.io/@devjade/CSS-position%EA%B3%BC-%EC%A2%8C%ED%91%9C-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%A7%8C%EB%93%A4%EA%B8%B0
-z-index : 숫자가 낮을 수록 아래에 배치됨
o 박스 보여주기
- visibility(콘텐츠 노출) : visible|hidden
- overflow(콘텐츠 자르기) : visible|hidden|scroll|auto
o 폼 꾸미기
input[type=text] {
border: 2px solid skyblue;
border-radius: 5px;
}
o 부트스트랩
- 전세계적으로 가장 많이 사용되는 오픈소스 CSS 라이브러리 입니다.
'아는 것이 힘 > IT세상' 카테고리의 다른 글
| 이미지에서 RGB추출 (0) | 2022.01.06 |
|---|---|
| [HTML5] 자바스크립트 (0) | 2021.12.27 |
| [HTML5] html 개요 (0) | 2021.12.27 |
| 웹 구성언어 (0) | 2021.12.27 |
| [COS Pro] Python 2급 (0) | 2021.12.06 |