2025/09/12 CSS

김기훈·2025년 9월 12일

TIL

목록 보기

19/194

CSS

Cascading:폭포같은,계속되는,연속적인
- Style:멋을내다
  - Sheet:(종이나문서)한장
CSS는 스타일을 정의하는 문서 형식, 태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML문서에 스타일을 추가한다.
CSS 문서는 독립적으로 존재할 수 있지만, HTML 문서와 함께 사용하지 않는 CSS문서는 하나의 텍스트 문서에 불과하다.즉, 혼자서 할 수 있는 일이 없다.
- CSS문서에 정의된 스타일이 웹 브라우저 화면을 통해 보여지기 위해서는 먼저 HTML 문서의 작성이 필요하다.

CSS 문법

CSS 주석 사용법 : `/* 주석의 내용 */`

HTML 문서에 CSS문서(코드)를 적용하는 방법

각 태그의 스타일이 겹칠경우 인라인 스타일이 먼저 적용된다. 인라인 스타일이 아닌 경우, 나중에 쓰여진 선언문이 적용된다.

인라인 스타일 : 태그에 직접 기술하기
- 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식 선택자는 필요X
  - 웹 콘텐츠와 스타일시트를 분리하기 위해서 사용하지 않는 편이 좋음
    - 속성명,속성값이 들어가는데 속성값에 opacity=0이 들어가면 투명도 0으로 안보임

                          <p style ="color blue;"> 글자</P>

스타일 태그(내부 스타일시트) : 스타일시트를 위한 태그를 추가하여 기술하기
- style 태그 안에는 CSS 코드를 작성해야 한다.

                          <style>p{ color:red; }</style>

문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
- 확장자가 .css 인 스타일시트 파일을 생성해 그 안에 css 코드를 작성하고 HTML문서에 연결
  - <link> 태그를 사용 : <head></head> 내부에 사용해야 함

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

href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- 같은 폴더에 있는경우 css문서의 이름을 적으면 됨
rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

선택자 기본

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다.

변수명.클래스 , 변수명#아이디값 도 가능
선택자의 우선순의 : 1. 아이디 선택자 2. 클래스 선택자 3. 태그 선택자

              <style>*{color: red;}</style> <!--body에 들어가는 모든요소의 색을 변환-->

박스 모델

% : 내가 속한 영역을 기준으로 백분율 계산
- 내가 속한 영역에 관련 값이 있어야 적용 가능

테두리

화면 상에서 요소가 차지하고 있는 공간을 뚜력하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 유용한 영역

border-radius : 모서리를 둥굴게 만들 수 있다
- border-style는 여러 종류가 있고 자동완성을 통해 solid가 아닌 다른것도 확인 가능

여백 다루기

여백의 안쪽,바깥쪽 여부는 테두리를 기준으로 정해진다.

여백을 추가하더라도 내가 정해놓은 width,height 가 변하지 않기를 바라면 box-sizing!
- box-sizing: content-box; : 기본값
- box-sizing: border-box; : border을 포함하여 줄어듬

padding-right : 접미사를 붙여 각각의 크기를 지정가능

배경

clip : 어디에만 적용될거냐 / origin : 어디부터 적용될거냐

글자 색

키워드 : 색상을 나타내는 키워드(영단어)를 입력한다
rgb 함수 : rgb 함수에 수치를 입력해 색상을 결정한다.
- rgb란 빛의 3원색인 red,green,blue의 줄임말.
  - rgb(값1,값2,값3) ,opacity= 0~1 (투명도)
- rgba(값1,값2,값3,값4) = 투명도를 추가 지정가능
hsl 함수 : hsl 함수에 수치를 입력해 색상을 결정한다.
- 색조,채도,조도를 각각 지정해 색상을 결정하는 함수
  - hsl(값1,값2,값3)
- hsla(값1,값2,값3,값4) = 투명도를 추가로 지정가능
16진수값 : 빨강, 초록, 파랑의 비율을 16진수로 표현해 색상을 결정한다.
- #로 시작하는 여섯자리의 16진수 값을 입력하는 방법

색조

텍스트 꾸미기

font-family : 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성
- 한 개 이상의 글꼴을 지정할 수 있다. (글꼴은 컴퓨터에서 제공되는걸 쓰는게 좋다.)
  - 입력한 글꼴뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값 정의
    - 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용

                     <style>*{font-family: Ariel,monospace};</style>
					Ariel 이라는 이름의 폰트를 사용할 수 없으면 monospace를 사용

웹 폰트(구글 폰트) : 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용 가능한 웹 전용 글꼴

font-weight : 100~900
text-align : left , right , center , justify(양끝 정렬 : 양끝에 붙음)

단위

루트 요소란 문서의 시작 부분을 뜻하는 것으로,<html>태그를 의미한다

first의 부모는 body
- first의 font-size:0.5rm 일때 body의 font-size:16px이라면
  - font-size:0.5rm은 8px가 된다.
font-size : 3rem html의 font-size : 8px
- font-size : 3rem = 24px

요소의 유형 변화

블록 레밸 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
- div, p, h1 등등
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다
- span, a 등등

display

요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의 즉, 요소의 유형을 변경 가능

float

요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치 변경
- 속성값 : left , right , none

position

문서 상에 요소를 배치하는 방법을 정의 top,bottom,right,left 가 최종 위치 결정

겹치거나 넘치는 요소 다루기

z-index 속성은 요소의 쌓임 순서를 정의할 수 있다.
- z-index는 숫자의 순서가 아니기 때문에 꼭 1부터 시작하지 않아도 작은 수부터 쌓인다.

요소는 텍스트 또는 다른 요소를 자신의 콘텐츠로 가질 수 있고, 요소 내부의 콘텐츠 양이 많아 질수록,요소는 콘텐츠에 맞게 크기를 조절한다. 그러나 요소의 크기가 정해져 있는 경우 내부 콘텐츠의 크기가 요소보다 커지는 상황이 발생하면, 콘텐츠가 요소의 영역 밖으로 벗어나 버리는 "넘침 현상" 이 발생한다
- 이러한 현상을 해결하기 위해서 overflow 속성 이 사용된다