본문 바로가기
코딩/HTML, CSS, 자바스크립트 [javascript]

CSS 로 웹페이지 디자인하기

by 길탱자탱자 2021. 4. 20.

 


웹페이지에 css 를 적용하는 방법


[ 학습을 위한 전체 리스트 ]
  • css 를 html 에 적용 
    • css 일반적인 사용 
    • 부트스트랩 사용 


* External CSS 파일을 사용하는 방법


1. html 파일에 아래 형식으로 코드를 작성합니다.

<head> 
    <link rel="stylesheet" href="mystyle.css"> 
</head>

2. css 파일에 아래 형식으로 코드를 작성합니다.

    body {
      background-color: lightblue;
    }


* Internal CSS 방식으로 사용하는 방법


1. html 파일에 아래 형식으로 코드를 작성합니다.
    <head>
        <style>
            body {
              background-color: linen;
            }
        </style>
    </head>



* Inline CSS 방식으로 사용하는 방법


1. html 파일에 아래 형식으로 코드를 작성합니다.
    <body>
        <h1 style="color:blue;text-align:center;">This is a heading</h1>    
    </body>


* 외부 CSS 를 사용하는 방법


부트스트랩(bootstrap)을 사용하는 방법입니다. 

1. html 파일에 아래 형식으로 코드를 작성합니다.

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

2. 원하는 컴포넌트를 검색해서 해당 샘플 코드를 html 파일에 아래와 같이 사용합니다.

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>



저작자표시

티스토리툴바