🔗 CSS

실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당하는 도구

Q. 내가 생각해보는 CSS ?

📢 html파일의 단순한 배경, 글자, 이미지, 구조 등을 css로 레이아웃, 2D, 3D, 글꼴 등으로 꾸며줄 수 있어서 시각적으로 더 아름답고 화려하게 혹은 심플하고 깔끔하게 디자인 해준다.
그래서 정적인 화면을 동적으로 개성있게 꾸며주는 도구!! 라고 해석해보았다.

🔗 CSS의 기본문법

선택자 { 속성 : 값 ; }

여기서 선택자는 스타일을 적용할 대상, 속성은 스타일의 종류(property), 값은 스타일의 값(value)이다.

CSS의 선언 방식은 크게 3가지이다.

• 내장방식 - html파일 head부분에 <style></style>의 내용(contents)으로 스타일을 작성하는 방식
• 인라인방식 - 요소의 style 속성에 직접 스타일을 작성하는 방식
• 링크방식 - <link/>로 외부에 있는 css 문서를 가져와서 연결하는 방식

📢 방식 3가지 중 인라인 방식으로 div요소에 스타일을 넣어보자!

<div style="color: red;">글꼴 색상은 빨간색</div>

🔗 CSS선택자를 알아보자 !

• 기본 선택자
  - 전체선택자 " * " 모든 요소를 선택
  - 태그선택자 태그이름이 body인 요소 선택
  - 클래스선택자 " . " class속성의 값이 A인 요소 선택
  - 아이디선택자 " # " id속성의 값이 A인 요소 선택

  📌 클래스 선택자 실습해보기, 클래스가 fruit인 요소 선택!

  

• 복합 선택자 (XYZ는 클래스의 값)
  - 일치선택자 : 선택자ABC와 XYZ를 동시에 만족하는 요소 선택
  - 자식선택자 : 선택자ABC의 자식 요소XYZ 선택
  - 하위선택자 : 선택자ABC의 하위 요소 XYZ선택
  - 인접형제선택자 : 선택자ABC의 다음 형제 요소XYZ 하나를 선택
  - 일반형제선택자 : 선택자ABC의 다음 형제 요소 XYZ 모두를 선택

  📌 일반형제선택자 실습해보기, 오렌지 다음 형제 요소 모두를 선택!

  

• 가상클래스
  - a:hover : 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택
  - a:active : 선택자 ABC요소를 클릭하고 있는 동안 선택
  - a:pocus : 선택자 ABC요소가 포커스 되면 선택
  - ABC:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택
  - ABC:nth-child(n) : 선택자 ABC가 형제 요소 중 (n)째라면 선택
  - ABC:not(XYZ) - 선택자 XYZ가 아닌 ABC 요소 선택 = 부정 선택자

  📌 A:nth-child(n) 실습해보기, li의 짝수 요소 선택! ( 2n = 짝수, 2n+1 = 홀수 )

  

• 가상요소
  ABC::before - 선택자 ABC요소의 내부 앞에 내용을 삽입, 가상인라인요소
  ABC::after - 선택자 ABC요소의 내부 뒤에 내용을 삽입

Inherit

• 스타일상속 - 부모요소로부터 상속되어 스타일이 적용
• 강제 상속 - inherit상속 속성, 부모요소와 같은 값으로 적용해주는 속성

📌 선택자 우선순위
!important > 인라인선언방식 > ID선택자 > 클래스선택자 > 태그선택자 = 가상요소선택자 > 전체선택자
같은 순서이면 나중에 작성된 코드가 우선 순위이다.

🔗 CSS단위와 속성

px - 픽셀 (절대단위)
% - 상대적 백분율 (상대단위)
em - 요소의 글꼴 크기 1em=10px
rem - 루트 요소(html)의 글꼴 크기
vw - 뷰포트 가로 너비의 백분율
vh - 뷰포트 세로 너비의 백분율

• margin
  요소의 외부 여백을 지정하는 단축 속성 (px, em, vw) margin-방향 = 개별속성
  

• padding
  요소의 내부 여백을 지정하는 단축 속성(px, em, vw)
  padding-방향 = 개별속성

• border
  선-두께(width) 선-종류(style) 선-색상(color)

• border-radius
  모서리를 둥글게! 10px=반지름이 10px만큼 둥글게

• box-sizing: border-box
  기본값은 content-box로 패딩,선두께 등을 제외하여 크기를 제어한다.

• overflow
  요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성(visible, hidden, scroll, auto)

• display
  요소의 화면 출력(보여짐) 특성

• opacity
  백분율 0~1 투명도를 지정하는 속성 ( 1=불투명, 0=투명 )

배경 속성

• background-color #배경색상
• background-image:url(" ") #배경이미지(이미지경로)
• background-size #배경이미지 사이즈
• background-repeat: no-repeat #배경이미지의 반복여부 X
• background-position #배경이미지 위치
• background-attachment #요소의 배경이미지 스크롤 특성(scroll, fixed)

📋선택자 실습 추가로 더 해보기

📢 div와 span태그로 기본 선택자, 복합선택자, 가상클래스와 여러가지 속성을 사용해서 연습해보았다. 화면 캡쳐를 해서 마우스 커서가 보이진 않지만 마우스 커서가 올려진 study 텍스트까지 잘 적용되었다.