728x90
<HTML>
*공간분할*
- div : 가로 분할
- span : 세로 분할
*텍스트 태그*
- pre : 게시판에서 pre 텍스트 내에 있는 태그들이 적용됨! -> 조금있다가 더 검색 필요
*a 태그*
- target 한번 검색해보기
- href=“#id” 하면 id를 가진 div 및 컨포넌트로 화면이동
*form 태그*
- GET : 게시판에 정보를 가져올때 (select)
- POST : 게시판에 정보 삽입할때 (insert)
- PUT : 게시판 정보 변경할때 (update)
*동영상 띄울때?*
- 예전에는 envd
- 이제는 video 태그 사용!
*iframe*
- 외부 html을 내부로 가져올때
<CSS>
- 선택자
- #id div : #id 아래 모든 div 적용 (자손 선택자)
- #id > div :#id 자식 div만 적용 (자식 선택자)
- 동위선택자
- #div + div : 나랑 같은 라인의 바로 뒤에 있는 div 적용
- #div ~ div : 나랑 같은 라인에 있는 div
- nth-child(num) : num 선택
- nth-child(2n) : 짝수번째만 선택
- 등등 원하는 수식 넣어주면 원하는 패턴으로 적용
- not(선택자) : 선택한 선택자 제외 적용
- 속성
- 배치
*display*
- block
- inline-block : inline 속성이지만 가로와 세로 크기 조정 가능!
- lnline : 세로사이즈 조절 불가능
- none : 보이지 않게
- table, table-row, table-ceil : 수직 중앙 정렬할때 용이하다
https://hyunseob.github.io/solved-by-flexbox-kr/demos/vertical-centering/
*line-height*
- 글자 한줄 높이값 지정
*position*
- relative : 상대적으로 배치를 지정
<div style=“position: relative”>
<div style=“position: absolute”>
</div>
</div>
위와 같은 경우일 경우 absolute인 div의 top, bottom, left, right의 기준은 부모 div로 적용됨
부모가 relative가 아닐경우 가장 상단을 기준으로 잡음!!
- absolute : 영향 차지x
- fixed : 고정! 스크롤에 영향받지않고 항상 그자리에 고정 -> 영향 차지x
*float*
***float을 하게되면 높이값이 무시가 된다.
1. 고전적인 방법 -> 사용하지말기
<div style=“float: left”></div>
<div style=“clear:both”></div>
<div></div>
2. overflow: hidden
<div style=“overflow: hidden”>
<div style=“float: left”></div>
</div>
<div></div>
- after tag 추가
<div>
<div style=“float: left”></div>
</div>
<div></div>
- left : 왼쪽으로 정렬
- right : 오른쪽으로 정렬 배치 역순 -> 부모 div를 right로 해서 많이 써준다.
- 단위
- vw: 윈도우 기준으로 가로값을 나눈것
- vh : 윈도우 기준으로 세로값을 나눈것
- % : 부모의 높이값
- rem, em : 배수 -> 어떻게 보면 절대값 사이즈 (default: 16px)
- 테두리, Padding, Margin
*box-sizing*
- border+padding 값을 포함하고 width 값 유지해준다!
- background
- repeat : 반복
- position : 위치 (left, right, center : px 안붙여도 가능)
- size : 크기 -> corver를 많이 쓴다. -> 사진이 잘려도 비율 맞추기
- color: 색
- img : 사진
- transformation & transsiotion
애니메이션을 관장하는 친구
*transformation*
left: 50%;
tranlate -50%;
->자동으로 가운데 정렬이 된다.
728x90
'WEB > CSS' 카테고리의 다른 글
| GRID이용해서 DIV 일정간격으로 분배하기 (0) | 2020.02.21 |
|---|---|
| label로 체크모양 만들기 (0) | 2020.02.13 |
| div 글자수 제한 css (0) | 2020.01.20 |
| radio box css변경 (0) | 2020.01.03 |
| [css] placeholder 디자인 변경 (0) | 2019.12.24 |