'coding/html + css' 카테고리의 글 목록

HTML이란? HTML로 시작하는 코딩 기초

왜 HTML을 배워야 할까? 위의 세 이미지의 공통점 혹시 보이시나요? 멍무리가 보이는 사이트... 들이 아니라!인스타그램, 유튜브, 그리고 이 티스토리 블로그까지 우리가 웹으로 보는 모든 사이트들은 HTML로 이루어져있습니다. HTML은 웹개발에 '기본 문법'이자, 웹의 뼈대를 만드는 중요한 언어입니다. HTML이란?HTML이란 무엇일까요? 우선 영어 풀이를 해보면 HTML이란 Hyper Text Markup Language 입니다. 웹페이지의 구조를 만드는 언어라는 뜻이에요. HTML은 프로그래밍 언어는 아니지만 웹에서 가장 중요한 기초를 담당하고 있습니다. - HyperText : 링크를 통해 연결된 텍스트 - Markup : 태그를 써서 구조를 만드는 방식 여기서 하이퍼란 하이퍼링크라는 말을 많이..

coding/html + css · 2025. 6. 3. 21:57

[HTML] 텍스트 그대로 표현되는 <pre> 태그 (줄 바꿈 그대로 표현)

줄 바꿈 등 텍스트가 그대로 표현되는 태그에 대해 알아봅시다. 태그 사용법 및 활용 여기서 줄바꿈하려면 태그를 꼭 써줘야한다. ① 보통 줄 바꿈을 할 경우원래는 줄바꿈 태그인 태그를 붙여야만실제 보이는 화면에서 줄 바꿈이 적용되어 보입니다. - See the Pen pre by ssimplay (@ssimplay) on CodePen.② 태그 사용 시 태그를 사용하면태그 안쪽에 적은 글자 표현 그대로 적용됩니다. ③ 태그 활용평소에 사용하는 태그는 아니고자주 사용하는 곳은 개인정보처리 방침 등 엄청나게 긴 설명을 적을 때 사용합니다. 긴 글들을 하나하나 태그를 넣어서 수정하는 것이 아니라 태그를 이용하면조금 더 간편하게 제작 및 유지 보수가 가능하죠.. 이상으로 텍스..

coding/html + css · 2024. 12. 20. 15:42

[CSS] 눈누 웹폰트 굵기 변경 안될 때

눈누에서 웹폰트를 가져와 적용했는데다른 굵기로는 변경이 안될 때가 있습니다. 분명 종류가 9가지나 된다고 했는데보통이랑 굵게 밖에 안될 때 해결 방법입니다. 1. 사례 ① 웹폰트 굵게 변경 안됨웹폰트를 적용한 뒤 굵은 글자로 변경하려고font-weight를 사용해봐도 변화가 없습니다. 눈누의 예시와는 확연히 다른 굵기입니다. - 눈누 웹폰트 적용 방법은 아래의 포스팅에서 확인해 주세요.[coding/html + css] - [css] 눈누 웹폰트 적용하기 [css] 눈누 웹폰트 적용하기안녕하세요. 플입니다. 오늘은 눈누에서 웹폰트를 적용해볼게요. 1. 눈누 https://noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아ssi..

coding/html + css · 2024. 12. 6. 07:30

[CSS] 배경 고정하기

css를 이용해 배경을 고정해 보겠습니다. 1. 구현 화면 확인 ① 구현 화면 배경에 귀여운 멍무리가 고정되어 있고 스크롤이 내려가도 따라오지 않는 모습이 보이시나요? 기업에서도 종종 사용하는 기법인데 이 기능을 구현해 보겠습니다. - 2. background-attachment: fixed; div{ background-attachment: fixed; } ① background-attachment [background-attachment: fixed;]를 적용해 주시면 배경화면이 고정됩니다. 기본값은 scroll이에요. https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment background-attachment - CSS: Ca..

coding/html + css · 2023. 8. 8. 07:30

[CSS] 메뉴 상단에 고정하기 (sticky)

스크롤을 내려도 헤더가 상단에 고정되어 있게 만들어봅시다. 1. 구현 모습 확인 ① 구현 화면 예시 영상을 가져왔습니다. 위의 영상처럼 스크롤을 내려도 헤더가 고정되어 있게 구현할 것입니다. - 2. position: sticky header{ position: sticky; } ① sticky 방법은 간단합니다. 태그에 sticky만 넣어주시면 됩니다. [position:sticky;] 입니다. header{ position:sticky; top:0; } ② top 설정 혹시 sticky를 넣었는데 여전히 헤더가 상단에 있지 않고 올라가나요? 중요한 것이 하나 남았습니다. 바로 위치를 설정해 주는 것입니다. 다른 position 속성과 마찬가지로 top 위치를 설정해 주시면 그 위치에 붙어있습니다. 주..

coding/html + css · 2023. 8. 4. 07:30

coding/html + css 101