기본
주석 처리 : ctrl + /
선택자 > - 자식 선택자로 하위 태그를 지정
display: block; - 블록으로 변환하면 너비와 높이를 지정 할 수 있다. (inline은 지정 x)
!important - 속성을 고정시키는 단어
<a>태그 target 속성 - "_self" -현재 원도우에서 오픈 , "_blank" - 새로운 윈도우 에서 오픈
inline-block 프로퍼티 요소를 연속 사용하는 경우 공백이 자동으로 지정 -> font-size :0;
설정 단위
공간 단위
- % - 부모 대비 비율
- em - 상대 단위 1em= 지정된 사이즈, 중첩 시 em의 기준이 상속
- rem - 최상위 요소의 사이즈를 기준
- auto - 자동으로 크기에 맞게 계산
- vw,vh - 브라우저 창의 해상도 비율
opacity: - 투명도 설정 단어
border
border-spacing: ?px; -테두리 사이의 간격 지정
border-collapse : collapse; - table의 테두리를 하나로 합쳐 표시
visibility
요소의 렌더링 여부 결정
visible - 요소를 보이게 함
hidden - 요소를 보이지 않게 함, display:none와 달리 공간은 사라지지 않고 남아있음
collapse - table 요소에 사용하며 행/열을 보이지 않게 함
text
<b> ,<stong> - bold체, <stong>태그는 의미론적 중요 o
<i> - 의미 x , 아이콘 요소를 만들 때 주로 사용
<em> - 강조
<small> - small text 표기
<mark> - 하이라이트 text 표기
<del> - 삭제 text 표기
<sub> - 아래에 쓰인 text , <sup> - 위에 쓰인 text
<pre> - 형식화 된 text , 태그 안 텍스트를 적은대로 표현
<q> - (" ") 짧은 인용문 지정
<blockqutoe> - 긴 인용문 지정 (들여쓰기)
vertical-align : ?; - 수직정렬 위치 지정
text-align : ?; - 수평정렬 위치 지정
text-transform : ?; - 영어 대/소문자를 서로 전환 시키는 태그
text-indent : ?px;- 들여쓰기/내여쓰기 지정 태그 (글자 감추기)
text-decoration
underline - 밑 줄
line-through - 가운데 줄
float
float 프로퍼티를 사용하지 않은 블록 요소들은 수직 정렬
* float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제 해결
why? 선언되지 않은 요소와 선언된 요소가 만나면 박스 모델상 문제가 발생하기 때문
float 프로퍼티를 선언하지 않은 요소에 overflow: hidden 프로퍼티를 선언
*float 프로퍼티가 선언된 자식요소를 포함하는 부모 요소의 정상적이지 않은 높이 문제를 해결
why ? float 요소는 일반적인 흐름 상에 존재하지 않기에 float 요소의 높이를 알 수 없기 때문
부모요소에 overflow:hidden 프로퍼티 선언
-> after 가상 요소 선택자를 이용하여 사용하는 편이 좋다.
부모 요소:after{
display:block;
content:"";
clear:both;
}
|
cs |
가상요소
:before - 요소 앞에 새로운 컨텐츠 추가
:after - 요소 끝에 새로운 컨텐츠 추가
float 을 사용한 경우 clear을 통해 float를 해제시켜야 한다.
이런 경우 :after 가상 요소를 통해 부모 요소 끝에 해당 함수를 부착한다.
부모 요소:after{display:block;content:"";clear:both;}cs
:nth-child(n) - 부모 요소의 모든 자식의 n번째 요소
:nth-of-type(n) - 부모 요소의 특정 자식의 n번째 요소
table
<thead> - 테이블 제목 <th>를 적는 큰 틀
<tbody> - 테이블 내용 <td>를 적는 큰 틀
<tr> - 표 가로줄
<th> - 열 제목
<td> - 데이터
반응형
:hover - 마우스 커서가 요소 위에 올라가 있을 때
ex) A:hover B -> A요소 위을 올렸을 때 B가 보이게 설정
폼 테그 요소
<form> - 영역의 범위를 지정하며 요소들을 포함한다. 입력된 정보를 처리 ex)회원가입, 로그인
action - 데이터를 보낼 주소
method - 입력 내용을 노출 get(표시 O), post(표시 X)
<input> - 사용자로부터 데이터 입력을 받는 태그
type
button ,checkbox, color, date(년원일), datetime(년월일시분초), email, file, hidden
image, number, radio, range, reset, search, submit, tel, time, url, week
<select> - 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용하는 태그
option - 아이템 지정
optgroup - 옵션 그룹화
<filedset> - 폼 요소들을 하나의 그룹으로 묶을 때 사용하는 태그
<legend> - <filedset>의 제목 정의
<label> -폼 요소에 이름표를 붙이는 태그
for = 요소의 id
*label 클릭 시 폼 요소 선택
<input>
required - <input> 안에 입력값이 필수일 때 사용
placeholder = ? - <input>태그 안 기본값을 지정
autofoocus - 페이지가 열릴 때 처음 포커스 위치 지정
background
background-size
cover - 부모 요소의 width,height 중 큰 값에 배경 이미지를 맞춤
contain - 크기 비율을 유지한 상태로 배경 이미지 전체가 들어갈 수 있도록 조정
background-attachment :fixed - 화면 스크롤 시 배경 이미지는 스크롤되지 않고 고정
background-position: ? ? - 위치 좌표 지정
transition
transition: property duration delay - 프로퍼티, 지속시간 ,대기시간 모두 지정 *대기시간은 필수지정
transition-property: - 트랜지션의 대상이 되는 프로퍼티를 지정
transition-duration: - 트랜지션이 동작되는 지속시간을 지정
transition-delay: - 트랜지션이 대기하는 시간 지정
animation
animation-name: - keyframes 애니메이션 이름 지정
animation-duration: 애니메이션 지속시간 , animation-delay: 애니메이션 대기시간
animation-iteration-count: - 재생 횟수 지정, 기본값은 1, infinite는 무한반복
animation-play-state: - 애니메이션 재생 상태 지정 runnning or paused
animation-direction: - 애니메이션 종료 후 진행 방향 지정
nomal - from -> to ,기본값
reverse - to -> from
alternate - 홀수 nomal, 짝수 reverse
alternate-reverse - 홀수 reverse, 짝수 normal
@keyframes - 애니메이션의 여러 시점에서 css 프로퍼티 값 지정 가능
형식 : @keyframes [name] { ..정의 }
from,to - 애니메이션의 시작과 끝 정의
% - from,to 대신 사용 가능
transform
transform - 요소에 효과를 부여하기 위한 함수 제공 3d 효과를 얻고자 할 때는 함수 뒤에 "3d"추가
translate(x,y) , translateX(n) , transalteY(n) - 요소를 설정한 값만큼 이동
scale(x,y) , scaleX(n) , scaleY(n) - 요소를 설정한 값만큼 확대
skew(x,y) , skewX(n) , skewY(n) - 요소를 설정한 값만큼 기울임 [각도 단위:deg]
rotate(angle) - 요소를 angle만큼 회전 시킴 [각도 단위:deg]
transform-origin: - 요소의 기본 기준점 설정
기타
<figure> - 이미지, 차트 등을 담는 컨테이너
<img>
<figcaption> - 이에 설명하는 문구를 기재하는 태그
overflow: (overflow-x, overflow-y로 각각 제어 가능)
hidden - 넘친 컨텐츠는 제거
auto - 크기가 넘칠 경우 스크롤바 생성
cursor: pointer; - 마우스 커서의 상태를 포인터(손가락 버튼)로 설정
counter-increment: element number; - 요소를 기준으로 number 간격으로 일련번호를 설정
content: counter(element) "String"; - String+일련번호를 붙임
box-sizing: content-box; - 박스의 사이즈를 콘텐드 박스로 지정
<article> - 내용을 독립적으로 뉴스,블로그와 같이 표현할 때 사용하는 태그
<iframe> - 웹사이트 내에서 다른 웹사이트를 보여줄 수 있는 태그 ex) 지도
src = 주소
frameborder = 테두리 표시 여부 지정 [ 0(표시 X) , 1(표시O) ]
'HTML > CSS' 카테고리의 다른 글
css 초기화 (0) | 2022.08.03 |
---|---|
플렉서블 박스 (0) | 2022.07.28 |
미디어 쿼리와 뷰포트 (0) | 2022.07.27 |
가변 그리드 (0) | 2022.07.26 |
반응형 웹 기본 개념 (0) | 2022.07.19 |