CSS 기초 및 속성

금송·2024년 8월 13일
CSS이론
0

이론

목록 보기
4/17
post-thumbnail

CSS

html 태그 초창기 20개 > 현재 140개

css 속성 초창기 50개 > 현재 370

우리가 작성한 HTML의 스타일, 레이아웃 등 꾸미는 역할

소리도 꾸밈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* css의 기본 문법 */
        h1 {
            color: blue
        }
    </style>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

프론트엔드가 되기 위한 좋은 습관

반복 작업을 줄이기 위해 좋은 예제를 찾고, 이를 분석하고 수정하며 체화하여 머릿속에서 바로 렌더링(코드를 실행해보는) 할 수 있도록 하는 것이 좋다. 단순히 프로세스를 줄이는 것 뿐만 아니라 중복된 코드를 줄이고, 더 체계적인 코드를 짤 수 있게 된다.

CSS 적용하기

  1. 인라인 방식

    • w3c 측면으로는 정말 좋지 않은 코드 작성 방법

    • 하지만 간단하게 코드 한 두개 정도 추가 시킬 때 가끔 사용

    • 대신 가상 클래스는 적용 안됨 그래서 실무에선 권장 안함

    <h1 style="color: mediumpurple">Hello world</h1>

  2. 내부 스타일

    • 큰 프로젝트를 진행하는 실무에선 가독성이 떨어지기 때문에 권장 안함
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 2. 내부 스타일 */
        h2 {
            color: aqua;
        }
    </style>
</head>

  3. 외부 스타일

    • 실무에서 사용하는 스타일 방법
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    3. 외부 스타일-->
    <link rel="stylesheet" href="./002.css">
</head>
  • 에링(?)문법 (emmet)
h$*n

h 태그를 n 번까지 생성 

			h${hello world}*3

h 내에 텍스트 삽입 후 생성

css의 우선순위

정확성에 따라 css가 반영됨

선택자

  1. 전체 선택자

    • 유니버셜 셀렉터라고도 함

    • html내에 모든 요소를 선택함 그래서 로드에 관여해 필요할때만 사용

    • 해당 선택자는 웬만해선 reset.css에서만 사용함

  * {
    color: red;
  }

  1. 타입선택자

    • 문서 내에 모든 태그 (ex. h2)에 적용 됨
h1,
h2 {
  background-color: aqua;
}

  1. 아이디 선택자

    • html 내에서 한번만 사용 될 수 있는 고유한 식별자. 같은 아이디는 재사용 X

    • 재사용성이 많이 떨어짐

#one {
  text-decoration: underline;
  background-color: blanchedalmond;
}

  1. 클래스 선택자

    • 문서 내에 여러개 설정할 수 있음

    • id와 다르게 같은 값이 여러개 존재 가능

    • 한 태그 내에서 여러개의 클래스명 적용 가능 ==⇒ 재사용성이 뛰어남

.red {
  color: red;
}
.border {
  border: 1px solid #000;
}
  • 클래스, 아이디 작성 규칙
    • 숫자로 시작하면 안된다.
    • 하이픈, 언더바, 문자로만 시작을 할 수 있다.

  1. 특성 선택자

    • 특정 속성을 가진 요소나 특정 속성 값을 가진 요소를 선택

    • 작성은 [] 내에 속성/속성 값을 기입해서 작성

    • 기본 문법: type이라는 속성을 가진 요소를 선택

/* type의 속성값이 button인 속성을 선택 */
[type] {
    border: solid 2px red;
}

/* type의 속성값이 button인 속성을 선택 */
[type="button"] {
    background-color: aqua;
}

/* 클래스 명이 btn으로 시작하는 요소를 선택 */
[class^="btn"] {
    color: blue;
}

/* 클래스 명이 btn으로 끝나는 요소를 선택 */
[class$="btn"] {
    font-weight: bold;
}

/*
    not 키워드는 조건에 충족하는 요소를 제외한 나머지 요소를 선택
    *는 ~~를 포함한다 라는 의미
    해당 태그에서 해당 조건을 제외한 모든 요소를 선택
*/
input:not([class*="btn"]){
    background-color: greenyellow;
}

  1. 자식 선택자

    • 직계 자식 중에서만 선택
 section > p {
  color: blue;
}

  1. 일반 형제 선택자

    • 형제 요소 중 기준이 되는 요소의 뒤에 나오는 요소만을 선택
section ~ p {
  text-decoration: underline;
}

  1. 인접 형제 선택자

    • 기준이 되는 요소의 바로 뒤에 있는 요소만을 선택
section + p {
  background-color: chartreuse;
}

색상

/* 색상 키워드로 폰트 색상 꾸미기 */
.key {
  color: mediumpurple;
}
/* 색상환 코드를 16진수로 표기하여 색상을 꾸밈
 #RRGGBB 구조
 흰색 #ffffff, 검은색 #000000
*/
.code {
  /*color: #fff;*/
}
/*레드, 그린, 블루 순으로 0부터 255까지의 정수값*/
.rgb {
  color: rgb(255,0,0)
}
/*rgb랄 같은데 마지막은 불투명도 조절. 1에 가까울수록 붙투명*/
.rgba {
  color: rgba(255,0,0,0.3)
}
/* 투명 */
.trans {
  color: transparent;
}

글꼴

글꼴은 텍스트의 시각적 특성을 결정하는 중요한 요소

웹 안전 폰트를 사용하거나 웹폰트를 불러와 사용할 수 있음 (웹폰트는 아래 페이지에서 확인)

https://fonts.google.com/

https://noonnu.cc/

/*웹폰트 링크 호출*/
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<style>
/*폰트 페이스 호출*/
    @font-face {
        font-family: 'ClimateCrisisKR-1979';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKR-1979.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
    }
		/*
			사용할 폰트 body에 적용
			font-family에 2개가 적혀있는건 앞선 폰트가 적용 안되었을때 뒷 폰트가 적용된다.
		*/
    body {
        font-family: "Single Day", cursive;
        font-weight: 400;
        font-style: normal;
    }
    p {
        /*font-size: 34px;*/
        /*font-size: 4em;*/
        font-size: 4rem;
    }
    .normal {
        font-weight: normal;
    }
    .bold {
        font-weight: bold;
    }
    .custom {
        /*font-weight: lighter;*/
        /*font-weight: bolder;*/
        /*100 ~ 900 숫자로 표현가능*/
        font-weight: 100;
    }
</style>

폰트 행간 자간

p {
    width: 300px;
    border: 1px solid #000;
    /*text-align: left;*/
    /*text-align: right;*/
    /*text-align: center;*/
    /*양쪽 정렬. 띄어쓰기의 불규칙적인 여백이 생겨서 해당 속성은 거의 쓰지않음*/
    /*text-align: justify;*/
    /* 대부분의 브라우저에서 호환되지 않는다 */
    text-align: justify-all;

    /* 행간 설정 */
    line-height: 2;

    /* 자간 설정 */
    letter-spacing: 10px;
}

span {
    font-size: 50px;
    border: 1px solid #000;
    line-height: 80px;
}
/* 텍스트 수직 정렬은 잘 안쓰고 flex 많이 씀
인라인, 인라인 블록, 테이블 요소에만 적용
*/
.baseline {
    vertical-align: baseline;
}
.sub {
    vertical-align: sub;
}
.super {
    vertical-align: super;
}
.top {
    vertical-align: top;
}
.middle {
    vertical-align: middle;
}
.bottom {
    vertical-align: bottom;
}

단위

절대 길이 단위 : px

고정된 크기를 가지는 단위

상대 길이 단위 : %, vw, vh, em, rem (vmin, vmax)

상대적으로 크기를 나타낼 수 있는 단위

반응형 작업시 유용

1vw는 뷰포트 넓이의 1%, 1vh는 뷰포트 높이의 1%

em은 부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위

rem은 ‘root em’의 줄임말로 최상의 요소 html의 글자 크기 기준으로 하는 배수인데 기본 사이즈는 16px이다.

/*부모요소의 폰트사이즈 : 10px
10px * 2 = 20px*/
.item1 {
    font-size: 2em;
}
/* root html의 폰트사이즈: 8px
8px * 2 = 16px*/
.item2 {
    font-size: 2rem;
}
/* 유지보수성을 위해 em, rem 단위를 적절하게 사용하는것이 중요!
아래처럼 작업했다면 해당 코드를 다 찾아가서 직접 수정해야함 */
/* p {
    font-size: 12px;
}
div {
    font-size: 16px;
}
 span {
     font-size: 7px;
 } */

가상 선택자

동적 가상 선택자

a:hover {
  font-size: 2em;
}
/* 이미 방문한 링크일때 스타일 수정*/
a:visited {
  color: mediumpurple;
}
/* 눌러졌을때 해당 앵커태그에 포커싱이 갔을때 */
a:focus {
  background-color: orange;
}

구조적 가상 선택자

/* 구조적 가상 선택자 */
.box1 :first-child {
  color: blue;
}
.box1 :last-child {
  color: green;
}
/* 두번째 요소를 선택 */
.box2 :nth-child(2) {
  color: antiquewhite;
}
/* 짝수인 요소들 선택 */
.box2 :nth-child(even) {
  color: purple;
}
/* 홀수인 요소들 선택 */
.box2 :nth-child(odd) {
  color: aquamarine;
}
/* 4의 배수 요소들 선택
  n은 0부터 시작하는 정수
  +,- 연산만 가능
  2n + 1일 경우에 n이 0부터 시작하기 때문에 2*0 + 1
  ==> 1번째 요소부터 선택되는게 맞음
*/
.box2 :nth-child(4n) {
  color: orange;
}

가상요소

/* 가상요소
img, br, input에는 적용 불가능
content 속성 필수 작성
*/
p:before {
  content: '오르미 6기 여러분';
  font-size: 24px;
  color: hotpink;
}
p:after {
  content: '🐥';
}
/* img, br, input태그는 빈태그이므로 가상 요소를 적용시킬수없음
img는 img src가 안들어가있으면 적용되는거 처럼 보임
*/
img:after {
    content: '🐥';
}
br:after {
    content: '🐥';
}
input:after {
    content: '🐥';
}
input::placeholder {
    color: blue;
}

선택자 우선순위

  1. 후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높다
  2. 구체성(명시도)의 원칙
    1. 아래에서 계층 점수가 아무리 높아도 위로 넘어갈 수 없음
    2. 구체성 계산 방법 (유형 선택자가 아무리 많아도 클래스 선택자를 이길 수 없음)
      1. 인라인 스타일 1000점
      2. id 선택자 100점
      3. 클래스, 가상, 속성 선택자 10점
      4. 요소(타입) 선택자, 가상 요소 선택자 1점
      5. 전체 선택자 0점
  3. 중요성의 원칙

!important 선언은 다른 모든 선언보다 우선합니다. 이는 매우 강력한 도구이지만, 남용하면 CSS의 예측 가능성과 유지보수성을 해칠 수 있습니다. !important 는 선택자 우선순위에 직접적인 영향을 미칩니다.

profile
금송
goldsong
이전 포스트

GIT, GIT HUB 기초

다음 포스트

CSS 기초 및 속성 2

0개의 댓글