본문 바로가기

Lect & Tip/html, css, scss24

word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!! word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!!블로그 포스팅을 하며 테이블의 크기 때문에 고민되신적 있으시죠? 내가 원하는 테이블의 크기는 딱 요 정도인데, 칼럼(TD) 안에 입력한 글자에 따라 테이블 크기가 마음대로 변경되어 버리면 참 속상합니다. 오늘은 내가 사용하고자 하는 크기에 맞게 이쁜 테이블을 구성하는 방법에 대해 살펴보겠습니다.먼저, 예제 테이블을 통해 기본 설정을 확인해보겠습니다. 두 개의 TD 값을 가지며 각각의 너비를 150px로 지정한 테이블을 만들어보겠습니다. 12345 12345 1234512345이렇게 하면, 테이블 안에 아무런 내용이 없거나 지정한 사이즈보다 길이가 작은 문자열이 입력된다면, 내가.. 2024. 10. 26.

구글 BlogSpot title 블로그타이틀+페이지타이틀 SEO 변경, google blogger 테마 html 편집 방법 Google BlogSpot의 블로그 타이틀과 페이지 타이틀을 SEO 최적화하는 방법 구글의 블로그 플랫폼 중 하나인 BlogSpot은 많은 블로거들에게 인기 있는 선택지입니다. 그러나 가끔씩 태그에 블로그 타이틀과 페이지 타이틀이 함께 표시되는 경우가 있습니다. 이는 SEO 측면에서 바람직하지 않을 수 있습니다. 이 글에서는 이 문제를 해결하고자 하는 블로거들을 위해 Google Blogger의 테마 HTML을 편집하는 방법을 제시하겠습니다. 타이틀 수정 방법 구글 BlogSpot을 이용하다보면, 태그의 내용에 임의로 "블로그타이틀+페이지타이틀"이 들어가는 경우가 생길 수 있습니다. 이는 블로그의 SEO에 부정적인 영향을 미칠 수 있습니다. 이런 상황을 해결하기 위해서는 다음과 같은 단계를 따르면 됩니.. 2024. 3. 23.

CSS 텍스트 네온사인 만드는 방법 CSS 텍스트 네온사인 만드는 방법 네온 텍스트는 웹 사이트에 멋진 미래적인 느낌을 추가할 수 있습니다. CSS와 애니메이션을 활용하면 다양한 방법으로 텍스트에 빛나는 효과를 적용할 수 있습니다. 이 포스팅에서는 CSS 텍스트 네온사인 만드는 방법을 소개하고자 합니다. 텍스트에 글로우 효과 추가 먼저 텍스트에 글로우(빛나는) 효과를 추가하는 방법부터 알아보겠습니다. 이를 위해서는 CSS의 text-shadow 속성을 사용합니다. 다음과 같이 CSS를 작성하여 글로우 효과를 만들 수 있습니다. .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px.. 2023. 10. 7.

썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 ✈ 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jQuery 가로세로 비율 웹사이트나 애플리케이션을 제작하면서 이미지의 비율이나 크기를 맞추는 것은 중요한 작업 중 하나입니다. 특히, 썸네일이나 대표 이미지와 같은 고정된 영역에 다양한 크기와 비율의 이미지를 표시해야 할 때, 그 이미지를 영역에 꽉 차게 보여주면서도 넘치는 부분을 잘라내야 할 필요가 있습니다. 이미지의 가로와 세로 비율을 고정된 영역에 맞추려면, 서버에서 이미지를 잘라내거나 리사이징하는 방법이 있습니다. 하지만 이 방법은 원본 이미지의 품질을 손상시킬 수 있기 때문에, CSS나 jQuery를 활용하여 원본 이미지를 그대로 유지하면서도 원하는 비율에 맞게 보여주는 방법을 찾아야 합니다. CSS를 활.. 2023. 10. 6.

[browser] 브라우저 렌더링 과정, css html javasccript parsing process 인터넷 주소창에 URL을 입력했을 때, 사용자가 웹 페이지를 보기까지 거치는 과정은 다음과 같습니다: 사용자가 웹 브라우저의 주소창에 URL을 입력합니다. 브라우저는 입력된 URL을 기반으로 서버의 IP 주소를 찾기 위해 DNS(Domain Name System)에게 DNS 조회 요청을 합니다. DNS는 도메인 이름을 IP 주소로 매핑해 주는 역할을 합니다. DNS는 도메인 이름을 IP 주소로 변환하여 브라우저에게 응답합니다. 브라우저는 해당 IP 주소로 서버에 HTTP 요청을 보냅니다. 이 요청은 HTTP 프로토콜을 따라 구성되며, 요청 메서드(GET, POST 등)와 헤더(요청의 추가 정보)를 포함합니다. 서버는 요청을 받고 해당하는 리소스(HTML, CSS, JavaScript 파일 등)를 찾아서 .. 2023. 7. 6.

CSS로 네온 텍스트를 만드는 방법 ✈네온 텍스트는 모든 웹 사이트에 멋지고 미래적인 느낌을 더할 수 있습니다. 저는 항상 네온사인의 마법을 좋아했고 CSS를 사용하여 다시 만들고 싶었습니다. 나는 그것을 하는 방법에 대한 몇 가지 팁을 공유할 것이라고 생각했습니다! 이 기사에서는 텍스트에 빛나는 효과를 추가하는 방법을 살펴보겠습니다. 또한 CSS와 키 프레임을 사용하여 네온사인에 다양한 방법을 살펴보겠습니다. 다음은 우리가 만들 것입니다. 텍스트에 글로우 효과 추가 먼저 텍스트를 빛나게 만들어 보겠습니다. text-shadow속성을 사용하여 CSS에서 수행할 수 있습니다.깔끔한 점 text-shadow은 쉼표로 구분하여 여러 그림자를 적용할 수 있다는 것입니다. .neonText { color: #fff; text-shadow: 0 0 .. 2021. 5. 6.

✈ CSS3 text-shadow 텍스트 쉐도우 배경 BG에도 잘 보이는 글자 국어청 인사말 퍼블리싱 작업 중인데... 2016. 9. 8. 17:35 디자이너가 원색 찬연한 BG를 깔았다. PC 화면에서라면 문제가 없지만... 반응형으로 모바일 화면이 되면, 백그라운드 이미지와 텍스트가 겹치게 되는데... 글씨가 배경 때문에 잘 안보일 수가 있다. 이럴 때 선택은 3가지다. 1. 모바일 상태에서 BG를 날려버린다. (화면이 굉장히 심심해진다.) 2. 텍스트와 BG레이어를 absolute로 띄워서 모바일 미디어 쿼리일 때는 BG레이어에만 opacity를 먹인다. (배경 흐려짐 효과) 3. BG에도 잘 보이는 글자가 되게끔 텍스트에 스트로크를 씌운다. CSS에 스트로크가 없으니 text-shadow를 응용한다. 텍스트의 css속성으로 text-shadow:#fff 0 0 2px 2p.. 2021. 1. 29.

✈ CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last 2014년에 작성했던 글입니다. 블로그를 옮기는 중이라... 쿨럭 text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의.. 2020. 9. 15.

📌[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. https://youtu.be/6NkVYitGQDM 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 ta.. 2020. 9. 4.

이전 1 2 3 다음

티스토리툴바