CSS

Haks.·2024년 12월 24일

How to use

목록 보기

8/32

CSS

Cascading Stylesheet, 현재 표준 CSS3
연속적으로 스타일을 정의하는 문사
CSS는 스타일을 정의하는 문서 형식. 태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML 문서에 스타일을 추가한다.

기본 형태
- 선택자 : 어떤 요소에 어떤 스타일을 적용할지에 대한 정보
- {중괄호} : 어떤 스타일을 적용할지
- 속성명 : 정보
- 속성값 : 어떻게 정의하고 싶은지

선택자{
    속성명: 속성값;
}

주석 (/* 주석의내용 */)
CSS 문서는 독립적으로 존재할 수 있지만, HTML 문서와 함께 사용하지 않는 CSS 문서는 단지 하나의 텍스트 문서에 불과하다
즉 혼자서는 할수 있는 일이 없다, CSS 문서에 정의된 스타일이 웹 브라우저 화면을 통해 보여지도록 하기 위해서 만드시 HTML 문서 작성이 먼저 이루어져야한다.

인라인 스타일 : 태그에 직접 기술하기, 선택자 필요 x, 가능하면 사용 자제
스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
- <style></style>
- 내부 스타일 시트
문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
- 확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결해 줄 수 있다. <link> 태그를 사용
- <link href="./style.css" rel="stylesheet">
- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서와 외부 소스의 연관 관계를 기술하는 속성
- \ 태그는 HTML 문서의 \\ 내부에서 사용해야 함

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 사용</title>
    <style>
        p{
            color: orange;
        }
    </style>
    <!-- 늦게 쓰여진 걸로 덮어씀 -->
    <link href="19-CSS문서사용하기.css" rel="stylesheet">
</head>
<body>
    <!-- 인라인 스타일은 우선적으로 적용 -->
    <p style="color: red;">스타일 적용 실험 : 색깔만 바꿔보자</p>
    <p>스타일 적용 실험 : 색깔만 바꿔보자</p>
    <p>스타일 적용 실험 : 색깔만 바꿔보자</p>
</body>

선택자

요소는 여러개를 동시에 선택 할 수 있음.

전체 선택자 : 문서 내 모든 요소를 선택, *

태그 선택자 : 특정 태그로 만들어진 모든 요소를 선택, 태그명

클래스 선택자 : 특정 클래스 값이 지정된 모든 요소를 선택, .클래스값

아이디 선택자 : 특정 아이디 값이 지정된 요소를 선택, #아이디값

그룹 선택자 : 여러 유형의 선택자를 한꺼번에 선택, 선택자, 선택자, 선택자

li.hiphop : li 인데 힙합 클래스 인경우
.hiphop : 힙합 클래스인 경우
li#belly: li 인데 id가 belly인경우
#belly : id 값이 belly 인 경우
선택자 우선순위 :
1. 아이디 선택자
2. 클래스 선택자
3. 태그 선택자

    <style>
        
        *{
            color: red;
        }
        li{
            color: blue;
        }
        li.hiphop{
            color: purple;
        
        li#belly{
            color: orange;
        }
         /*
        여러개 한번에는 이렇게
        */
        h2, p, li{
            color: yellow
        }
    </style>

박스모델, 픽셀단위

너비와 높이를 가지는 개별 요소를 가리켜 박스라 표현하고, 박스를 네가지 세부영역으로 나누어 구분한 일종의 디자인 모델
CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성중 일부 또는 전부를 적용할 수 있으며, CSS는 영역 별로 크기를 따로 설정하도록 다양한 속성을 제공한다.

콘텐츠 영역 : 요소 내에 포함된 콘텐츠를 표시하는 영역 , width,height

안쪽여백 : 테두리 안에서 콘텐추 주변을 감싸는 여백 , padding

경계선(테두리) : 콘텐츠와 안쪽 여백을 둘러싸는 테두리, border

바깥족 여백 : 테두리 바깥에서 요소를 감싸는 여백 margin

        .area{
            /*
            % : 내가 속한 영역을 기준으로 백분율 계산
            => 내가 속한 영역에 관련 값이 있어야 적용이 가능!
            */
            /*
            width: 50%; => 화면 절반
            height: 100px;
            높이는 기본값이 없기에 먹히지 않는다
            */
            height: 50%; 
            }

테두리 스타일
- 화면상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 영역
- 테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법 사용
  - border-width : 테두리의 두께를 지정
  - border-style : 점선, 실선, 겹선 등으로 테두리의 모양을 지정
  - border-color : 테두리의 색상을 지정
  - border : width style color 이 공백을 기준으로 한번에 들어감
  - border-radius : 모소리를 둥글게 만들 수 있음, 반경에 해당하는 길이를 정해주면 그만큼 둥글어짐

<style>
    .area{
        height: 100px; 
        width : 200px;
    }
    .red{
        border-width: 5px;
        border-style: solid;
        border-color: red;
    }
    .green{
        border: 3px solid green;
        /*border-radius: 10px; 하나만 적으면 한번에 다적용*/
        border-radius : 10px 20px 30px 40px ;
    }

</style>

여백 다루기

여백의 안쪽, 바깥족 여부는 테두리를 기준으로 정해진다
테두리(border), 안쪽(padding), 밖(margin)

margin: 10px; : 모든면에 동일한 값 지정
margin: 10px 20px; : 위,아래 와 왼쪽,오른쪽 지정
margin: 10px 20px 30px; : 위, 왼오, 아래족 여백 순서
margin: 10px 20px 30px 40px : 위 오 아 왼 순서
padding 도 동일
width, height 를 사용하면 영역의 크기를 결정할 수있다. 여기에 padding 속성을 추가 정의하면 여백이 생기면서

요소가 기존보다 더 커지게 되는데, 이를 원치 않을 경우 다음 속성을 사용할 수 있다.
box-sizing
- content-box : 콘텐츠 크기를 침범하지 않고 패딩과 마진이 이루어짐
- border-box : 콘텐츠 크기를 양보해서 씀

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        
        margin: 10px 20px 30px 40px;
        /*접미사
        top
        bottom
        left
        right
        */
        padding-top: 20px;
        /*
        패딩을 이나 마진을 늘려서 전체 크기가 200보다 커져 있음 이걸 제어하려면 box-sizing해야함
        border-box 를 하면 width,heigth 가 크기를 양보함
        content-box 는 200 200은 순수하게 콘텐츠 영역 침범 x
        */
        box-sizing: border-box;
    }
</style>

배경 추가하기

콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 할수 있음.
margin 영역을 제외한 3군대의 영역을 포함하는게 기본

접미사, 설명, 속성값 유형
- -color : 배경 색상 지정 , 색상
- -clip : 배경의 적용 범위 , 별도의 키워드
  - border-box : 기본값 경계선까지
  - padding-box : 패딩까지의 범위 사용
  - content-box : 콘텐츠 내부만
- -image : 배경 이미지 지정 , 이미지 url
  - background-image: url(경로,url) (그냥넣으면 너무 큼)
  - backgorund-size 랑 같이 씀 해당 width height 에 맞게
- -origin : 배경의 시작 위치 , 별도의 키워드
  - 배경 시작 위치 설정
- -size : 배경 이미지의 크기 , 수치와 단위
  - 영역을 더 작게 지정하면 기본적으로 바둑판처럼 붙여서 게속 나옴
  - 그래서 background-repeat: no-repeat; 을쓰면 반복 안함
- -position : 배경 이미지의 위치 , 수치와 단위
  - bakground-position: center; 정렬 기준, left center 가능 ,x,y 값을 수치로 지정해 줄 수있음 px
- -repeat : 이미지의 반복 패턴 , 별도의 키워드
  - background-repeat: repeat-x(가로로만),repeat-y(세로로만) 반복

<style>
    div{
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 20px double green;

        /*background-color: yellowgreen;*/
        background-clip : padding-box; /*패딩값이 보더값이랑 같은 20이라 안쪽만 칠해짐*/
        background-image: url(../1회차/imges/우디.jpeg);
        background-size: 200px 200px;
        background-repeat: no-repeat;

        background-origin: content-box;
        background-position: center;
    }
</style>

색깔을 지정하는 다양한 방법

글자색을 지정할때는 color 속성을 사용하며, 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일

키워드 : 색상을 나타내는 키워드(영단어) 입력한다.
rgb함수 : rgb함수에 수치입력
- (값1, 값2, 값3)
- rgba(값1, 값2, 값3, 값4): 투명도도 지원 (0~1)
hsl함수 : hsl 함수에 수치 입력
- hsla(값1, 값2, 값3, 값4) 색조(색상) 채도(선명도) 조도(밝기) 투명도
16진수값 : 빨강,초록,파랑의 비율을 16진수로 표현해 색상을 결정
- #RRGGBB : 16진수값
- #RRGGBBAA : 투명도 츠기

<style>
    p#one{
        color: rgb(100%, 0%, 100%);
    }
    p#two{
        color: rgba(100%, 0%, 100%, 0.5);
    }
    p#three{
        color: hsla(300, 50%, 30%, 0.3);
    }
    p#four{
        /*
        0 1 2 3 4 5 6 7 8 9 A B C D E F
        10 11 12 13 14 
        00 ~ FF : 255
        */
        color: #FF0000FF;
    }
</style>

텍스트꾸미기

글꼴 바꾸기
- font-family 요소에 포함된 텍스트의 글꼴을 정의할때 사용하는 속성
  - font-family: Arial, Helvetica, snas-serif; 한개 이상의 글꼴 지정 x 앞에께 지정되지만 글꼴이 지원안되면 그다음것이 적용된다.
  - 구글폰트 드가서 맘에드는거 누르고 link 복사
웹 폰트 사용하기
- 컴퓨터 시스템에 해당 폰트가 설치 되어 있지 않을 경우 웹서버로부터 제공받아 사용할 수 있는'웹 전용 글꼴'을 뜻한다
텍스트 꾸미기
- font-size : 글자 크기 지정
- font-weight : 글자 두께 지정
  - 100~900 사이
- line-height : 행 높이 지정
  - 50px 행높이
- text-align : 텍스트 정렬 방식 지정
  - left,right,center 정렬 양끝정렬(justify)
- text-decoration : 텍스트 줄 긋기
- rem : 루트 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위(루트요소란 문서의 시작부분을 뜻함,html태그
  - html 태그 글자크기 곱 font-size: 2rem;
- em : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
  - 자기를 품고 잇는 부모 태그 폰트 사이즈에 곱하는것 font-size: 0.5em;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <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=Nanum+Gothic&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: "Nanum Gothic", monospace;
        }
        html{
            font-size: 8px;
        }
        body{
            font-size: 32px;
        }
        #first{
            font-size: 3rem;
            font-weight: 500;
            line-height: 32px;
            text-align: justify;;
        }
    </style>
</head>

css 파일 실습

*{
    text-align: center
}
html{
    background-color: #B3A194;
    font-size: 16px;
}

body{
    width : 640px;
    margin: auto; /* 너비에서 남는 여백을 동일하게 분배 */
}

h1{
    font-size: 48px;
}

img{
    width: 250px;
    height: 250px;
    border-radius: 100px
}

p{
    font-size: 1.5rem;
}

요소의 유형 속성:display

display 속성은 요소를 블록과 인라인 요소중 어느 쪽으로 처리할지 정의한다. 즉 요소의 유형을 변경 할 수 있다.
display:

none : 요소를 화면에 표시하지 않는다.

block : 요소를 블렉레벨 요소로 만듭니다.

inline : 요소를 인라인 요소로 만듭니다

inline-block : 인라인 요소로 표시하되, 블록 레벨의 특성을 추가
<style>
    p{
        display: inline-block; /* 영역이 해당 글자만큼의 크기만으로 바뀜 */
        width: 100px; /* 인라인 요소에서는 전혀 지정이안됨 인라인 블록 하면 가능 */
        height: 100px; /* 인라인 요소에서는 전혀 지정이안됨 */
    }
    span{
        display: block;
    }
</style>
문서의 흐름 속성:float

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서
문서의 흐름은 바뀌나 공간은 차지하고 있음 그래서 글자같은 것들이 새롭게 배치됨

요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경
선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징
사용 가능한 속성값으로 left,right,float,none
부동 요소 : float 속성을 적용한 요소, 다른 요소의 공간에까지 영향을 준다. 잘활용하면 유용하나 float 적용하지 않는 공간에 영향을주어 역효과 가져올 수도 있음
clear 속성이 이런 상황에 대응 : 이미지는 원하는곳에 배치할 수 있고, 텍스트는 밑에 가능
- right, left, both : 오른쪽, 왼쪽, 양쪽에 있는 플롯의 요소를 제거하겠다.

<style>
    .container{
        height: 400px;
        border: 1px solid black;
    }
    #first{
        float: right; /* 이러면 2번째 그림이 첫번째 위치에서 나온다 */
    }
    #second{
        float: left;
    }
    p{
        clear: both;
    }
</style>

위치 속성 position

문서 상에 요소를 배치하는 방법 정의

position : 난 이렇게 배치
top, right, left, bottom : 위, 오른, 왼 , 아래 부터 얼마만큼 떨어 뜨리는 거야
static(기본값)
relative : 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동
absolute : 포지션이 지정된 상위 요소를 기준으로 요소를 이동, 이때 요소는 문서의 흐름에서 제외됨, 원래 있어야할 위치를 무시함
- 예를들어 1번에 쓰면 2번 3번 4번 에 해당하는 곳이 위로 한칸씩 올라감
- 앱솔루트 요소는 position 속성을 가진 요소를 기준으로 위치를 이동한다.
- 포지션 요소를 가진 요소가 없다면 그냥 화면을 기준으로 이동한다.
fixed : 화면을 기준으로 요소의 위치를 고정함, 어떤 것에도 불구하고 정해진 위치에 있음

    <style>
        div{
            width: 100px;
            height: 100px;
            color: white;
            background-color: orange;
        }
        .rel{
            background-color: red;
            position: relative;
            top: 50px;
            left: 50px
        }
        .abs{
            position: absolute;
            right: 50px;
            top : 50px;
        }
        .scroll{ /* 화면을 길게 늘리는 것 */
            height: 2000px;
        }
        .fixed{
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="abs">1</div>
    <div class="rel">2</div>
    <div class="scroll">3</div>
    <div class="fixed">4</div>
</body>

position에 의한 z-index, 과 overflow

포지션에 의하여 대체할 수 있는 요소 z축

z-index : 기본값은 auto, 정수 값으로 각 요소의 쌓임 순서를 결정한다, 포지션이 지정된 값에대해 쓰는 거임
overflow : 요소의 크기가 정해져 있는 상태에서 내부 콘텐츠가 크기의 요소보다 커지는 현상이 발생하는것 넘침현상을 방지해 주는 요소
- visible : 그냥 두는것 기본값
- hidden : 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게함
- scroll : 잘라내지 않고 잘려진 콘텐츠 진행 방향으로 스크롤을 만듬
- auto : 웹 부라우저의 설정 값을 따름

<style>
div{
    width: 100px;
    height: 100px;
    position: relative;
}
.div1{ 
    background-color : orange; 
    z-index: 4;
    overflow: scroll;
}
.div2{ background-color : red; bottom: 50px; z-index: 3;}
.div3{ background-color : purple; bottom: 100px; z-index: 2;}
.div4{ background-color : green; bottom: 150px; z-index: 1;}
</style>

선택자 추가학습

속성 선택자 : 특정 속성을 명시하여 요소를 선택, [속성명] 대괄호 사용
- *: 값의 포함여부
- ^: 값의 시작 여부
- $: 값의 끝 여부
하위 요소 선택자 : 상위 요소에 포함된 하위 요소를 선택, 공백
자식 요소 선택자 : 상위 요소의 바로 한단꼐 하위 요소를 선택, >
인접 형제 선택자 : 형제 요소 중 첫 번째 형제 요소를 선택, +
형제 요소 선택자 : 형제 요소를 선택, ~

<style>
    /*
    *: 값의 포함여부
    ^: 값의 시작 여부
    $: 값의 끝 여부
    */
    [width *= "2"]/*width 인데 2가 포함된*/ {
        border: 5px dashed red;
    }

    body p{/*
        body 에 포함된 p, 
        body em 이렇게 하면 body 에서 em이 쓰인것만 적용  
        p > em 한단계 밑에 있는 것만 선택
        */ 
        color: blue
    }

    #sam + p{/* 
        내 바로 뒤에 있는 형제 p 만 선택 
        # sam ~ p 내뒤에 모든 형제 p 에대하여 적용
        */
    }
    #sam ~ img{
        /* 이미지가 만약 앞에 있다면 적용 안됨 주의 */
    }
</style>

의사클래스 & 의사요소

가상클래스 선택자에 추가되는 키워드, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
마우스를 얹으면 그색을 정하게 하겠다 주겠다. 이런것도 있음

hover : 마우스 포인터가 요소에 올라가 있다.
active : 사용자가 요소를 활성화 했다.(마우스로 누르기와 같은?)
focus : 요소가 포커스를 받고 있다.
disabled : 비활성 상태의 요소
nth-child() : 형제 사이에서의 순서에 따라 요소를 선택 한다.

의사요소는 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.
ex) 첫번째 글자만 크게 만들기

after : 요소의 앞에 의사 요소를 생성 및 추가한다, 콘텐츠 뒤에 콘텐츠 추가, 및 스타일을 추가할 수 있음
before : 요소의 뒤에 의사 요소를 생성 및 추가한다.
first-line : 블록 레벨의 요소의 첫번째 선에 스타일을 적용한다
marker : 목록 기호의 스타일을 적용한다.
placeholder : 입력 요소의 플레이스 홀더(자리표시자) 스타일을 적용한다.

<style>
    .menu{
        padding: 10px;
        border-bottom: 1px solid black;
    }
    .menu > li{
        display : inline-block;
        text-align: center;
    }
    li > a{
        display: inline-block;
        width: 80px;
        height: 10px;
        text-decoration: none;
    }
    
    a:hover{
        color: white;
        background-color: gray;
    }
    a:active{
        color: white;
        background-color: black;
    }
    li:nth-child(2n){ /* 짝수번째 형재만 선택, 1하면 첫번째만, 등등 n이 사용이 가능 */
        font-size: 20px;
    }
    a::first-letter{
        color: black;
    }

    a::after{ /* 원래 있던 글자뒤에 전부 콘텐츠 만들고 스타일 적용 */
        content: "보기";
        color: yellow
    }
</style>

🧑‍💻 실습

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>채팅방 만들기</title>
    <link href="chat.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <main class="chat-screen">
            <section class="chat-screen__bar">
                <div class="user">
                    <div class="user__column">
                        <div class="user__pic"></div>
                    </div>
                    <div class="user__column">
                        <p class="user__nick">친구</p>
                        <p class="user__count">2</p>
                    </div>
                </div>
            </section>
        </main>
        <form class="chat-form">
            <section class="chat-form__field">
                <textarea class="chat-form__msg"></textarea>
                <input type="submit" value="전송" class="chat-form__bt">
            </section>
        </form>
    </div>
</body>
</html>

css

/* 전체적인 세팅부터 */
*{
    box-sizing: border-box;
}
html{
    height: 100%; /*화면을 꽉채워 쓰겟다, 내가 속한 영역의 전체*/
}
body{
    height: 100%;
    margin: 0px;
    /* html 요소는 기본 스타일이 있음 그래서 마진 제거 */
}
.container{
    height: 100%;
    background-color: gray;
}

/* 스크린 크기 조정 */
.chat-screen{
    height: calc(100% - 120px);/* css 수치끼리 계산해서 그 결과를 쓰고싶다. */
}

/* 유저 정보 표시되는 부분 */
.user{
    background-color: white;
    padding: 16px;
    height: 80px;
}
/* 박스 옆으로 글자 붙이기 위한 */
.user__column{ /* 포지션 무시 */
    float: left;
}
.user__pic{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: gray;
}

.user__nick, .user__count{
    margin: 5px;
}
.user__count{
    font-size: 12px;
    color: black;
}
/* 채팅 입력 창 */
.chat-form{
    height: 120px;
    background-color: white;
}
.chat-form__field{
    height: 120px;
}
.chat-form__msg{
    float: left;/* 전송 입력 부분과 떨어지는 것을 방지하기위해 포지션 무시를 위해 적용 */
    width: calc(100%- 120px);
    height: 120px;
    border: none;
    font-size: 24px;
    padding: 10px;
    resize: none; /* 드래그로 사이즈 바뀌는거 막아주는 기능 입력값에 대해 */
    
}

.chat-form__bt{
    width: 120px;
    height: 120px;
    border-radius: 10px;
    background-color: gray;
    font-size: 18px;
}

.chat-form__msg:focus{
    outline: none; /* 아웃라인 제거 */
}

.chat-form__bt:active{/* 클릭이 되는것을 명시적으로 보이기 위해 */
    background-color: wheat;
}