Programming/WEB

[2] CSS 기초 : html <style>태그, 파일분리, style 속성들, 구글 폰트 적용, 로그인페이지 예제

알 수 없는 사용자 2023. 7. 10. 21:12

1. CSS 기본 개념

더보기
  • CSS는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격.
  • 초기에는 HTML 하나의 문서로 뼈대와 꾸미기도 함께 했지만, 공통적인 디자인을 갖는 문서가 여럿 존재할 경우 하나를 수정하면 다른 파일도 모두 업데이트를 해야하는 번거로움이 있었음
  • CSS는 이런 문제를 해결함과 동시에 웹페이지의 내용과 스타일의 분리를 통해 역할 분담을 하고 있다. 

 

1) HTML 태그의 style 속성을 이용

2) <head> 태그 내에 <style> 태그를 통해 HTML 문서 내부에 기술 

3) .css 파일로 분리하여 HTML 문서와 연결

 

<!-- 1번 -->
<p style="color: yellow">노란색 문단</p>
<!-- 2번 -->
<html>
<head>
	<style type="text/css">
		.mytext{ color: yellow }
	</style>
</head>
<body>
	<p class="mytext">
		노란색 문단
	</p>
</body>
</html>
<!-- 3번 -->
<head>
	<link rel="stylesheet" href="경로.css" type="text/css">
</head>

 

 

 

2. 선택자

더보기
  • 어떤 태그에 스타일을 적용할지를 정의해야 하는데 이를 선택자라고 한다. 

 

  • 태그 선택자 : 해당되는 태그 전부에 스타일 적용시킴
태그이름 { 속성1: 속성값1; 속성2: 속성값2; }
span { color:#F00; }
div { color:#0F0; }

 

  •  id 선택자
#아이디{ 속성1:속성값; 속성2:속성값; } 
#mybox{ width:500px; height:300px; }

 

  • class 선택자
.클래스명{ 속성1:속성값; 속성2:속성값 }
.box{ background-color:blue; }

 

 

 

3. 속성

더보기

1) width, height : 가로길이, 세로길이 / 숫자 + 단위(px, % 등)

<html>
<body>
	<div style="width: 150px; height: 80px; background-color: #d2f4ff; border: 2px solid #09c;">
		150x80
	</div>
	<div style="width: 60px; height: 200px; background-color: #fde6ff; border: 2px solid #90C;">
		90x120
	</div>
</body>
</html>

 

2) margin, padding : 바깥쪽 여백, 안쪽 여백 / 숫자 + 단위(px, % 등)

  • margin: 20px : 상하좌우 모두 20px 
  • margin: 20px, 10px : 상하 20px, 좌우 10px
  • margin: 30px, 10px, 40px : 위 30, 좌우 10, 아래 40
  • margin: 30px, 10px, 20px, 50px : 위 30, 오른쪽 10, 아래 20, 왼쪽 50 (시계방향)
https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1

 

 3) color : 글자의 색상

  • red, blue 등 이미 정의된 색
  • #000, #FFFFFF 등의 16진수 색상 코드
  • rgb(255, 255, 255) 등의 rgb 색상
  • rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상
  • 기본값은 inherit으로 부모의 색상을 가져온다. 
<html>
<body>
	<div style="color: red">text1</div>
	<div style="color: #0A0">text2</div>
	<div style="color: rgb(0, 0, 150)">text3</div>
	<div style="color: rgba(0, 140, 170, 0.5)">text4</div>
</body>
</html>

 

 4) font : 글자의 폰트를 정의하는 속성. 아래 6개의 세부적 글꼴 속성을 동시에 가지고 있고 한꺼번에 쓸 수 있음

  • font-style : 글꼴 스타일 [normal 기본, italic 이탤릭체]
  • font-variant : 글꼴 변형 (소문자 > 대문자 등)
  • font-weight : 글자 두께 [lighter(100), 200, 300, normal(400), 500, 600, bold(700), 800, bolder(900)]
  • font size : 글자 크기 [px, em, small, big 등 사용]
  • line-height : 줄 간격
  • font-family : 글꼴 
font: font-style font-variant font-weight font-size/line-height font-family
<html>
<head>
	<style>
		#text1 { font-size: 37px }
		.text2 { font-weight: bold }

   </style>
</head>
<body>
	<div id="text1">37px</div>
	<br>
	<div class="text2">Bord Font</div>
</body>
</html>

 

5) text-align : 텍스트의 정렬 방향

  • left : 왼쪽 정렬
  • right : 오른쪽 정렬
  • center : 중앙 정렬
  • justify : 양쪽 정렬

 

6) background : 태그의 배경을 지정하는 속성. 세부적인 속성들을 한번에 쓸 수 있다. 

  • background-color : 배경 색
  • background-image : 배경 이미지
  • background-repeat : 배경 반복 여부
  • background-position : 배경 위치
  • background-size : 배경 사이즈 (cover, contain 등)

 

7) border : 경계선에 대한 속성

  • border-radius : 선 모서리 둥근 정도
  • border-style : 선 스타일 (none, dotted, inset, dashed 등)
  • border-color : 선 색깔 

 

➡️ 필요한 건 그때그때 검색해서 사용하자!

 

 

예제1) 로그인 페이지에 CSS 적용하기

더보기

1) 기초 페이지 화면 가져오기 : 저번에 만들어둔 로그인 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>
</head>
<body>
    <div>
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력하세요</h5>
    </div>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

 

2) 선택자! class를 통해 이름 붙여주기

 

3) style 태그 적용하기

  • 먼저 background-color를 설정해 div 배경의 크기를 확인해보는 것이 좋다. 
    <style>
        .mytitle{
            background-color: yellow;
        }
    </style>
  • 다음에 크기값 width, height를 통해 조정해주기
    <style>
        .mytitle{
            background-color: yellow;
            width: 300px;
            height: 200px;

        }
    </style>
  • 기타 추가 스타일 적용

 

4) 전체 항목을 가운데에 오도록 만들기

  • div로 전체를 감싸주고
  • class로 이름 붙여주고
  • background-color 설정해서 전체 크기 확인
  • width, height로 크기 설정해주기
  • 양쪽 여백이 같도록 설정 : margin: 20px auto 0px auto;
  • 여기서 background-color를 없애주면 된다

 

 

4. 구글 웹폰트 입히기

더보기

1) 구글 웹폰트 들어가기

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

2) 원하는 폰트 선택 > Select Regular 400

 

3) import 선택하고 아래 나온 링크를 복사해서 스타일 태그 안에 넣어주기

  • * {font-family: 'Noto Sans KR', sans-serif;} : 코딩에서 *은 모두에 적용하라는 뜻
<style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
      * {
        font-family: "Noto Sans KR", sans-serif;
      }
</style>

 

 

 

5. 파일분리

더보기

1) 같은 폴더에 css 파일 만들어주기

 

2) html 파일 <style> 태그 안에 있던 내용을 가져와서 넣어준다. 

 

3) html 파일에는 <style> 태그는 없애주고 링크를 걸어준다. 

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">