HTML과 CSS

VScode를 이용한 HTML과 CSS 연결

heediv 2025. 4. 8. 23:03
반응형

[250408] 25년도 1일차 코딩공부시작.


1. CSS소개-정보의 html과 디자인 css의 분리하여 새로운 문법,언어인 CSS가 탄생한 것.

<style>
   li{
      color:red;
   }
</style>

<Li>나는 HTML이다. CSS로 폰트 색깔 변경할 것이다.</Li>

 

예시) html과 css가 분리가 되지않은 코드

<li><font color="red">나는 HTML이다. CSS로 폰트 색깔 변경할 것이다.</font></li>

 

2. VScode 사용(Visual Studio Code) 하여 실습환경 만들기

HTML 일반 구조 자동생성하기

1) 폴더 생성 후 html 파일 만들기

2) 우측 하단에 파일 형식이 HTML이 맞는지 확인하기

3) "!" 느낌표 입력 후 엔터(html:5 입력해도 가능함.)

필요한대로 수정해서 사용할것. ex) lang="ko" 

2-1. HTML 과 CSS 연결하기

index.html파일 에서 <head>태그 안에 아래의 <link>태그를 넣어 style.css파일을 index.html파일과 연결해준다

<link href="style.css" rel="stylesheet" type="text/css" />

 

 

연결완료!

반응형