[웹개발 독학4] WEB2 - CSS / VS Code for web, CSS의 기본 문법 (선택자와 속성)

김나정·2025년 3월 7일
CSSVScodeforwebWEB2생활코딩선택자속성
0

웹개발

목록 보기
4/4
post-thumbnail

✨'어디서나 쉽게 코드 작성하기!' VS Code 웹 버전 + GitHub 활용법

알바 중에도 전공 공부하기? 가능!

전공 공부를 하다 보면 노트북이 없을 때도 HTML 코드를 바로 실행할 수 있는 코드 에디터가 필요할 때가 있다.
특히, 응용 프로그램을 설치할 수 없는 환경이라면 더욱 불편할 수밖에 없다.

이런 고민을 해결해줄 방법이 바로 VS Code Web(웹 버전) 이다! 🎉
이 글에서는 VS Code 웹 버전에서 GitHub 레포지토리를 가져오고, 코드 편집 후 변경 사항을 커밋 & 푸시하는 방법을 공유하려고 한다.
혹시 나처럼 (아무고또 몰라요 인간..) GitHub과 VS Code를 처음 접하는 사람이 있다면 도움이 되길 바라며, 짧게 정리해본다. 😊

✅ 웹 기반 HTML 코드 편집기 추천

📌Visual Studio Code for Web

✅ VS Code 웹 버전에서 수정한 내용을 깃허브에 커밋하는 방법

🔹 1. git 레포지토리 열기

1️⃣ VS Code Web 접속
2️⃣ GitHub에 로그인
3️⃣ 좌측 상단 메뉴 → "Remote Repositories" 클릭
4️⃣ 연동할 GitHub 레포지토리를 선택

🔽 GitHub 로그인 후 화면

🔹 2. 변경 사항 확인

코드를 수정하면 왼쪽 사이드바의 깃허브 브랜치모양으로 생긴 "소스 제어" 버튼에 숫자가 표시되며 변경 사항이 감지된다.

🔽 변경 사항이 감지된 모습

🔹 3. 변경 사항 커밋하기

1️⃣ "Commit message" 입력란에 변경 내용을 간단히 작성
2️⃣ ✅커밋하고 푸시버튼 클릭하면 GitHub에 변경 사항이 업로드됨!
3️⃣ GitHub Pages에 반영되기까지 약 1분 정도 걸릴 수 있음 ⏳

  • 변경 사항이 즉시 적용되지 않는다면 새로고침(F5) 또는 강력 새로고침(Ctrl + Shift + R) 을 시도
  • 캐시 문제로 인해 반영이 지연될 수 있으므로 잠시 기다려보면 해결됨! 🚀

🔽 커밋 화면 예시

그럼, 지금부터 즐겁게 코딩Go! ✨💻

CSS기본문법: 선택자와 속성

속성(Attribute)

CSS를 적용할 때, 웹페이지가 어디서부터 어디까지가 CSS 코드인지 알게 하는 방법은 여러 가지가 있다.
이전 포스트에서 다뤘던 <style>태그 를 사용하는 방법이 이 대표적이다.
하지만 이 외에도 HTML 태그 자체에 스타일을 직접 적용하는 방법, 즉 속성(Attribute)을 이용하는 방법도 있다.

🔍 예제: 특정 텍스트의 색상을 변경해보자!

현재 웹페이지에서 "najeong.log" 텍스트를 빨간색으로 변경하고 싶다고 가정

하지만 <style> 태그를 사용하면 웹페이지 전체의 색상이 변경되기 때문에, 특정 태그만 따로 변경하는 것은 어렵다.
그래서 HTML 태그 내부에 직접 스타일을 지정하는 방법을 사용한다.

❌ 잘못된 코드 예시

<body>
    <h1><a href="index.html" color:red>najeong.log</a></h1>
</body>

🔺 위 코드는 올바르게 작동하지 않는다.

HTML에서 color:red 만으로는 웹 브라우저가 CSS인지 HTML인지 구분할 수 없기 때문이다.

✅ 올바른 코드: style 속성 사용하기
HTML과 CSS를 만든 개발자들은 특정 태그에만 CSS 효과를 적용할 수 있도록 style 속성을 도입했다.

  • 태그에 직접 스타일을 적용할 때는 style="속성: 값;" 형태로 작성하면 된다.
<body>
    <h1><a href="index.html" style="color: red;">najeong.log</a></h1>
</body>

🔽 적용된 화면 예시

이제 najeong.log 텍스트가 빨간색으로 변경된다! 🎨

선택자(Selector)

이전에는 style 속성을 사용해 HTML 태그 내부에 직접 CSS를 적용했다. 하지만 일반적으로 CSS는 HTML의 <head> 영역에 <style> 태그로작성하는데, 이때는 누구에게 효과를 적용할지 선택해줘야 한다.

바로 이때 사용하는 것이 선택자(Selector)이다.
즉, "어떤 HTML 요소에, CSS를 적용할지 선택하는 역할"을 한다고 생각하면 된다.

✅ 선택자 예시 코드

예를 들어, 웹페이지 내 모든 <a> 태그에 CSS 효과를 주고 싶다면 다음과 같이 작성한다.

a { 
  color: red; //선언 또는 declaration 또는 효과라고함
  text-decoration: green dotted underline; 
}
  • 위 코드에서 a가 선택자(Selector)이다.
  • 선택자 뒤에 붙는 {} 중괄호 내부에는 CSS 효과(Declaration)를 작성한다.
  • 효과(color: red;)는 한 줄에 여러 개를 작성할 수도 있는데, 이때 각 효과를 구분하기 위해 반드시 세미콜론(;)을 붙여줘야 한다.

🔹 text-decoration property: 위 코드에서 사용한 text-decoration은 텍스트의 밑줄 효과를 설정하는 속성으로, 위치·두께·색깔·모양을 한 번에 지정할 수 있다.

예시: text-decoration: green dotted underline;
색상(green), 선 모양(dotted, 점선), 위치(underline, 밑줄)

📌 정리

✔ HTML에서 특정 태그에 CSS 효과를 주고 싶다면 style 속성을 사용한다.
✔ style="속성: 값;" 형식으로 HTML코드 태그 내부에서 직접 지정 가능하다.
✔ style 속성은 그 값으로 반드시 css의 효과==Declaration가 들어온다.
✔ HTML 내부가 아니라 <head>에서 CSS를 적용할 땐 선택자(Selector)를 사용한다.
✔ 선택자 뒤 {} 중괄호 내부에는 적용할 효과를 세미콜론(;)으로 구분하여 작성한다.

실습 코드와 캡처

index.html

<!doctype html>
<html>
<head>
    <title>아임나댕</title>
    <meta charset="utf-8">
    <style>
        a{
            color:black;
            text-decoration: none;
        }
        h1{
            font-size: 45px; 
            text-align: center;
        }
    </style>
</head>  
<body>
    <h1><a 
        href="index.html" 
        style=
        "color:darkcyan;
        text-decoration: underline;">
        Who is Najeong Kim</a>
    </h1>
    <ol>
        <li><a href="1.Introduce.html" title="Who is 나정">Introduce</a></li>
        <li><a href="2.Instagram.html" title="인스타 염탐하기">Instagram</a></li>
        <li><a href="3.Velog.html" title="공부 감시하기">Velog</a></li>
        <li><a href="4.GitHub.html" title="프로젝트 엿보기">GitHub</a></li>
        <li><a href="5.YouTube.html" title="일상 훔쳐보기">YouTube</a></li>
    </ol>
    <h2>NaJeong Kim</h2>
    <p> 안녕하세요 저는 서울여자대학교 정보보호학과 3학년 김나정입니다. 
        보안에 입문하기 위해 드림핵을 공부하다가 입문자들이 접근하기 쉬운 웹해킹을 알아보던 도중
        웹해킹을 공부하기 위해서는 웹개발을 해야한다는 조언을 듣고 지금 이 웹페이지를 만들고 있습니다!
    </p>
</body>
</html>

2.Instagram.html

<!doctype html>
<html>
<head>
    <title>아임나댕</title>
    <meta charset="utf-8">
    <style>
        a{
            color: black;text-decoration: none;
        }
        h1{
            font-size: 45px; 
            text-align: center;
        }
    </style>
</head>  
<body>
    <h1><a href="index.html">Who is Najeong Kim</a>
    </h1>
    <ol>
        <li><a href="1.Introduce.html" title="Who is 나정">Introduce</a></li>
        <li><a href="2.Instagram.html" title="인스타 염탐하기" style="color: darkcyan;text-decoration: underline;">Instagram</a></li>
        <li><a href="3.Velog.html" title="공부 감시하기">Velog</a></li>
        <li><a href="4.GitHub.html" title="프로젝트 엿보기">GitHub</a></li>
        <li><a href="5.YouTube.html" title="일상 훔쳐보기">YouTube</a></li>
    </ol>
    <h2>Instagram</h2>
    
    <p> <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg" width="1%"> 
        <a href="https://www.instagram.com/jjjangmmman/" target="_blank" style="color: blue; text-decoration: blue dotted underline;">jjjangmmman</a> 
        의 인스타 염탐하기
    </p>
</body>
</html>
profile
김나정
molbwa
이전 포스트

[웹개발 독학3] WEB2 - CSS, 등장배경과 css코드 적용 방법

0개의 댓글