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

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

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

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

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

[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

[CSS] overflow 스크롤은 없지만 이미지는 넘치게 하고 싶을 때

overflow를 사용해서 스크롤은 생기지 않지만 이미지는 넘어가게 만들어보겠습니다. 1. 예시 이미지 ① 스크롤은 없지만 이미지는 넘치는 화면 글로 설명하면 이해가 어려울 것 같아 예시 이미지를 가져와봤습니다. 표시된 부분이 가로 사이즈고 밖으로 나온 이미지가 넘친 모습입니다. 보통은 이런 상황에 가로 스크롤바가 생기지만 가로 스크롤바가 생기지 않는 것이 오늘의 최종 목표입니다. - ② 스크롤바 보통은 위의 이미지처럼 아래에 넘친 만큼 스크롤바가 나타납니다. 2. overflow body{ overflow-x:hidden; } ① overflow-x:hidden overflow-x에 hidden값을 주어서 스크롤을 나오지 않게 만들어줍니다. 여기서 중요한 것은 어디에 속성을 넣는가인데 해당 태그에 넣는..

coding/html + css · 2023. 7. 20. 07:30

coding/html + css 100