HTML + CSS 파일 연동하는 방법

2022. 11. 21. 00:00·Development Study/Frontend
728x90

주로 HTML과 CSS를 웹페이지를 만드는 데에 많이 쓰곤 한다

그리고 이 두 파일을 연동하는 방법은 생각보다 간단하다

 

1. main.html 생성

2. style.css 생성

3. <head> 안에 link tag를 이용하여 경로 지정

 

참고

 

[HTML] 태그 정리 (<body> tag)

Ctrl+f를 통해 관련 내용으로 이동할 수 있습니다 더보기 body br p b i h# a img table span li form +들어가기 전에 기본적으로 css 태그는 다음과 같이 정의내려진다 태그이름 { 속성1: 속성값1; 속성2: 속성

time-map-installer.tistory.com

4. 작성 코드 예(main.html)

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        안녕하세요
    </body>
</html>

5. style.css에 속성 아무거나 지정 후 작동되는 지 확인

body{
    color: aqua;
}

RESULT

728x90
저작자표시 비영리 변경금지 (새창열림)

'Development Study > Frontend' 카테고리의 다른 글

[TypeScript] TypeScript Grammar - 01  (0) 2023.01.07
[TypeScript] Differences between .ts & .tsx  (0) 2023.01.07
[배경지식] CSS 프레임워크를 알아보자  (1) 2022.12.31
[배경지식] JavaScript? TypeScript? 이 둘의 차이는 무엇일까?  (0) 2022.12.31
[HTML] 태그 정리 (<body> tag)  (0) 2022.11.20
'Development Study/Frontend' 카테고리의 다른 글
  • [TypeScript] Differences between .ts & .tsx
  • [배경지식] CSS 프레임워크를 알아보자
  • [배경지식] JavaScript? TypeScript? 이 둘의 차이는 무엇일까?
  • [HTML] 태그 정리 (<body> tag)
ThreeLight
ThreeLight
ThreeLight Studio의 블로그, TimeMap.exe에 오신 것을 환영합니다.
  • ThreeLight
    TimeMap.exe
    ThreeLight
  • 전체
    오늘
    어제
    • 분류 전체보기 (245)
      • Checkpoint (1)
      • (3D)Dev Deep Dive (0)
        • Templates & Guides (9)
        • Frontend origin (9)
        • Backend origin (1)
        • TroubleShootings (4)
      • Development Study (95)
        • Frontend (36)
        • Backend (21)
        • CS(Computer Science) (2)
        • Background Knowledges (11)
        • Algorithm (2)
        • Mobile (3)
        • AWS (6)
        • Python (6)
        • MSW(MapleStoryWorlds) (8)
      • Coding Test (59)
        • 문제.zip (1)
        • BaekJoon_JavaScript (0)
        • Programmers_JavaScript (9)
        • BaekJoon_Python (23)
        • Programmers_Python (10)
        • Undefined_Python (3)
        • Programmers_SQL (13)
      • 활동내역.zip (43)
        • 개인 (21)
        • Techeer (12)
        • Bootcamp (7)
        • Hackathon (1)
        • TeamProjects (2)
      • 여기 괜찮네??(사이트 | App) (5)
      • 재미있는 주제들 (8)
      • 개발 외 공부 저장소 (11)
        • 생산운영관리 (3)
        • 생활속의금융 (6)
        • 경영정보시스템 (2)
  • 링크

    • TimeMap.dmg (Portfolio)
    • GitHub 바로가기
    • 오픈프로필(카카오톡)
    • Medium 바로가기
    • Disquiet 바로가기
    • LinkedIn 바로가기
  • 인기 글

  • 태그

    프로그래머스
    JavaScript
    Baek Joon
    HTML
    Python
    react
    CSS
    programmers
    SQL
    TypeScript
  • 최근 글

  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.1
ThreeLight
HTML + CSS 파일 연동하는 방법
상단으로

티스토리툴바