본문 바로가기

전체 글221

html 기본 문서 만들기 9 - 텍스트 꾸미기 html 기본 문서 만들기 9 - 텍스트 꾸미기 네 안녕하세요, 이번 포스팅에서는 텍스트를 꾸미는 방법에 대하여 알아보도록 하겠습니다. 우리가 글을 쓰다 보면 글자를 여러 방법으로 강조를 하게 됩니다. 그리고 그 글자는 문단이나 본문 전체에서 중요한 역할을 하게 됩니다. 그래서 이번 포스팅에서는 그러한 방법이 어떤 것들이 있는지 알아보도록 하겠습니다. 1. 텍스트 꾸미기 우리가 글을 작성할 때, 혹은 글을 읽다가 중요한 부분을 보게 되면 밑줄을 긋거나 그 외 여러 가지 강조표현을 합니다. html 태그 역시 여러가지 강조 표현이 가능합니다. 그렇게 하면 글이 좀 더 간결히 요약이 될 수 있어서 가독성이 매우 높아집니다. 아래의 표는 그러한 방법들에 대한 태그를 표로 나타낸 것입니다. 태그 뜻 글자를 진하.. 2023. 3. 1.
html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 네 안녕하세요, 이번 포스팅에서는 개발자가 작성한 형태 그대로 출력하는 방법에 대하여 알아보도록 하겠습니다. 우리가 어떤 작업을 수행하다 보면 분명히 본인이 작성한 형식을 그대로 고정해서 출력하고자 하는 경우가 생길 것입니다. 그럴 경우에도 특별한 방법을 써서 출력을 해주어야 합니다. 그래서 이번 포스팅에서는 그러한 방법에 대하여 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 개발자의 포맷 그대로 출력하기 : pre 태그 이용 우리가 html 태그를 입력하여 브라우저에 출력을 하면 우리가 의도했던 대로 출력이 되지 않는 경우가 많습니다. 제일 대표적인 사례가 html 문서 내에 있는 글이나 그림 등의 형.. 2023. 3. 1.
html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 네 안녕하세요, 이번 포스팅에서는 특수한 문자나 기호, 심벌 등을 입력하는 방법에 대하여 알아보도록 하겠습니다. 우리가 웹 문서를 작성할 때 그냥 일반적인 방법으로 입력이 되지 않는 글자들이 여럿 있습니다. 그럴 경우에는 특별한 방법을 이용해서 표현을 해주어야 합니다. 그래서 이번 포스팅에서는 이러한 방법이 무엇이며, 어떤 식으로 그러한 문자들을 표현할 수 있는지 알아보도록 하겠습니다. 1. 엔터티 코드로 문자, 기호, 심벌 입력하기 우리가 유니코드를 사용하기 이전에는 특수문자를 입력하기 위해서 엔터티 코드와 아스키코드를 이용을 했었습니다. 그래도 요즘은 유니코드가 많이 발전을 해서 굳이 이런 걸 쓰지 않고도 쓸 수가 있는데, 그래도 .. 2023. 3. 1.
html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기) html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기) 네 안녕하세요, 이번 포스팅에서는 웹에서 새로운 줄로 넘어가는 기능을 구현하는 개행 방법을 알아보도록 하겠습니다. 우리가 html을 다룰 때에는 그냥 엔터키만 누른다고 개행이 되는 것이 아닙니다. 특별한 태그를 써줘야 다른 줄로 넘어갑니다. 그래서 IDE 프로그램을 쓰면서 그냥 엔터를 눌러서 줄이 바뀌었다고 안심하면 안 됩니다. 그럼 지금부터 그 방법이 무엇인지 알아보도록 하겠습니다. 1. 새로운 줄로 넘어가기(개행) : br 태그 사용 우리가 어떤 글을 작성하다가 글을 다 썼거나 새 줄에서 이어 쓰고 싶을 때는 엔터키를 눌러 개행을 합니다. 그런데 html 태그에서는 그냥 엔터를 누르면 스페이스바를 누를 것과 같이 공.. 2023. 3. 1.
html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 네 안녕하세요, 이번 포스팅에서는 수평선을 웹에 표현하는 법을 알려드리도록 하겠습니다. 이 수평선은 우리가 생각보다 많이 쓰게 되는데요, 예를 들자면 한 페이지에 두 개 이상의 색이 존재하는 경우, 그 빈칸에 css를 이용하여 그 색을 채워 넣을 때도 쓰입니다. css에 대한 부분은 나중에 다뤄보도록 하겠고, 이번에는 제일 기본인 수평선을 긋는 것 부터 하도록 하겠습니다. 1. 수평선 긋기 : hr 태그 이용 html 태그를 이용하면 수평선을 그어서 구역을 나눌 수도 있습니다. 보통 대단원의 제목을 쓰고서 머리글과 본문을 나눌 때 사용하곤 합니다. 아니면 네비게이션 바 같은 걸 만들었을 때도 이런 걸 가끔 쓰기도 합니다. 아무래도 이러한 수평선을.. 2023. 3. 1.
html 기본 문서 만들기 4 - p 태그로 문단 나누기 html 기본 문서 만들기 4 - p 태그로 문단 나누기 네 안녕하세요, 이번 포스팅에서는 문단을 나누는 방법을 알아보도록 하겠습니다. 우리가 글을 쓸 때 어떤 부분이 끝나면 새로운 주제를 쓰기 위해서 새로운 문단을 만들죠? 그걸 이번에 웹에서 표현을 해보려고 합니다. 그럼 바로 시작하도록 하겠습니다. 1. 문단 나누기 : p 태그 이용 html 문서를 보게 되면 우리가 책을 보는 것처럼 여러 단락으로 나누어져 있는 걸 볼 수가 있습니다. 바로 이 단락을 나누는 태그가 p 태그입니다. 그리고 여기에 css 스타일을 적용을 하면 들여 쓰기와 내어 쓰기 등도 제어가 가능합니다. 하지만 지금은 기본적인 부분들을 배우고 있기 때문에 css에 대한 설명을 드릴 때 제가 이야기를 하도록 하겠습니다 그럼 예제 코드를.. 2023. 2. 28.
html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 네 안녕하세요, 이번 포스팅에서는 툴팁을 다는 것을 한 번 해보도록 하겠습니다. 툴팁은 아주 중요한 요소들은 아니지만, 여러분이 만드는 웹사이트가 백과사전 관련이나, 무언가를 설명해야 하는 사이트라면 반드시 필요한 요소가 됩니다. 그래서 뺄 수는 없는 요소라서 알려드리고자 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 툴팁 달기 : title 속성 이용 툴팁은 쉽게 말해서 설명문입니다. 우리가 마우스 커서를 특정 글이나 사진 등에 올렸을 때 작은 창이 하나 뜨면서 어떤 문구가 적혀있는 걸 본 적이 있죠? 그게 바로 툴팁입니다. 주로 나무위키 같은 백과사전처럼 설명을 하는 사이트들에 많이 있습니다. 그리고 이 툴팁은 title 속성을 이.. 2023. 2. 28.
html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기 html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기 네 안녕하세요, 이번 포스팅에서는 페이지 내에 뜨는 화면에 제목을 붙이는 방법을 알아보도록 하겠습니다. 전체 페이지의 기본 폰트를 조절해서 구분감을 주는 요소입니다. 그럼 시작하도록 하겠습니다. 1. 문단의 제목(장, 절, 소제목 등) 달기 : h1 ~ h6 태그 이용 이번에는 문단의 제목을 다는 방법에 대하여 볼 겁니다. 우리가 일반적으로 문서 등을 작성하게 되면 장이나 절마다 소제목을 붙여서 표시를 하죠? html 태그에서는 이 소제목을 사이즈에 따라서 체계회 할 수 있게 하는 태그를 지원을 해줍니다. 바로 태그를 이용을 하는데, 그냥 만 쓰는 게 아니라 과 같이 숫자를 써서 나타냅니다. 이렇게 까지 만들.. 2023. 2. 28.

티스토리툴바