CSS 1일차

2025. 12. 4. 21:56ㆍ대우개발원 수업 내용/css로 웹 페이지 꾸미기

반응형
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 연습</title>
  <link rel="stylesheet" href="/css/text.css">
  <!-- <style>
    p {
      text-align: center;
      color: darksalmon;
    }
  </style> -->
</head>

<body>
  <p>css 적용 확인</p>
</body>
</html>
p {
  text-align: center;
  color: darksalmon;
}

아래 HTML + CSS 코드가 어떻게 연결되고 동작하는지
두 개를 묶어서 전체 구조 기준으로 깔끔하게 설명

✅ 1. HTML 코드에서 외부 CSS 연결

<link rel="stylesheet" href="/css/text.css">
  • HTML 문서가 /css/text.css 파일을 불러오도록 하는 코드.
  • 이 파일 안에 작성된 CSS 규칙이 HTML 문서 전체에 적용됨.

즉, HTML은 “CSS 스타일이 여기 있어 → /css/text.css” 이런 뜻이야.

✅ 2. text.css 파일 내부 내용

p {
  text-align: center;
  color: darksalmon;
}

이 CSS 코드는 모든 <p> 태그에 스타일 적용한다는 의미야.

✔ p

→ 선택자(Selector): p 태그를 선택한다는 뜻

✔ text-align: center;

→ p 태그 안의 텍스트를 가운데 정렬

✔ color: darksalmon;

→ 글자 색을 darksalmon(살구색 계열) 로 변경

✅ 3. 두 코드가 합쳐져서 어떻게 동작하나?

HTML 파일에 <p> 태그 존재

<p>css 적용 확인</p>

외부 CSS가 적용되면?

  • 글자는 darksalmon 색으로 표시
  • 위치는 가운데 정렬

즉 브라우저에는 이렇게 스타일이 적용됨:

대상 적용되는 CSS

<p> text-align: center
  color: darksalmon

📌 결과 화면 (적용 후)

css 적용 확인   ← 가운데 정렬
(색: darksalmon)

🔍 4. HTML 안의 <style> 태그와 차이점

HTML 내부에 이렇게 썼었지?

<!--
<style>
  p {
    text-align: center;
    color: darksalmon;
  }
</style>
-->

✔ 하지만 주석() 때문에 비활성화됨

그래서 내부 CSS는 적용 ❌

현재는 **오직 외부 파일(/css/text.css)**만 적용되는 상태야.

📚 최종 요약

코드 역할 적용 여부

<link rel="stylesheet" href="/css/text.css"> 외부 CSS 불러오기 ✔ 적용
text.css 파일의 p 스타일 모든 p 태그를 가운데 정렬 + darksalmon 색으로 변경 ✔ 적용
HTML 내부 <style> 같은 스타일을 가지고 있었지만 주석이라 실행 안 됨 ❌ 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@import로 외부스타일 불러오기</title>
  <style>
    @import url(/css/mystyle.css);
  </style>
</head>
<body>
  <h3 style="color: beige;">소연재</h3>
  <hr>
  <p>저는 체조 선수 소연재입니다. 음악을 들으면서
    책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>
body {
  background-color: darkslategray;
  color: chocolate;
  margin-left: 30px;
  margin-right: 30px;
}
h3{
  text-align: center;
  color: lawngreen;
}

 HTML에서 @import로 외부 CSS 파일을 불러오고,
외부 CSS 파일(mystyle.css) 안에는 body와 h3 스타일이 들어 있는 구조

두 코드를 한 번에 이해할 수 있도록 전체 흐름을 정리해서 설명

✅ 1. HTML 코드 분석

<style>
  @import url(/css/mystyle.css);
</style>

✔ 의미

  • <style> 안에서 @import를 사용해 외부 CSS 파일을 불러오는 방식
  • /css/mystyle.css 파일을 불러와서 HTML 전체에 적용함

즉,
HTML → @import → mystyle.css 적용

✅ 2. 외부 CSS(mystyle.css) 내용

body {
  background-color: darkslategray;
  color: chocolate;
  margin-left: 30px;
  margin-right: 30px;
}

h3 {
  text-align: center;
  color: lawngreen;
}

각 스타일을 설명하면:

✔ body 스타일

속성 설명

background-color: darkslategray; 배경을 어두운 회녹색으로 설정
color: chocolate; 텍스트 전체 색을 초콜릿색으로 설정
margin-left: 30px; 왼쪽 여백 30px
margin-right: 30px; 오른쪽 여백 30px

→ 전체 레이아웃이 좌우로 좁아지고, 배경과 글자가 색 적용됨.

✔ h3 스타일

속성 설명

text-align: center; h3 제목을 가운데 정렬
color: lawngreen; 제목 글씨색을 밝은 연두색(lawngreen)으로 표시

✅ 3. HTML 콘텐츠에 스타일이 어떻게 적용되는가?

HTML 내부

<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다...</p>

적용 결과

  • 페이지 전체 배경 → darkslategray
  • 모든 글자 색 → chocolate
  • h3 "소연재" 글자 → lawngreen + 가운데 정렬
  • 좌우 30px 여백 적용됨

📌 4. @import 방식의 특징

장점

  • 여러 개의 CSS를 나누어 구조화하기 좋다
  • HTML <style> 안에서도 외부 CSS를 불러올 수 있다

단점 (중요)

  • <link rel="stylesheet">보다 로드 속도가 느림
  • 웹 표준/실무에서는 link 방식을 더 권장함

📌 5. 수정된 HTML 코드

 
<h3 style="color: beige;">소연재</h3>

여기서 중요한 변화는 style="color: beige;"
즉, 인라인 스타일을 직접 사용했다는 점!

🎯 최종 요약

위치 코드 역할

HTML @import url(/css/mystyle.css); 외부 CSS 파일을 불러온다
mystyle.css body 스타일 배경색, 텍스트색, 마진 적용
mystyle.css h3 스타일 중앙 정렬 + 연두색 글자 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@import로 외부스타일 불러오기</title>
  <style>
    @import url(/css/mystyle.css);
  </style>
</head>
<body>
  <h3>소연재</h3>
  <hr>
  <p>저는 체조 선수 소연재입니다. 음악을 들으면서
    책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>
body {
  background-color: darkslategray;
  color:blueviolet;
  margin-left: 30px;
  margin-right: 30px;
}

h3{
  text-align: center;
  /* color: lawngreen; */
}

* {
  color: blue;
}

* {
  color: blue;
}

전체 선택해서 바꿈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>태그 선택자</title>
  <style>
    h1 {color: darksalmon;}
    p{
      color:blue;
    }
  </style>
</head>
<body>
  <h1>태그 선택자</h1>
  <p>태그 선택자는 태그명과 일치하는 태그를 모두 선택합니다.</p>
  <p>따라서 모든 p 태그의 색상은 파란색이 됩니다.</p>
  <h1>다른 제목</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스타일을 가진 웹페이지</title>
  <style>
    /* CSS 스타일 시트 작성 */
    body{background-color: antiquewhite;}
    h3{color: blue;}
    hr{color: cornsilk;}
    span{color: chocolate; font-size: 20px;}
  </style>
</head>
<body>
  <h3>CSS 스타일 맛보기</h3>
  <hr>
  <P>나는<span>웹 프로그래밍</span>을 좋아합니다</P>
</body>
</html>


 HTML + CSS 코드를 태그별로 어떤 스타일이 적용되는지, 왜 그렇게 보이는지를 하나씩 깔끔하게 설명

✅ 1. HTML 전체 구조

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <style>
    body{background-color: antiquewhite;}
    h3{color: blue;}
    hr{color: cornsilk;}
    span{color: chocolate; font-size: 20px;}
  </style>
</head>
<body>
  <h3>CSS 스타일 맛보기</h3>
  <hr>
  <P>나는<span>웹 프로그래밍</span>을 좋아합니다</P>
</body>
</html>

여기서는 내부 스타일(Internal CSS) 방식 사용:
<style> ... </style> 안에 CSS를 직접 작성해 HTML에 적용하는 구조이다.

🎨 2. CSS 스타일 설명 (태그별)

✔ 1) body 스타일

body {
  background-color: antiquewhite;
}
  • 웹페이지 전체 배경색을 **antiquewhite(옅은 베이지 톤)**로 설정
  • 페이지를 보는 순간 배경이 부드러운 베이지색으로 보임

✔ 2) h3 스타일

h3 {
  color: blue;
}
  • <h3> 제목 글자색을 **파란색(blue)**으로 변경
  • 그래서 "CSS 스타일 맛보기"가 파란색으로 표시됨

✔ 3) hr 스타일

hr {
  color: cornsilk;
}
  • 수평선(<hr>)의 색상을 **cornsilk(미색)**으로 설정

⚠ 단, 대부분 브라우저에서는 hr의 color 적용이 제한적
기본 테마에 따라 색상 대신 선의 윤곽만 적용될 수도 있음.
그래도 CSS에서 hr 색을 지정하려는 의도는 정상적인 코드.

✔ 4) span 스타일

span {
  color: chocolate;
  font-size: 20px;
}

이 스타일은 <span> 태그 안의 텍스트에만 적용됨.

  • 글씨색: chocolate(초콜릿색)
  • 글자 크기: 20px

즉, 문장 중 특정 글자만 강조하고 싶을 때 사용하는 방식.

HTML에서는 이렇게 적용됨:

나는 <span>웹 프로그래밍</span>을 좋아합니다

→ “웹 프로그래밍” 글자만
초콜릿색 + 크기 20px로 더 눈에 띄게 표시됨.

🔍 3. 각각의 태그가 어떤 역할?

태그 역할

<h3> 제목 표시
<hr> 구분선(수평선)
<p> 문단(Paragraph)
<span> 문장 중 일부를 강조하거나 스타일 별도로 적용할 때 사용

🖼️ 4. 최종 화면 예상 모습

  • 배경: 옅은 베이지색
  • 제목 “CSS 스타일 맛보기”: 파란색
  • 구분선 <hr>: 밝은 색
  • 본문: 검정색 기본 글자
  • “웹 프로그래밍”만 초콜릿색 + 크게 표시됨

🎯 최종 요약

선택자 적용 스타일 설명

body 배경색 antiquewhite 페이지 전체 배경
h3 글자색 blue 제목 색상
hr 색상 cornsilk 구분선 색
span 초콜릿색 + 글크기 20px 문장 중 특정 단어 강조

표준 웹 기술

HTML

CSS

Javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: blue;
      font-size: 1.5em;
    }
    span {
      color: red; 
      font-size: 2em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>표준 웹 기술</h1>
  <p><span>H</span>TML</p>
  <P><span>C</span>SS</P>
  <P><span>J</span>avascript</P>
</body>
</html>

표준 웹 기술

HTML

CSS

Javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container{
      /* id 선택자 */
      width: 300px;
      padding: 10px;
      border: 1px solid black;
    }
    p {
      color: blue;
      font-size: 1.5em;
    }
    /* span */
    .accent {
      color: red; 
      font-size: 2em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="container">
  <h1>표준 웹 기술</h1>
  <p><span class="accent">H</span>TML</p>
  <P><span class="accent">C</span>SS</P>
  <P><span class="accent">J</span>avascript</P>
  </div>
</body>
</html>

아주 좋아!
이번 코드는 id 선택자, 태그 선택자, class 선택자 3가지를 모두 사용한 좋은 예시야.
전체 구조와 각 선택자가 어떻게 적용되는지 정확하고 쉽게 설명해줄게.

✅ 1. 전체 구조 개요

HTML inside:

<div id="container">
  <h1>표준 웹 기술</h1>
  <p><span class="accent">H</span>TML</p>
  <p><span class="accent">C</span>SS</p>
  <p><span class="accent">J</span>avascript</p>
</div>

CSS:

#container { ... }
p { ... }
.accent { ... }

즉,
id → 특정 영역 꾸미기
p → 전체 단락 스타일 통일
class → 특정 글자만 강조

🎨 2. CSS 선택자 설명

✔ (1) #container : id 선택자

#container {
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

역할:

속성 설명

width: 300px; div의 너비를 300px로 고정
padding: 10px; div 안쪽 여백 공간 10px
border: 1px solid black; div 바깥에 검은색 테두리 표시

결과:

<div id="container">가
300px 박스 형태로 테두리 안에 깔끔하게 정리된 영역이 됨.

✔ (2) p : 태그 선택자

p {
  color: blue;
  font-size: 1.5em;
}

p 태그 전체에 적용됨:

속성 설명

color: blue; p 태그의 글자색을 파란색으로
font-size: 1.5em; 글자 크기를 기본 크기의 1.5배로

적용 대상:

<p><span class="accent">H</span>TML</p>
<p><span class="accent">C</span>SS</p>
<p><span class="accent">J</span>avascript</p>

즉, 문장 전체는 파란색 + 1.5em 크기
하지만 span에 class가 적용된 글자는 예외! (아래 설명)

✔ (3) .accent : class 선택자 (강조 표시)

.accent {
  color: red;
  font-size: 2em;
  font-weight: bold;
}

특징:

  • class 선택자이므로 .accent가 적용된 요소만 스타일 변경

효과:

스타일 설명

color: red; 글자 빨간색
font-size: 2em; 글자 크기 2배
font-weight: bold; 굵게(Bold)

적용되는 HTML은:

<span class="accent">H</span>
<span class="accent">C</span>
<span class="accent">J</span>

결과:

H, C, J 글자만
빨간색 + 매우 큰 글자 + 굵게 표시됨.

🔍 3. 최종 결과 화면 이미지 설명 (텍스트 버전)

─────────────────────────────
| 표준 웹 기술               |
|                           |
|  H TML   (TML은 파란색, 기본보다 조금 크게)  
|  C SS    (C는 빨간색·두껍고 큼, SS는 파란색)
|  J avascript (J는 빨간색·두껍고 큼, vascript는 파란색)
─────────────────────────────

🧠 4. CSS 선택자 우선순위까지 정리하면?

선택자 유형 형태 우선순위

인라인 스타일 <p style=""> 매우 높음
id 선택자 #container 높음
class 선택자 .accent 중간
태그 선택자 p, span 낮음

→ 그래서 .accent가 p 색상을 덮어쓰고 빨간색이 되는 것임.

🎯 최종 요약

요소 적용 스타일 의미

#container width 300px, padding 10px, border 전체 박스를 꾸미는 영역
p 파란색 글자, 1.5em 크기 각 기술 이름의 기본 스타일
.accent 빨간색 + 2em + bold 기술 이름의 첫 글자를 강조

원하면,
✔ id vs class 차이 정리
✔ em 단위 설명(px, rem 비교)
✔ 같은 스타일을 더 예쁘게 만들기
중 원하는 영역도 추가로 설명해줄게!

회사 소개

"사람을 구체적으로 도와주는 책"

이지스퍼블리싱(주)의 책에는 '사람들에게 구체적으로 도움이 되는책'을 만든다는 출판 가치가 담겨 있습니다.

2010년 5월 출범한 이지스퍼블리싱(주)는 크게 두 영역의 책을 출간합니다. IT 실용도서와 학습 분양 도서입니다. IT교재와 사진 책 등 실용서는 이지스퍼블리싱 브랜드로, 학습과 자녀교육 도서는 이지스에듀 브랜드로 출간하고 있습니다.

이지스퍼블리싱의 미션

사람들에게 구체적으로 도움 을 주는 책
우리는 책을 출간하기 전에 질문 할 것입니다.
"이 책이 사람들에게 도움이 됩니까?"

정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 책. 손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 20px auto;
    }
    #container { 
      width:600px;  /* 너비 */
      padding:15px;  /* 테두리와 내용 사이의 여백 */
      border:1px dotted gray;  /* 테두리 스타일 */
    }
    .accent {
      background-color: black;
      color: white;
      padding: 5px;
    }
    .accent1 {
      color: blue;
    }
    .accent2 {
      color:brown;
    }
    .boldt
    {
      font-weight: bold;
    }
    p {
      font-size:0.9em;  /* 글자 크기 */
      line-height:2.0;  /* 줄간격 */
    } 
  </style>
</head>
<body>
  <div id="container">
  <h1>회사 소개</h1>
  <h2 span class="accent">"사람을 구체적으로 도와주는 책"</h2>
  <p>이지스퍼블리싱(주)의 책에는 <span class="accent2 boldt">'사람들에게 구체적으로 도움이 되는책'을 만든다는 출판 가치가 담겨 있습니다.</span></p>

  <p>2010년 5월 출범한 이지스퍼블리싱(주)는 크게 두 영역의 책을 출간합니다. IT 실용도서와 학습 분양 도서입니다. IT교재와
    사진 책 등 실용서는 이지스퍼블리싱 브랜드로, 학습과 자녀교육 도서는 이지스에듀 브랜드로 출간하고 있습니다.
  </p>
 
  <h2 span class="accent1">이지스퍼블리싱의 미션</h2>
  <p>
    사람들에게 구체적으로
    <span class="accent1">도움</span>
    을 주는 책<br>
    우리는 책을 출간하기 전에 질문 할 것입니다.<br>
    "이 책이 사람들에게 도움이 됩니까?"
  </p>
  <p><span class="accent1">정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 책.
    손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.
  </span></p>
  </div>
</body>
</html>


이 코드는 여러 개의 class, id, 전체 선택자(*)를 이용해 복합적으로 스타일을 적용하는 예제
특히 텍스트 강조, 박스 꾸미기, 줄 간격, 패딩 등 다양한 CSS 기술이 한 번에 들어 있어서 설명하기 좋은 예시

아래에서 CSS → HTML 적용 구조 → 최종 화면 표현까지 정리

✅ 1. CSS 전체 구조 요약

CSS에는 다음과 같은 선택자들이 있어:

선택자 적용 대상

* 모든 요소(전역 스타일)
#container id="container" 하나만
.accent, .accent1, .accent2, .boldt 특정 class가 붙은 요소
p 모든 p 태그

이제 각 스타일이 무엇을 의미하는지 하나씩 설명할게.

🎨 2. CSS 상세 설명

✔ (1) * 선택자 – 전체 스타일

* {
  margin: 20px auto;
}

의미:

모든 요소(*)에 margin-top, margin-bottom = 20px, margin-left, right = auto 적용

효과:

  • 모든 요소가 위아래 간격 20px을 갖는다.
  • 좌우는 auto이므로 중앙 정렬하려는 요소는 가로폭이 정해져 있을 때 중앙에 위치함.

✔ (2) #container – 전체 박스 꾸미기

#container { 
  width:600px;
  padding:15px;
  border:1px dotted gray;
}

효과:

  • 가로폭 600px짜리 박스
  • 내부 여백 15px
  • 점선 테두리(dotted gray)
  • 좌우 margin auto 덕분에 화면 중앙에 배치됨

→ 전체 내용을 담는 메인 박스 역할

✔ (3) .accent – 검은 배경 흰 글씨 강조 박스

.accent {
  background-color: black;
  color: white;
  padding: 5px;
}

효과:

  • 배경: 검정
  • 글씨: 흰색
  • 안쪽 여백 5px
    → 강한 시각적 강조 효과

✔ (4) .accent1 – 파란색 강조

.accent1 {
  color: blue;
}

→ 글자를 파란색으로 표시
(밝은 정보 강조 느낌)

✔ (5) .accent2 – 갈색 강조

.accent2 {
  color:brown;
}

→ 문장에서 특정 부분을 갈색으로 강조

✔ (6) .boldt – 굵게 표시

.boldt {
  font-weight: bold;
}

→ .accent2 boldt처럼 class를 두 개 붙이면 갈색 + bold 둘 다 적용됨.

✔ (7) p – 문단 스타일

p {
  font-size:0.9em;
  line-height:2.0;
}

효과:

  • 글자 크기 0.9em (조금 작게)
  • 줄 간격 2.0 → 읽기 좋게 넓은 줄 간격

📘 3. HTML 내용에 어떻게 적용되는가?

✔ 첫 번째 제목

<h1>회사 소개</h1>
  • margin 20px 적용
  • 기본 스타일 (크고 굵게)

✔ 강조된 문장

<h2 span class="accent">"사람을 구체적으로 도와주는 책"</h2>

❗ 여기 오타 있음
h2 span이 아니라 h2에 class를 적용해야 함
정상형태: <h2 class="accent">...</h2>

그래도 class 적용되었으므로:

  • 검정 배경 + 흰 글씨 + 패딩 적용
    → 제목이 강하게 강조됨

✔ 본문 문장 강조 (accent2 + bold)

<p> ... <span class="accent2 boldt">'사람들에게 ...'</span></p>
  • 갈색(accent2)
  • 굵게(boldt)

→ 특정 문장만 눈에 띄게 강조

✔ 파란색 강조 문단

<h2 span class="accent1">이지스퍼블리싱의 미션</h2>

(역시 span 오타 있지만 class는 적용됨)

→ 파란색 제목

그리고 본문에서 일부 단어도 파란색:

<span class="accent1">도움</span>

🖼️ 4. 최종 화면 느낌 정리

  • 전체 페이지 중앙에 600px 박스
  • 제목들은 위아래 여백이 넓어서 시원함
  • 본문은 줄 간격이 넓어서 읽기 쉬움
  • 문장 중 중요한 부분은 갈색 + bold로 강조
  • "사람을 구체적으로 도와주는 책"은 검은 배경 + 흰 글씨로 가장 강하게 강조
  • "도움", "미션" 등은 파란색으로 부드러운 강조

🎯 최종 요약 표

선택자 적용 요소 효과

* 모든 요소 margin: 20px auto
#container 메인 박스 폭 600px, 테두리, 패딩
.accent 특정 h2 검정 배경 + 흰 글자
.accent1 제목/문장 일부 파란색 강조
.accent2 문장 일부 갈색 강조
.boldt 같이 쓰이면 bold 글자 굵게
p 전체 문단 글자 작게, 줄 간격 넓게

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>속성 선택자</title>
  <style>
    ul {list-style: none;}
    li{
      display: inline-block;
      margin: 10px;
    }
    li a{
      padding: 5px 20px; /*5는 위아래 20은 왼쪽오른쪽 */
      font-size: 14px;
      color: blue;
      text-decoration-line: none;
      /* 밑줄제거 */
    }
    .flat{
      background: #eee;
      border: 1px solid #222;
    }
    a[class ~="button"]{
      box-shadow:rgba(5, 5, 5, 5) 4px 4px;/*그림자*/
      border-radius: 5px; /*테두리를 둥굴게 */
      border: 1px solid #222;
    }
    a[href]{
      color: red;
    }
    a[target="_blank"]{
      color:rgb(82, 6, 248)
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" class="flat" target="_blank">메뉴 1</a></li>
    <li><a href="#" class="flat">메뉴 2</a></li>
    <li><a href="#" class="button">메뉴 3</a></li>
    <li><a href="#" class="flat button">메뉴 4</a></li>
  </ul>
</body>
</html>


이 코드는 **CSS 속성 선택자(attribute selector)**를 연습하기 위한 예제
각 링크(<a>)가 가지는 href, class, target 속성에 따라 스타일이 달라지는 구조

아래에서 CSS 규칙 하나씩 → HTML 요소에 어떻게 적용되는지 → 최종 결과는 어떻게 달라지는지 순서대로 설명

🔥 1. 기본 레이아웃 스타일 설명

✔ ul { list-style: none; }

  • 목록의 기본 점(●) 제거

✔ li { display: inline-block; margin: 10px; }

  • <li> 요소를 가로로 나열함 (inline-block)
  • 각 메뉴 사이에 여백(10px) 추가

→ 메뉴가 가로로 나열된 네비게이션 바처럼 보임

✔ li a { ... }

li a {
  padding: 5px 20px;
  font-size: 14px;
  color: blue;
  text-decoration-line: none;
}

기본 링크 스타일:

속성 설명

padding: 5px 20px 버튼처럼 여백을 줌
font-size: 14px 글자 크기
color: blue 링크 글씨 기본 색상
text-decoration: none 밑줄 제거

🌟 2. 클래스 선택자 설명

✔ .flat

.flat {
  background: #eee;
  border: 1px solid #222;
}

flat 효과:

  • 연한 회색 배경
  • 얇은 테두리

적용되는 곳:

  • 메뉴 1
  • 메뉴 2
  • 메뉴 4 (flat + button)

🌟 3. 속성 선택자 설명 (핵심!)

✔ (1) a[class~="button"]

클래스 중 button 이라는 단어가 포함된 a 태그에 적용

a[class~="button"] {
  box-shadow: rgba(5,5,5,5) 4px 4px;
  border-radius: 5px;
  border: 1px solid #222;
}

즉, class 속성에 "button"이 독립된 단어로 포함되면 적용됨.

적용되는 HTML

<a href="#" class="button">메뉴 3</a>
<a href="#" class="flat button">메뉴 4</a>

스타일 효과

  • 그림자 추가 → 버튼처럼 입체감
  • 테두리를 둥글게
  • 테두리 1px

✔ (2) a[href] — href 속성이 있는 모든 a 태그

a[href] {
  color: red;
}

적용 대상

HTML의 모든 a 태그는 href="#" 를 가지고 있음 → 전부 적용됨

→ 모든 링크 글자 색상이 빨간색으로 변함
(기존의 파란색 color는 덮어씌워짐)

✔ (3) a[target="_blank"] — target="_blank" 링크에만 적용

a[target="_blank"] {
  color: rgb(82, 6, 248);
}

적용 대상:

<a href="#" class="flat" target="_blank">메뉴 1</a>

→ 메뉴 1의 글씨는 **보라색(82, 6, 248)**로 표시됨

🧩 4. HTML 전체에 적용되는 최종 스타일 정리

메뉴 class target 적용 스타일

메뉴 1 flat _blank flat + 빨강 → 마지막에 보라색으로 덮어짐
메뉴 2 flat 없음 flat + 빨간색
메뉴 3 button 없음 shadow + 둥근 테두리 + 빨간색
메뉴 4 flat + button 없음 flat + shadow + 둥근 테두리 + 빨간색

🎨 5. 최종 화면 느낌 요약

  • 메뉴 1: 보라색 텍스트 + 회색배경 + 테두리
  • 메뉴 2: 빨간 텍스트 + 회색배경 + 테두리
  • 메뉴 3: 빨간 텍스트 + 그림자 + 둥근 모서리
  • 메뉴 4: 빨간 텍스트 + 회색배경 + 그림자 + 둥근 모서리

각기 다른 속성 조합에 따라 스타일이 달라짐.

🎯 최종 핵심 요약

선택자 의미

.flat 기본 회색 버튼 스타일
[class~="button"] class 안에 button이 "단어"로 있으면 적용
[href] href 속성을 가진 모든 링크(전부)
[target="_blank"] 새 탭에서 열리는 링크만

 

red

blueredgreen

blue red

lorem 1

lorem 2

lorem 3

lorem1

lorem2

lorem3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>그룹 선택자</title>
  <style>
    p, #title, .red{
      color: red;
    }
    .box > p {
      color: blue;
    }
    /* 자식인 p만 */
    .box p {
      font-size: 20px;
    }
    /* box에 포함된 모든 p */
    h1 + h2{
      color: rgb(224, 24, 242);
    }
    /* 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정*/
    h1 ~ h2{
      text-align: center;
    }
    /* 이전 선택자 ~ 대상 선택자 */
  </style>
</head>
<body>
  <p id="title">red</p>
  <p class="blueredgreen">blueredgreen</p>
  <p class="blue red">blue red</p>
  <div class="box">
    <p>lorem 1</p>
    <div>
      <p>lorem 2</p>
    </div>
    <p>lorem 3</p>
    <hr>
    <h1>lorem1</h1>
    <h2>lorem2</h2>
    <h2>lorem3</h2>
  </div>
</body>
</html>


이 코드는 그룹 선택자, 자식 선택자, 후손 선택자, 형제 선택자(+, ~) 를 모두 연습하는 예제
HTML 구조 안에서 어떤 p, h1, h2에 어떤 색과 스타일이 적용되는지 정확하게 설명

📌 CSS 전체 구조 정리

p, #title, .red { color: red; }

.box > p { color: blue; }

.box p { font-size: 20px; }

h1 + h2 { color: rgb(224, 24, 242); }

h1 ~ h2 { text-align: center; }

이제 하나씩 살펴보자!

✅ 1. p, #title, .red — 그룹 선택자

p, #title, .red {
  color: red;
}

✔ 의미

  • 모든 p 태그
  • id="title"
  • class="red" 를 가진 요소

→ 모두 글자색 red(빨간) 적용

적용되는 대상

요소 이유

<p id="title">red</p> #title
<p class="blueredgreen"> ✔ p 태그
<p class="blue red"> ✔ p 태그 + ✔ class red 포함
.box 안의 p 태그들 p 태그라 기본적으로 빨간색 (하지만 아래 선택자가 덮어씀)

✅ 2. .box > p — 자식 선택자 (직계만)

.box > p {
  color: blue;
}

✔ 의미

.box 안의 ‘직계 자식’ p만 선택

.box 구조 확인

<div class="box">
  <p>lorem 1</p>     ← 직계 p ✔ blue
  <div>
    <p>lorem 2</p>   ← 손자 p ✖ blue 적용 안 됨
  </div>
  <p>lorem 3</p>     ← 직계 p ✔ blue

결과

내용 색상

lorem 1 blue
lorem 2 red (기본 p 규칙)
lorem 3 blue

✅ 3. .box p — 후손 선택자

.box p {
  font-size: 20px;
}

✔ 의미

.box 안에 포함된 모든 p 태그 스타일 적용
(자식, 손자 모두 해당)

→ lorem1 / lorem2 / lorem3 모두 글자 크기 20px

🔥 4. h1 + h2 — 인접 형제 선택자

h1 + h2 {
  color: rgb(224, 24, 242);
}

✔ 의미

h1 바로 다음에 등장하는 h2 하나만

.box 내부 구조:

<h1>lorem1</h1>
<h2>lorem2</h2>   ← 바로 뒤에 있는 h2 → 보라색 적용
<h2>lorem3</h2>   ← 두 번째 h2는 적용 X

결과

요소 적용

lorem2 ✔ 보라색
lorem3 ✖ 기본색

🌟 5. h1 ~ h2 — 일반 형제 선택자

h1 ~ h2 {
  text-align: center;
}

✔ 의미

h1 이후에 나오는 모든 h2 형제 요소에 적용
(바로 뒤가 아니어도 OK)

그래서:

요소 내용 적용

lorem2 h1 뒤에 바로 나오는 h2 중앙 정렬
lorem3 h1 뒤에 등장하는 모든 h2 중앙 정렬

🔹 여기서는 lorem2와 lorem3 둘 다 가운데 정렬

📘 최종 스타일 정리표

요소 색상 크기 정렬 이유

p#title 빨강 기본 기본 p, #title 규칙
p.blueredgreen 빨강 기본 기본 p 규칙
p.blue.red 빨강 기본 기본 p & .red
lorem1 파랑 20px 기본 .box > p
lorem2 빨강 20px 기본 .box p (후손), 기본 p
lorem3 파랑 20px 기본 .box > p
h2 lorem2 보라색, 중앙 기본 인접 + 일반 형제  
h2 lorem3 기본색, 중앙 기본 일반 형제(h1 ~ h2)  

🎯 핵심 개념 요약

선택자 의미

p, #title, .red 그룹 선택자 (여러 요소 동시 선택)
.box > p 자식 선택자 (직계만)
.box p 후손 선택자 (모든 하위 요소)
h1 + h2 인접 형제 선택자 (바로 뒤 h2 하나)
h1 ~ h2 일반 형제 선택자 (뒤에 오는 모든 h2) 

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset=utf-8">
  <title>회원 가입</title>
  <!-- <link rel="stylesheet" href="css/register.css"> -->
   <link rel="stylesheet" href="/css/register1.css">
</head>
<body>
  <form id="signup">
    <fieldset>
      <legend>로그인 정보</legend>
      <ul>
        <li>
          <label for="userid">아이디</label>
          <input id="userid" name="userid" type="text" required autofocus>
        </li>
        <li>
          <label for="pwd1">비밀번호</label>
          <input id="pwd1" name="pwd1" type="password"  required>
        </li>
        <li>
          <label for="pwd2">비밀번호 확인</label>
          <input id="pwd2" name="pwd2" type="password" required>
        </li>  
        <li>
          <label for="level">회원 등급</label>
          <input id="level" name="level" type="text" readonly value="준회원">
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>개인 정보</legend>
      <ul>
        <li>
          <label for="fullname">이름</label>
          <input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
        </li>
        <li>
          <label for="email">메일 주소</label>
          <input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
        </li>
        <li>
          <label for="tel">연락처</label>
          <input id="tel" name="tel" type="tel" autocomplete="off">
        </li>  
      </ul>
    </fieldset>
    <fieldset>
      <button type="submit"> 제출 </button> 
    </fieldset>
  </form>
</body>
</html>
* {
	margin: 0;
	padding: 0;
}

body {
	background: #ccc;
	padding: 20px;	
}

#signup {
	background:#fff;
	border:1px solid #222;
	border-radius: 5px;
	padding: 20px;
	width: 400px;	
	margin:30px auto;
}
		
#signup fieldset {
	border: 1px solid #ccc;
	margin-bottom: 30px;
}
		
#signup legend {
	font-size: 16px;
	font-weight: bold;
	padding-left:5px;
	padding-bottom: 10px;	
}
			
#signup ul li {
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}

#signup label {
	float: left;
	font-size: 13px;
	width: 110px;
}

#signup button {	
	border: 1px solid #222;
	border-radius: 20px;
	display: block;
	font-size: 16px 맑은고딕,굴림,돋움;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
}


이 예제는 **회원가입 폼(register form)**을 HTML + CSS로 완성하는 코드
HTML 구조와 CSS 스타일을 함께 보면,
왜 폼이 예쁘게 정렬되고, 왜 label이 왼쪽에 딱 붙고 input이 오른쪽에 정렬되는지까지 명확하게 이해 가능

아래에서 전체 구조 → 선택자별 동작 → 최종 레이아웃 설명 순서로 상세하게 정리!

📌 1. HTML 구조 요약

HTML은 다음 형태로 구성되어 있어:

  • <form id="signup">
    • <fieldset> 여러 개 (구역 나누기)
    • <legend> (각 그룹의 제목)
    • <ul> 리스트 안에 여러 <li>
      • <label> + <input> 구조

이 구조는 웹에서 일반적으로 쓰는 폼 레이아웃 패턴이며,
CSS로 정교하게 정렬되도록 설계됨.

🎨 2. CSS 상세 설명

아래 CSS는 폼을 “깔끔하고 좌우 정렬이 잘 된 구조”로 만들기 위한 것들이야.

✅ (1) 전체 리셋

* {
	margin: 0;
	padding: 0;
}

→ 모든 HTML 요소의 기본 margin, padding 제거
(브라우저마다 기본 여백이 달라서 레이아웃이 깨지는 걸 방지)

✅ (2) body 기본 배경

body {
	background: #ccc;
	padding: 20px;
}
  • 배경색: 연한 회색
  • padding: 페이지 테두리와 컨텐츠 사이 거리 확보

✅ (3) form 박스 (#signup)

#signup {
	background:#fff;
	border:1px solid #222;
	border-radius: 5px;
	padding: 20px;
	width: 400px;
	margin:30px auto;
}

속성 설명

background:#fff form 배경을 흰색으로
border 회색 테두리
border-radius:5px 둥근 모서리
padding:20px 내부 여백
width:400px 폼 전체 폭
margin:30px auto 위 30px, 좌우 auto → 자동 중앙 정렬

✔ 이 부분이 폼이 화면 가운데 정렬되는 핵심!

✅ (4) fieldset 스타일

#signup fieldset {
	border: 1px solid #ccc;
	margin-bottom: 30px;
}
  • 입력 영역을 둘러싸는 얇은 테두리
  • fieldset 사이 간격 확보

✅ (5) legend 스타일

#signup legend {
	font-size: 16px;
	font-weight: bold;
	padding-left: 5px;
	padding-bottom: 10px;
}
  • 제목 글자 조금 크게, 굵게
  • 왼쪽 여백 + 아래 여백 추가

✅ (6) li 스타일

#signup ul li {
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}

속성 의미

line-height: 30px 줄 높이 확보 → 입력창 높이가 균일해짐
list-style:none ● (불릿 점) 제거
padding:5px 10px 내부 여백
margin-bottom:2px li 간 약간의 간격

✅ (7) label 정렬의 핵심

#signup label {
	float: left;
	font-size: 13px;
	width: 110px;
}

이 부분이 중요한데…

✔ label을 왼쪽으로 띄운다 → float:left

✔ label 폭을 110px 로 고정 → input이 동일 라인에서 오른쪽에 위치

✔ 결과적으로 “이름: [입력창]” 구조 완벽 정렬

즉, 아래처럼 예쁘게 정렬됨:

아이디      [___________]
비밀번호    [___________]
메일 주소   [___________]

✅ (8) 버튼 스타일

#signup button {	
	border: 1px solid #222;
	border-radius: 20px;
	display: block;
	font-size: 16px 맑은고딕,굴림,돋움;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
}

속성 설명

border:1px solid 버튼 테두리
border-radius:20px 동그란 버튼
display:block 버튼을 블록 요소로 만들어
margin:auto 폼 중앙에 배치
padding 버튼 크기 키움
letter-spacing:1px 글자 사이 간격 ↑

❗ 여기 오류 있음:

font-size: 16px 맑은고딕,굴림,돋움;

→ font-family와 font-size가 섞여있음

정상형태는:

font-size: 16px;
font-family: 맑은고딕, 굴림, 돋움;

📘 3. 전체 동작 정리

  • 전체 스타일 초기화로 브라우저 기본 여백 제거
  • form을 400px 카드처럼 만들고 가운데 정렬
  • fieldset으로 그룹 나누기
  • label 왼쪽 정렬 + 동일 폭으로 input 정렬
  • 각 li는 줄 높이 통일 → 깔끔한 레이아웃
  • 버튼은 둥근 형태로 아래 중앙에 배치

🎯 4. 최종적으로 어떻게 보이는가?

  • 회색 배경 + 중앙에 흰색 폼 카드
  • “로그인 정보”, “개인 정보” 구분되는 그룹
  • 모든 label과 input이 정확하게 한 줄 일자로 정렬됨
  • 예쁘고 실무에서도 많이 쓰는 폼 스타일 구조
* {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc;
  padding: 20px;
}

#signup {
  background: #fff;
  border: 1px solid #222;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  margin: 30px auto;
}

#signup fieldset {
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

#signup legend {
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
  padding-bottom: 10px;
}

#signup ul li {
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
}

#signup label {
  float: left;
  font-size: 13px;
  width: 110px;
}

/* [type *=text],
[type *=password],
[type *=tel],
[type *=email] {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  padding: 5px;
  width: 200px;
} */

#signup input[text=text],
#signup input[text=password],
#signup input[text=tel],
#signup input[text=email] {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  padding: 5px;
  width: 200px;
}

#signup input[text=text] {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  padding: 5px;
  width: 200px;
}

#signup input[required] {
  border: 1px solid red;
}

#signup input[readonly] {
  border: none;
}

#signup button {
  border: 1px solid #222;
  border-radius: 20px;
  display: block;
  font-size: 16px 맑은고딕, 굴림, 돋움;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
}


이번 CSS는 이전 회원가입 폼 스타일에서 **“input 속성 선택자(attribute selector)”**를 사용
입력창마다 다른 스타일을 적용하려는 코드

그 부분까지 포함해서 전체 CSS를 정확하게 설명.

📌 1. 초기화 + 기본 레이아웃 (이전과 동일)

* {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc;
  padding: 20px;
}

#signup {
  background: #fff;
  border: 1px solid #222;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  margin: 30px auto;
}

→ 전체 초기화 → body 배경 → form(#signup) 카드 UI 생성

📌 2. fieldset / legend / li 설정 (폼 정렬 관련)

#signup fieldset {
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

#signup legend {
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
  padding-bottom: 10px;
}

#signup ul li {
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
}

#signup label {
  float: left;
  font-size: 13px;
  width: 110px;
}

→ label은 float:left + width 110px 로 input과 정렬됨
→ li는 불릿 제거 + 내부 여백 추가하여 예쁜 폼 구성

❗️ 3. 잘못된 선택자 (중요)

너가 작성한 이 부분:

#signup input[text=text],
#signup input[text=password],
#signup input[text=tel],
#signup input[text=email] {

이것은 절대로 작동하지 않아!

왜냐하면:

🚫 input[text=text] 라는 속성은 존재하지 않음

HTML input 태그에서 text, password, email, tel 등은 모두 type 속성이야!

예:

<input type="text">

따라서 CSS에서 text 타입 input을 선택하려면 이렇게 해야 함:

input[type="text"]

✔ CSS 속성 선택자의 올바른 형태

HTML CSS 선택자

<input type="text"> input[type="text"]
<input type="password"> input[type="password"]
<input type="email"> input[type="email"]
<input type="tel"> input[type="tel"]

🌟 그래서 네 CSS는 이렇게 바뀌어야 한다!

🔥 정답 버전:

#signup input[type="text"],
#signup input[type="password"],
#signup input[type="tel"],
#signup input[type="email"] {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  padding: 5px;
  width: 200px;
}

📌 4. required 속성 input 스타일

#signup input[required] {
  border: 1px solid red;
}

→ 반드시 입력해야 하는 required input 들은 빨간 테두리

HTML에서 required가 붙은 input:

  • 아이디
  • 비밀번호
  • 비밀번호 확인
  • 이름
  • 이메일

==> 이 5개는 모두 빨간 테두리로 표시됨.

📌 5. readonly input 스타일

#signup input[readonly] {
  border: none;
}

HTML에서 readonly인 input:

<input id="level" name="level" type="text" readonly value="준회원">

→ 이 필드는 테두리가 사라지고 단순 텍스트 필드처럼 보임
(회원 등급은 수정 불가이므로 적절한 디자인)

📌 6. 버튼 스타일

#signup button {
  border: 1px solid #222;
  border-radius: 20px;
  display: block;
  font-size: 16px 맑은고딕, 굴림, 돋움;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
}

하지만 여기에도 잘못된 문법이 있음:

font-size: 16px 맑은고딕, 굴림, 돋움;

→ font-size와 font-family가 섞여버렸어!

✔ 올바른 코드:

font-size: 16px;
font-family: 맑은고딕, 굴림, 돋움;

🎯 최종 요약

  • CSS에서 input 타입 선택할 때 반드시 input[type="text"] 형태를 써야 함.
  • input[text=text] → 절대 작동 ❌ (잘못된 문법)
  • required input → 빨간 테두리
  • readonly input → 테두리 없음
  • 폼 전체 구조는 float left + li 패딩을 이용해 정렬됨
  • 버튼 font-family 문법은 잘못되어 수정해야 함

원하면 올바르게 수정된 전체 CSS 파일 완성본도 만들어줄게!

'대우개발원 수업 내용 > css로 웹 페이지 꾸미기' 카테고리의 다른 글

CSS 6일차 - float / clear  (1) 2025.12.11
CSS 5일차 background / position / z-index  (0) 2025.12.10
CSS 4일차 - 박스 모델을 구성하는 속성 / 지금까지 배운 html+css 정리  (0) 2025.12.09
CSS 3일차  (0) 2025.12.08
CSS 2일차  (0) 2025.12.05

관련글

티스토리툴바