🗝️소프트웨어/🐬HTML & CSS

[css3] text-overflow - 넘치는 텍스트 블러 처리하기

text-overflow 텍스트 오버플로우는 white-space를 이용하여 줄 바꿈을 하지 않고도 한줄로 텍스트를 처리하게 하는 속성인데, over-flow가 발생하도록 강제하지 않아서 긴 줄의 텍스트가 넘어가는 것을 방지할때 사용하기 좋은 속성이다. 굳이 해당 컨텐츠에 모든 내용을 다 보여줄 필요가 없고, 다른 컨텐츠들도 같이 병행적으로 보여줘야 하는 경우가 생길때, 사용하기 좋은 옵션이다. 혼자만 사용할 수는 없고, overflow 속성이 hidden, scroll, auto 로 놓고서 whitespace 가 nowrap인 경우에 사용이 가능하다. 즉, 3가지 속성을 한번에 같이 쓴다고 생각하면 편하다. 이렇게. white-space: nowrap; overflow: hidden; text-over..

[css] 인라인, 블록 요소

인라인 요소의 경우, 블록 요소의 속성 값을 적용할 수 없기 때문에, 인라인 요소를 블록 요소처럼 사용하고 싶은 경우가 존재할 수 있다 참고로 css 선택자에서 .box::before { content : ""; display : block; width : 30px; background-color: royalblue; } 같은 경우에는 ::after, ::before 는 인라인 요소이기에 display 속성 값을 block 으로 준다면 블록 요소처럼 사용할 수 있다 결론, css 에서는 inline 요소와 block 구조에 대한 특징을 잘 알고 있어야 한다 대표적인 inline 요소는 span , a 태그이며 block 의 대표적인 요소는 div 태그를 잊지말자

자식, 하위, 인접 형제, 일반 형제 선택자

크롬브라우저에서 제공하는 기본 여백 제거하기

웹사이트마다 크로스 브라우징으로 인해서, 각기 다른 값들을 ㄱ질 수 있는데, 애플, 구글에서 서로 다른 브라우저 결과 값이 나올 수 있기에, css 에서 브라우저 기본 세팅을 초기화해야함 reset css cdn 을 가져와서 사용하려는 html에 link로 붙여넣어야(절대링크로 하는 방법을 권장) https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 bil..

온도 예측 페이지 만들기(공공 API 활용,json)

open api 활용해서 json 형식의 데이터 받아와서 차트 만들기 json데이터 예시 - hourly 요소의 time 요소 값이 필요함 필요한 open_api 정보를 정의하고 필요한 데이터는 hourly.time임 datasets은 차트 부분을 가리키는 것들로 사용 pointHoverRadius 을 통해 마우스 호버링되면 원이 커지게 됨 chart 를 쓰게 되면, 데이터 포맷팅에 맞춰서 값들을 설정하면 됨 myChart 라는 dom 에 차트를 그림(캔버스에) new Chart로 fetch 요청한 데이터를 가져와서, draw를 통해 차트를 그림 window.onload dom이 로그가 안될때를 대비하여, 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작되게 ..

[html/css] 스파르타코딩 1주차:웹개발

완성 화면 - 폰트는 구글 폰트를 활용 - 버튼, 이미지, Quote 들은 부트스트랩 활용 - 필요에 맞게 커스토마이징함 - 커버 이미지를 어둡게 처리하여, 흰색 제목이 돋보이게 구성 - 마진 처리를 여유롭게 설정하여 공간감을 갖기 위해 노력 팬클럽 화면 페이지 간단하게 구성해봄 (시간 : 20분) 코드 김승민 팬명록 닉네임 응원 댓글 응원 남기기 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom

IntelliJ 학생용 설치

IntelliJ IDEA란? IntelliJ IDEA는 모든 종류의 애플리케이션에서 Java 및 Kotlin, Scala 및 Groovy와 같은 기타 JVM 언어로 작업하기 위한 지능적인 컨텍스트 인식 IDE입니다. 또한 IntelliJ IDEA Ultimate는 강력한 통합 도구, JavaScript 및 관련 기술에 대한 지원, Spring, Spring Boot, Jakarta EE, Micronaut, Quarkus, Helidon과 같은 인기 있는 프레임워크에 대한 고급 지원 등을 통해 전 스택의 웹 애플리케이션 개발에 도움을 줄 수 있습니다. 또한 JetBrains에서 개발한 무료 플러그인으로 IntelliJ IDEA를 확장하면 Go, Python, SQL, Ruby 및 PHP를 비롯한 다른 프..

html pdf 변환

html pdf 변환하기 위해서는 html 파일이 존재해야한다 우선 필요한 html 파일을 준비한다 이후 다음 사이트에서 해당 파일을 끌어 당겨서 넣으면 끝이다 끌올하기 사용한 사이트 : https://html2pdf.com/ko/ HTML 파일 PDF로 변환 이 무료 온라인 변환기로 HTML 및 OHTML 파일을 PDF 형식으로 최대한 빠르게 변환하세요. html2pdf.com

html 주석 처리

html 을 작성하다가 설명을 덧붙이려는 경우, 태그 사이에 기술한다 jsp 주석문에서는 이런식으로 나타낸다 스크립트릿 내부에서는 // 이런식으로 주석처리 한다 두 주석문의 특징 공통점 : html의 주석문과 jsp의 주석문은 실행에 아무런 영향을 주지 않는다 차이점: html 주석문은 웹 컨테이너가 그대로 클라이언트에게 보낸 후, 브라우저는 이 부분을 주석으로 처리한다. jsp 주석문은 브라우저에 보내지지 않아 공개되지 않는다 &TIP html 주석문과 jsp 주석문은 적절하게 사용되어야 한다 jsp 문장에 대한 주석이라면 이를 jsp 주석문으로 처리하는 것이 바람직하다. jsp 문장에 대한 주석 처리를 html 주석으로 처리한다면 클라이언트가 소스보기를 수행한 경우 jsp 소스는 공개되지 않는데 그에..

html 태그 기본 정리 2

글자 태그 제목 태그 : h1 / h2 / h3 / h4 / h5 / h6 1이 가장 큰 제목 글자 태그이며 6이 가장 작다. 본문 태그 : p paragraph의 줄임말이며, 하나의 단락을 이룬다. 내용이 길어진다면, 다음과 같이 단락을 나눈다. 본문 태그 br : 줄바꿈 태그 hr : 수평줄 태그 또는 로 입력해도 무방하다. 앵커 태그 : 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그 앵커 태그안에 텍스트를 기입해야함. 앞에 내용을 쓰는 경우, 링크가 활성화 되지 않는다. 글자 형태 : b : 굵은 글자 태그 i : 기울어진 글자 태그 small : 작은 글자 태그 sub : 아래에 달라 붙는 글자 태그 sup : 위에 달라 붙는 글자 태그 ins ..