강의 내용
- 인터렉티브 요소
- 스크립팅 요소
- 유저 인터렉션 속성
- 외부 스타일 시트 (External Style Sheet)
- 내부 스타일 시트 (Embedded Style Sheet)
- 인라인 스타일 시트(Inline Style Sheet)
- css 선택자
- 상속 및 우선순위 규칙
인터렉티브 요소
사용자와 상호작용을 할 수 있도록 제공하는 요소 -
<details> - 대화상자 요소,
<summary> - 보다 자세한 추가정보를 제공하는 위젯 요소,
<dialog> - details 요소 내부에 추가되는 레이블(제목) 요소 가 있다.
<body>
<!-- 다이얼로그(대화 상자) 예시 -->
<!-- open은 논리 속성 / aria-label은 dialog의 이름표 -->
<dialog open aria-label="가입안내">
<p>차별화된 회원가입 혜택</p>
<a href="/">지금 바로 만나보세요!</a>
<!-- form 태그를 div 태그로 바꿀 수 있음 -->
<form method="dialog">
<button type="button">오늘 하루 안 보기</button>
<button type="button">닫기</button>
</form>
</dialog>
</body>
<!-- 상세 및 요약 정보 제공 예시 -->
<div>
<!-- HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성 -->
<!-- 디폴트 값은 close -->
<details open>
<!-- 요약이나 레이블은 <summary> 요소를 통해 제공 -->
<summary>국민 내일배움카드</summary>
<figure>
<img src="images/learn-card.png" alt="" />
</figure>
<p>급격한 기술 발전 및 노동시장 변화에 대응하는 사회안전망 차원에서 국민 스스로 직업능력개발훈련을 실시할 수 있도록 훈련비 등을 지원받을 수 있는 카드를 의미한다.</p>
</details>
</div>스크립팅 요소
HTML 문서를 제작할 때 자바스크립트 코드를 직접 문서에 삽입하거나 외부에 별도로 작성한 JS 파일을 결하고자 할 때 script 요소를 사용
<title>스크립팅 요소</title>
<link rel="stylesheet" href="./style/card.css" />
<!-- 스크립트를 선언 위치때문에 JS가 동작하지 않는 문제가 발생 -->
<script src="./js/card.js"></script>
- 외부 스타일 시트 (External Style Sheet)
- 내부 스타일 시트 (Embedded Style Sheet)
- 인라인 스타일 시트(Inline Style Sheet)
- css 선택자
- 상속 및 우선순위 규칙
## 인터렉티브 요소
사용자와 상호작용을 할 수 있도록 제공하는 요소 -
**<span style="color:#FFBB00"><details> - 대화상자 요소,<br> <summary> - 보다 자세한 추가정보를 제공하는 위젯 요소,<br> <dialog> - details 요소 내부에 추가되는 레이블(제목) 요소 </span>**가 있다.
차별화된 회원가입 혜택
지금 바로 만나보세요! 오늘 하루 안 보기 닫기
국민 내일배움카드
```
## 스크립팅 요소
HTML 문서를 제작할 때 자바스크립트 코드를 직접 문서에 삽입하거나 외부에 별도로 작성한 JS 파일을 결하고자 할 때 script 요소를 사용
```
스크립팅 요소
카드 뒤집기
급격한 기술 발전 및 노동시장 변화에 대응하는 사회안전망 차원에서 국민 스스로 직업능력개발훈련을 실시할 수 있도록 훈련비 등을 지원받을 수 있는 카드를 의미한다.
나가기
임시저장수정하기
23.6.1 TIL
강의 내용
인터렉티브 요소
스크립팅 요소
유저 인터렉션 속성
외부 스타일 시트 (External Style Sheet)
내부 스타일 시트 (Embedded Style Sheet)
인라인 스타일 시트(Inline Style Sheet)
css 선택자
<div class="card-wrapper">
<div class="card">
<div class="card-face card-face-black"></div>
<div class="card-face card-face-white"></div>
</div>
</div> defer
스크립트가 HTML 문서 파싱이 완료된 후에 실행되도록 지정하는 속성
스크립트 파일을 로드하는 동안 HTML 파싱이 멈추지 않음
스크립트 파일은 HTML 문서 파싱이 완료된 후 순서대로 실행
defer 속성은 외부 스크립트 파일과 함께 사용
차이점
웹브라우저는 웹 문서에 자바스크립트 파일이 지정된 경우 해당 파일이 모두 다운로드 될 때까지 HTML 파싱을 중단합니다. 그러나 async와 defer를 지정하면 자바스크립트 파일 다운로드와 HTML 파싱을 동시에 진행하게 됩니다. 이때 async의 경우 자바스크립트 파일의 다운로드가 완료되면 바로 실행을 하면서 HTML 파싱을 중단하고 defer는 자바스크립트 파일의 다운로드가 완료되었더라도 바로 실행하지 않고 HTML 파싱이 끝난 후 실행한다는 차이점이 있습니다.
<title>스크립팅 요소</title>
<link rel="stylesheet" href="./style/card.css" />
<!-- defer를 선언하지 않으면 작동하지 않음 body 태그가 끝나기 전에 선언하면 제대로 작동!-->
<!-- 웹브라우저는 웹 문서에 자바스크립트 파일이 지정된 경우 해당 파일이 모두 다운로드 될 때까지
HTML 파싱을 중단 -->
<script defer src="./js/card.js"></script>
<noscript>
<p>Javascript를 지원하지 않은 환경에서는 서비스를 이용할 수 없습니다.</p>
</noscript>
</head>
<body>
<button type="button" class="flip-button">카드 뒤집기</button>
<div class="card-wrapper">
<div class="card">
<div class="card-face card-face-black"></div>
<div class="card-face card-face-white"></div>
</div>
</div>
</body>자바스크립트를 지원하지 않는 곳에 보여지는 태그
<noscript>
<p>Javascript를 지원하지 않은 환경에서는 서비스를 이용할 수 없습니다.</p>
</noscript> 
유저 인터렉션 속성
<title>유저 인터렉션 속성</title>
<link rel="stylesheet" href="./style/peak-time.css" />
<script defer src="./js/peak-time.js"></script>
</head>
<body>
<!-- h1은 키보드 포커스를 받을 수 없는 속성 tabindex="0"로 포커싱 받을 수 있음-->
<h1>유저 인터렉션 속성</h1>
<div class="voting-result-wrapper">
<button type="button" class="voting-result-button" accesskey="A">피크타임 Top6 결과 보기</button>
<div class="voting-result" hidden>
<ol>
<li>팀 11시 - VANNER</li>
<li>팀 7시 - MASC</li>
<li>팀 8시 - 다크비</li>
<li>팀 24시 - B.A.P, 탑독, 비아이지, ARGON</li>
<li>팀 13시 - BAE173</li>
<li>팀 20시 - 몬트</li>
</ol>
</div>
<div tabindex="0" class="voting-result" hidden>
<ul class="voting-result-vedio">
<li><a href="https://vod.jtbc.co.kr/player/embed/VO10679813">피크타임 1,2위 영상</a></li>
<li><a href="https://vod.jtbc.co.kr/player/embed/VO10679810" tabindex="-1">피크타임 3,4위 영상</a></li>
<li><a href="https://vod.jtbc.co.kr/player/embed/VO10679807">피크타임 5,6위 영상</a></li>
</ul>
</div>
</div>
<figure>
<img src="./images/peaktime.jpeg" alt="피크타임 매주 수요일 밤 10시 30분 방송" />
<figcaption class="user-caption" contenteditable>PEAK TIME</figcaption>
</figure>
</body>
</html>
<!-- tabindex 0 ~ / 숫자가 작은 순으로 순서대로접근 -->
<!-- <h1 tabindex="0">유저 인터렉션 속성</h1> -->외부 스타일 시트(External Style Sheet)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>외부 스타일 시트(External Style Sheet)</title>
<link rel="stylesheet" href="css/22-external-style.css" />
<style>
@import url("css/23-import-style.css");
</style>
</head>
<body>
<h1>외부 스타일 시트(External Style Sheet)</h1>
<p><link> 요소를 사용하여 별도로 생성한 CSS 파일을 HTML 문서에 연결합니다.</p>
<p><style> 요소 또는 CSS 파일 내에 @import 선언을 사용하여 별도로 생성한 CSS 파일을 HTML 문서에 연결합니다.</p>
</body>
</html>내부 스타일 시트(Embedded Style Sheet)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>내부 스타일 시트(Embedded Style Sheet)</title>
<style>
body{
margin: 40px;
background: #000;
color: #fff;
}
p{
text-shadow: 1px 1px 0 #ff0;
}
</style>
</head>
<body>
<h1>내부 스타일 시트(Embedded Style Sheet)</h1>
<p><style> 요소 내에 직접 CSS 코드를 작성하여 HTML 문서에 스타일을 적용합니다.</p>
</body>
</html>인라인 스타일 시트(Inline Style Sheet)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>인라인 스타일 시트(Inline Style Sheet)</title>
</head>
<body>
<h1>인라인 스타일 시트(Inline Style Sheet)</h1>
<p>style 속성에 직접 <span style="text-decoration: underline; font-weight: bold; color: #f00;">CSS</span> 코드를 작성하여 스타일을 적용합니다.</p>
</body>
</html>CSS 주석 및 단위
/* CSS에서 사용할 수 있는 주석 */CSS의 단위는 문자열 타입, 숫자 타입, 길이 단위 타입 등 다양한 유형이 있습니다.
- 문자열 타입 : "inherit"와 같이 CSS에서 미리 정의된 키워드나 제작자가 정의한 저작자 키워드 등 텍스트로 입력하는 속성 값이 이에 속합니다.
- 숫자 타입 : 개수 비율 등을 나타낼 수 있는 정수, 실수 값, 퍼센트 값이 이에 속합니다.
- 길이 단위 타입 : 길이 단위 타입은 상대 길이 단위 값과 절대 길이 단위 값이 있으며 상대 길이 단위 값은 특정 길이에 비율로 정해지는 값입니다.
- 기타 단위 타입 : 각도를 지정하는 "deg", "grad", "rad", "turn", 시간을 나타내는 "s", "ms", 빈도를 지정하는 "Hz", "kHz" 그리고 해상도를 지정하는 "dpi", "dpcm", "dppx"를 들 수 있습니다.
최신 CSS에서의 색상 단위는 좀 더 확대
특히, 투명 값(alpha)이나 색상, 채도, 명도 등을 지정 할 수 있는
HSL 방식 그리고 currentcolor 키워드 등이 추가
CSS에서 사용할 수 있는 색상 값은 다음과 같습니다.
- 색상명 : yellow, red 등
- transparent
- currentcolor
- 16진수 RGB 색상 값 : #fc10ab, #333
- 256 단계 색상 값 : rgb(255, 0, 0)
- 백분율(%) RGB 색상 값 : rgb(100%, 0%, 0%)
- RGBA, HSLA 색상 값
CSS 선택자
HTML
<body>
<!-- p.fancy -->
<p class="fancy align">여기는 본문입니다.</p>
<div id="resetNormalize">
<h1 class="menu">CSS 리셋</h1>
<p>CSS 리셋은 일관성 없는 다양한 브라우저의 기본 스타일을 초기화하는 목적으로 사용한답니다.</p>
<p class="fancy">브라우저 마다 서로 조금씩 다른 기본 스타일을 가져요</p>
<p>CSS Reset은 기본 스타일 대부분을 제거하고, 새롭게 스타일을 추가해요.</p>
<p class="fancy">CSS Normalize는 일관되지 않은 스타일만 제거하고 가능한 기본 스타일을 유지해요.</p>
</div>
<figure id="demo">
<img src="images/css-resets.webp" alt="" aria-describedby="resetNormalize" />
<figcaption>그림으로 이해하는 CSS 리셋</figcaption>
</figure>
<ul class="menu">
<li><a href="https://elijahmanor.com/blog/css-resets" target="_blank">원문 - Visualizing CSS Reset</a></li>
<li><a href="https://elijahmanor.com/blog/css-resets" target="_blank">원문 - Visualizing CSS Reset</a></li>
<li><a href="https://brunch.co.kr/@euid/2" target="_blank">번역 - 그림으로 이해하는 CSS 리셋</a></li>
<li><a href="./24-inline-style.html" target="_blank">번역 - 그림으로 이해하는 CSS 리셋</a></li>
<li><a href="https://elijahmanor.com/blog/css-resets" target="_blank">원문 - Visualizing CSS Reset</a></li>
<li><a href="https://elijahmanor.com/blog/css-resets" target="_blank">원문 - Visualizing CSS Reset</a></li>
<li><a href="https://brunch.co.kr/@euid/2" target="_blank">번역 - 그림으로 이해하는 CSS 리셋</a></li>
<li><a href="./24-inline-style.html" target="_blank">번역 - 그림으로 이해하는 CSS 리셋</a></li>
</ul>
</body>CSS
/* 전체 선택자 */
* {
color: inherit;
}
/* 가상요소 선택자 */
/* selection은 드래그 했을 때 변화 */
::selection {
background: #373e6a;
color: hotpink;
}
/* 태그 선택자 */
body {
font-family: "SUIT";
margin: 0;
/* light 급 굵기 */
font-weight: 300;
/* red green blue 각 두자리 */
/* #121212 #181818 세련된 검정색 */
background-color: #000000;
/* a는 알파값-투명도를 줄 수 있음 */
color: hsla(110, 100%, 100%, 1);
}
/* 클래스 선택자 */
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
/* class="fancy align" 멀티 클래스가 가능*/
.align {
text-align: center;
}
/* ul.menu - <ul> 요소 중에서 class 속성 값이 "menu"인 요소를 선택
ul .menu - <ul> 요소 내부에서 class 속성 값이 "menu"인 요소를 선택 */
ul.menu{
margin: 0;
padding-left: 0;
}
/* 아이디 선택자 - 한 번 밖에 사용 못함 */
#demo {
border: red 2px solid;
}
/* 속성 선택자 */
/* a[href$=".html"] a태그에서.html로 끝나는 것만 선택 */
.menu a[href$=".html"] {
background-color: blue;
}
/* 선택자 목록 */
.fancy, .menu {
font-size: 24px;
}
/* :가상클래스 선택자 /::가상요소 선택자 */
/* 가상요소 선택자 컨 + a 로 선택이 안됨 */
/* align 자식이지만 bf af는 붙여서 써야 만들어짐 */
.align::before {
content: "이전요소";
}
.align::after {
content: "다음요소";
}
/* 가상클래스 */
/* 구조선택자 */
/* html 에서는 0부터 시작 css 에서는 1부터 시작.. */
/* 1,2,7,8 선택 / .menu li:nth-child(odd) 홀수만 선택 */
.menu li:nth-child(-n+2),
.menu li:nth-child(n+7) {
color: yellow;
}
.menu a:hover {
border: 5px solid blue;
}
h1.menu:hover {
background-color: pink;
}선택자 종류
전체 선택자(universal selector): *
요소 선택자(Type Selector): HTML 요소 이름 (태그명)
클래스 선택자(Class Selector): .클래스명
아이디 선택자(ID Selector): #아이디명
속성 선택자(Attribute Selector):
[lang="en"] {
font-family: Helvetica;
}
a[href^="https://"] {
background: url("../assets/images/external-link.png") no-repeat 100% 0;
padding-right: 30px;
}
a[href$=".pdf"] {
font-weight: 700;
}
자손 결합자(Descendant Combinator)
.navigation li {
padding: 0;
}
.navigation .menu li{
color: #ccc;
}자식 결합자(Child Combinator)
.menu > li {
margin: 0;
}선택자 목록 (Selector List)
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}가상 요소(Pseudo Elements)
가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 적용할 수 있습니다. 예를 들어 ::first-line, ::first-letter 등의 가상 요소 선택자를 이용하면 첫번째 줄이나 첫번째 글자 등에만 스타일을 적용할 수 있습니다.
p::first-letter{
font-size: 3rem;
font-weight: 700;
}
p::first-line{
background: #000;
color: #fff;
}
::before, ::after{
content: "가상 요소";
}
::selection {
background: #373e6a;
color: #fff;
}
input::placeholder {
opacity: 0.5;
color: #aaa;
}
summary::marker {
display: none
}
::backdrop {
background: rgba(0, 0, 0, 0.5);
}MDN ::after 가상 요소 선택자
가상 클래스(Pseudo Class)
가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때 선택하여 스타일을 적용할 수 있습니다. 예를 들어 마우스를 오버한 상태를 선택하려면 :hover 키워드를 키보드 초점이 포커스 된 상태를 선택하려면 :focus 키워드를 사용할 수 있습니다.
:root {
--primary-color: #373e6a;
--secondary-color: #ccc;
--base-color: #fff;
}
button:hover {
background: var(--primary-color);
color: var(--base-color);
}
a:focus{
outline-offset: 4px;
outline: 2px solid var(--primary-color);
}
form:focus-within {
border: 1px solid var(--primary-color);
border-radius: 4px;
}
input:focus {
outline: 0;
}
/* 웹 접근성을 위해 outline: none; 말고 focus-visible 사용 */
button:focus-visible {
outline: none;
box-shadow: 1px 1px 5px var(--primary-color);
}
input:disabled {
border: 1px solid var(--secondary-color);
border-radius: 4px;
color: --secondary-color;
cursor: not-allowed;
}
input:checked {
border: 0;
outline: 2px solid var(--primary-color);
}
input:valid {
background: url("../images/checked.svg") no-repeat 100% 0 / 16px 16px;
padding-right: 36px;
}
/* input:invalid를 사용하면 자바스크립트 대신 사용할 수 있음 */
input:invalid {
background: url("../images/warning.svg") no-repeat 100% 0 / 16px 16px;
padding-right: 36px;
}
li:first-child {
margin-top: 16px 0 0 0;
}
li:nth-child(n+2) {
margin: 8px 0;
}
li:last-child {
margin-top: 0 0 16px 0;
}MDN :root 가상 클래스 선택자
MDN :disabled 가상 클래스 선택자
상속 및 우선순위 규칙
<body>
<ul class="menu">
<li><a href="/">링크1</a></li>
<li class="pick"><a href="/">링크2</a></li>
<li><a href="/">링크3</a></li>
<li><a href="/">링크4</a></li>
<li><a href="/">링크5</a></li>
</ul>
</body>body {
font-family: "SUIT";
font-weight: 700;
}
.menu {
color: gray;
font-size: 36px;
/* border속성은 상속되지 않는 속성 */
border: 5px green dashed;
}
/* menu li a 생략할 수 있는 건 생략 */
/* 가급적 댑스 생략 */
ul.menu li {
background-color: pink;
}
/* .menu li 선택자는 pick 선택자보다 힘이 셈 */
/* .menu li 일 때 노란색이 보이도록 하려면 li.pick ==> 동점일땐 마지막 선언된 css 선택 / 선택자마다 중요도가 다름*/
li.pick {
/* cascade되면서 우선순위가 바뀜 */
background-color: yellow;
}
.menu a {
color: inherit;
}CSS에서 상속은 요소에 속성 값이 따로 지정되어 있지 않은 경우 발생
이때 속성 값은 기본적으로 부모 요소의 Computed Value로 설정되며 상속되지 않는 속성의 경우는 기본적으로 속성의 초기 값 으로 설정됩니다.
명시도(Specificity) / 우선순위
여러 스타일이 겹침(Cascade) 경우, 명시도(Specificity)가 높은 선택자의 스타일이 적용
명시도(Specificity)는 선택자의 우선 순위를 결정하는 방법으로, 다음과 같은 규칙에 의해 결정됩니다.
- "A"는 아이디 선택자의 명시성 값으로, 선택자의 구성에 id가 사용된 횟수입니다.
- "B"는 클래스 선택자의 명시성 값으로, 선택자에 class가 사용된 횟수입니다.
- "C"는 요소 선택자와 가상 요소의 명시성 값으로 선택자 구성에 요소와 가상 요소가 사용된 횟수입니다.
- 전체 선택자(universal selector)는 명시성 값을 가지지 않습니다.
- 부정 선택자(Negation pseudo-class(:not)) 안에 포함된 선택자는 다른 선택자와 같은 방법으로 명시성을 계산하지만, 부정 선택자 자체는 예외적으로 명시성 값을 가지지 않습니다.(:not, :is, :where 등 예외)
- 가상 요소(Pseudo-element)는 명시성이 요소 선택자와 같고 가상 클래스(Pseudo-class)는 클래스 선택자와 명시성이 같습니다
- 결합자나 선택자 그룹은 명시성에 영향을 끼치지 않습니다.
- 최종적인 명시성 값은 A-B-C의 숫자를 연속으로 나열한 값으로, 이 숫자 값이 클수록 우선순위가 높습니다.
**!important**규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다.
암묵적인 레이블링(implicit labeling)은 HTML 폼 요소를 레이블로 묶는 방법 중 하나 폼 요소에 대한 레이블을 명시적으로 정의하지 않고, 다른 방법을 사용하여 레이블과 폼 요소를 연결합니다. 이를 통해 웹 접근성을 향상시킬 수 있다.
암묵적인 레이블링은 다음과 같은 방법으로 구현됩니다:
텍스트 컨텐츠를 사용하는 방법: 폼 요소 바로 앞에 위치한 텍스트 컨텐츠를 해당 폼 요소의 레이블로 간주합니다. 이 방법은 폼 요소와 연관된 텍스트가 시각적으로 함께 나타나는 경우에 유용합니다.
예시:
<label>
사용자 이름:
<input type="text" name="username">
</label>aria-label 속성을 사용하는 방법: aria-label 속성을 사용하여 폼 요소에 대한 설명을 제공합니다. 이 방법은 폼 요소와 연관된 텍스트를 직접 표시하지 않는 경우에 유용합니다.
예시:
<input type="text" name="username" aria-label="사용자 이름">aria-labelledby 속성을 사용하는 방법: aria-labelledby 속성을 사용하여 폼 요소와 연관된 다른 요소의 ID를 참조합니다. 참조하는 요소의 텍스트가 폼 요소의 레이블로 사용됩니다.
예시:
<label id="usernameLabel">사용자 이름:</label>
<input type="text" name="username" aria-labelledby="usernameLabel">암묵적인 레이블링은 폼 요소와 관련된 텍스트를 제공하여 사용자가 폼 요소의 목적과 기능을 이해할 수 있도록 도와줍니다. 그러나 명시적인 레이블링을 사용하는 것이 더 명확하고 안전한 방법이므로, 가능한 경우에는 폼 요소와 해당 레이블을 명시적으로 연결하는 것이 좋습니다.
tabindex 0 ~ / 숫자가 작은 순으로 순서대로 접근
-1은 접근을 허용하지 않을때
(사용 권장 x 접근성을 헤칠 수 있음)
진주링딩동🎵