CSS: Cascading Style Sheets
계속되는, 연속적인, 누적되는
<HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어>
HTML: Hyper Text Markup Language
(비 순차적 표시 언어)
<시작태그>콘텐트 </끝태그> 이전체를 요소라 칭함
HTML:정보표현
CSS:디자인
분리이유?
효울적인 재사용 HTML 태그개수별로 색명 // CSS 태그전체를 색명시
H1(선택자){ color : red; color : blue; <<속성끼리는 ; 로 구분 스타일속성 : 속성값
}
<head>
<style> 선택자{ 스타일 속성: 속성값; }
</style>
</head>
<body> 내가 정보를 전달하고자 하는 태그 </body>
===================================================
CSS
font-family : "돋움체 " ; <<글꼴 font-size : 10px ; <<글크기 font-weight : bold; <<글짜두께 normal:400 bold:700 font-style: italic; <<글짜스타일 oblique,normal
====================================================
*{
} 전체 스타일 설정
#아이디{
} 아이디는 중복불가능, 오직한번만 사용, (로고,상단메뉴,하단정보 스타일 정의때 사용)
.클래스명{
} 재사용가능,여러태그 동시적용가능,반복적으로 사용되는 스타일에적용(id로 정의해둔 세부 스타일 정의때 사용)
============================계층 선택자===============================
스페이스 : 자손선택자
> : 자식선택자
+ : 형제(근접후행)선택자
~ : 형제(후행)선택자
===================================================================
그룹선택자1,그룹선택자2,그룹선택자3{
}
동시에 콤마로 선언가능
====================================================================
px, em, rem
체크박스 중복가능
라디오박스 중복불가능
0 전체선택자 * 가중치 1 태그 <p> 10 class . 100 id #
결국 가중치가 높은것에 적용이된다,
div (전체화면의 큰영역들)- header(p(span) ) body (p(span) ) footer (p(span) )
===============요소들 배치하는 위치속성======================
[position] 속성값
static 태그가 위에서 아래로 순서대로 배치
default (내가 스타일에서 위치조정을 아무것도 안한것)
relative 초기위치 상태에서 상하좌우로 우ㅣ치이동
absolute 절대위치 좌표를 설정
fixed 화면을 기준으로 절대위치 좌표설정
부모가 relative 이면 자식은 이를 기준으로 이동
부모가 absolute 속성이면 자식은 그 밖을 벗어나지 못하나 static일 경우는 범위를 벗어나 html을 기준으로 배치하게된다.
z-index
overflow animation
'나의 주니어 개발 일기 > HTML-CSS' 카테고리의 다른 글
| [HTML] 1. Input 태그의 value 값에서 "" 가 포함되어있을때의 문제점 해결 (0) | 2021.10.23 |
|---|---|
| db값을 2중 selectBox 값에 넣기 (0) | 2021.08.31 |
| 색감 및 무료폰트 사이트 (0) | 2021.02.08 |
