우리가 웹에서 찾고 사용하는 거의 모든 웹사이트의 구조는 텍스트 파일 분류를 위한 표준화된 시스템인 HTML을 사용하여 만들어졌습니다. 페이지 나누기, 단락, 강한 글자, 기울임꼴 및 기타 기능은 모두 HTML을 사용하여 추가됩니다. 브라우저에 콘텐츠 처리 방법을 지시하는 태그를 사용함으로써 HTML은 이러한 구조를 만드는 데 도움이 됩니다.

예를 들어, Strong>bold/strong> 태그 사이에 단어를 넣어 굵게 보이도록 합니다. 여는 태그(/)는 굵게 표시할 위치를 나타내고, 첫 번째 태그(/)는 굵게 표시를 시작하려는 위치를 나타냅니다. 이는 대부분의 웹 페이지의 기초 역할을 합니다. 따라서 코딩을 배우고 있다면 여기가 시작점입니다.

HTML에 공백을 추가하는 방법

단어 사이의 단일 공백을 넘어서 브라우저에 표시하기 위해 HTML 텍스트에 입력하는 모든 공백은 무시됩니다. 결과적으로 우리는 문서에서 원하는 공백을 프로그래밍해야 합니다. HTML에서는 모든 텍스트 줄에 공백을 추가할 수 있습니다. 예를 들어, HTML 객체를 사용하여 표와 단락 내용에 공백을 삽입할 수 있습니다. HTML에는 공백에 대한 키보드 문자가 부족하므로 각 공백을 추가하려면 엔터티를 입력해야 합니다.

간단해 보일 수도 있지만 HTML에 공간을 추가하는 것은 어려울 수 있습니다. 이를 처리하는 데에는 최소한 다섯 가지 접근 방식이 있습니다.

이번 교육을 통해 우리는 많은 사례를 보게 될 것입니다. 또한 보다 정교한 형태의 공간을 활용하는 방법도 보여줍니다.

자바의 회문

이 모든 것은 CSS를 사용하지 않고도 일반 HTML로 가능합니다. 그러나 HTML에 공간을 추가하는 것은 CSS를 통해 수행하는 것이 가장 좋습니다.

ASCII 공간은 어떤 모습인가요?

공백은 ASCII 기호 20으로 표시됩니다. 그러나 이는 단지 허용되는 관행일 뿐입니다.

HTML에서 사용할 수 있는 공백에는 다섯 가지 종류가 있습니다. 그것들은 다소 구별되는 기능을 가지고 있지만 훈련받지 않은 눈에는 동일하게 보입니다.

키보드의 탭 키 누르기를 시뮬레이션하는 탭 문자는 또 다른 옵션입니다. 키보드의 Enter 키 누르기를 시뮬레이션하는 캐리지 리턴 문자도 또 다른 예입니다.

중단되지 않는 공백:

우주에서:  

엠 공간:  

얇은 공간:

표준 공간:

새 줄(반환):

탭 문자:

왼쪽은 다음을 나타냅니다. 성격 , 그리고 오른쪽은 HTML 코드.

우주에서 캐릭터의 폭은 얼마나 되나요?

공백 문자의 경우 네 가지 표준 너비가 있습니다.

표준 폭의 공간:줄 바꿈(캐리지 리턴이라고도 함)이 발생하지 않으므로 '줄 바꿈하지 않는 공백'이라고도 합니다.엠 공간:어떤 서체를 사용하든 폭이 문자 M과 동일하기 때문에 'Em'이라는 이름이 붙었습니다. ('em-dash'라는 문구를 들어본 적이 있다면 우리가 무슨 말을 하는지 알 것입니다.)우주에서:이는 서체의 문자 n과 너비가 동일하기 때문에 'En'으로 알려져 있습니다.얇은 공간:모든 공간 중 가장 좁은 공간은 마지막 선택지인 '얇은 공간'이다.

HTML의 공백 기호는 무엇을 의미합니까?

가장 널리 사용되는 HTML 엔터티입니다.

학교를 만든 사람

이 텍스트가 공백을 채우도록 하려면 텍스트를 던져보세요.

예를 들어, 구문 뒤에 두 개의 공백을 추가하고 싶지만 웹 사이트 렌더링 엔진이 자체적으로 공백 중 하나를 제거한다고 가정해 보겠습니다. 두 개의 공백을 추가하려면 다음을 입력할 수 있습니다.

공백: 그게 뭐죠?

보이지 않는 문자를 공백이라고 합니다. 그것들은 다음으로 구성됩니다:

1. 공백,
2. 탭 및
3. 줄 바꿈(캐리지 리턴, 줄 바꿈 또는 둘 다),

이것이 왜 중요한가요?

예를 들어, 이러한 문자는 워드 프로세서에서는 볼 수 없지만 텍스트의 공간과 형식에 영향을 미칩니다. 브라우저는 HTML에서 수많은 공백 문자를 단일 공백으로 압축하는데, 이는 다른 마크업 언어와 다릅니다.

이 HTML의 단어 사이에는 여러 개의 공백이 있으며 각 줄은 CRLF(캐리지 리턴, 줄 바꿈) 문자로 끝납니다. 모든 공백 문자는 브라우저에 의해 축소됩니다.

예

좋은 일에는 시간이 더 걸립니다.

산출:

공백 삽입

1. 더 많은 간격을 제공하려면 텍스트의 잘림 방지 공백 기호( )를 사용하십시오.
2. CSS 패딩 속성은 다양한 상황에서 요소 내부의 공간을 늘리는 데 사용될 수 있습니다.
3. CSS 여백 속성을 사용하면 요소 주위에 추가 공간을 추가할 수 있습니다.

줄 바꿈 없는 공백이 유용하기는 하지만 과도하게 사용하면 안 됩니다. 그렇게 하면 자료가 브라우저에 표시되는 방식을 방해할 수 있기 때문입니다. 또한 웹 페이지에서 요소를 들여쓰거나 가운데에 배치하는 등 스타일 목적으로 줄바꿈 없는 공백을 사용하지 마세요. 대신 스타일 요구 사항은 CSS를 통해 처리되어야 합니다.

엔터티 외에도 HTML은 인접한 수많은 공백에 대해 다음과 같은 추가 엔터티도 지원합니다.

문자 엔터티  는 공백을 나타내는 데 사용됩니다. En은 8픽셀, 즉 em(16픽셀) 너비의 1/2에 해당하는 측정 단위입니다.

콘텐츠 사이의 공백에 대한 구문은 다음과 같습니다.   다음은 HTML &ensp 엔터티를 사용하는 방법에 대한 예입니다.

다음은 공간 엔터티에 대한 예입니다.

산출:

  엔터티는 위의 예에서 HTML에 공백을 추가하는 데 사용되었으며 너비는 8픽셀입니다. 인근 여러 위치에서도 사용할 수 있습니다.

서식 및 간격 유지

지정된 서식과 간격을 유지하려는 경우 다음 두 가지 선택 사항이 있습니다.

1. HTML 형식 및 공백 추가
2. 사용하여

    tag.

'pre' 태그 활용

이러한 결과는 교체로 인해 발생합니다.

에 대한 태그

 tag:

예

 pre> Good things take more time 

산출:

내 모니터 화면이 얼마나 큰데

예,

 tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn&apos;t always the best option. HTML spacing is a more popular method.</pre>

HTML 서식 및 공백 추가

대안으로 다음과 같은 HTML 요소와 기호를 포함할 수 있습니다.

좋은 일이 있을 거예요

시간이 더 걸립니다.

산출:

줄 바꿈이 필요합니다.
요소.

중단되지 않는 공백:

브라우저는 줄 바꿈 방지 공백 문자()가 추가된 공백을 축소하지 않습니다.

또한 이름에서 알 수 있듯이 브라우저가 두 단어를 분리하는 것을 방지합니다.

좋은 일에는 시간이 더 걸립니다.

산출:

이 모델에서는 텍스트 시작 부분에 공백 10개가 추가됩니다. 다른 하나는 ' 사이에 놓입니다. 걸립니다 '는 공간 제한으로 인해 문장이 끝날 때 분리되지 않습니다.

패딩 속성

CSS padding 속성을 사용하면 요소의 내부 공간이 늘어납니다.

위쪽, 오른쪽, 아래쪽 및 오른쪽에서 시작하여 1에서 4까지의 값을 사용합니다.

그만큼 'div' 요소의 모든 측면에 20픽셀의 패딩이 있습니다.

long에서 int로 자바

 Inner spacing is 20px with a div attribute 

산출:

마진 속성

1. CSS 여백 속성을 사용하면 요소 주위에 추가 공간이 추가됩니다.
2. 위쪽, 오른쪽, 아래쪽 및 오른쪽에서 시작하여 1에서 4까지의 값을 사용합니다.

그만큼 'div' 요소의 모든 측면에 40픽셀의 여백이 있습니다.

 Outer spacing is 20px using the div and margin attribute 

산출:

패딩 대 여백

1. 패딩과 마진은 모두 요소의 공간을 늘립니다.
2. 패딩은 요소의 구성 요소로 간주되는 공백을 남깁니다.
3. 여백이 생성된 공간은 요소의 경계 외부에 존재하는 것으로 간주됩니다.
4. 웹사이트의 클릭 영역, 배경색 및 기타 속성은 이러한 변형의 영향을 받습니다.

HTML에 공백을 추가하는 것은 스페이스바를 계속 누르는 것만큼 간단하다고 믿을 수 있습니다. 그러나 그것은 일이 작동하는 방식이 아닙니다. 스페이스바를 두 번 이상 눌러도 텍스트 문서에서처럼 근처에 공백이 추가되지 않습니다. HTML에서 이 작업을 수행하면 브라우저는 근처의 모든 공백을 하나로 결합합니다. HTML에서 여러 공백을 사용할 때 어떤 일이 발생하는지 보여주기 위해 예를 살펴보겠습니다.

따라서 스페이스바를 여러 번 사용한 후에는 공백을 더 추가할 수 없습니다.

산출:

위의 예에서 볼 수 있듯이 HTML에서 스페이스바를 반복적으로 누르면 웹페이지에 수많은 연속 공백을 삽입하려고 합니다. 그러나 브라우저는 인접한 여러 공백을 단일 공백으로 렌더링하고 구성 요소 앞, 뒤, 외부의 공백을 무시합니다. 이 현상을 공백 붕괴라고 합니다. 공백 축소가 때때로 짜증스러울 수 있지만 HTML과 CSS(계단식 스타일 시트) 모두에 공백을 더 추가하는 몇 가지 기술이 있습니다.

&

문자 엔터티  는 전각 공백을 나타내는 데 사용됩니다. 16픽셀인 em의 너비는 emsp와 동일합니다.

텍스트의 전각 공백 구문은 다음과 같습니다.   다음은 HTML &emsp 엔터티를 사용하는 방법에 대한 예입니다.

다음은 em공간 엔터티의 예입니다.

산출

  엔터티는 위의 예에서 HTML에 공백을 추가하는 데 사용되었으며 너비는 16픽셀입니다. 인접한 여러 공간에서도 사용할 수 있습니다.

&얇은

문자 엔터티는 종종 좁은 공간으로 알려진 얇은 공간을 나타내는 데 사용됩니다. em의 1/6은 &의 너비입니다.

Java를 int로 변환

얇은 공백은 구문의 내용 사이에 기록됩니다. 다음은 HTML 엔터티를 사용하는 방법의 예입니다. ' '

이것은 얇은 공간 실체의 예입니다.

산출

위의 예에서는 HTML에 얇은 공백을 추가하기 위해 엔터티가 사용되었으며 너비는 em의 1/6입니다. 또한 인접한 여러 공간에서도 사용됩니다.

아래는 'Hi'의 ASCII 아트입니다. # # ##### # # # ##### # # # # # # # # #####

산출:

공백 활용의 장점

확장된 콘텐츠 명료성:고객이 우리 사이트에 있을 때 계속해서 정독할 동기를 부여받기 위해 진행 중인 위치를 확인할 수 있는 옵션이 있어야 합니다. 솔직히 말해서 구절 사이와 텍스트 및 그림 블록 주변의 공백은 개인이 읽고 있는 내용을 이해하는 데 도움이 되며 일반적으로 우수한 클라이언트 경험에 기여합니다.더 많은 협업:우리가 진짜라고 할 수 있습니까? 손님은 지역을 정독하는 동안 확실히 서두르고 공백이 많으면 손님의 속도를 늦추는 중단을 방지하여 연결이 증가합니다. 실제로 항목 주위에 약간의 쿠션이 있어도 사이트의 특정 영역을 알아볼 수 있습니다. Human Elements Worldwide가 주도한 연구에 따르면 공백은 인지 능력을 거의 20% 증가시킵니다.CTA(Call to Action) 기능을 갖춘 역량:때로는 무언가를 돋보이게 만드는 가장 확실한 방법은 사물을 더 훌륭하게 만드는 것입니다. 그림을 더 크게 만들거나 버튼을 더 크게 만들 수 있습니다. 그럼에도 불구하고 공백으로 항목을 포함하는 것도 비슷하게 실행 가능합니다.깨끗한 사이트는 주목할만한 사이트와 같습니다.우리 사이트의 초기 느낌은 매우 중요합니다. 엄청나게 강력한 디자인, 매우 다양한 계획 - 이 많은 수의 구성 요소는 사이트에 인상을 더합니다. 그러나 공백은 예술성과 수완을 보여주기 때문에 특히 중요합니다. 공백은 사이트를 노출시키거나 조정하지 않습니다. 아무리 긴 공백을 올바른 방식으로 활용하더라도 사이트에 세련미와 널리 보급된 느낌을 더할 것입니다.균형 만들기:공백이 너무 적으면 사이트 이미지와 관련하여 필요하지 않은 특성인 혼란, 무질서 및 흔들림이 발생합니다. 그리고 다시 말하지만, 많은 공백은 콘텐츠가 없고 클라이언트 방향이 없다는 것을 의미할 수 있습니다. 핵심은 계획을 조정하고 단순한 개방성과 더욱 발전된 클라이언트 경험을 위해 콘텐츠 덩어리를 분리하는 놀라운 도구로 공백을 활용하는 것입니다.구분 기호로 사용됩니다.공백은 계획에서 관련 없는 구성 요소를 격리합니다. 이는 그림이나 디자인을 서로 분리하는 데 활용되는 경향이 있으며 일반적인 시각적 형식에서 작동합니다. 합법적인 공백을 활용하면 생각과 설득력 있는 계획이 보다 명확하게 일치할 수 있습니다.

공백이 왜 중요한가요?

디자이너로서 제 생각에는 공백은 좋은 디자인의 기본 구성 요소입니다. 디자이너들은 '공백'이라는 용어를 사용할 때 네거티브 스페이스, 즉 컴포지션의 조각 사이의 공간을 지칭합니다. 아무 것도 표시되지 않은 페이지의 그래픽, 여백 및 여백 사이의 공백입니다. 열, 텍스트 줄, 그림 사이의 공간으로 눈에 시각적 호흡 공간이 제공됩니다.

공백이 디자인의 중요한 구성 요소인 데는 설득력 있는 이유가 있습니다. 이는 당사 웹사이트의 디자인에 혁명을 일으킬 수 있으며 적절하게 적용할 경우 여러 가지 이점을 제공할 수 있습니다. 우리는 눈을 즐겁게 하고 독자들이 계속해서 읽을 수 있도록 격려하는 레이아웃을 제작하고 만들어야 합니다. 웹을 디자인할 때 클라이언트에게 환상적인 제품을 제공하는 것이 최우선이라는 점을 지속적으로 명심하는 것이 중요합니다.

공백은 독자를 한 요소에서 다른 요소로 안내하고, 조화와 균형을 만들고, 디자인 브랜드를 만드는 데 사용될 수 있습니다. 우리의 주요 목표는 웹사이트를 간단하고 명확하게 만들고 사용자가 좋아하고 가치 있게 여기는 콘텐츠를 제공하는 것입니다. 공백은 단순한 '빈' 공간이 아닙니다. 이는 페이지의 항목이 존재할 수 있도록 하는 디자인 기능입니다. 이 지역은 균형을 이루고 아름다운 디자인이 존재한다는 사실을 지속적으로 일깨워주는 역할을 합니다. 명확한 메시지를 전달하기 위해 텍스트와 그래픽이 너무 많은 레이아웃을 만들 필요는 없습니다.