close
프로필 배경
프로필 로고

90002

Web/css · 2025. 3. 6. fullscreen 넓게보기

[WEB][CSS3] 기초

CSS: Cascading Style Sheet

Cascade: 중첩

CSS

  • CSS3에서 특정 HTML 태그를 선택할 때는 선택자를 사용
  • 선택자 { 스타일 속성: 스타일 값; }
  • 보통 <header> 태그 안에 <style> 넣어서 css 적용!
  • 속성 하나당 한 줄로 표현하는 것이 관례(?) + 세미콜론도 붙여야 해! 💦
  • 외부 CSS 
    - out style: 재사용성 good!! 👍
    (ex) Style.css
  • 내부 CSS 
    - inner style
    (ex) <style> a { text-decoration: none; } </style>
    - inline style: 재사용성 가장 bad. 👎
    (ex) <a style="text-decoration=none" />

 

더보기

SGML (옛날 방식)

  • HTML: 데이터 표현
  • XML: 데이터 구조화

선택자 종류 (1) - 전체, 태그, 아이디, 클래스, 속성, 후손, 자손

종류 형태 예시 특징
전체 선택자 * *  
태그 선택자 태그 h1 해당 태그일 시에 전부 적용
아이디 선택자 #아이디 (unique) #id - 아이디를 가진 태그 밑으로 모두 적용
- 중복되어도 문제는 없지만 js에서 문제 발생!
그러니까 너무 남발하면 안 돼에 ~
클래스 선택자 .클래스 .header / h1.header - 제일 많이 사용하는 방법 🙌
- 중복 가능 (id와의 차이점)
- 클래스 선택자 여러 개 사용 가능!
> class 배열 처리
속성 선택자 선택자[속성 = 값] input[type = "text"]  
선택자[속성 ~= 값] div[data-role ~= row]  
선택자[속성 |= 값] div[data-role |= row]  
선택자[속성 ^= 값] div[data-role ^= row]  
선택자[속성 $= 값] div[data-role $= 9]  
선택자[속성 *= 값] div[data-role *= row]  
후손 선택자 선택자A 선택자B
* 공백 필수!		 header h1
#section h2		 - 선택자A(부모)의 후손인 선택자B 선택
자손 선택자 선택자A > 선택자B header > h1
#section > h2		 - 선택자A의 자손인 선택자B 선택
  • 태그 선택자와 클래스 선택자 함께 지정 가능!
    (ex) h1.selector
  • 자손: 지정한 태그를 기준으로 바로 한 단계 아래에 위치한 태그
  • 후손: 지정한 태그 아래에 위치한 모든 태그

 

코드 예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS3 Selector Tag</title>
    <style>
      * {
        color: yellow;
      }
      h1 {
        color: red;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>제목 글자!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur adipiscing elit.</p>
  </body>
</html>

코드 결과값

  • 이 코드에서 중첩을 볼 수 있다!
    > p 색깔이 전체에 씌워놓은 노랑색을 덮어씌웠음.
    > 이때, 아예 덮어버려서 없어지는 것이 아니라 쌓이는 것임! 중요 💥

 

CSS  스타일의 우선 순위

1. 호출 순서
2. id
3. class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 외부 css 파일 적용 -->
    <link rel="stylesheet" href="basic.css" />

    <!-- inner style -->
    <style>
      h1 {
        font-weight: bold;
        border: 5px teal solid;
        color: brown; /* 중복될 경우,  나중에 설정된 것으로 설정됨. inner outer 차이 아님!!*/
      }
    </style>
  </head>
  <body>
    <!-- inline style -->
    <h1 style="text-decoration: underline">드렁슨드렁슨</h1>
    <div>div 영역</div>
    <h1 id="haha" class="haha">하하</h1>
    <div class="haha">div 영역</div>
  </body>
</html>
  • 여러 태그에 동일한 속성을 지정한다면 → 콤마를 사용하여 일렬로 나열.
  • 이때, 콤마를 쓰지 않으면 → 후손 선택자가 되므로 주의!
  • 콤마가 아닌 온점을 사용하게 되면 → 클래스를 부르는 의미가 되므로 주의! 

 

선택자 종류 (2) - 반응, 상태, 구조

반응 선택자
 :active h1:active 사용자가 마우스로 클릭한 태그 선택
:hover h1:hover 사용자가 마우스 커서를 올린 태그 선택
우선 순위: 더욱 구체적인 행위(hover < active)
우선 순위가 같을 경우엔 나중에 한 것!
상태 선택자
 :checked h1:checked  
:focus h1:focus  
:enabled h1:enabled 주로 input에서만 사용되기 때문에 앞 선택자를 안 쓰고 사용하기도 함
:disabled h1:disabled  
구조 선택자
 :first-child li:first-child 첫 번째 요소
:last-child li:last-child 마지막 요소
:nth-child(수열) li:nth-child(2n) 짝수번째 요소
li:nth-child(2n+1) 홀수번째 요소		 첫 번째 요소부터
:nth-last-child(수열) li:nth-last-child(2n) 마지막 요소부터 
  • list-style
  • float
  • overflow
  • border-radius
    • ex) border-radius: 10px 0px 0px 10px;
    • 1️⃣  2️⃣
      3️⃣  4️⃣
    • 위와 같은 순서로 적용됨
크기 단위
  • 상태값
    • %: 백분율 단위
      • 100%: 기존 16px
    • em: 배수 단위, 선택자의 기본 크기 자체의 배수 
      • rem: em과 기준이 다름!
  • 절대값
    • cm
    • mm
    • inch
    • px: 픽셀 단위
반응형 웹을 제작할 때에는, 상대값을 사용하는 것을 권장!!
- % (영역 크기)
- em, rem (폰트 크기)
색상 단위
  • RGBA 색상
    • rgba(red, green, blue, alpha)
    • alpha: 투명도
      • 0.0 완전 투명 상태
      • 1.0 완전 불투명 상태
  • HEX 코드
    • #000000
    • #[투명도][-][-]
URL
  • background-image{ url('이미지 경로'); }
  • 이미지를 넣으려면 같은 디렉토리 파일에 존재해야함!
  • 이미지 중첩 가능~
<head>
    <title>CSS3 Background Property</title>
    <style>
      body {
        background-image: url('./img/BackgroundFront.png'),
          url('./img/BackgroundBack.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-attachment: fixed;
        background-color: lightgray;
      }
    </style>
  </head>
저작자표시

'Web > css' 카테고리의 다른 글

[WEB][CSS3] overflow: hidden이 뭔데..  (2) 2025.03.21
[WEB][CSS3] 속성 (2)  (1) 2025.03.12
[WEB][CSS3] 속성 (1)  (2) 2025.03.06
Web/css 관련 글
더 보기

티스토리툴바