CSS

웹공부

CSS

Rabet 2024. 12. 12. 14:00

- CSS 선택자

type선택 : p, h1, div 등
모두선택 : *
id : #
class : .
속성선택 : [type="text"] 👉🏻 ~=포함, ^= 시작, $=끝, *=어디든
결합자
- 자식 선택 : div > p
- 자손들 선택 : div p
- 바로 다음 형제 선택 : h1 + p
- 다음에 있는 모든 형제 선택 : h1 ~ p
가상 클래스 : :hover, :focus, :active, :nth-child(n), :first-child, :last-child
가상 요소 : ::before, ::afterm ::selection, ::first-line, ::first-letter

id는 이 요소만 적용

class는 중복 및 모든 요소에 적용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial0scale=1.0">
    <title>CSS 클래스 선택자 예시</title>
    <style>
        .red{
            color: red;
            font-size: 18px;
        }
        .large-text{
            font-size: 30px;
        }
        #lightblue{
            color: lightblue;
        }

        [type="text"]{
            border: 2px solid lightcoral;
        }

        [class$="example"]{
            color: green;
        }

        [data-example]{
            font-size: 10px;
        }

    </style>
</head>
<body>
    <p class="red">빨간색</p>
    <p class="large-text">큰 글꼴</p>
    <p class="red large-text">큰 글꼴에 빨간색</p>
    <p class="red" id="lightblue">아이디를 적용</p>
    
    <input type="text" placeholder="텍스트 입력"><br><br>
    <div class="text-example"> 클래스에 'text를 포함하는 요소</div><br>
    <div data-example="true">data-example 속성</div><br>
</body>
</html>

- 상속 및 제거

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial0scale=1.0">
    <title>CSS 상세 상속 예시</title>
    <style>
    blockquote {
        color: green;
        font-style: italic;
        border-left: solid lightgray;
        padding-left: 10px;
    }
    <!-- 적용하면 없어
    .reset{
        all:unset;
    }
    -->
    .parent {
        color: blue;
        font-family: Arial, sans-serif;
    }
    .child {
        margin-left: 20px;
    }
    .overridden{
        color:red;
    }

</style>
</head>
<body>
    <blockquote class="reset"> "인용문입니다" </blockquote>
    <div class="parent">
    부모 요소
    <p class="child">자식 요소</p>
    <p class="child overridden">덮어쓴 스타일의 자식 요소</p>
    </div>
    
</body>
</html>

- 적용 규칙

!important > 단락 > id > class

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial0scale=1.0">
    <title>CSS 우선 순위 예시</title>
    <style>

        .highlight {
            color : lightgreen;
            font-size: 100px;
        }

        #unique {
            color: lightblue !important;
        }

        p {
            color : lightcoral;
        }
    </style>
</head>
<body>
    <p id="unique" class="highlight" style="color:lightpink;">
        이 단락은 무슨 색일까용?
    </p>
</body>
</html>

- 스타일링

1. 텍스트 스타일링

text-align: center, line-height, letter-spacing, word-spacing

2. 리스트 스타일링

list-style-type : none, ○circle, ●disc, ■square, 1.number, Ⅰ.uppor-roman, a.lower-alpha

ol start="3"

ol value="5"

- 박스 모델

1. 블록박스

<div>, <p>, <h1> 등

패딩, 여백, 테두리가 다른 요소를 밀어냄

박스가 전체 너비를 사용

새 줄에서 시작

2. 인라인박스

<span>, <a>, <em>, <strong> 등

패딩, 여백, 테두리가 다른 인라인 박스를 밀어내지 않음

새 줄로 넘어가지 않음

3. 인라인 블록

inline과 block을 혼합함

줄 내 배치, 블록처럼 지정, 마진과 패딩 적용, 수직 정렬, 플로우 내 위치

대체 박스 모델 (Border-Box)

박스가 contents와 border를 포함한 높이,너비가 됌

box-sizing : border-box ☞ width = width - (padding + border)

border

border-radius: 10px; 둥글게

border-color: red, green, blue, yellow; 4방향으로 색상 지정 가능

margin

상하 마진이 겹쳤을 때, 마진이 큰 요소만 적용(좌우는 적용X)

한개값 : 모든 방향

두개값: 상하, 좌우

세개값: 상,좌우,하

네게값: 상,우,하,좌

- 오버플로우 방지

콘텐츠가 박스보다 커서 넘치는 상황

overflow: hidden, scroll, auto
overflow-x, overflow-y로 개별적으로 제어도 가능
블록 서식 컨텍스트(BFC)

- 레이아웃 모델

1. float 레이아웃 : 웹 페이지에서 이미지를 텍스트 흐름처럼 적용(신문)

float : none, left, right

clear, margin, width, height, overflow, display

2. position 레이아웃 > z-index으로 겹치는거 가능(static은 불가)

static : 기본값으로 문서 흐름에 따름
relative : 문서 흐름이지만 시작 위치 이동 가능, (컨테이너 및 미세조정 역할)
sticky : 스크롤에 따라 멀어지면 고정됨
fixed : 스크롤과 상관없이 계속고정됨
absolute : 일반 흐름을 제거하고 조상 요소에 상대적으로 배치

d3. ispaly: flex 레이아웃

flex Container은 부모 flex Items는 자식역할을 한다.

flex Items의 Main Axis를 조정해 진행상황을 행, 열로 변경 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Container - Advanced Example</title>
    <style>
        .flex-container {
            margin: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f2f2f2;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .flex-item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            margin: 10px;
            text-align: center;
            font-size: 16px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
        <div class="flex-item">Item 4</div>
    </div>
</body>
</html>

flex-direction: column, column-reverse, row, row-reverse; 으로 방향 바꾸기 가능

align-items : center, baseline, flex-end, flex-start로 정렬 방향 설정

justify-content: space-around, space-between, space-evenly, ;로 균등하게 분할

flex-wrap: wrap, wrap-reverse; 화면을 줄이면 줄을 래핑함

4. Grid 레이아웃

display: grid;

fr: 공간 비율

Gutters : 쉘 사이 공간

Area , Cell : 영역, 쉘

Track : 쉘 사이 선

grid-template-columns: repeat(3,1fr);

grid-template-rows: auto;

grid-gap : 1rem;

grid-template-areas:

'a b c'

'a d c'

'e f g'

'h i j'

object-fit: cover 이미지 차지 비율

- 반응형 웹

다양한 화면 크기에 맞게 콘텐츠를 자동으로 조정하는 웹 디자인 접근 방식
이를 통해 어떤 장치를 사용하든 가독성과 사용성을 보장!

.container{width: 100%;} : 유동적 레이아웃 - 백분율

@media screen and (min-width:600px){...} : 미디어 쿼리 - 해상도에 따른 스타일 규칙

img {max-width:100%; height: auto;} : 유연한 이미지 - 이미지가 너비를 초과하지 않도록 조정

@media (min-width: 768px) {...} : 분기점 - 레이아웃이 변경되어야하는 너비 지정

CSS그리드, Flexbox : 그리드 시스템 : 복잡한 레이아웃을 유연하게 구성