css로 html 코드를 더욱 심플하게 만들자

CSS언어의 문법을 활용하여 태그와 태그 사이에 여백(margin)을 적용할 수 있습니다.

 

<style="margin-top:40px;"> css언어를 html 태그 사이에 삽입할 수 있습니다.

<p> HTML means that Hypertext Markup Language. </p>

<p style="margin-top:40px;"> We can learn about HTML with a lot of infromation on the internet </p>

 

margin 영역

 

HTML과 CSS의 효과적 사용

html언어로 본문을 작성하고 css언어로 시각적인 효과를 높일 수 있습니다. 웹 페이지에 작성하는 text는 검색엔진이 찾고 수집하는 활동에 적합하도록 작성해야 합니다. 검색엔진이 제목을 쉽게 인식할 수 있도록 도움을 주어야 합니다. <h1></h1> 코드 등 서식이 적용되어 css의 기능을 대체할 수 있다면, 그 태그를 적극 활용하는 것이 좋습니다. 블로그 포스트를 작성할 때, 메모장 등 다른 곳에 작성한 글을 복사해서 붙여 넣기 해도 되는지 찾아보았습니다. 문제가 되지 않는다는 의견, 지양해야 한다는 의견 등 다양한 견해가 있었습니다. html을 중심으로 생각해보았습니다. 복사해서 붙여 넣기를 한다면, 브라우저와 블로그 플랫폼의 속성에 따라 코드가 복잡해질 수 있습니다.

 

특히 크롬을 이용해 티스토리 블로그 포스트를 작성할 때, &nbsp; (줄 바꿈 없는 띄어쓰기)가 텍스트의 모든 띄어쓰기마다 적용되는 경우를 흔히 볼 수 있습니다. 일반적인 인터넷 익스플로러를 사용해서 티스토리 블로그를 작성하면 된다는 의견이 있었습니다. html 코드 상에서 띄어쓰기를 몇 칸으로 하는 1칸으로 인식하기 때문에, 필요에 따라 &nbsp;를 통해 띄어쓰기를 표현합니다. 이밖에도 티스토리 포스트를 작성하고 있는 상태에서 직접 작성한 글을 복사 후 붙여 넣어 사용해보면, 폰트의 색상 등 css값이 따라오기도 합니다. 참고로 태그를 작성할 때 반드시 필요한 특수기호 < , >의 텍스트 값에 대해 알아보겠습니다.

<는 &lt;로 표현합니다. less than의 약자로서 좌측 값이 우측 값보다 더 작다고 표현할 때 쓰는 값입니다.

>는 &gt;로 greater than의 약자로서 좌측 값이 우측 값보다 크다고 표현할 때 사용합니다.

 

티스토리 포스트 작성 시 불편한 점을 해결할 수 있는 좋은 방법을 찾게 되면 공유하겠습니다.

검색엔진 최적화에 대한 중요성은 앞으로 더욱 커질 것으로 예상합니다. 정확한 태그를 사용하는 것은 정보의 질을 높이는 데 도움이 됩니다. html은 누구나 쉽게 사용할 수 있도록 설계된 언어로서 개방성이 특징입니다. 정확하게 작성되는 태그는 검색엔진에 의해 잘 수집이 될 것이고, 그 정보를 필요로 하는 여러 사람에게 쉽게 노출이 될 것입니다.

css에 대한 내용은 별도 학습 후 다루어 보도록 하겠습니다.