[2023 신입부원 기초 스터디] 이총명 #2주차 - CSS 입문

1 . css란

css는 code sexy styling의 약자로 웹사이트를 섹시하게 꾸며준다

css는 Cascading Style Sheet의 약자로 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어이다

 

2. css 적용방법

인라인 스타일 - Inline Style Sheet

내부 스타일 -  Internal Style Shee

외부 스타일 - External Style Sheet

 

이렇게 3가지 스타일이 있고 앵간하면 외부스타일로

css파일을 따로 만들어 사용한다고 한다.

3. css 출처

사용자 !important > 제작자 !important > 제작자 >사용자 > 브라우저 

 

이 순서인데 사용자는 거의 신경 안써도 되고 제작자>브라우저만

기억해놔도 될 듯 하다.

( important는 cascading을 망칠 수 있으므로 주의해서 사용해야함 )

4. css 선택자

스타일의 적용대상을 선택

 

태그, 클래스, 아이디 등이 있고

특정 글자로 시작하는,끝나는, 특정글자를 가지고있는 클래스를 선택 할 수도 있다.

 

기본선택자, 그룹선택자, 결합자를 사용해 내가 원하는대로 선택해서 스타일을 적용 할 수있다.

5.  font 다루는 법

• font-family - 글꼴 종류를 지정합니다.
• 기본값 : 웹브라우저 기본 글꼴
• font-size - 글자 크기를 지정합니다.
• font-style - 글자를 이텔릭체로 표시할지 지정합니다.
• font-weight - 글자 굵기를 지정합니다.
• font-variant - 소문자를 작은 대문자로 바꾸는 속성

6. 웹 폰트

사용자의 컴퓨터에 설치된 폰트와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다.

구글 웹 폰트 사이트에 방문하여 <link> 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있습니다.

 

 

7. 폰트 컬러

글자 색상은 color 속성으로 지정하며 색상 값으로는 16진수 값 rgb 값 hsl 값 색상 이름이 사용됩니다.

 

RGB/RGBA 표기법

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다. 함수형 표기법(rgb(), rgba())으로 표현할 수 있습니다.

 

16진수 표기법

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다. # 뒤의 16진수 표기법으로 표현할 수 있습니다.

 

hsl/hsla 표기법

HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

HSL 색상은 함수형 hsl()과 hsla() 표기법을 사용합니다.

 

8. 목록 관련 속성 MDN

• list-style or list-style-type MDNcircle, square, upper-alpha, none 와 같은 값을 사용할 수 있다.
  • 스타일 제거 - list-style: none;
• 리스트의 글머리기호 스타일을 변경합니다. 줄여서 list-style 이라고 할 수 있다. 보통 네이게이션을 만들때 Style을 제거 하기위해 많이 사용한다.

 

 

 

 

 

 

ps . 모래시계 출력 성공했어요!