YANAtelier

[QA Engineering] 원데이 클래스 - Technical 260516 교육 간단 후기 (Git, API 테스트, 테스트 계획서 전략)

S2YANA — Tue, 26 May 2026 12:30:08 +0900

퇴근 후 체력 이슈로 인한 백만년만의 블로그 업로드...

오늘은 지지난주 토요일(2026/05/16)에 수강했던 QA 원데이 클래스 후기를 짧게 남겨보려고 한다.

해당 클래스가 열린다는 건 QA 분들이 모여있는 카카오톡 오픈 채팅방 큐톡 / 큐톡 공지방을 통해 알게되었다.

큐톡(QA) - 메인방

#소프트웨어QA #Testing #자유토크 #잡담 #정보나눔 #업무 #일상 #SWQA #테스트 #소프트웨어품질 #자동화 #취업이직 #홍보 #QA

open.kakao.com

큐톡(QA) - 공지방

open.kakao.com

곧 이직 준비를 위해 포트폴리오를 다시 준비할 계획이었는데,

이번 교육 과정들이 포트폴리오를 만들 때 도움이 될 것 같아 수강신청을 하게 되었다.

STEN | 소프트웨어 테스팅 커뮤니티

국내 최대 소프트웨어 테스팅 커뮤니티 STEN

sten.or.kr

260516 QA 원데이 클래스 커리큘럼

제공받은 교재와 중식 제공을 위한 비플 식권, 그리고 수료증

파트는 크게 Git, API, 테스트 계획서 전략 요 세가지로 나눠서 진행되었고,

교재와 점심 식사, 음료까지 제공해주셨다.

교육은 자양역 근처의 STA 건물 2층에서 진행되었다.

STA테스팅컨설팅 서울 광진구 자양강변길 115

Part 1. Git을 활용한 QA 업무 프로세스 개선

CLI로 Git을 다루는 기초 명령어(Push, Pull, 브랜치 변경 등)를 익힌 후에,

수업 시간 관계 상 코드나 시험 환경을 직접 작성해보진 않았고 제공해주신 서버 환경과 코드 기반으로
Github Actions를 활용해서 특정 트리거 발생 시에 자동으로 Github에 Pull Request나 Issue를 생성하도록 하는 실습을 진행했다.

기초 수업이다보니 Git을 CI/CD에 이런식으로 활용 가능하다 라는 걸 알 수 있는 수준의 난이도로 진행되었다.

Github Actions 활용 실습

Part 2. QA 커버리지를 올리는 API 테스트

API 테스트에서 가장 많이 활용하는 'Postman'과

공공데이터포털에서 제공되는 날씨 정보 api 명세 및 샘플 데이터를 활용해서 실습 위주로 수업이 진행되었다.

직접 테스트 케이스를 작성해보고, 그 테스트 케이스를 기반으로 직접 테스트를 진행했는데,

결과가 어떤 식으로 나와야하고, 결과가 나온 것에 따라 이슈로 등록해야할지 유무 및

개발자 분들과 어떻게 소통해야하는지에 대해 알려주셨다.

API 테스트 실습

Part 3. SW 품질 확보를 위한 테스트 계획서 전략

ISO/IEC/IEEE 29119 국제 표준 기반 조직 테스트 전략, 위험 분석 등등과 문서에 포함되어야 할 내용들에 대해 정리해주셨고,

현업에서 인증이나 표준에 관련하여 진행해보셨던 경험들도 공유해주셔서 흥미롭고 재밌었다.

수업 마지막 쯤에 조직 테스트 정책에 대한 목적을 직접 생각해보고 적어보는 시간을 가지면서

어떤 QA가 되고 싶은지, 어떤 전략을 세워야 할지도 한 번 돌아보게 된 것 같다.

최종 후기

교육 몇 일 전에 메일과 문자로 설치해야 할 프로그램과 준비해야 할 것들에 대해 공지를 받았는데,
이 내용들이 각 강사님들께는 전달이 되지 않았었는지 세팅부터 진행하려고 하는 부분이 있었어서 소통 이슈가 살짝 아쉬웠고,

각 파트마다 2시간 남짓 안에 교육을 끝내야 하다보니 문제가 생겨 실습이 지연되는 경우

마지막엔 조오금 쫓기듯이 끝나는 파트도 있었다.

파트를 2개로 해서 조금 진득하게 혹은 조금만 더 깊게 강의가 진행되어도 괜찮을 것 같다는 생각이!

그래도 포트폴리오를 어떤 방식으로 만들지, 어떻게 진행할 지 방향 잡는데에 도움은 된 것 같다.

교육이 끝나고 공지해주시기론

곧 열리게 될 QA 코리아 컨퍼런스에 AI를 다루는 것과 관련하여 관련 개발자 분들도 많이 섭외했다는 내용과

앞으로 열릴 원데이 클래스들도 전체 강의를 다 들을 필요 없이

원하는 파트만 골라서 듣고 싶은 경우 연락하면 일부만 들을 수 있게 해줄 수 있다고 하셔서

교육 공지가 뜨면 관심있는 커리큘럼이 있는지 한 번씩은 꼭 보게 될 것 같다..!

곧 개최될 QA 코리아 컨퍼런스도 가능하다면 꼭 참여해야지...

[엘카데미] MCP 원데이 부트캠프 수료 후기

S2YANA — Tue, 3 Jun 2025 09:55:46 +0900

엘카데미 MCP 원데이 부트캠프 참여 인증!

0. MCP 원데이 부트캠프 신청 계기

엘카데미에서 MCP 원데이 부트캠프를 진행한다는 공지를 보고 호기심이 생겨 바로 교육 신청을 했었다..!

평소에도 AI를 자주 활용하고는 있었지만,

주로 코드나 궁금한 점에 대한 답변을 얻기 위한 용도에 한정되어 있었다.

그래서 'AI를 더 효과적으로 활용할 수 있는 방법은 무엇일까?' 하는 생각이 들던 차에

이번 교육이 좋은 기회가 될 것 같았다.

1. MCP란?

: Model Context Protocol

AI 에이전트가 다양한 프로그램과 의사소통을 하는데 사용되는 규약
Claude 인공지능을 개발한 Anthropic에서 2024년 11월 발표
Open Source
- 프로토콜 스펙
- 구현용 라이브러리
- 예시 MCP 서버

MCP는 작년 말, 정말 나온지 얼마 되지 않은 따끈따끈한 신상 기술이다.

그럼에도 구글 검색 트렌드 수치나, Github 즐겨찾기 수, Node.js용 SDK 다운로드 수 등에서 가파른 상승 곡선을 보여주고 있었다.

출처 : 부트캠프 강의 자료

또한 Anthropic 뿐 아니라 ChatGPT의 OpenAI, Gemini의 Google도 각각 올해 3월, 4월에 MCP에 대한 지원을 발표했다고 한다.

2. MCP 활용

MCP는 아래와 같이 활용이 가능하다.

내가 사용 중인 AI에 여러 도구를 연결하여 생산성 향상
내가 개발한 서비스를 AI와 손쉽게 연결할 수 있는 도구 제공
MCP를 사용할 수 있는 AI 챗봇 / 서비스 개발

이 중에서 이번 부트캠프에서는 주로 1번 활용법에 대해 교육이 진행되었다.

MCP를 통해 다른 Tool들과 AI를 연결하기

3. MCP 작동 방식

3.1. 작동 방식

MCP는 Client-Server 구조로 작동한다.

Client : AI 기반으로 작동하는 애플리케이션
- Chatbot, Editor 등 AI를 이용하는 창구
Server : MCP 서버
- 프로그램이나 데이터, 서비스 등과 소통하기 위한 인터페이스 역할
- WEB API, HTTP, SDK 등 다양한 방식으로 프로그램과 연결 가능

Client와 Server는 1:1 관계를 가져야 하며,

MCP를 여러 프로그램에서 사용하려면 각 프로그램마다 별도의 클라이언트를 연결해야 한다.

또 서버와 프로그램 사이에는 특별한 제약이 없으며

WEB API와 같은 외부 인터페이스만 제공된다면 어떤 프로그램과도 연결이 가능하다.

출처 : 부트캠프 강의 자료

3.2. MCP 서버 연결 방식

MCP 서버의 위치에 따라 연결 방식이 2가지로 나뉜다.

MCP 서버가 Local 내부에 위치 : stdio(Standard Input/Output) 연결
- 쉘 명령어처럼 텍스트를 주고받는 방식으로 연결
MCP 서버가 Local 외부에 위치 : SSE(Server-Sent Events) 연결
- 서버에서 클라이언트로 실시간 데이터를 Push 할 수 있게 해줌

출처 : 부트캠프 강의 자료

3.3. 주고받는 데이터 형식

MCP 서버와 클라이언트 간에 데이터를 주고받는 형식은 json 형식이다.

데이터 내용 중 jsonrpc는 '고정된 MPC 프로토콜 버전' 정보이고,

나머지 필드들은 호출하려는 작업과 그에 맞는 필요한 값에 따라 유동적으로 채워진다.

{
  "jsonrpc": "2.0",
  "method": "doSomething",
  "params": {"value": 42},
  "id": 1
}

4. MCP 실습

이번 부트캠프에서의 MCP 실습은 엘리스 플랫폼에서 동작하는 챗봇인 AI 헬피를 통해 진행되었다.

우측 상단에 MCP 세팅 명령어를 볼 수 있도록 메뉴를 추가해주셔서,

실습할 항목들에 대해 세팅을 어떻게 하면 되는지 쉽게 확인할 수 있었다.

메시지 입력란 하단에 플러그 모양을 클릭하면 MCP 연결을 할 수 있는 MCP Servers 세팅 팝업이 제공되고,

이름 및 연결 방식, 명령어를 입력하여 저장하여 MCP 서버 세팅이 가능했다.

엘리스 측에서 제공해준 클라우드 환경 내에서

파일 읽고 쓰기 / MCP 서버 세팅을 진행하여 실습은 모두 stdio 연결 형식으로 진행되었다.

MCP Servers 세팅 팝업

실습은 크게 3가지로 진행되었고, 마지막 실습은 3가지를 종합해서 각자의 웹 페이지를 만드는 것으로 진행했다.

4.1. Filesys

로컬 파일을 읽고, 수정할 수 있는 MCP 서버

엘리스에서 제공해준 클라우드 파일 경로에서 파일을 만들고, 목록을 보고 수정 등을 할 수 있었다.

시를 쓰게 하고 텍스트 파일로 저장을 한다던지,

svg 형식으로 그림을 그려서 저장하게 한다던지 등의 동작을 해볼 수 있었다.

~~(캡쳐를 남겨둘걸... 대화 기록 남지 않음 + API Key가 만료되어서 실제 동작 이력을 볼 수가 없다 )~~

4.2. GitHub (GitHub 계정 액세스 토큰 발급 필요)

GitHub 계정과 연동하여 사용할 수 있는 MCP 서버
- 리포지토리 생성
- 파일 업로드
- 이슈 관리

헬피에게 원하는 코드를 만들도록 명령한 후에,

그 코드를 내 GitHub 계정에 연동하여 직접 리포지토리를 만들고, 커밋 및 푸시까지 할 수 있었다.

그것도 모자라서 내가 이슈를 등록한 후에 확인 후 개선하고 닫으라고 하면

이슈 내용을 분석 후 코드를 수정해서 다시 커밋까지 해주었다.

내 코드 실력으로는 만들 수 없을 웹 게임이나 웹 사이트를 만들어 볼 수 있어서 신기했다..

MCP가 커밋하고 작성한 경우 커밋 메시지 / 코멘트 형식을 정해주니 그 내용대로 실제 작성해주었다.. 신기방기

4.3. Figma (Figma 계정 액세스 토큰 발급 필요)

Figma 계정과 연동하여 디자인 정보 읽기가 가능한 MCP 서버

내 Figma에 저장되어있는 Figma 디자인을 헬피에게 보여주고 이대로 웹사이트를 만들어 달라고 했더니

거의 유사하게 만들어주었다...

헬피 성능 이슈로 인해서 완전히 똑같은 수준까지는 아니었지만 그래도 유사도가 매우 높은 수준이랄까..?

프롬프트에 반응형 등의 옵션을 넣으면 그 내용도 포함해서 페이지를 작성해주었다.

왼쪽 : Figma 원본 / 오른쪽 : Figma 원본 토대로 헬피가 만든 사이트 (옵션으로 색상은 변경해달라고 요청했음)

5. MCP 원데이 부트캠프 수료 후기

나는 정말 AI 기능의 새발의 피 정도밖에 사용하지 않고있었구나.. 싶었다

똑똑한 챗봇 정도로만 사용해오다가 코드를 직접 만들고, 분석하고, 배포하고 개선시키는 것까지 해보니

API가 제공되는 다른 프로그램에서도 사용해보고 싶어졌다.

특히.. HTML/CSS/JS 공부하겠다고 책까지 사서 기초 공부를 했었는데

뭔가 필요가 없어진 느낌이었다.. 기획서나 디자인만 주면 알아서 뭐든 만들어주겠구나..싶고

그래도 이 기능으로 포트폴리오에 응용해 볼 생각이 들긴 해서, 아이디어를 얻었다는거에 일단 만족해보기로 했다.

이론 설명도 잘 풀어서 설명해주셨고, 실습 위주로 직접 다뤄볼 수 있는 시간이었어서 재밌게 수업을 들었던 것 같다..!

그리고 수료생들을 위해서 6월 동안 수업 2가지를 들을 수 있게 해주셔서 더 공부해볼 수 있을 것 같아 매우 Good!

엘카데미에 종종 이런 수업 기회가 생기면... 주제만 맞는다면 꼭 참석하고 싶다!

추가 제공 수업 2건!

[엘리스트랙] QA 트랙 1기 수료 후기

S2YANA — Wed, 28 May 2025 21:31:39 +0900

이 글은 엘리스트랙의 지원을 받아 작성되었습니다.

QA 트랙 1기 수료 후기 - With 엘리스트랙

- 수강 전 나의 상태

아웃소싱 QA에서 6년 정도를 일하고 개인 사정으로 퇴사 후 휴식기를 가지고,

슬슬 현업 복귀를 위해서 준비를 하려던 상태였다.

다시 아웃소싱 업체로 취업을 하고 싶진 않았고, 자사 QA나 자동화 직무를 해볼 수 있는 곳으로 취업을 하고 싶었어서

관련된 것들을 준비하려고 했었지만..

자동화에 대한 공부나, 포트폴리오 만들기를 시작하고 싶었어도 어떤 것부터 손을 대야할까 막막했고

'파이썬이 쉽다는데 관련해서 국비지원 교육같은걸 들어봐야하나..' 하고 교육을 들을만한 곳을 찾아보기 시작했다.

그러던 중 인스타그램 광고에서 엘리스트랙의 QA 트랙 광고를 보게되었다.

개발 관련 부트캠프 광고는 많이 봤었는데.. QA 직무에 대한 부트캠프는 처음이었다..!

교육 모집 막바지였던터라 우선 지원을 하고, 합격하게 되어 2025년 1월 20일부터 QA 트랙을 수강하게 되었다.

- 엘리스트랙 QA 트랙 1기 커리큘럼

수료 기간 : 2025-01-20 ~ 2025-05-20 (약 4개월)

커리큘럼 및 트랙 수강 일과 - 출처 : 고용 24 / QA 트랙 소개 페이지

QA 트랙은

8주 이론 주간 > 2주 프로젝트 주간
4주 이론 주간 > 2주 프로젝트 주간

위와 같은 형식으로 진행되었고, 이론 주간은 모두 온라인 수업으로 진행되었다.

QA와 협업 경험이 있는 백엔드 개발 출신 코치(=강사)님께서 QA 관련 이론 수업과 자동화 코드 관련 수업을 진행해주셨고,

프로젝트는 엘리스 측에서 지정해 준 같은 팀 레이서(=수강생)들과 함께 진행하게 되었다.

또한 이론 주간에는 자율적으로 스터디를 모집할 수 있었어서,

스터디에 참여하여 다른 레이서들과 학습 내용을 공유하거나, 사이드 프로젝트를 만들어보기도 하는 등의 활동을 할 수 있었다.

스터디 - 사이드 프로젝트 문서

프로젝트 - 자동화 코드 작성

- 장점 & 만족했던 부분

QA 트랙을 수강하면서 제일 크게 느꼈던 장점은 바로 실무와 가깝게 자동화 프로젝트를 경험할 수 있었던 것이다.

팀원들과 소통하면서, 또 현업 QA로 일하고 계시는 코치님께 피드백을 받으면서

현재 프로젝트 진행이 실무와 가까운지, 잘 진행되고 있는지 체크할 수 있었고

내가 어느 부분이 부족한지, 어떤 부분에 대한 강점이 있었는지 돌아볼 수 있는 시간이 되었던게 가장 크다.

또한 다양한 계기를 가지고 이 수업에 합류하게 된 다른 레이서분들과 경험을 공유하게 된 것이다.

스터디, 혹은 팀 프로젝트로 직접 만나게 된 레이서분들이 많았는데,

자신의 경험이나 사례 등을 서로 나눠 볼 수 있는 흔치 않은 기회였다.

- 수료식 및 커넥팅데이 (5/21)

5/21 수료식 날 진행된 커넥팅 데이

5/20 2차 프로젝트까지 모두 마친 후, 바로 다음날 수료식이 진행되었다.

현재 QA 현업에 계신 분들의 이야기를 들어볼 수 있었고,

그룹 멘토링 시간을 통해 직무나 취업에 관해 궁금한 점들을 직접 질문하고 답변을 들을 수 있었다.

한 곳에서 오래 일 하신 분과, 다양한 기업을 경험해 보신 분의 이야기를 모두 들어볼 수 있어서 흥미로운 시간이었다.

또한 인사담당자 분과의 커피챗도 진행되었는데, 인사담당자로써의 면접 시 어떤 시선을 갖고 계시는지,

현재 내 상황을 바라봤을 때 어떻게 내용을 정리해야할지 등의 피드백도 받아볼 수 있었다.

- 후기 작성을 마치며

이 수업을 들으면서 내가 어떤 걸 준비해야하고, 어떻게 준비해야할 지 로드맵을 받은 기분이 들었다.

뭘 준비해야할지 몰랐던 나에게는 많은 도움이 된 트랙이었다고 생각하고,

또 같은 곳을 바라보며 같이 공부했던 좋은 인연들도 만나게 된 것도 가장 큰 행운이라고 생각한다.

QA 직무에 관심이 많거나, 자동화에 대한 경험과 학습이 필요하다고 생각이 든다면

해당 트랙 수강을 추천한다..! (현재 2기 알림 신청 받고 있음)

이제 트랙 수강 중 진행한 프로젝트와 배운 내용을 기반으로 포트폴리오도 만들고, 취업 준비도 다시 진행할 예정!

약 4개월 동안 같이 수업한 코치님들과 레이서분들, 그리고 수업 진행에 도움을 주셨던 매니저님들 모두 고생 많았다는 말 전하면서

후기는 여기서 마무리!

QA 트랙 수료증

엘리스트랙 홈페이지 : https://elice.training/

엘리스트랙 QA 트랙 소개 페이지 : https://elice.training/track/qa

[250422] 6장 - CSS 필수 속성 다루기 (1) CSS의 특징 살펴보기

S2YANA — Wed, 23 Apr 2025 00:21:34 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 6장 - CSS 필수 속성 다루기 - 1
학습일 : 2025/04/22

해야할 일들이 많아져서,
n일차 커리큘럼을 따라가기보다 하루에 한 챕터씩 천천히 하기로..!

여유가 되면 두 챕터씩..?

~~월요일은 쉬어서.. 요건 토요일에 만회하기로~~

1. CSS의 특징 살펴보기

1.1. 기본 스타일 시트

기본 스타일 시트란? : 웹 브라우저들마다 기본적으로 가지고 있는 스타일 시트
- 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식
HTML 태그 자체에는 꾸밈을 담당하는 역할이나 기능이 없으나, 기본 스타일 시트의 영향을 받아 태그마다 굵기/크기 등이 다르게 표시되는 것

1.2. 적용 우선순위와 개별성

개별성이란? : 선택자 지정 방법에 따른 점수표
- 선택자 지정 방법에 따라서 개별성 점수가 상이함
- 중복 범위의 경우, 이 점수에 따라서 최종적으로 지정될 CSS 코드가 선정됨

개별성 규칙에 따른 점수 계산

< 예시 - 개별성 점수가 동일한 경우 >

개별성 점수가 동일할 경우 무조건 더 나중에 작성된 코드의 서식이 적용됨
HTML 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="6.1.css">
    <title>CSS 필수 속성 다루기</title>
</head>

<body>
    <p>p 태그입니다.</p>
</body>

</html>

CSS 코드

p {
    color: red;
}

p {
    color: blue;
}

브라우저 화면

< 예시 - 개별성 점수가 다른 경우 >

HTML 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
        <h1>h1</h1>
</body>

</html>

CSS 코드
- 위쪽 코드의 개별성 점수가 더 높기 때문에 위쪽 코드의 서식이 선택됨
- 클래스 선택자 점수(10) > 태그 선택자 점수 (1)

.headers h1 {
    color: cadetblue;
}

h1 {
    color: chocolate;
}

브라우저 화면

1.3. 상속

상속(Inherit) : 부모 요소가 가지고 있는 속성을 자식 요소가 물려받아 적용되는 현상

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <div class="box">
        <p>box 안의 p</p>
        <h6>box 안의 h6</h6>
    </div>
</body>

</html>

< CSS 코드 예시 >

부모 요소인 div의 class를 선택자로 잡아 color 속성 적용
자식 요소인 p와 h6 태그에도 해당 서식 적용됨

.box {
    color: crimson;
}

< 브라우저 화면 >

1.4. 단위

절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위
- px(pixel) - 모니터의 화면을 구성하는 사각형 1개의 크기를 의미
- CSS에서 사용할 수 있는 크기 단위 중 가장 기본적인 단위
  - 웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산됨
상대 단위 : 부모 요소 또는 웹 브라우저의 창 크기 등에 따라 상대적으로 결정되는 단위
- % : 해당 속성의 상위 요소 속성값에 대한 상대적인 크기
- em : 부모 요소의 텍스트 크기에 상대적인 크기
- rem : html 태그의 텍스트 크기에 상대적인 크기
- vw, vh : 뷰포트를 기준으로 상대적인 넓이/높이

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="6.1.4.css">
    <title>단위 (unit)</title>
</head>

<body>
    <div class="px">
        <p>px lorem</p>
    </div>
    <div class="percent">
        <p>percent lorem</p>
    </div>
    <div class="em">
        <p>em lorem</p>
    </div>
    <div class="rem">
        <p>rem lorem</p>
    </div>

</body>

</html>

< CSS 코드 예시 >

vh / vw의 경우 강의에서 다루지 않아 코드에서도 우선 생략

.px p {
    font-size: 16px;
}

.percent p {
    font-size: 50%;
    /* % : 상위 요소의 속성값에 따른 상대적 크기 >
       별다른 상위 요소 미지정 > 브라우저 기본 폰트 크기인 16px*0.5=8px */
}

.em p {
    font-size: 1em;
    /*  em : 별다른 부모 요소 미지정 > 브라우저 기본 폰트 크기인 16px*1 = 16px
        1em = 16px */
}

.rem p {
    font-size: 5rem;
    /* rem : html 태그의 텍스트 크기에 대한 상대적인 값 (최상위에 정의된 폰트 사이즈)
             현대적인 웹 브라우저는 html 태그의 텍스트 크기가 16px이므로 1rem = 16px*/
}

< 브라우저 화면 >

1.5. 색상 표기법

키워드 표기법 : 색상의 영문법을 속성값으로 사용하는 방법
- 실무에서는 사용하는 일이 적은 편
RGB 색상 표기법 : Red, Green, Blue의 색을 이용해 특정 색을 표현하는 방법
- 각 색상의 값 범위는 0~255까지 총 256개의 숫자로 표기
- 투명도(alpha)까지 사용하여 RGBA로 색상을 표기하기도 함
  - a 값은 0부터 1사이의 소숫점으로 표기하나, 앞의 0 부분은 생략 가능하여 .n으로 표기 가능
HEX 표기법 : Red, Green, Blue에 해당하는 값을 각각 16진수로 변환하여 00~ff로 나타내는 표기법
- 16진수 표기법이라고도 함
- 실무에서 가장 많이 사용하는 색상 표기법
- 값 앞에 #을 붙여서 표현

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="6.1.5.css">
    <title>색상 표기법</title>
</head>

<body>
    <p class="keyword">lorem ipsum</p>
    <p class="rgb">lorem ipsum</p>
    <p class="rgba">lorem ipsum</p>
    <p class="hex">lorem ipsum</p>
</body>

</html>

< CSS 코드 >

p.keyword {
    color: lightpink;
}

p.rgb {
    color: rgb(255, 0, 255);
}

p.rgba {
    color: rgba(255, 0, 255, .5);
}

p.hex {
    color: #8657A2;
}

< 브라우저 화면 >

[9일차] 5장 - CSS 선택자 다루기 (4) 가상 클래스 선택자 / (5) 다양한 선택자 조합

S2YANA — Sun, 20 Apr 2025 01:36:12 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 5장- CSS 선택자 다루기 - 1
학습일 : 2025/04/19

9일차도 마무리

4. 가상 클래스 선택자 사용하기

가상 클래스 선택자란?
- 요소의 상태를 이용해 선택자를 지정하는 방법
- 형식 : 기준 요소:가상 클래스 선택자{/*CSS 코드*/}
- 본 커리큘럼에서는 실무에서 자주 사용하는 가상 클래스 선택자를 추려서 정리

4.1. 링크 가상 클래스 선택자

링크 태그인 a태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법
링크 가상 클래스 선택자 예시
- :link : 한 번도 방문하지 않은 링크일 때 선택
- :visited : 한 번이라도 방문한 적이 있는 링크일 때 선택

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <a href="https://yanatelier.tistory.com/category/Web/%EC%BD%94%EB%94%A9%20%EC%9E%90%EC%9C%A8%ED%95%99%EC%8A%B5%EB%8B%A8%2014%EA%B8%B0%20-%20%20HTML%2BCSS%2B%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">link</a>
</body>

</html>

< CSS 코드 >

/* 한 번도 방문하지 않은 링크 */
a:link {
    color: red;
}

/* 한 번이라도 방문한 링크 */
a:visited {
    color: blueviolet;
}

< 브라우저 화면 >

링크 가상 클래스 선택자로 서식 적용

4.2. 동적 가상 클래스 선택자

사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법
동적 가상 클래스 선택자 예시
- :hover : 요소에 마우스를 올릴 때 해당 태그가 선택자로 지정
- :active : 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <a href="#">link</a>
</body>

</html>

< CSS 코드 >

/* 링크에 마우스를 올리고 있는 상태 */
a:hover {
    color: blue;
}

/* 링크를 왼쪽 마우스 버튼으로 누르고 있는 상태 */
a:active {
    color: orange;
}

< 브라우저 화면 >

동적 가상 클래스 선택자로 서식 적용

4.3. 입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법
입력 요소 가상 클래스 선택자 예시
- :focus : 입력 요소에 커서가 활성화되면 스타일 적용
- :checked : 체크박스가 표시되어 있으면 스타일 적용
- :disabled : 상호작용 요소가 비활성화 되어있으면 스타일 적용
- :enabled : 상호작용 요소가 활성화 되어있으면 스타일 적용

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <input type="text">
    <input type="checkbox"><label>완료</label>
    <input type="checkbox" disabled><label>미제출</label>
</body>

</html>

< CSS 코드 >

/* 입력 요소에 커서가 활성화 되면 스타일 적용 */
input:focus {
    color: red;
}

/* 체크박스가 선택되어 있으면 스타일 적용 */
input:checked+label {
    color: blueviolet;
}

/* 요소가 비활성화 되어있을 경우 스타일 적용 */
input:disabled+label {
    color: gray;
}

/* 요소가 활성화 되어있을 경우 스타일 적용 */
input:enabled+label {
    text-decoration: underline;
}

< 브라우저 화면 >

입력 요소 가상 클래스 선택자로 서식 적용

4.4. 구조적 가상 클래스 선택자

HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법
구조적 가상 클래스 선택자 예시 (E : 요소)

종류	설명
E:first-child	E 요소의 첫번째 자식 요소를 선택자로 지정
E:last-child	E 요소의 마지막 자식 요소를 선택자로 지정
E:nth-child(n)	E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택
E:nth-last-child(n)	E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택
E:nth-of-type(n)	부모 요소의 자식 요소 중 n번째로 등장하는 E 요소를 선텍
E:nth-last-of-type(n)	부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소를 선택
E:first-of-type	부모 요소의 자식 요소 중 첫번째로 등장하는 E 요소를 선택
E:last-of-type	부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소를 선택

5. 다양한 선택자 조합하기

선택자의 목적 : 스타일을 지정할 대상 요소를 선택하는 것
앞서 배운 선택자 선택 방법들은 모두 조합해서 선택 가능

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.5.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <label>성별</label>
    <input type="text" class="input">
</body>

</html>

< CSS 코드 예시 >

/* 태그 선택자와 속성 선택자를 한번에 선택하기 */
input[type="text"] {
    color: blue;
}

/* 태그 선택자와 클래스 선택자를 한번에 선택하기 */
input.input {
    background-color: beige;
}

< 브라우저 화면 >

선택자를 조합해서 서식 적용

[8일차] 5장 - CSS 선택자 다루기 (3) 가상 요소 선택자

S2YANA — Sat, 19 Apr 2025 22:27:47 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 5장- CSS 선택자 다루기 - 1
학습일 : 2025/04/19

8일차 내용까지 학습 완료..!

3. 가상 요소 선택자 사용하기

HTML 문서에 명시적으로 작성된 구성요소는 아니나, 마치 존재하는 것처럼 취급하여 선택하는 선택자 지정 방법
앞에 콜론 2개(::)를 붙여서 기준 선택자와 함께 사용
- 형식 : 기준 선택자::가상요소 선택자{/*CSS 코드*/}
- 기준 선택자 생략 시 전체 선택자가 들어간 것으로 적용
실무에서 자주 사용하는 가상 요소 선택자 2가지
- ::before
  - 기준 선택자 요소 앞(전)의 공간을 선택
- ::after
  - 기준 선택자 요소 뒤(후)의 공간을 선택
- 참고 : content 속성
  - 새로운 콘텐츠를 추가하기 위해 사용하는 속성
  - ::before / ::after 선택자와 많이 사용됨

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.3.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <a href="#">blank</a>
</body>

</html>

< CSS 코드 >

/* a 태그 앞의 가상 공간에 콘텐츠 추가 */
a::before {
    content: "<before>";
}

/* a 태그 뒤의 가상 공간에 콘텐츠 추가 */
a::after {
    content: "<after>";
}

< 브라우저 화면 >

가상 요소 선택자로 서식 적용

[8일차] 5장 - CSS 선택자 다루기 (2) 조합 선택자

S2YANA — Sat, 19 Apr 2025 22:14:39 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 5장- CSS 선택자 다루기 - 1
학습일 : 2025/04/19

2. 조합 선택자 사용하기

기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해주는 선택자 방법

2.1. 그룹 선택자

여러 선택자를 하나로 그룹 지을 때 사용
선택자와 선택자는 쉼표(,)로 구분
형식 : 선택자 1, 선택자 2,..{/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <div>
        <h2>h2 tag</h2>
        <h1>h1 tag #1</h1>
    </div>
    <p>first p tag</p>
</body>

</html>

< CSS 코드 >

h2,
p {
    color: red;
}

< 브라우저 화면 >

그롭 선택자로 서식 적용

2.2. 자식 선택자

부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용
부모 선택자와 자식 선택자는 '>' 기호로 구분
형식 : 부모 선택자 > 자식 선택자 {/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <div>
        <h1>h1 tag</h1>
    </div>
    <h1>h1 tag #2</h1>
</body>

</html>

< CSS 코드 >

/* div 하위의 h1 태그에 서식 적용 */
div>h1 {
    color: blue;
}

< 브라우저 화면 >

자식 선택자로 서식 적용

2.3. 하위 선택자

선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
선택자 간 구분은 공백으로 구분
형식 : 선택자 1 선택자 2 선택자 3...{/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <div class="box">
        <div>
            <h1>h1 tag #1</h1>
        </div>
    </div>
    <div>
        <h1>h1 tag</h1>
    </div>
    <h1>h1 tag #2</h1>
</body>

</html>

< CSS 코드 >

/* box라는 class를 가진 요소의 하위 div의 하위 요소 중 h1을 모두 선택하겠다 */
.box div h1 {
    text-decoration: line-through;
}

< 브라우저 화면 >

하위 선택자로 서식 적용

2.4. 인접 형제 선택자

앞에서 지정한 요소 바로 다음에 인접해 있는 형제 관계의 요소를 선택자로 지정
선택자와 선택자는 + 기호로 구분
형식 : 지정 요소 선택자 + 바로 다음에 인접한 요소 선택자{/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
</body>

</html>

< CSS 코드 >

/* h2에 인접한 형제 중 h3 요소를 선택 */
h2+h3 {
    color: aqua;
}

< 브라우저 화면 >

인접 형제 선택자로 서식 적용

2.5. 일반 형제 선택자

이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
선택자와 선택자는 ~기호로 구분
형식 : 이전 선택자 ~ 대상 선택자 {/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.2.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
</body>

</html>

< CSS 코드 >

/* h2 요소 뒤에 있는 형제 요소 중 h3 요소를 모두 선택 */
h2~h3 {
    background-color: cornflowerblue;
}

< 브라우저 화면 >

일반 형제 선택자로 서식 적용

[8일차] 5장 - CSS 선택자 다루기 (1) 기본 선택자

S2YANA — Sat, 19 Apr 2025 21:37:42 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 5장- CSS 선택자 다루기 - 1
학습일 : 2025/04/19

주중 컨디션 난조로.. 밀린 내용 토요일에 몰아서 하는 중..

1. 기본 선택자 사용하기

1.1. 전체 선택자

HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법
* 기호로 표시
- *{/*CSS 코드*/}

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.1.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <dl>
        <dt class="p">CSS</dt>
        <dd class="red">CSS는 Cascading Style Sheets의 약자입니다.</dd>
    </dl>
</body>

</html>

< CSS 코드 >

* {
    color: red;
}

< 브라우저 화면 >

전체 선택자로 서식 적용

1.2. 태그(Tag) 선택자

HTML 태그명으로 선택자를 지정
선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택
태그명{/*CSS 코드*/}

< HTML 태그 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.1.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <dl>
        <dt class="p">CSS</dt>
        <dd class="red">CSS는 Cascading Style Sheets의 약자입니다.</dd>
    </dl>
</body>

</html>

< CSS 코드 >

dd {
    font-style: italic;
}

< 브라우저 화면 >

태그 선택자로 서식 적용

1.3. 아이디(ID) 선택자

HTML 태그에서 사용할 수 있는 id 속성값을 이용하여 선택자를 지정하는 방법
속성값 앞에 # 기호를 붙여 구분
- #id{/*CSS 코드*/}
참고 : id 속성은 한 HTML 문서 내에서 Unique 한 값으로 사용되어야 함 (참고)

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.1.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <h1 id="h1_id">h1 tag</h1>
</body>

</html>

< CSS 코드 >

#h1_id {
    background-color: lavender;
}

< 브라우저 화면>

아이디 선택자로 서식 적용

1.4. 클래스(Class) 선택자

HTML 태그의 클래스 속성값을 이용해 선택자를 지정
속성값 앞에 .를 붙여 구분
실무에서 가장 많이 사용하는 선택자 지정 방법
참고
- class 값은 한 HTML 문서 내에서 속성 값을 중복해서 사용할 수 있음 (참고)
  - 하나의 클래스 스타일을 잘 정의하면 여러 곳에서 재사용 가능
- 한 태그에 클래스를 여러 개 지정할 수 있어서, 한 요소에 다양하게 서식 적용 가능

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.1.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <p class="undercls backcls">first p tag</p>
</body>

</html>

< CSS 코드 >

.undercls {
    text-decoration: underline;
}

.backcls {
    background-color: lemonchiffon;
}

< 브라우저 화면 >

클래스 선택자로 서식 적용

1.5. 기본 속성 선택자

HTML 태그에서 사용할 수 있는 속성과 값을 통해 선택자를 지정하는 방법
형식
- [속성]{/*CSS 코드*/}
- [속성 = 값]{/*CSS 코드*/}
특정 태그의 속성 값으로도 선택자 지정 가능
- 태그명[속성]{/*CSS 코드*/}
- 태그명[속성 = 값]{/*CSS 코드*/}
속성 값으로 요소를 선택하는 방법이므로 id, class 속성도 해당 방법으로 이용 가능

< HTML 코드 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="5.1.css">
    <title>CSS 선택자 다루기</title>
</head>

<body>
    <p class="undercls backcls">first p tag</p>
    <p class="p">second p tag</p>
</body>

</html>

< CSS 코드 >

/* class 속성을 가진 요소에만 서식 적용하기 */
[class] {
    font-size: larger;
}

/* class 속성이 p인 요소에만 서식 적용하기 */
p[class="p"] {
    font-weight: 900;
}

< 브라우저 화면 >

기본 속성 선택자로 서식 적용

※ 참고 : 문자열 속성 선택자

태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정
속성 선택 원리는 기본 속성 선택자와 비슷
- 기본 속성 선택자와 다르게 많이 사용되지 않음
참고 문서 (링크)

[7일차] 4장 - 웹 스타일링을 위한 CSS 기초 배우기 (1) CSS 문법 및 적용

S2YANA — Wed, 16 Apr 2025 22:05:19 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 4장- 웹 스타일링을 위한 CSS 기초 배우기 - 1
학습일 : 2025/04/16

7일차 CSS 시작! 어제 공부 쉬어서 주말에 보충 예정..!

CSS란?
- Cascading Style Sheets의 약자
- HTML 태그로 작성한 내용을 꾸미기 위해 사용
  - HTML이 뼈대라면 CSS는 인테리어

1. CSS 문법 살펴보기

1.1. 문법 형식

선택자와 선언부로 구분됨
- 선택자 : CSS 스타일을 적용할 HTML 태그(요소)
- 선언부
  - 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역
  - 중괄호({})안에 작성
  - 속성과 속성 값 한 쌍으로 구성
  - 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 및 적용 시킬 수 있음

CSS 선택자와 선언부

1.2. 주석

CSS도 코드에 주석을 남길 수 있음
주석 작성 방법 : /**/ 사이에 주석으로 삽입할 내용 입력
웹 브라우저에서 소스 보기로 확인 시 주석 내용이 노출되므로 보안적으로 중요한 내용을 주석에 적지 않도록 주의 필요

< 코드 예시 >

/*CSS 주석은 이런 형식으로!*/

2. CSS 적용하기

2.1. 내부 스타일 시트 사용

Internal style sheet
HTML 파일 내부에 CSS 코드를 작성하는 방법
<style> 태그의 콘텐츠로 코드를 작성
- style 태그의 위치는 문법적으로 정해진 기준이 없으나, 보통 head 태그 안에 콘텐츠로 사용
  - 장점:
    HTML 문서 해석 시 첫 줄부터 순차적으로 해석하는데, 웹 브라우저에 표시되어 사용자에게 표시되는 body 태그가 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있음
  - 단점 :
    웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로 좋지 못 함

< 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 기본 문법</title>
    <style>
        dt {
            /*내부 스타일 시트에서도 CSS 주석 사용 가능*/
            color: red;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <dl>
        <dt>CSS</dt>
        <dd>CSS는 Cascading Style Sheets의 약자입니다.</dd>
    </dl>

< 브라우저 화면>

내부 스타일 시트로 CSS 효과 적용

2.2. 외부 스타일 시트 사용

External style sheet
CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS 파일을 연결하는 방법
- 파일 확장자 : *.css
HTML 문서와 연결 시 link 태그를 사용
실무에서 주로 사용하는 방법
- 유지보수 편리 : 문서별로 / 태그별로 디자인 속성을 일일이 바꾸지 않아도 됨
- 성능적으로도 가장 우수 : 브라우저의 캐싱을 통해 파일을 불러오는 시간이 줄어듦

< 코드 예시 - HTML >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css"><!--같은 경로에 있으면 ./ 생략 가능-->
    <title>CSS 기본 문법</title>
</head>

<body>
    <dl>
        <dt>CSS</dt>
        <dd>CSS는 Cascading Style Sheets의 약자입니다.</dd>
    </dl>

< 코드 예시 - CSS >

dd {
    color: orange;
}

< 브라우저 화면 >

외부 스타일 시트로 CSS 효과 적용

2.3. 인라인 스타일 사용

Inline style
스타일을 적용할 태그의 글로벌 속성인 'style' 속성에 CSS 코드를 작성하는 방법
- 적용할 태그에 직접 CSS 코드를 작성하는 방법으로 선택자 부분 필요 X
실무에서는 특별한 경우를 제외하고 거의 사용하지 않는 방법

< 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 기본 문법</title>
</head>

<body>
    <p style="color: blueviolet;">인라인 스타일 사용한 p태그 입니다.</p>
</body>

</html>

< 브라우저 화면 >

인라인 스타일로 CSS 효과 적용

[6일차] 3장 - 실무에서 자주 사용하는 HTML 필수 태그 다루기 (10) 글로벌 속성

S2YANA — Mon, 14 Apr 2025 17:25:46 +0900

※ 참고 사항

학습 교재 : 코딩 자율학습 HTML + CSS + 자바스크립트 (길벗, 김기수 저)
6주 완성 커리큘럼을 따릅니다.
학습 강의 (수코딩 YouTube)
- [코딩 자율학습 HTML + CSS + 자바스크립트] 3장- 실무에서 자주 사용하는 HTML 필수 태그 다루기 - 5
학습일 : 2025/04/14

6일차로 HTML 마무리!

10. 태그 종류에 상관없이 사용하는 글로벌 속성

태그에 사용하는 속성에는 2가지가 존재
- 특정 태그에 종속되어있는 속성 : 종속된 태그 외 다른 태그에서는 사용 불가함
- 글로벌 속성 : 태그 종류를 가리지 않고 모든 태그에서 사용 가능
자주 사용되는 글로벌 속성 내용만 정리

10.1. class / id 속성

CSS 작업 시 태그의 class / id 속성에 지정한 값을 선택자로 이용하여 특정 요소 선택
class / id 속성의 차이점
- class : 한 HTML 페이지 내에 동일한 여러 값이 사용되어도 됨
- id : 한 HTML 페이지 내에 Unique한 값으로 사용되어야 함

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <p class="available_multi" id="must_unique"></p>
    <p class="available_multi" id="unique"></p>
</body>

</html>

10.2. style 속성

CSS 코드를 HTML 인라인으로 작성할 때 사용

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <p style="color: crimson;">임의 style 속성 적용한 p태그</p>
</body>

</html>

< 브라우저 화면 >

style 속성 적용 예시

10.3. title 속성

요소에 추가 정보를 넣을 때 사용
title 속성에 넣은 값은 요소에 마우스 hover 시 툴팁으로 표시됨

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkw0q5ULWU7IxIZlZGT9hj_Mu5jGwfCSuCIN0EQWOh9ESArdK8RZi0-e-WIKHlQ7I95ptZxnzd3RmshJd0CTxfOhER_ELfOsTK7e5mucdFPzl0lCzKYB_11nA7G7mR94yc85DqKwES3qFE/s180-c/game_keitai_ikusei.png"
        alt="게임기 이미지" title="게임기 이미지입니다.">
</body>

</html>

< 브라우저 화면 >

title 속성 적용 예시 (이미지 출처 : 이라스토야)

10.4. hidden 속성

해당 속성 적용 시 요소가 웹 브라우저에서 보여지지 않고 숨겨짐
hidden으로만 명시해도 되고, hidden="hidden"으로 명시해도 사용 가능

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <p>hidden 속성을 적용하지 않을 텍스트입니다.</p>
    <p hidden>hidden 속성을 적용할 텍스트입니다.</p>
    <p hidden="hidden">hidden 속성을 hidden="hidden"으로 적용한 텍스트입니다.</p>
</body>

</html>

< 브라우저 화면 >

hidden 속성 적용 예시

10.5. lang 속성

요소에 사용한 텍스트의 언어 코드를 지정할 때 사용
HTML 문서의 언어 코드는 html 태그의 lang 속성에 작성
- 특정 텍스트 요소만 주 언어가 다른 경우 그 요소에 lang 속성을 별도로 지정 가능

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <p lang="en">This is lang attribute text.</p>
</body>

</html>

10.6. data-* 속성

HTML4까지는 태그에서 사용할 수 있는 속성이 HTML 문법에 정해진 속성이 아니면 사용할 수 없었음
HTML5부터 data-* 속성으로 사용자가 원하는 속성을 만들어서 사용 가능
- data-{속성명으로 쓸 이름}=""
CSS와 연관해서는 잘 사용하지 않지만, Javascript와 연관되어 사용 시 유용하게 쓰일 수 있음

< HTML 코드 예시 >

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글로벌 속성</title>
</head>

<body>
    <p data-made_attribute="true" data-name="yana">내가 만든 속성으로 만들어진 p태그</p>
</body>

</html>

※ 참고 - 전체 글로벌 속성 목록

아래 문서에서 전체 글로벌 속성 목록 확인 가능

HTML5: Global attributes

xml:lang & xml:space & xml:base