coderbear's log

# white-space : 공백(여백) 처리 방법 결정 속성

- 기본값 : normal

- white-space는 상속은 가능하나, 애니메이션은 불가하다.

	space bar(공백), tap(들여쓰기)	enter(줄바꿈)	자동 줄바꿈 (내용이 영역 벗어날 때)
normal	띄어쓰기 1칸 표시	띄어쓰기 1칸 표시	O (내용표시)
nowrap	띄어쓰기 1칸 표시	띄어쓰기 1칸 표시	X (그대로 출력)
pre	그대로 출력	그대로 출력	X (그대로 출력)
pre-wrap	그대로 출력	그대로 출력	O (내용표시)
pre-line	띄어쓰기 1칸 표시	그대로 출력	O (내용표시)
initial	기본값으로 설정
inherit	부모 요소의 속성값을 상속받음

ex) w3c 예시

<!DOCTYPE html>
<html>

<head>
    <style>
        p.a {
            white-space: nowrap;
        }

        p.b {
            white-space: normal;
        }

        p.c {
            white-space: pre; // html의 pre 태그와 비슷하다.
        }
    </style>
</head>

<body>

    <h1>The white-space Property</h1>

    <h2>white-space: nowrap:</h2>
    <p class="a">
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <h2>white-space: normal:</h2>
    <p class="b">
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <h2>white-space: pre:</h2> 
    <p class="c">
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

</body>

</html>

// white-space 속성별 결과 비교

Playit

This example demonstrates the white-space property. You can see the result of the different white-space properties by clicking on one of the properties on the left.

www.w3schools.com

// Tip : 참고url - https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

developer.mozilla.org

# 초기화 코드 : 브라우저마다 다르게 적용되어 있는 CSS 기본 값을 제거해주는 것

많이 사용되는 초기화 코드 링크

Eric Meyer's Reset CSS https://meyerweb.com/eric/tools/css/reset/

HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/

CSS 초기화 반대 이유

① 작업량이 많다.
초기화한 태그에 대해 적절한 모양을 재정의 해주어야 한다.
상당히 양이 많을 뿐 아니라 지루한 작업이다.

② 사이트의 성능이 저하된다.

웹브라우저에 내장된 스타일 시트를 거의 사용하지 않고
서버의 설정을 가져와 사용하므로 추가적인 서버요청이 발생한다.
이에 따라 사이트의 성능이 저하될 수 있다.

③ 꼭 모양이 같아야 하나?

웹사이트 방문자는 보통 한 가지의 웹브라우저를 사용한다.
따라서 현재의 모양이 다른 웹브라우저에서 볼 때와 다르다는 것을 알기 힘들다.
또한 다르게 나온다는 것을 안다 하더라도 그다지 중요한 문제는 아니다.

따라서 각자 어느 웹사이트를 만들지 잘 생각해서 초기화할 지 안할 지를 결정해야 한다.

// 주소 입력을 위한 address 태그

HTML 문서에서 주소를 입력하는 방법이다.

<p>태그를 사용해서 작성해도 되지만, 굳이 address 태그를 사용하는 이유는 검색엔진 때문이다.

보통 주소라던지 해당 블로그 혹은 사이트에 대한 정보는 HTML 중에서도 제일 하단에 많이 나온다.

이 부분을 footer 영역이라고 하는데, 여기에 보통 <address> 태그를 많이 사용한다.

검색엔진도 바로 이런 부분을 찾는다.

만약 어떠한 기업 주소를 인터넷에서 찾는다고 가정하면,

해당 검색엔진 알고리즘은, footer 안쪽의 address 태그를 먼저 찾는다.

// <p>와 <pre>의 차이점

<p>는 상하단에 여백이 존재한다.

아무리 줄을 바꾸고 공백을 2개 이상 추가하더라도 한 줄로 출력된다.

<pre>는 <p> 태그와 달리 내가 쓰는 대로 웹페이지에 표시한다.

공백 줄바꿈 모두 적용된다.

# text-overflow : 문자열의 넘침 현상 처리 속성

속성값 종류	설명
clip	기본값, 텍스트를 자름
ellipsis	잘린 텍스트를 생략 부호(...)로 표시
string	잘린 텍스트를 지정한 문자열로 표시 ex) div{text-overflow:"---";} 현재 firefox에서만 지원하는 기능

# 구글 웹 폰트

웹에서 내려받는 방식이기 때문에 누구나 사용 가능

① 원하는 폰트를 선택 후 우측 하단의 +Select this style을 클릭한다.

② 우측 상단의 Embed 부분을 클릭 한 후

<Link href ~>와 font-family 부분을 CSS에 복사 및 붙여넣기 해준다.

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link href=<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
>
    <style>
        h1{
            font-family: 'Lobster', cursive;

        }
    </style>
</head>
<body>
    <h1>Good morning</h1>
    <h2>Good morning</h2>
</body>
</html>

# 시맨틱 태그 : 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그

2020/07/28 - [Web/HTML] - [필기정리]Day34 - HTML 태그

[필기정리]Day34 - HTML 태그

- 크롬 내 개발자도구 : F12 누르기 - 주석 : ~에 입력 시 주석처리 된다. # p - 본문 태그 태그 설명 p(paragraph) 본문 글자, 단락 br 줄바꿈, 개행 hr 수평 줄 ex) 결과화면 # a - 앵커 태그(Anchor tag) 서로..

coderbear.tistory.com

# 형태 구조 선택자

선택자 형태	설명
:first-of-type	형제 관계 중 첫 번째로 등장하는 특정 태그 선택
:last-of-type	형제 관계 중 마지막으로 등장하는 특정 태그 선택
:nth-of-type(n)	형제 관계 중 앞에서 수열 번째로 등장하는 특정 태그 선택
:nth-last-of-type(n)	형제 관계 중 뒤에서 수열 번째로 등장하는 특정 태그 선택

ex) first-of-type 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        h1:first-of-type { color: blue; }
        h2:first-of-type { color: blue; }
        h3:first-of-type { color: blue; }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h3>Header - 3</h3>
    <h2>Header - 2</h2>
    <h1>Header - 1</h1>
</body>
</html>

ex) <body>의 자손 중 첫 번째로 등장하는 모든 형태의 태그를 선택

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        body > *:first-of-type { color: blue; }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h4>Header - 4</h4>
    <h5>Header - 5</h5>
    <h6>Header - 6</h6>
</body>
</html>

ex) first-of-type과 last-of-type 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
        h1:first-of-type { color: orange; }
        h2:first-of-type { color: orange; }
        h3:first-of-type { color: orange; }
        h1:last-of-type { color: green; }
        h2:last-of-type { color: green; }
        h3:last-of-type { color: green; }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h3>Header - 3</h3>
    <h2>Header - 2</h2>
    <h1>Header - 1</h1>
</body>
</html>

- nth-child(n)와 nth-of-type의 차이점

nth-child(n)는 모든 요소를 포함해 순서를 카운팅하나,

nth-of-type는 특정 요소만을 카운팅한다.

ex) nth-child(n) 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
	.box > p:nth-child(5){
		color:red;
	}
    </style>
</head>
<body>
	<div class="box">
		<p>1. p태그1</p>
		<span>2. span태그1</span>
		<p>3. p태그2</p>
		<span>4. span태그2</span>
		<p>5. p태그3</p>
	</div>
</body>
</html>

ex) nth-of-type 예시

<!DOCTYPE html>
<html>
<head>
    <title>Coderbear's CSS Practice</title>
    <style>
	.box > p:nth-of-type(3){
		color:blue;
	}
    </style>
</head>
<body>
	<div class="box">
		<p>1. p태그1</p>
		<span>2. span태그1</span>
		<p>3. p태그2</p>
		<span>4. span태그2</span>
		<p>5. p태그3</p>
	</div>
</body>
</html>

728x90

저작자표시

'Web > CSS' 카테고리의 다른 글

[필기정리] Day40 - CSS 문제 및 단계별 해답 (0)	2020.08.06
[필기정리] Day39 - CSS 문제 및 해답 (0)	2020.08.04
[필기정리] Day39 - float, shadow, gradient 등 (0)	2020.08.04
[필기정리] Day38 - CSS 문제 및 해답 (0)	2020.08.03
[필기정리] Day38 - CSS 선택자, overflow, position 등 (0)	2020.08.03

coderbear

[필기정리] Day40 - white space, 초기화코드, 구글 웹폰트 등

'Web > CSS' 카테고리의 다른 글

티스토리툴바