반응형
1. HTML - <태그> 내부에 직접 스타일을 적용 (인라인 방식)
See the Pen css inline example by Myeongjun Go (@junngo) on CodePen.
HTML - 태그 내부에 스타일을 직접 명시 합니다. 인라인 방식이라고도 말하며 css 내용을 바로 볼 수 있다? 라는 이점 이외에는 이점이 없습니다. 사용을 피해주세요.
2. HTML - <head>내부 - <style>...</style> 내부에 CSS 스타일 명시 (임베디드 방식)
See the Pen NWWWQLW by Myeongjun Go (@junngo) on CodePen.
<head> 내부에 <style>태그를 선언하여 <style> 내부에 css코드를 작성합니다. 처음 공부 하실 때 여러 예제에서 종종 사용하오니 숙지 하시고 코드를 읽으실 때 어려움이 없으시면 되겠습니다. 실제 개발에서는 css파일을 호출하여 아래와 같은 방법으로 css를 사용합니다.
3. CSS파일을 호출 (html / css 스크립트 분리)
<link rel="stylesheet" type="text/css" href="./css/style.css">HTML파일 - head 내부에 위와 같이 명시하여 외부 css파일을 호출 해줍니다. "."은 현재 html파일 위치 기준으로, css디렉토리 내부에 style.css 파일이 존재합니다. 이곳에 css 스크립트를 작성해주시면 되겠습니다. 대부분의 개발은 3번 방식으로 css를 적용해줍니다.
index.html(html 파일)
.(html파일 위치) / css / style.css(css 파일)
See the Pen ZEEEgpb by Myeongjun Go (@junngo) on CodePen.
반응형
'Programming > HTML, CSS' 카테고리의 다른 글
| [css] css의 단위 (px, %, em, rem, vw, vh) (0) | 2022.04.05 |
|---|---|
| [css] width와 height의 대해서 알아보자 (0) | 2022.03.27 |
| [css] parcel설치 및 실행 (0) | 2018.12.28 |