티스토리 뷰

IT지식

CSS란 무엇일까요?

고슈슈 2024. 8. 17. 17:30

목차



    반응형

    웹사이트의 뼈대는 HTML이라고 했습니다. 그런데 HTML으로만 만든 웹사이트는 전혀 예쁘지 않고 웹사이트 제작자만의 개성도 드러낼 수가 없습니다. 그럼 이 HTML 문서를 꾸밀 수 있는 방법이 무엇인지 오늘 알아보도록 하겠습니다.

     

     

    HTML으로 웹사이트의 구조를 만들고 보여줄 내용을 넣었다면 이제 꾸며줄 차례입니다. HTML을 꾸미기 위해서는 CSS가 필요합니다. 그럼 CSS는 무엇일까요?

     

    * CSS(Cascading Style Sheets)

    웹 개발에서 필수적인 것으로, HTML의 스타일을 꾸미는데 사용됩니다. CSS를 활용하여 웹사이트를 자유롭게 조정할 수 있고, 특히 레이아웃, 색상, 글꼴, 간격 등을 세부적으로 나의 개성을 펼칠 수 있습니다.

     

    1. CSS의 기본 개념

    CSS는 HTML과 함께 사용되어 웹 페이지의 시각적 표현을 제어합니다. HTML이 웹 페이지의 구조와 콘텐츠를 담당한다면, CSS는 그 구조를 어떻게 표현할지를 정의합니다. CSS는 선택자(selector)와 선언(declaration)으로 구성되며, 선언은 속성(property)과 값(value)으로 이루어져 있습니다. 예를 들어, 아래의 코드에서 선택자는 p이며, 이 선택자에 대해 글꼴 크기를 16px로, 색상을 파란색으로 지정하는 선언이 이루어집니다.

    p {
    font-size: 16px;
    color: blue;
}

     

    2. CSS 선택자(Selectors)

    선택자는 CSS의 핵심 개념 중 하나로, 특정 HTML 요소를 선택하여 스타일을 적용합니다.

    기본적인 선택자 유형은 다음과 같습니다.

     

    1) 태그 선택자

    태그 선택자는 특정 태그에 스타일을 적용합니다. 만약 아래 코드처럼 <body> 태그에 폰트색을 초록색으로 지정하면 <body> 태그 내에 있는 모든 콘텐츠(따로 지정해준 태그는 제외)의 폰트색이 초록색으로 변경되어 보여집니다.

    body {
    color: green;
}

     

    2) 클래스 선택자

    클랙스 선택자는 특정 클래스에 속하는 요소에 스타일을 적용합니다. HTML에 class 속성에 내가 만든 단어로 작성할 수 있습니다. 이 클래스는 여러 요소에 사용이 가능합니다. 클래스는 마침표 . 로 시작합니다.

    .myClass {
    background-color: yellow;
}

     

    3) ID 선택자

    ID 선택자는 특정 ID를 가진 요소에 스타일을 적용합니다. HTML에서 id 속성을 사용하여 ID를 지정해줄 수 있으며, ID는 지정한 태그에만 사용 가능하여 다른 태그에는 사용할 수 없습니다. ID는 특수문자 # 으로 시작합니다.

    #myId {
    font-weight: bold;
}

     

    4) 속성 선택자

    속성 선택자는 특정 속성을 가진 요소에 스타일을 적용합니다. 아래 코드는 type이 text의 속성을 가진 input 요소에 테두리를 설정값만큼 주는 것입니다.

    input[type="text"] {
    border: 1px solid gray;
}

     

    3. CSS 박스 모델(Box Model)

    CSS에서 모든 요소는 박스 모델(Box Model)로 구성됩니다. 박스 모델은 요소의 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 이루어져 있습니다. 이 구조를 이해하면 요소 간의 간격과 레이아웃을 정확하게 조정할 수 있습니다.

     

    1)Content

    Content는 실제 콘텐츠가 위치하는 영역입니다.

     

    2)Padding

    Padding은 콘텐츠와 테두리 사이의 내부 여백입니다.

     

    3)Margin

    Margin은 Padding과 다르게 요소와 다른 요소 사이의 외부 여백입니다.

     

    4)Border

    Border은 패딩과 마진 사이에 위치한 테두리입니다.

     

    4. 레이아웃 기술

    CSS는 웹 페이지의 레이아웃을 구성하는 다양한 방법을 제공합니다. 그 중 대표적인 기술로는 플렉스박스(Flexbox)와 그리드 레이아웃(Grid Layout)이 있습니다.

     

     

    1) 플렉스박스(Flexbox)

    플렉스박스는 1차원 레이아웃 모델로, 주로 요소들을 한 줄에 배치하거나 열에 배치하는 데 사용됩니다. 플렉스 컨테이너를 설정하고, 내부의 플렉스 아이템들이 어떻게 배치될지를 정의합니다.

    저는 보통 예외적인 상황이 아니라면 플렉스박스를 주로 사용하는 편입니다.

    .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

     

    2) 그리드 레이아웃(Grid Layout)

    그리드 레이아웃은 2차원 레이아웃 시스템으로, 행(row)과 열(column)을 기준으로 요소를 배치할 수 있습니다. 복잡한 레이아웃을 간단하게 구성할 수 있는 강력한 도구입니다.

    제 개인적인 생각으로는 그리드 레이아웃은 (사용자마다 다를 수 있지만)플렉스 박스보다 사용하기 어려울 수 있습니다.

    .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

     

    플렉스 박스와 그리드 레이아웃은 반응형 웹사이트를 만들 때 유용한 기술이고, 지금 언급한 내용보다 더 다양하고 유용한 내용이 많아서 다른 포스팅에서 좀 더 심도있게 다루어 볼 계획입니다.

     

    5. 미디어 쿼리(Media Queries)

    미디어 쿼리는 화면 크기, 해상도, 방향 등 다양한 조건에 따라 다른 스타일을 적용할 수 있어, 반응형 웹 디자인에서 중요한 역할을 합니다. 옛날에는 PC 모니터로만 웹사이트를 보았다면, 이제는 다양한 기기가 있기 때문에 모든 장치에서도 자유롭게 볼 수 있도록 해야 합니다. 보통 PC, 태블릿, 모바일로 나누어 적용하고 있습니다.

    @media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

     

    반응형 웹사이트에 대해서 다른 포스팅을 통해 더 자세히 알아보도록 하겠습니다.

     

    6. CSS의 고급 기능

    CSS는 기본적인 스타일링을 넘어서 다양한 고급 기능도 제공하여 Javascript없이도 동적인 웹사이트 화면을 만들 수 있습니다.

     

    1) 변환(Transform)

    Transform을 사용하여 요소를 회전, 확대/축소, 이동, 기울이기 등을 할 수 있습니다. Transform을 사용하면 좀 더 재밌고 동적인 화면을 만들 수 있어 웹사이트 이용자로 하여금 재미와 흥미로움을 줄 수 있습니다.

    .rotate {
    transform: rotate(45deg);
}

     

    2) 전환(Transition)

    Transition은 요소의 상태 변화에 애니메이션 효과를 추가할 수 있습니다.

    아래 코드에서 볼 수 있듯이 hover라는 요소는 어떤 도형이나 콘텐츠에 마우스를 올렸을 때를 의미하며, 이것을 사용하면 웹사이트 이용자와 상호작용을 할 수 있는 효과를 줍니다.

    .box {
    transition: background-color 0.5s ease;
}

.box:hover {
    background-color: coral;
}

     

    3) 애니메이션(Animation)

    Animation은 CSS만으로 복잡한 애니메이션을 구현할 수 있습니다. 동영상을 사용하지 않아도 도형이나 요소들이 반복적으로 움직이거나 스크롤을 내릴 때 움직임을 줄 수 있습니다. 애니메이션 기능을 사용하면 웹사이트에 대한 이용자가 웹사이트를 머무는 시간을 높일 수 있을 것입니다.

    @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

.animated {
    animation-name: example;
    animation-duration: 4s;
}

     

     

    이렇게 CSS는 웹 개발에서 필수적인 도구이며, 기본적인 스타일링부터 복잡한 레이아웃과 애니메이션까지 다양한 기능을 제공합니다. CSS의 기본 개념을 이해하고, 다양한 선택자와 레이아웃 기법을 익히며, 고급 기능을 활용하면 자기가 가지고 있는 개성을 더욱 매력적이게 표현하고 사용자 친화적인 웹 페이지를 개발할 수 있습니다.

    반응형