CSS Basic
css기초
Last updated
Was this helpful?
css기초
Last updated
Was this helpful?
CSS는 Cascading Style Sheet의 약자로 HTML이나 XML과 같은 마크업 언어로 작성한 문서의 스타일을 정의하는 언어이다.
html 파일
css 파일
*)태그)#).)[]),) )>)~)~ 뒤에 나오는 형제 선택
+)+ 는 바로 뒤에 인접한 형제만 선택한다.
:hover 마우스가 오버했을 때
:first-child 형제 요소 그룹 중 첫번째 요소
:last-child 형제 요소 그룹 중 마지막 요소
:nth-child(2) 형제 요소 그룹 중 n에 해당하는 요소
::before 선택한 요소의 내용 앞에 새로운 요소 만들어 작업할수 있다
::after 선택한 요소의 내용 뒤에 새로운 요소 만들어 작업할수 있다
Picture Element, 고정값, 디지털 화면에서 이미지를 표현하는 가장 작은 단위
퍼센트는 부모 요소의 크기를 기준으로 한다.
브라우저 창의 크기를 기준으로 한다.
vw: viewport width
vh: viewport height
부모 요소의 글자 크기를 기준으로 한다.
루트 요소(html)의 글꼴 크기 기준으로 한다.
요소 (elemnt)
패딩 (padding)
테두리 (border)
마진 (margin)
width
height
padding
margin
border
border-radius: 요소의 모서리
box-sizing
총 너버와 높이를 계산하는 방식
block
inline
inline-block: 줄 바꿈하지 않는 block
flex 부모 컨테이너 요소 안에서 x, y 축 단방향으로 선을 그려서 영역을 나눈다.(1차원적)
grid 부모 컨테이너 요소 안에서 x, y 축으로 선을 그려서 영역을 나눈다.
none 접근할 수 없어서 스크린리더에도 읽히지 않는다
기본 스타일의 부정적 영향을 줄이기 위한 css 파일
static
기본값
relative
자신의 기본 위치에 대한 상대적 위치
absolute
가장 가까운 조상 요소 중 position 속성이 static이 아닌 요소 기준으로 절대 우치
CSS는 개별 요소를 이해하기에는 쉽지만 조합하여 사용할 때는 그리 간단하지 않다. 다양한 조합이 많고 부모와 자식 요소 간의 관계를 잘 파악해야 한다. 따라서 많은 연습을 통해 경험을 쌓는 것이 중요하다.
ChatGPT
