CSS 기초 정리

Developer-Choi 2022. 12. 18. 10:45

728x90

선택자

자손선택자
.class1 .class2 {} < 클래스1 안에있는 클래스2 선택

다중선택자
.class#id {} < 해당클래스, 해당 id 다 가진 요소만 선택

전체 선택자
* {} < 전체 선택

그룹 선택자
.class1, .class2 {} 여러 클래스 동시에 선택

가상 클래스 선택자---------------------------------------------------------

first-child
.box p:first-child {} <box클래스 안 p태그들의 첫번째 요소 선택
.box p:last-child {} <box클래스 안 p태그들의 마지막 요소 선택
.box p:nth-child(n) {} <box클래스 안 p태그들의 n번 요소 선택
.box p:nth-child(2n) {} <box클래스 안 p태그들의 짝수번 요소들 모두 선택
.box p:nth-child(2n-1) {} < 홀수 선택

hover
.class:hover {} < 요소 위에 마우스가 올라갔을 때 효과 지정

:first-of-type
first-child는 다른 요소까지 카운팅을 함(숫자 적용 불편), first-of-type는 적용시킨 요소만 카운팅함
:first-of-type, :last-of-type, :nth-of-type(n) 있음

:active
활성화된 요소 선택, 버튼이면 누르고 있을 때

:focus
input 같은 태그에 커서가 올라가 있는 경우

:visited
사용자가 방문한 적 있는 링크를 선택하는 가상클래스 선택자, a 태그에 적용

--------------------------------------------------------------------

가상 요소 선택자
:before
:after
가상요소 선택자는 float의 clear를 위한 빈 div를 만드는 것을 대체할 수 있고,
회전배너등에 사용된다.

형제 요소 선택자
A ~ B  {property : value}
A와 같은 부모를 가진 형제 요소들 중에 B를 선택함

레이아웃 float, flex, grid

float

float:left
float:right 로 위치 지정

clear 속성으로 float에 left, right, 두개 다 영향을 받게 설정 가능
ex)
<div class="clearfix"></div>

.clearfix {clear: both;}

요즘 float로는 배치하지않음

flex
flex-container 속성---------------------------------------------
display:flex 로 flex 컨테이너 속성으로 바꿔서 사용
flex-dircetion: row, column < 으로 중심축 설정
justify-content: flext-start(기본값),center,space-between 등 중심축에서의 배치 설정 가능

align-items: stretch(기본값), flex-start,flex-end, center 등 중심축 반대 축의 배치설정 가능
align-content: 위는 item들이 한줄 일 때 사용 contents는 두 줄 이상일 때 사용, 
space-betwwen 등 space 설정 사용가능

flex-wrap: wrap, nowrap < flex-item 이 여러개일때 줄바꿈 허용 설정

flex-flow < flex-direction, flex-wrap를 합쳐놓은 단축설정
flex-flow:column wrap
---------------------------------------------------------------

flex-item 속성-------------------------------------------------
order: item의 순서 지정
flex-basic: item의 기본 사이즈 지정
flex-shrink:
flex-grow:

css 상속

css는 상속되는 속성과 상속이 되지않는 속성이 있음

상속되는 속성
color, font-family, font-size 등등

상속되지 않는 속성
padding, margin, border 등등

web font
웹폰트는 적용하기 위한 방법은 2가지
1. 폰트파일을 직접다운받아 적용 @font-face 로 만들어서 사용
(확장자명이 woff/ woff2/ ttf/ eot 등)


2. 외부 서비스에서 제공하는 링크 이용 @import, <link>

폰트패밀리는 보통 2개 이상을 적용
font-family: arial, "맑은 고딕" < 앞에 있는거 부터 우선순위로 적용

sans-serif <고딕체
serif < 바탕체
cursive < 필기체

font 속성, 일부만

text-align:left, center, right, justify < 블록 요소나 표 안에서 텍스트 가로정렬 방식

vertical-align:top,middle,bottom < 인라인 요소나 표 안에서 텍스트의 세로 정렬 방식 지정

text-indent:10px < 들여쓰기

word-break:keep-all, break-all <텍스트가 컨텐츠 밖으로 넘쳤을 때 줄바꿈
overflow-wrap:noral, break-wrod < 단어가 컨텐츠 밖으로 넘쳤을 때 줄바꿈 (긴 한단어도 적용)


overflow:visiable, hidden, scroll,auto < 컨텐츠가 커서 요소안에서 내용을 다 보여주기 힘들 때,
어떻게 보여줄지 설정


text-overflow:clip, ellipsis < 줄 바꿈 안할 때!, 넘치는 텍스트 표기방법
(white-space:nowrap (줄바꿈안하는 강제속성) , overflow:hidden 가 있어야 기능 잘동함)

상대단위

em < 선택한 요소의 font-size의 비례

rem < 최상단 html의 font-size의 비례

viewport 란 실제로 화면을 그리는 영역

vw, vh 는 view port witdh, view port height 약자임

1200(px) x 920(px) 일 때

100vw, 100vh를 100%로 보고 계산을 하면된다. ex> 10vw = 1200*0.1 = 120


calc() -> css에서 연산 가능

width: calc (2*100px); 와 같이 연산 가능 ,단 + -은 연산자 앞 뒤에 공백 줄 것! (15px + 15px)
width: calc (50% + 20px)도 가능

Position

position:static, relative, absolute,fixed,sticky 등이 있으며

relative를 적용하고, top: 30px, left:30px 등을 먹이면 원래 위치 자리에서 속성을
준 만큼 움직이게 된다

absolute도 위와 마찬가지지만 원래 위치라는 기준이 relative가 적용된 부모 요소(가까운게 우선)를 찾아
그 위치를 기준으로 잡거나 없을 경우 body가 기준이 된다.

fixed는 스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있다.

sticky는 요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정하게 된다

========================================================================
z-index 속성은 여러개의 요소가 겹쳐져있을 때 무엇이 앞으로 나올지 결정하는 속성
기본 속성은 z-index:auto로 되어있으며 +일 수록 앞으로 나오게 된다.

translate 로 색깔 및 형태 변화 시 시간지연으로 인한 효과를 줄 수 있음

transform 으로 이동 및 크기 변형, 비틂, 회전을 시킬 수 있음

(translate, scale, skew, rotate)

grid

grid의 행의 개수 및 크기를 지정할 수 있다
grid-template-rows: 1fr 2fr 200px -> 그리드 행은 총 3개이면서 각 행의 규격은 1fr, 2fr 200px

fr은 fradction(분수), 비율 단위임

grid-template-columns:repeat(5,1fr) -> 1fr 규격으로 5개 생성
grid-template-columns:repeat(2,1fr 100px) -> 1fr 100px 1fr 100px 
grid-template-columns:3fr repeat(2,1fr) -> 3fr 1fr 1fr

viewPort breakPoint

mobile
0 ~ 767px

Tablet
768px ~ 1023px

PC
1024px ~ 1439px

PC Large
1440px ~