Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

누에나방애벌레

웹 개발 기초 2 : CSS 본문

공부/web

웹 개발 기초 2 : CSS

명석 2024. 7. 20. 09:51

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 핵심 언어입니다. HTML과 함께 사용되어 웹 페이지를 시각적으로 매력적이고 기능적으로 만드는데 중요한 역할을 합니다. 이번 포스트에서는 CSS의 기본 속성과 다양한 기능, 사용 방법에 대해 자세히 다루겠습니다.

CSS 기본 구조와 문법

  1. CSS 기본 구조:
    • CSS는 스타일 규칙을 정의하는데, 각 규칙은 선택자(selector)와 선언부(declaration block)로 구성됩니다.
    selector {
    property: value;
}
    • 예시: 
      p {
    color: blue;
    font-size: 16px;
}
  2. CSS 적용 위치:
    • Inline CSS: HTML 태그에 직접 스타일을 적용합니다. 
      <p style="color: red;">이것은 빨간색 텍스트입니다.</p>
    • Internal CSS: <head> 섹션 내의 <style> 태그에 스타일을 정의합니다. 
      <style>
    p {
        color: green;
    }
</style>
    • External CSS: 외부 CSS 파일을 링크하여 스타일을 적용합니다. <head> 섹션 내에 <link> 태그를 사용합니다. 
      <link rel="stylesheet" href="styles.css">

CSS 레이아웃과 위치 지정

  1. 박스 모델(Box Model):
    • CSS 박스 모델은 모든 HTML 요소를 사각형 상자로 간주합니다. 이 상자는 margin, border, padding, content 영역으로 구성됩니다.
      • margin: 요소와 다른 요소 사이의 외부 여백입니다.
      • border: 요소의 테두리입니다.
      • padding: 요소의 내부 여백입니다.
      • content: 실제 내용이 위치하는 영역입니다.
  2. 위치 지정(Positioning):
    • Static: 기본값으로, 요소는 문서의 흐름에 따라 위치합니다.
    • Relative: 요소는 자신의 원래 위치를 기준으로 이동합니다. 
      .relative {
    position: relative;
    top: 10px;
    left: 20px;
}
    • Absolute: 요소는 가장 가까운 위치 지정 조상 요소를 기준으로 이동합니다. 조상이 없으면 <body>를 기준으로 합니다. 
      .absolute {
    position: absolute;
    top: 10px;
    left: 20px;
}
    • Fixed: 요소는 화면을 기준으로 고정되며, 스크롤을 해도 위치가 변하지 않습니다. 
      .fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
}
    • Sticky: 스크롤 위치에 따라 요소가 고정되거나 문서 흐름에 따라 이동합니다. 
      .sticky {
    position: sticky;
    top: 0;
}
  3. Flexbox:
    • Flexbox는 레이아웃을 정렬하는 데 강력한 도구입니다. 주 축(main axis)과 교차 축(cross axis)을 기반으로 자식 요소를 정렬합니다.
      • 주 축 방향 설정: flex-direction을 사용하여 정렬 방향을 설정합니다. 
        .container {
    display: flex;
    flex-direction: row; /* 또는 column */
}
      • 정렬 설정:
        • align-items: 교차 축에서 정렬을 설정합니다. 
          .container {
    display: flex;
    align-items: center; /* center, flex-start, flex-end 등 */
}
        • justify-content: 주 축에서 정렬을 설정합니다. 
          .container {
    display: flex;
    justify-content: space-between; /* center, flex-start, flex-end, space-around 등 */
}
        • Wrap: 자식 요소가 컨테이너의 경계를 넘을 때 자동으로 줄바꿈을 하도록 설정합니다. 
          .container {
    display: flex;
    flex-wrap: wrap;
}
  4. Grid:
    • Grid Layout은 2차원 레이아웃 시스템으로, 행과 열을 기반으로 요소를 배치합니다.
      • 기본 사용: 
        .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3열 */
    grid-template-rows: auto; /* 자동 높이 */
    gap: 10px; /* 간격 */
}
.grid-item {
    border: 1px solid black;
}

배경 이미지와 스타일링

  1. 배경 이미지:
    • 이미지 추가: 
      .background {
    background-image: url('image.jpg');
    background-repeat: no-repeat; /* 반복 방지 */
    background-size: cover; /* 이미지 크기 조절 */
    background-position: center; /* 중앙 정렬 */
}
  2. 박스 그림자:
    • 그림자 추가: 
      .box {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    /* 수평 거리, 수직 거리, 흐림 반경, 확산 거리, 색상 */
}

CSS 선택자와 속성

  1. 선택자:
    • 태그 선택자: 특정 태그를 선택합니다. 
      p {
    color: blue;
}
    • 클래스 선택자: 클래스 이름을 사용하여 선택합니다. 
      .class-name {
    font-size: 20px;
}
    • ID 선택자: ID를 사용하여 선택합니다. 
      #unique-id {
    margin: 10px;
}
    • 전체 선택자: 문서의 모든 요소를 선택합니다. 
      * {
    box-sizing: border-box;
}
  2. 폰트 크기:
    • 단위:
      • px: 픽셀 단위로 절대 크기를 지정합니다.
      • %: 부모 요소에 대한 비율로 크기를 지정합니다.
      • rem: 루트 요소의 폰트 크기를 기준으로 크기를 지정합니다. 반응형 디자인에 유용합니다. 
        body {
    font-size: 16px;
}
p {
    font-size: 1.5rem; /* 24px */
}
  3. 디스플레이 속성:
    • block: 줄바꿈을 하며, 전체 너비를 차지합니다. 
      div {
    display: block;
}
    • inline: 줄바꿈 없이 나란히 배치되며, 너비와 높이 속성은 적용되지 않습니다. 
      span {
    display: inline;
}
    • inline-block: 줄바꿈 없이 나란히 배치되며, 너비와 높이 속성이 적용됩니다. 
      .inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
}
    • none: 요소를 화면에서 숨깁니다. 
      .hidden {
    display: none;
}

 

'공부 > web' 카테고리의 다른 글

HTTP & RESTful API  (0) 2024.08.14
DOM 제어 및 이벤트 처리  (0) 2024.07.26
웹 개발 기초 3 : JavaScript (2)  (0) 2024.07.20
웹 개발 기초 3 : JavaScript (1)  (0) 2024.07.20
웹 개발 기초 1 : HTML  (0) 2024.07.20
'공부/web' Related Articles more