웹 디자인 및 프런트 엔드 개발 (HTML, CSS, Javascript)을 처음 사용하는 경우 WYSIWYG 편집기를 시작하는 방법을 선택할 수 있습니다. 이 머리 글자 어는 "당신이 보는 것"이라는 의미이며, 기본적으로 시각적 인 도구를 사용하여 웹 페이지를 만들 수있는 소프트웨어를 말합니다. 소프트웨어는 작성중인 내용에 따라 장면 뒤에 코드를 작성합니다. 가장 널리 사용되는 WYSIWYG 도구는 아마도 Adobe의 Dreamweaver 입니다.
Dreamweaver는 시작하기에 적합한 옵션입니다.
Dreamweaver를 숙련 된 많은 숙련 된 웹 전문가 와 HTML 태그 및 CSS 스타일을 부각시키는 Dreamweaver에 대해 살펴보면 간단한 사실은 플랫폼이 웹 사이트 디자인을 시작한 사람들에게 좋은 선택임을 알 수 있습니다. Dreamweaver의 "디자인보기"옵션을 사용하여 웹 페이지를 작성하기 시작할 때 그 질문에있는 한 가지 방법은 해당보기의 내용에 대해 한 줄의 줄 바꿈을 만드는 방법입니다.
HTML 텍스트를 웹 페이지에 추가 할 때 웹 브라우저는 브라우저 윈도우 또는 컨테이너 요소의 가장자리에 도달 할 때까지 텍스트를 긴 줄로 표시합니다. 이 시점에서 텍스트는 다음 줄로 넘어갑니다. 이는 Microsoft Word 또는 Google 문서 도구와 같은 모든 워드 프로세싱 소프트웨어에서 발생하는 것과 유사합니다. 한 줄의 텍스트가 수평선에 더 이상 공간이 없으면 줄 바꿈되어 다른 줄을 시작합니다. 줄 바꿈 위치를 지정하려면 어떻게됩니까?
Dreamweaver의 디자인 뷰에서 [ENTER] 키를 누르면 현재 단락이 닫히고 새 단락이 시작됩니다. 시각적으로, 이것은 두 줄이 약간의 수직 간격으로 분리되어 있음을 의미합니다. 기본적으로 HTML 단락에는 단락 하단에 적용된 패딩 또는 여백 (브라우저 자체에 따라 다름)이 해당 간격을 추가하기 때문입니다.
이것은 CSS로 조정할 수 있지만 진실은 웹 사이트 가독성 을 고려하여 단락 사이에 간격을두고 싶다는 것입니다 . 한 줄을 원하고 줄 사이에 넓은 세로 간격이 없으면 [ENTER] 키를 사용하지 않으려 고합니다. 열쇠는 그 줄이 개별 단락이되기를 원하지 않기 때문입니다.
새 단락을 시작하지 않으려는 이러한 경우 HTML에
태그를 추가합니다. 이것은 때로는
으로 쓰여집니다. 특히 모든 요소를 닫아야하는 XHTML 버전 용입니다. 꼬리말 / 그 문법은
태그가 자신의 닫는 태그를 가지고 있지 않기 때문에 요소를 스스로 닫습니다. 이 모든 것이 훌륭하지만 Dreamweaver의 디자인보기에서 작업하고 있습니다. 코드로 건너 뛰어 이러한 휴식을 추가하고 싶지 않을 수도 있습니다. 코드 뷰를 사용하지 않고 Dreamweaver에서 줄 바꿈을 추가 할 수 있기 때문에 괜찮습니다.
Dreamweaver의 디자인보기에서 줄 바꿈 추가 :
- 새 줄을 시작할 위치에 커서를 놓습니다.
- Shift 키를 누른 상태에서 [ENTER]를 누릅니다.
그게 다야! [shift] 키와 함께 [ENTER] 키를 추가하면 새 단락 대신에
가 추가됩니다. 이제 어떻게 사용되는지 알았으니 사용 장소와 사용하지 않는 위치를 고려해야합니다. HTML은 시각적 인 모습이 아닌 사이트의 구조를 만드는 것을 의미합니다. 여러 개의
태그를 사용하여 디자인 요소 아래에 수직 간격을 만들지 마십시오.
이것이 패딩과 여백에 사용되는 CSS 속성입니다.
태그를 사용하는 곳은 한 줄 바꿈 만하면됩니다. 예를 들어 우편 주소를 코딩하고 단락을 사용하기로 결정한 경우 다음과 같이
태그를 추가 할 수 있습니다.
회사 명
주소 입력란
시, 주, 우편 번호
주소에 대한이 코드는 하나의 단락이지만 시각적으로는 3 행을 개별 행에 표시하고 그 사이에 작은 공백을 표시합니다.