코딩/코드스테이츠

[CSS] 기초(1)

김기지 2022. 12. 25. 16:38

◎ CSS

웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어
더 나은 UX(user experienc)를 제공하기 위한 UI(user interface)및 레이아웃을 구성하기 위해 사용

► UI(사용자 인터페이스)

더보기

• 인터페이스 : 컴퓨터와 교류하기 위한 연결고리

버튼이나 마우스가 없던 시기에 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI을 사용했음

이 방식은 키보드로 작성한 암호코드를 적어 엔터로 눌러야 애플리케이션이 작동했으므로,

컴퓨터에 무지한 일반 사용자들은 사용할 수 없었음

하지만 인터페이스가 잘 만들어진 요즘은 일반 사용자도 애플리케이션을 사용할 수 있음

이러한 인터페이스 앞에 '사용자'를 붙여 '사용자 인터페이스'가 됨

UI는 컴퓨터에 무지한 일반 사용자들이 애플리케이션을 사용하게 하는데 매우 중요한 역할을 한다.

즉, UI가 없으면 애플리케이션과 소통이 불가능하다.

좋은 UX는 직관적이고 쉬운 UI에서 나온다.

 

○ CSS구성

//1.셀렉터 선택하기
input{
      color: green; // 2.속성명과 속성값을 선언하기
    }
  • 셀렉터는 요소 이름이나 id, class를 선택한다.
  • 중괄호{ } 안에서 요소에 적용할 내용을 작성한다.
  • 요소에 적용할 수 있는 내용 = 속성
  • 속성에 적용할 적절한 값을 입력하여 스타일을 표현한다.
  • 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다.

► CSS를 적용하는 방법

  1. 같은 줄에서 스타일을 적용하는 인라인 스타일(html태그를 입력할 때 태그 안에서 적용)
  2. <style>요소 내에 작성하는 내부 스타일 시트
  3. 외부 스타일 시트

 

► CSS파일 추가하기

외부 스타일 시트로 작성 후 html파일에 연결해주는 방법

더보기

<link>요소

HTML파일과 다른 파일을 연결하기 위한 목적

rel은 연결하고자 하는 파일의 역할이나 특징을 나타냄

href에는 파일의 위치를 추가 (절대경로/상대경로로 입력하여 연결)

<link rel="stylesheet" href="style.css">

○ 기본적인 셀렉터

• id로 스타일링 적용하기

 #id명 으로 입력

id는 하나의 문서에서 한 요소에만 사용한다. 하나의 id값을 여러 요소에 사용하면 안됨

 

• class로 스타일링 적용하기

 

.class명 으로 입력

class는 하나의 값을 여러 요소에 동시에 사용할 수 있음

하나의 요소에 적용하려면 class의 이름을 띄어쓰기로 구분하여 입력

 

❊id와 class의 차이

id class
#으로 선택 .으로 선택
한 문서에 단 하나의 요소에만 적용 동일한 값을 갖는 요소 존재 가능
특정 요소에 이름을 붙이는 데 사용 스타일의 분류에 사용

 

○ 텍스트 꾸미기

► 색상

color 

  • 글자의 색상 변경
  • HEX(16진수로 RGB가 표현된 값) 또는 주요 색상의 이름 사용 가능
 

► 글꼴

font-family

  • 글꼴(폰트) 설정 가능
  • 글꼴의 이름을 따옴표로 붙여 적용
  • 사용하려는 글꼴이 존재하지 않거나 디바이스에 따라 지원하지 않는 경우 fall back글꼴을 추가하여 사용
  • fall back은 글꼴을 사용할 수 없는 경우를 위한 대비책으로 여러개 설정이 가능
  • 쉼표로 구분하여 입력, 입력된 순서대로 적용됨

► 크기

font-size

  • 글자의 크기 변경
  • 상대단위와 절대단위 사용

► 기타 스타일링

font-weight : 굵기

text-decoration : 밑줄, 가로줄

letter-spacing : 자간

line-height : 행간

 

► 정렬

가로로 정렬시 text-align사용.

유효한 값은 left, right, center, justify(양끝정렬)

 

세로로 정렬은 부모요소의 display속성이 반드시 table-cell이여야함.

정렬하고자 하는 글자를 둘러싼 박스의 높이가 글자보다 큰 경우에만 적용할 수 있음

➡︎ 박스모델에서 다루기

 

 

○ 절대단위 vs 상대단위

크기의 단위는 절대단위와 상대단위로 구분가능

절대단위 : px, pt 등
상대단위 : %, em, rem, vw, vh 등 

► 글꼴 사이즈를 정할때

 

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우

➡︎ px사용

픽셀은 크기가 고정된 절대 단위이므로 사용자 접근성에 불리함

사용자의 환경에 따라 픽셀로 지정한 크기가 다른 일반 텍스트보다 작거나 크게 나타남

모바일 기기처럼 작은 화면이면서 고해상도인 경우 적합하지 않음

고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일되므로 뚜렷하지 못한 형태로 나타날 수 있음

따라서, 픽셀은 인쇄와 같이 화면 사이즈가 정해진 경우에 유리함

 

2. 일반적인 경우

➡︎ rem추천

root(브라우저)의 기본 크기가 1rem이며 이를 기준으로 늘리거나 줄일 수 있음

이는 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리함

em은 부모 요소에 따라 상대적으로 크기가 변경되므로 계산이 어려움

 

 

► 화면 사이즈를 정할때

 

1. 반응형 웹에서 기준점을 만들때

➡︎ px 사용

반응형 웹은 디바이스의 너비에 따라 유동적인 레이아웃이 적용됨

ex) 데스크탑, 스마트본 가로모드, 세로모드, 태블릿 ...

이러한 경우 디바이스의 크기별로 css를 다르게 적용해야함

이때 디바이스의 크기는 정해져있으므로 px로 정함

 

2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

➡︎ vw, vh 사용

웹 사이트에서 보이는 영역을 viewport라고 함

더보기

vw : viewport width

vh : viewport height

1vw와 1vh는 보이는 영역 너비,높이의 1/100

화면을 가득 채우며 딱 떨어지게 스크롤되려면 100vw, 100vh로 설정

(<body>태그에서의 %는 html이 차지하는 모든 영역의 비율)

 

 

728x90