코딩두의 포트폴리오

CSS & HTML 본문

Web/웹프로그래밍응용

CSS & HTML

코딩두 2025. 4. 13. 15:43

CSS의 개념

문서의 구조 -> HTML / 문서의 스타일 -> CSS / 문서의 동작 -> JS

 

 

CSS의 역할

 

 

CSS(Cascading Style Sheets): 문서의 스타일 지정

 

 

CSS의 장점

  • 거대하고 복잡한 사이트 관리 시 유용
  • 모든 페이지들이 동일한 CSS 공유
  • CSS에서 어떤 요소의 스타일을 변경 -> 관련되는 전체 페이지 내용 함께 바뀜

 

 

CSS3의 기능    

  • 선택자
  • 박스 모델
  • 배경 및 경계선
  • 텍스트 효과
  • 2차원 및 3차원 변환
  • 애니메이션
  • 다중 컬럼 레이아웃
  • 사용자 인터페이스

 

CSS3의 문법

  • 선택자(selector) { 속성: 값; }
  • 끝에 반드시 ;을 적어줌

  • 주석: /* ... */

 

CSS의 위치

<!doctype html>
<html>
<head>
 <title>My Web Page</title>
 <style>
 p { background-color: yellow; }
 </style>
</head>
 <body>
 <p>This is a paragraph.</p>
 </body>
</html>

This is a paragraph.

 

ex)

<!DOCTYPE html>
<html>
<head>
 <title>My Web Page</title>
 <style>
 h1 {
 background-color: yellow;
 border: 2px solid red;
 }
 </style>
</head>
<body>
 <h1>This is a heading.</h1>
</body>
</html>

This is a heading.

 

 

선택자

  • 선택자(selector): HTML 요소를 선택하는 부분

 

선택자의 종류

  • 타입 선택자
  • 전체 선택자
  • 클래스 선택자
  • 아이디 선택자
  • 속성 선택자
  • 의사 선택자

 

타입 선택자(type selector)

- HTML 요소 이름을 사용

 

전체 선택자(universal selector)

- 페이지 안의 모든 요소를 선택

 

아이디 선택자(id selector)

- 특정한 요소를 선택

ex) 

<!DOCTYPE html>
<html>
<head>
 <title>CSS id Example</title>
 <style>
 #special {
 background-color: yellow;
 color: red;
 }
 </style>
</head>
<body>
 <p id="special">id가 special인 단락입니다.</p>
 <p>정상적인 단락입니다.</p>
</body>
</html>

id가 special인 단락입니다.

정상적인 단락입니다.

 

 

클래스 선택자(class selector)

- 클래스가 부여된 요소를 선택

ex) 

<!DOCTYPE html>
<html>
<head>
 <title>CSS class Example</title>
 <style>
 .type1 {
 text-align: center;
 }
 </style>
</head>
<body>
 <h1 class="type1">class가 type1인 헤딩입니다.</h1>
 <p class="type1">class가 type1인 단락입니다</p>
</body>
</html>

class가 type1인 헤딩입니다.

class가 type1인 단락입니다

 

 

선택자 그룹

선택자를 콤마(,)로 분리하여 나열

ex)

<!DOCTYPE html>
<html>
<head>
 <title>CSS selector Example</title>
 <style>
 h1, p {
 font-family: sans-serif;
 color: red;
 }
 </style>
</head>
<body>
 <h1>This is a heading1.</h1>
 <p>This is a paragraph.</p>
</body>
</html>

This is a heading1.

This is a paragraph.

 

 

자손, 자식, 형제 결합자

선택자 설명
s1 s2 s1 요소에 포함된 s2 요소를 선택 (후손 관계)
s1 > s2 s1 요소의 직계 자식 요소인 s2를 선택 (자식 관계)
  • body em { color:red; } /* body 안의 em 요소 */
  • body > h1 { color:blue; } /* body 안의 h1 요소 */

ex)

<!DOCTYPE html>
<html>
<head>
 <style>
 body em { color: red; } /* body 안의 em 요소 */
 body > h1 { color: blue; } /* body 안의 h1 요소 */
 </style>
</head>
<body>
 <h1>This headline is <em>very</em> important</h1>
</body>
</html>

This headline is very important

 

 

의사 클래스(pseudo-class)

- 클래스가 정의된 것처럼 간주

○ a:link { color: blue; }
○ a:visited { color: green; }
○ a:hover { color: red; }

ex)

a:link { 
 text-decoration: none; 
 color: blue;
 background-color: white;
 }
a:visited {
 text-decoration: none;
 color: green;
 background-color: silver; }
a:hover {
 text-decoration: none;
 color: white;
 background-color: blue; }
a:link { text-decoration: none; color: blue; background-color: white; } a:visited { text-decoration: none; color: green; background-color: silver; } a:hover { text-decoration: none; color: white; background-color: blue; }

 

 

속성 선택자

- 특정한 속성을 가지는 요소를 선택

○ h1[title] { color: blue; }
○ p[class=“example”] { color: blue; }

 

 

CSS 삽입 위치

외부 스타일 시트

내부 스타일 시트

인라인 스타일 시트

 

 

외부 스타일 시트

- 스타일 시트를 외부에 파일로 저장

- 많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은 방법

ex)

h1 { color: red; }
p { color:#0026ff; }
예제
<!DOCTYPE html>
<html>
<head>
 <link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
 <h1>This is a headline.</h1>
 <p>This is a paragraph.</p>
</body>
</html>
h1 { color: red; } p { color:#0026ff; } 예제

This is a headline.

This is a paragraph.

 

 

내부 스타일 시트

- HTML 안에 CSS를 정의

<!DOCTYPE html>
<html>
<head>
 <style>
 h1 { color: red; }
 p { color: #0026ff; }
 </style>
</head>
<body>
 <h1>This is a headline.</h1>
 <p>This is a paragraph.</p>
</body>
</html>

This is a headline.

This is a paragraph.

 

 

인라인 스타일 시트

- 각각의 HTML 요소마다 스타일을 지정

- 2개 이상의 선언이 있다면 반드시 끝에 ;을 적어줌

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <h1 style="color: red">This is a headline.</h1>
 <p style="color: #0026ff">This is a paragraph.</p>
</body>
</html>

This is a headline.

This is a paragraph.

 

 

다중 스타일 시트

Q. 하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정하고 있다면 어떤 스타일이 사용될까?

A. 공통적으로 사용되는 스타일은 <body> 요소의 스타일에 정의하는 것이 편함

 

ex1)

h1, p { 
 font-family: serif;
 color: black;
}
h1 { 
 border-bottom: 1px solid gray;
 color: red;
}
body {
 background-color: yellow;
}
h1, p { font-family: serif; color: black; } h1 { border-bottom: 1px solid gray; color: red; } body { background-color: yellow; }

 

ex2)

<!DOCTYPE html>
<html>
<head>
 <title>Web Programming</title>
 <link type="text/css" rel="stylesheet" href="coffee.css">
</head>
<body>
 <h1>Welcome to Web Coffee!</h1>
 <img src="coffee.gif" width="100" height="100">
 <p>
 하우스 로스팅 원두의 신선한 커피를 맛보세요! 
 <em>공인 1급 Barista</em>가
 최고급 원두만을 직접 엄선하여 사용합니다.
 </p>
 <h2>메뉴</h2>
 <p>
 아메리카노,카페라떼,카푸치노,카페모카, ...
 </p>
</body>
</html>

Welcome to Web Coffee!

하우스 로스팅 원두의 신선한 커피를 맛보세요! 공인 1급 Barista가 최고급 원두만을 직접 엄선하여 사용합니다.

메뉴

아메리카노,카페라떼,카푸치노,카페모카, ...

 

 

CSS의 속성들

특성 설명
color 텍스트 색상
font-weight 볼드체 설정
padding 요소의 가장자리와 내용간의 간격
font-size 폰트의 크기
background-color 배경색
border 요소를 감싸는 경계선
font-style 이탤릭체 설정
background-image 배경 이미지
text-align 텍스트 정렬
list-style 리스트 스타일

 

'Web > 웹프로그래밍응용' 카테고리의 다른 글

TAG  (1) 2025.04.12
'Web/웹프로그래밍응용' Related Articles more