바이오 대표

[CSS] CSS 기본형식 및 HTML 적용 방법 본문

Front_end

[CSS] CSS 기본형식 및 HTML 적용 방법

바이오 대표 2021. 8. 12. 01:59

CSS 를 HTML 페이지에 적용 시키는 방법 

1. CSS 코드와 HTML 코드를 같은 파일에서 실행 <style></style>

2. 웹사이트를 만들때는 다른 파일로 저장 <link herf="styles.css" rel="stylesheet"/> 

 

CSS 기본 형식 

태그이름 {
  속성: 값;
}

CSS 는 selector로써 html 태그를 가리켜서 속성을 지정 해준다.

ex) 태그 A는 파란색이고, 25px이고 이러한 폰트를 가지고 있다.

 

 

CSS 규칙

- 세미콜론 (;) 으로 마무리

- 속성 이름 (색, 글자 크기, 폰트): 값   ex) color: blue;

- curly bracket { } 사용

- no space 

<style>
  h1 {
      color: blue;
      font-size:25px; 
      text-decoration: underline;       
      }
</style>

 

* CSS : cascading style sheet = 위에서 부터 순서대로 적용된다

 

 

 

 

Full 예시) 

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
        <style>
            h1 {
                color: blue;
                font-size:25px; 
                text-decoration: underline;       
            }
        </style>
    </head>
    <body>
        <header>
            <h1>This is the header</h1>
        </header>
        <main>
            Main text goes here.
        </main>
    </body>
</html>

↓

위와 같이 HTML 코드 파일에 <style> 을 이용해서 넣어주거나, 아래와 같이 <link href="styles.css" rel="stylesheet"/> 를 이용하여 분리된 CSS 파일을 불러올 수 있다.

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
        <link href="styles.css" rel="stylesheet"/>
    </head>
</html>
h1 {
    color: blue;
    font-size:25px; 
    text-decoration: underline;       
}
저작자표시

'Front_end' 카테고리의 다른 글

[CSS] Block & Inline 특징  (0) 2021.08.13
[CSS] Box (block) & Inlines  (0) 2021.08.12
[HTML] <div></div>, Semantic 태그들  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)달력  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)계정  (0) 2021.08.08
'Front_end' Related Articles more