HTML

HTML / (12) CSS

Mr.sheep 2023. 2. 16. 02:50

■ 요약

▶ Inline 스타일에는 "style" 속성을 사용한다.

▶ <style> 요소를 사용하여 내부 CSS를 정의한다.

▶ <link> 요소를 사용하여 외부 CSS 파일을 참조한다.

▶ <head> 요소에 <style> 와 <link> 요소를 저장한다.

▶ 텍스트 색상는 "color" 속성을 사용한다.

▶ 텍스트 크기는 "font-size" 속성을 사용한다.

▶ 테두리는 "border" 속성을 사용한다.

▶ 테두리 안에 공백은 "padding" 속성을 사용한다.

▶ 테두리 밖에 공백은 "margin" 속성을 사용한다.

※ CSS 에 대해 더 배우고 싶다면 아래에 링크 확인

https://www.w3schools.com/css/default.asp

 

CSS Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

▶ CSS (Cascading Style Sheets)

▶ CSS 는 많은 작업을 저장할 수 있습니다.

▶ 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.

 

■ CSS는 무엇인가?

▶ CSS는 웹 페이지의 레이아웃 형식을 지정하는데 사용된다.

▶ 색상, 글꼴, 크기, 요소 사이의 간격, 위치 및 배치 방법, 배경 이미지 혹은 색상, 다양한 장치 및 화면 크기 등 다양한 디스플에리를 제어할 수 있다.

 

※ cascading (계단식) 단어는 상위 요소에 적용된 스타일이 상위 요소 내에 모든 자식 요소에도 적용된다는 것을 의미한다.

따라서, 본문에 파랑색을 설정한다면 본문에 포함된 요소들은 별도로 설정하지 않으면 모두 파랑색으로 설정된다.

 

■ CSS 사용하기

▶ CSS는 3가지 방법으로 HTML 문서에 추가할 수 있다.

▷ Inline : HTML 요소 안에 "style" 항목을 사용

▷ Internal : <head> 섹션 안에 <style> 요소 사용

▷ External : 외부 CSS 파일 연결을 위한 <link> 요소 사용

▶ CSS를 추가하는 일반적인 방법은 외부 CSS 파일을 연결하는 것이다.

▶ 이 글에서는 검증 및 시도하기 쉬운 "inline"과 "internal" 스타일로 진행한다.

 

■ Inline CSS

▶ Inline CSS는 HTML 요소에 고유한 스타일로 적용된다.

▶ Inline CSS는 HTML 요소의 "style" 속성을 사용한다.

<h1 style="color:blue;"> 파란색 제목 </h1>

 

■ Internal CSS

▶ Internal CSS 는 하나의 HTML 페이지에 대해 스타일을 정의한다.

▶ Internal CSS 는 HTML 페이지의 <head> 섹션 안에 <style> 요소 내에 정의된다.

<!DOCTYPE html>
<html>
<head>
<style>
body	{background-color: powderblue;}
h1	{color: blue;}
p	{color: red;}
</style>
</head>
<body>
<h1> 제목 </h1>
<p> 단락 </p>
</body>
</html>

 

■ External CSS

▶ 외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는데 사용된다.

▶ 외부 스타일 시트를 사용하기 위해서 각 HTML 페이지의 <head> 섹션 안에 링크를 추가한다.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> 제목 </h1>
<p> 단락 </p>
</body>
</html>

▶ 외부 스타일 시트는 모든 텍스트 편집기에서 작성하여 사용할 수 있다.

▶ 파일은 모든 HTML 코드를 절대 포함해선 안되며, 반드시 확장자를 ".css" 파일로 저장해야 된다.

▶ "style.css" 파일

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

※ 외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있다.

 

■ CSS 색상, 글꼴, 크기

▶ "color" 속성은  사용할 텍스트 색상을 정의한다.

▶ "font-family" 속성은 사용할 글꼴을 정의한다.

▶ "font-size" 속성은 사용할 텍스트 크기를 정의한다.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1> 제목 </h1>
<p> 단락 </p>

</body>
</html>

 

■ CSS 테두리

▶ CSS "border" 속성은 HTML 요소 주변에 테두리를 정의한다.

※ 거의 모든 HTML 요소에 대해 테두리를 정의할 수 있다.

<p style="border: 2px solid powderblue;"> 단락 </p>

 

■ CSS 패딩

▶ CSS "padding" 속성은 테두리와 텍스트 사이에 공백을 정의한다.

<p style="border: 2px solid powderblue; padding: 30px;"> 단락 </p>

 

■ CSS 마진

▶ CSS "margin" 속성은 테두리 바깥쪽 공백을 정의한다.

<p style="border: 2px solid powderblue; margin: 50px;"> 단락 </p>
<p style="border: 2px solid powderblue; margin: 50px;"> 단락 </p>
<p style="border: 2px solid powderblue; margin: 50px;"> 단락 </p>

 

■ 외부 CSS 에 링크

▶ 외부 스타일 시트는 전체 URL 혹은 현재 웹 페이지에 상대적은 경로로 참조할 수 있다.

<!-- URL 링크 참조 -->
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<!-- 현재 웹 페이지의 HTML 폴더 안에 있는 스타일 시트 -->
<link rel="stylesheet" href="/html/styles.css">
<!-- 현재 페이지와 같은 폴더에 있는 스타일 시트 -->
<link rel="stylesheet" href="styles.css">

▶ HTML 파일 경로에 대해 더 알고 싶으면 아래의 링크를 참조

https://www.w3schools.com/html/html_filepaths.asp

 

HTML File Paths

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com