웹 UI개발 정리[틀린 것만 복습| html ~css(4)](가상, 선택자, 케스케이딩 등)
<b> : bold, 글자 굴게
<i> : italic, 이태릭체로 기울게
<u> : underline, 밑줄
<s> : strike, 글자 중간 줄 ㅡ> 아
<dl>태그
dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.
<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다릅니다.
<ul>, <ol>은 항목을 단순히 나열하는 구조지만,
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
- <dt> : 용어를 나타내는 태그
- <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
type="submit|reset|image|button"
<form action="./test.html">
메시지: <input type="text" name="message"><br>
<input type="submit">
<input type="reset">
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">
</form>
submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.
- submit : form의 값을 전송하는 버튼
- reset : form의 값을 초기화하는 버튼
- image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
- button : 아무 기능이 없는 버튼
시멘틱 마크업 이란?
시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다.
시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.
<em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.
<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나
삭제가 되었다는 의미를 지닙니다.
div,h1-6,p,ul,li,table ....블럭 라벨요소
span,i,img,em,strong ,a 인라인 라벨요소
<CSS>
선택자의 조합
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
첫 번째는 요소와 클래스를 조합한 경우입니다.
이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용됩니다.
두 번째는 다중 클래스의 경우입니다.
이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다.
마지막은 id와 class를 조합한 경우입니다.
이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다.
속성 선택자
단순 속성으로 선택
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.
위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드입니다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.
바로 위 HTML 코드에는 3개의 <p>가 있습니다.
그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까요?
먼저 예측을 하시고 직접 실습을 하는 게 좋습니다.
p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다.
p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다.
두 규칙 모두 속성의 값은 상관하지 않습니다.
정확한 속성값으로 선택
정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택합니다.
선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됩니다.
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용됩니다.
부분 속성값으로 선택
부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.
- [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
- [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
- [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
- [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }
위의 코드에서는 모두 class 속성값으로 "color"를 선택합니다.
요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같습니다.
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
p[class$="color"] { font-style: italic; }
</style>
</head>
<body>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
</body>
</html>

가상클래스: 미리 정의해 놓은 상황에 적용되도록 약속되어 보이지 않는 클래스.
:active
:hover
:nth-child()
:nth-of-type
콜론:으로 표시..가상클래스랍니다.
a와 관련된 가상클래스
a:link
a:visited
a:focus
a:hover
a:active
가상 요소(pseudo element)
가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.
가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다.
선언 방법은 가상 클래스와 같게 콜론을 사용하며,
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.
::pseudo-element {
property: value;
}
강의에서는 가상 클래스와 마찬가지로 기본적인 가상 요소만 설명해 드리고 마치도록 하겠습니다.
다른 가상 요소들에 대한 자세한 내용은 아래 링크를 참고해주세요.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
- :before : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 삽입
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }
before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 합니다.
실제 HTML 코드에는 나타나지 않지만, before와 after가 어떻게 동작하는지 이해를 돕기 위해 코드를 아래와 같이 변경했습니다. ㅡ> [문장 앞에 ###이, 문장 뒤에 !!!가 추가된 것을 확인할 수 있다.]
<p>
<before>###</before>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<after>!!!</after>
</p>
눈에 보이지 않지만, 내부에서 이처럼 요소가 생성됩니다.
first-line과 first-letter도 마찬가지로 아래 코드와 같은 것으로 생각하시면 됩니다.
first-line은 출력되는 여러줄의 글자중 첫 줄만.
first-letter은 첫글자만.
<p>
<first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
<first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>
위와 같이 구체성은 4개의 숫자 값으로 이루어져 있습니다.
값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.
구체성은 아래의 규칙대로 계산됩니다.
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다. (*)
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
인라인 스타일
인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다.
important
important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.
important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.
상속되는 속성
상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아닙니다.
아직 속성에 대해 다 배우지는 않았지만, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 계시면 됩니다.
상속되는 속성의 구체성
위 코드에서는 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용해 color: gray를 선언했습니다.
전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 입니다.
그렇다면 <em>에는 어떤 color가 적용될까요?
color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문입니다.
ㅡ> 상속된 CSS는 구체성을 가지지 못하기 때문에 구체성을 가진 전체 선택자의 스타일이 적용이된다
캐스케이딩

https://www.boostcourse.org/web344/lecture/33517?isDesc=false
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org