티스토리 뷰

TIL(Today I Learn)

HTML, CSS 기본기 다지기(CSS)(3)

MinsoftK 2021. 9. 29. 01:57

728x90

21.10.26 용어 수정

HTML head

7. 메타데이터 요소

메타데이터란 데이터를 설명하는 데이터를 메타데이터라고 한다. 예를 들어 책 맨 앞쪽에 책에 대한 정보들이 나열돼 있다. 이런 데이터를 설명하는 데이터를 메타데이터라고 한다.

HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.

`<title>` : 문서 제목 요소

페이지 제목은 SEO에 큰 영향을 준다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 한다. 검색 엔진 (en-US)이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문.

`<meta>`

meta 요소가 제공하는 메타데이터는 4가지 유형이 있다.

속성

뷰포트
- 뷰포트(viewport)는 현재 화면에 보이고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체 화면이라면 화면 전체)을 말합니다.
charset
- 페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 합니다.
content
- http-equiv 또는 name 또는 name 특성의 값을 담습니다.
http-equiv
- 프래그마 지시문을 정의합니다. 특성의 이름(http-equiv(alent))에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.
name
- name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.

참고: name 특성은 meta 요소에 대해 특정한 의미를 가집니다.

`<link>` : 외부 리소스 연결 요소

<!-- css 파일 -->
<link href="main.css" rel="stylesheet">

<!--  파비콘 연결시 -->
<link rel="icon" href="favicon.ico">

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

sizes 특성은 아이콘 크기를, type 특성은 연결한 리소스의 MIME을 포함. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.

`<style>` : 스타일 정보 요소

`<script>` : 외부 스크립트를 가져오는 태그

HTML <script> 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.

외부 스크립트

<script src="javascript.js"></script>

인라인 스크립트

<script>
  alert("Hello World!");
</script>

전역속성들

class, id, style, title, lang, data, draggable, hidden

CSS

선택자(Selector) : 스타일을 지정할 HTML 요소를 선택
선언 블록(declation block) : 중괄호 {} 내부의 여러 선언들을 작성
선언(declations) : 프로퍼티와 값으로 이루어진 쌍
선택자 { 하나이상의 선언 } 형태로 이루어진 하나의 Rule (혹은 Rule Set)

1. 캐스캐이딩 원칙

1.1. 스타일 우선순위

동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
적용 범위가 적을수록 우선시 된다.
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일 (태그에 스타일 속성 직접 설정)

1.2. 스타일 상속

부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
- 자식 요소에서 재 정의할 경우, 부모의 스타일을 덮어쓴다.
상속이 되지 않는 속성도 있다. (예 : 배경 이미지, 배경 색 등)

Can I use에서 브라우저 호환성을 확인하고, MDN을 통해 모르는 CSS를 익히는 습관을 들이자.

2. CSS 선택자

/* Type Selector : 일관성 있게 작성하기 위한 셀렉터.*/ 
/* 특정 요소를 선택하지 않는다.*/
h2 { 
 color : red;
}

/* ID Selector */
/* Class Selector */

3. 속성 선택자

HTML 파트

<a href="http://example.com">
Example Link(com/http)</a>

<a href="http://example.org">
Example Link(org/http)</a>

<a href="https://example.com" target="_blink">
Example Link(com/http)</a>

<a href="https://example.org" target="_blink">
Example Link(org/http)</a>

<input type="text">
<input type="submit">
<input type="reset">

CSS 파트

/* Attribute selector */
/* 1. [attr] */
a[target] {
    color : pink
}

/* 2. [attr=value] */
a[href="https://example.org"] {
    color:indigo;
}

input[type="submit"] {
    background-color:green;
}

/* 3. [attr^=value] : 부분적으로 문자가 일치하는 것. */
/* "http://"로 시작하는 애들만 골라줌 */
a[href^="http://"] { 
    color : red; 
}

/* 4. [attr$=value] */
/* ".com"으로 끝나는 애들만 골라줌 */
a[href$=".com"] { 
    color : silver;
}

/* 5. [attr==value] */
/* example을 가지고 있는 애들 전부 선택 */
a[href=="example"] { 
    color : white;
}

4. 가상 클래스 선택자

4.1. first-child, last-child (구조 의사 클래스)

HTML 파트

<ul>
    <li class="movie">Toy Story</li>
    <li class="movie">Zootopia</li>
    <li class="movie">Inside Out</li>
    <li class="movie">Coco</li>
    <li class="movie">Finding Nemo</li>    
</ul>
<ol>
    <li>Americano</li>
    <li>Latte</li>
    <li>Hot Choco</li>
</ol>

CSS 파트

/* Pseudo-Class Selector */
/* 1. first-child  */
/* ul, ol의 형제들 중에서 첫번째 자식을 찾는다. */
li:first-child {
    color: green;
}

.movie:first-child {
    font-size:42px;
}

/* 2. last-child  */
/* 3. nth-child  */
li:nth-child(3){
    color:hotpink;
}

4.2. first-of-type, last-of-type, nth-of-type (구조 의사 클래스)

HTML 파트

<section>
    <div class="movie">Toy Story</div>
    <p class="movie">Zootopia</p>
    <p class="movie">Inside Out</p>
    <div class="movie">Coco</div>
    <p class="movie">Finding Nemo</p>    
</section>

CSS 파트

/* Pseudo-Class Selector */
/* 1. first-of-type  */
/* 특정 타입에서 첫번째 자식을 찾는다. */
p:first-of-type {
    color:red;
}

/* 만약 class가 동일한 경우에는 ?*/
/* 각각 다른 타입의 첫번째 자식을 찾는다. */
.movie:first-of-type {
    color:blue;
}

/* 2. last-of-type  */

4.3. not (기타 의사 클래스)

HTML 파트

<input type="text" placeholder="name">
<input type="email" placeholder="email">
<input type="password" class="pw" placeholder="password">
<input type="submit">

CSS 파트

/* Pseudo-Class Selector */
/* not */
/* input에서 pw class만을 빼고 적용. */
input:not(.pw) {
    background-color:indianred;
}

input:not([type=password]) {
    background-color:indianred;
}

4.4. link, visited (동적 의사 클래스)

HTML 파트

<a href="http://example.com">Example Link</a>

CSS 파트

/* Pseudo-Class Selector */
/* link, visited */

/* 방문한 적이 없는 링크 */
a:link {
    color:tomato;
}
/* 방문한 적이 있는 링크 */

a:visited {
    color: yellowgreen;
}

4.5. hover, active, focus (동적 의사 클래스)

HTML 파트

<input type="button" value="클릭!">
<input type="button" value="클릭!">
<input type="button" value="클릭!">
<input type="button" value="클릭!">
<input type="button" value="클릭!">
<input type="button" value="클릭!">

CSS 파트

/* Pseudo-Class Selector */
/* hover, active, focus */

input[type=button] {
    background-color:skyblue;
    border:none;
}

input[type=button]:hover {
    background-color:teal;
    border:none;
}

/* active : 마우스가 클릭되고 있을 때. 다른 링크 규칙들보다 뒤에 배치해야 한다. LVHA 순서 * /
/* focus : Element가 선택되었을 때 */

4.6. enable, disabled, checked (상태 의사 클래스)

위와 비슷하게 outline을 활용

5. 가상 요소 선택자

5.1. before, after

HTML 파트

<ul>
    <li class="movie">Toy Story</li>
    <li class="movie favorite">Zootopia</li>
    <li class="movie">Inside Out</li>
    <li class="movie favorite">Coco</li>
    <li class="movie">Finding Nemo</li>    
</ul>
<ol>
    <li>Americano</li>
    <li>Latte</li>
    <li>Hot Choco</li>
</ol>

CSS 파트

/* 가상 클래스 선택자 
selector:___

가상 요소 선택자 
selector::___
*/

/* css로 만들어낸 가상의 요소
    before와 after는 위치의 차이
*/
.favorite::before { 
 content:'😀';
}

.favorite::after { 
 content:'😀';
}

5.2. first-letter, first-line, selection : 가상 요소 선택자

HTML 파트

<p class="lorem">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
</p>
<p class="lorem">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
</p>

CSS 파트

/* 가상 요소 선택자 */
.lorem::first-letter{
    color:red;
    font-size:30px;
}

/* before요소의 첫번째 글자가 빨간색을  적용된다. */
.lorem::before{
    content:'BEFORE'
}

/* first-line : 브라우저 기준 개행전까지가 line이다. */
/* selection : 선택된 영역이 적용된다. */

6. 선택자 결합

HTML 파트

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
    <li>리스트4</li>
</ul>
<ol>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
</ol>

CSS 파트

/* Selector Combinators 선택자 결합 */
/* 하위, 자식, 형제 선택자, 그룹화*/

/* 1. 하위 : 스페이스를 줘서 하위 태그를 가르킨다. */
ul li:last-of-type {
    color:red;
}

/* 2. 자식 */
/* 그런데 ul의 하위 자식만 고르고 싶을 때가 있다. 위와 같이 쓰면 모든 자식 li가 선택이 됨. */
ul > li:last-of-type {
    color:red;
}

/* 3. 일반 형제 선택자 결합(~) */ 
/* 코드보다 뒤에 있는 p만 적용한다. */
code ~ p {
    color:red;
}
code ~ .red {
    color:red;
}

/* 4. 인접 형제 선택자 결합(+) */
/* code 바로 뒤에 p가 오는 경우에만 적용. */
code + p {
 color:blue;
}

/* 5. 그룹화 (,) */
/* 여러 태그에 적용한다. */
p, span {
    color:red;
}

/* 6. 범용 선택자 */
* {
    color:red;
}

/* 클래스앞에 범용 선택자가 생략이 되어 있던 것. */
*.movie {
    ~~
}
/* p 다음에 오는 모든 자식들 */ 
p + * {
    ~
}
/* div 하위에 모든 자식들 */
div > * {
    ~
}

7. 상속 제어

개발자 도구에서 상속들을 편하게 확인할 수 있다.
HTML 파트

<div class="parent">
    parent
    <div class="child1">
        child1
    </div>
    <div class="child2">
        child2
    </div>
</div>

CSS 파트

/* 상속 제어하기 - initial, inherit, unset */

/* 1. initial */
/* 자식들에게 상속이 됨. */
.parent {
     color: blue;
}

/* initial을 쓰면 부모로부터 css 상속을 받지 않음 */
.child2 {
    color: initial;
    font-size:intial;
    all:intial; /* 모든 값을 상속 받지 않는다. */
}


/* 2. inherit */
.child1 {
    color:red;
}
.parent1, .parent2 {
    color:blue;
}
/* 자식이 본인의 값을 가지고 있어도 inherit을 써주면 무조건 부모의 값을 상속받는다. */
.parent2 * {
    color:inherit;
}

/* 3. unset : 상속받고 싶지 않을 때
    부모로부터 상속받을 값이 있을 때 : inherit
    부모로부터 상속받을 값이 없을 때 : initial
*/

8. 우선순위

선언된 곳
명시도 (적용범위가 적을수록 명시도가 높은 것!)
- 이기는 순서.
- !important > Inline style > ID > Class/Attribute/Pseudo Class > Type (tag) > * >inherited
- 긴박한 경우가 아니라면 !important사용하지 않는다. 찾기도 힘들고 inline style을 지양해야 하는 것과 같은 이유. 규모가 커질수록 코드 가독성도 떨어지고 유지/보수가 어렵기 때문.
코드 위치 : 나중에 선언된 것이 덮어쓴다.

728x90

저작자표시 비영리

'TIL(Today I Learn)' 카테고리의 다른 글

HTML, CSS 기본기 다지기(CSS)(5) (0)	2021.09.29
HTML, CSS 기본기 다지기(CSS)(4) (0)	2021.09.29
HTML, CSS 기본기 다지기(2) (0)	2021.09.28
HTML, CSS 기본기 다지기(1) (0)	2021.09.27
왜 CSR(Client Side Rendering)에서 SEO가 단점일까? (0)	2021.09.08

250x250

TAG more

최근에 올라온 글

링크

공지사항

기본기를 쌓는 아마추어 MinsoftK 블로그

Minsoftk

티스토리 뷰

HTML, CSS 기본기 다지기(CSS)(3)

HTML head

7. 메타데이터 요소

`<title>` : 문서 제목 요소

`<meta>`

속성

`<link>` : 외부 리소스 연결 요소

`<style>` : 스타일 정보 요소

`<script>` : 외부 스크립트를 가져오는 태그

전역속성들

CSS

1. 캐스캐이딩 원칙

1.1. 스타일 우선순위

1.2. 스타일 상속

2. CSS 선택자

3. 속성 선택자

4. 가상 클래스 선택자

4.1. first-child, last-child (구조 의사 클래스)

4.2. first-of-type, last-of-type, nth-of-type (구조 의사 클래스)

4.3. not (기타 의사 클래스)

4.4. link, visited (동적 의사 클래스)

4.5. hover, active, focus (동적 의사 클래스)

4.6. enable, disabled, checked (상태 의사 클래스)

5. 가상 요소 선택자

5.1. before, after

5.2. first-letter, first-line, selection : 가상 요소 선택자

6. 선택자 결합

7. 상속 제어

8. 우선순위

'TIL(Today I Learn)' 카테고리의 다른 글

티스토리툴바

티스토리 뷰

HTML, CSS 기본기 다지기(CSS)(3)

HTML head

7. 메타데이터 요소

<title> : 문서 제목 요소

<meta>

속성

<link> : 외부 리소스 연결 요소

<style> : 스타일 정보 요소

<script> : 외부 스크립트를 가져오는 태그

전역속성들

CSS

1. 캐스캐이딩 원칙

1.1. 스타일 우선순위

1.2. 스타일 상속

2. CSS 선택자

3. 속성 선택자

4. 가상 클래스 선택자

4.1. first-child, last-child (구조 의사 클래스)

4.2. first-of-type, last-of-type, nth-of-type (구조 의사 클래스)

4.3. not (기타 의사 클래스)

4.4. link, visited (동적 의사 클래스)

4.5. hover, active, focus (동적 의사 클래스)

4.6. enable, disabled, checked (상태 의사 클래스)

5. 가상 요소 선택자

5.1. before, after

5.2. first-letter, first-line, selection : 가상 요소 선택자

6. 선택자 결합

7. 상속 제어

8. 우선순위

'TIL(Today I Learn)' 카테고리의 다른 글

티스토리툴바

`<title>` : 문서 제목 요소

`<meta>`

`<link>` : 외부 리소스 연결 요소

`<style>` : 스타일 정보 요소

`<script>` : 외부 스크립트를 가져오는 태그