스파르타 웹개발종합반 1주차_2

thermal·2022년 7월 9일
CSShtml스파르타 웹개발종합반
0

스파르타 웹개발종합반

목록 보기
2/12

폰트 지정

  • 구글웹폰트
  • select this style에서 link href 복사 > title 태그 밑에 붙여넣기
  • css rules 복사 > 원하는 데에 붙여넣어 적용
  • 전체 적용은 * { ~~~ } 별 사용

주석 처리

  • 원하는 부분 드래그하고 ctrl + /

파일 분리

  • css 파일을 따로 만들어 html 파일에 불러와서 사용
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

css에서 적용 범위 지정

  • 클래스에 적용 : .클래스명 { }
  • 클래스 내 태그 적용 : .클래스명 > 태그명 { }

부트스트랩 (css 갖다 쓰기)

  • 부트스트랩 시작 탬플릿
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>
profile
thermal
이전 포스트

스파르타 웹개발종합반 1주차_1

다음 포스트

스파르타 웹개발종합반 1주차_3

0개의 댓글