반응형 programming/web66 html5 pre 태그의 사용 방법 using html5 pre tag html5에서 pre 태그는 입력한 그대로의 상태를 화면에 보여준다. 일반적인 p 태그와 달리 공백과 탭, 엔터 등 사용자가 입력한 형태 그대로 화면에 출력한다. 특정한 문구나 소스코드 등의 문장을 화면에 보여주고자 할 때 pre 태그를 많이 사용하긴 하지만 지금은 그렇게 많이 사용되진 않는다. html5 pre 태그의 사용 방법 using html5 pre tag html5의 pre 태그는 독특한 기능을 가진다. 우리가 태그를 가지고 컨텐츠 등을 만들 때 화면 배치의 문제를 겪을 때 pre 태그를 그것을 상쇄한다. 무슨 말인가. pre 태그는 웹페이지를 만들거나 컨텐츠를 만드는 사용자가 작성한 것 그대로 표시를 한다. p 태그 사용시 무시되었던 엔터나 줄바꿈 탭같은 것들이 pre 태그 내에서는 그대로 .. 2022. 3. 8. html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag html5에서 br 태그는 줄바꿈을 하는 역할을 한다. 줄바꿈을 하면 사용자들이 컨텐츠를 보는 것이 편하다. br 태그가 없는 경우 문장들은 연속적으로 연결되어 나온다. p 태그와 함께 사용하면 컨텐츠의 구분과 함께 보기편한 웹페이지를 만들 수 있다. p태그가 문단을 구분한다는 점과 br 태그는 문장을 줄바꿈하는 것과는 차이가 있다. html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag p 태그와 비교되는 것 중 하나가 br 태그이다. 결론부터 쉽게 말하면 p 태그는 문단을 구분하고 br 태그는 문장을 구분한다. 우리가 블로그를 작성할 때 한 줄을 작성하고 엔터를 친 효과가 br 태그이다. 실제로는 티스토리에서 br 태그를 적용하려면 shift + Enter 이다. .. 2022. 3. 6. html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag p태그와 h태그의 관계는 html에서 컨텐츠로써 관계가 있다. p태그가 어떤 것을 설명한다면 그 어떤 것의 주제는 h태그로써 제목을 설명할 수 있다. 즉, h태그로 제목을 정하고 p태그로 제목에 대한 설명을 작성하면 된다. 보통 이것은 책의 목차를 생각하면 된다. 목차에서 설명이 추가된 것이 있다고 생각하면 이해하기 쉽다. html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag html을 이용하여 태그를 만들 때 고려할 사항이 있다. 깊게 생각할 필요는 없는 것이지만 태그의 의미에 연관이 있다. 예상되는 것이 하나가 있지만 검색엔진의 SEO이다. 물론, 이마저도 심각하게 생각할 필요는 없다. 단지, 태그의 의미 때문에 그렇다는 것이지 실제로 검색엔진의 SEO에.. 2022. 3. 5. 실시간 코드 에디터 html5 css3 스타일 적용하기 how to make code editor 이제 코드 에디터 제작의 마지막이다. 보기 편하도록 스타일을 적용해 본다. 스타일을 적용하면 좀 더 보기 편한 화면 구조를 볼 수 있다. html에서 사용자에게 보기 편한 구조를 만드는 것은 중요하다. 자기만 사용하는 것이라면 크게 상관은 없지만 말이다. 코드 에디터의 경우 미리보기를 지원해야 하기 때문에 혼자만 사용하더라도 보기 편한 구조는 만들어 두는 것이 좋다. 실시간 코드 에디터 html css 스타일 적용하기 how to make code editor 코드 에디터의 뼈대는 만들었다. 태그와 css 자바스크립트를 입력해보고 미리보기를 통해 실제로 동작하는 것까지 확인했다. 이제는 화면을 다듬어 보기 편하도록 만들면 된다. 미리보기 동작까지 만들어진 결과물은 이전 포스팅을 참고한다. 3번째 실시간 .. 2022. 3. 5. 이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음 반응형
