글자 수 초과시 (...) 표시하기 HTML 요소 크기에 비해 텍스트 길이가 길 때, (...)으로 표시하는 CSS속성으로 다음과 같다. text-overflow text-overflow : clip | ellipsis | string clip : (...) 생략 문자를 표기하지 않고 그냥 삭제시킨다. ellipsis : (...) 생략문자를 표기한다. string : 현재 지원되는 브라우저가 없다.(입력한 문자로 생략문자 표기) text-overflow: ellipsis; overflow: hidden; white-space: nowrap; white-space : 텍스트 길이가 초과했을때 다음줄로 넘어가지 않도록 해줌. See the Pen CSS 글씨 제한 by junheeleeme (@junhee..
2021.06.28
반응형 웹은 CSS 미디어 쿼리(media queries)를 사용해 사용자 기기의 화면 width 사이즈를 비교하여 적절한 CSS를 표시해준다. 미디어 쿼리를 사용하지 않고 HTML 헤더에서 현재 기기의 width에 맞는 스타일 시트를 지정해주는 방식도 있다. 미디어 쿼리를 적용하기 전 HTML 태그안에 뷰포트 태그를 선언해 줘야하는데, 기본 Visual Code에서는 Emmet으로 추가가 되지만 Bracket에서는 기본으로 추가되지 않는다. content ="width=device-width, initial-scale=1.0" -> 화면 넓이를 사용자 디바이스 넓이로 지정, 기본 사이즈 1 반응형웹 디바이스별 분기점 최소 최대 PC 1024px - Tablet 768px 1023px Mobile 320..
2021.03.07
a태그 href 기능 제거하기 HTML 태그는 특정 링크로 이동을 하거나 새로운 창을 띄워 이동하는 등 유용하게 사용되지만 링크로 이동하고 싶지 않을 때도 있다. 올바르게 태그를 사용하는 것인지는 모르겠지만 익숙하게 사용하는 방법이기 때문에 a태그를 사용했고 하지만 href 속성을 이용한 링크 이동 방법을 사용하고 싶지 않다고 한다면 아래 속성을 a태그에 적용해 보면 된다. * href="#" 의 경우 페이지 상단으로 이동되기 때문에 이러한 효과도 제거하고 싶다면 아래와 같이 a태그에 onclick 속성을 추가해주면 된다. a태그
2021.02.25
HTML 특수문자 코드표 표현문자 숫자표현 문자표현 설명 - �- - 사용하지 않음 space - 수평탭 space - 줄 삽입 - - - 사용하지 않음 space - 여백 ! ! - 느낌표 " " " 따옴표 # # - 숫자기호 $ $ - 달러 % % - 백분율 기호 & & & Ampersand ' ' - 작은 따옴표 ( ( - 왼쪽 괄호 ) ) - 오른쪽 괄호 * * - 아스트릭 + + - 더하기 기호 , , - 쉼표 - - - Hyphen . . - 마침표 / / - Solidus (slash) 0 - 9 0-9 - 0부터 9까지 : : - 콜론 ; ; - 세미콜론 > > 보다 큰 ? ? - 물음표 @ @ - Commercial at A - Z A-Z - A부..
2021.01.19
태그 웹브라우저에서 서버로 데이터를 전송하기 위해서는 HTML에서 form 태그를 사용해야 한다. form 태그는 값을 다루는 태그들을 사이에 넣어주고 submit 타입의 input태그를 만들어주면 된다. 내용 전송 내용 태그의 데이터 전송 방법 두 가지 GET방식 주소에 전송하는 데이터를 보여준다. 전송 시 QueryString을 사용 사용자가 서버의 데이터를 가져올 때 사용 서버에 데이터를 삭제, 생성, 업데이트할 때 GET방식을 사용하는 것은 위험 위에 사진 처럼 전송하는 데이터 값이 주소에 노출됨 POST방식 사용자 입력값을 QueryString으로 전송하지 않음 눈에 보이지 않는 방식으로 전송 대용량 데이터도 전송 가능 사용방법 //get방식 //post방식
2021.01.19
태그 줄바뀜 현상 오늘은 span태그 모바일 줄바뀜 현상을 해결하는 방법을 소개하려고 합니다. 저는 어포스트에서 무료로 배포하는 티스토리 스킨을 사용하고 있습니다. 티스토리의 장점 중 하나는 HTML과 CSS를 사용할 수 있는 분들은 자신의 스타일에 맞게 수정이 가능하는 점이죠! 네이버는 세부 수정이 가능하긴 하지만 수정이 안되는 부분도 있기 때문에 티스토리를 좀 더 선호하는 편입니다. 하지만 수정을 하다보면 남이 작성한 코드이다보니 찾기 어려운 부분도 있고 적용이 잘 안되는 부분도 있더라구요. 지금은 눈에 보이는 족족 스킨을 수정하고 있는데요. 제 블로그 모바일 페이지에서 게시글 작성 날짜를 표시해주는태그가 자꾸 줄바뀜되는 현상이 있었습니다. 스킨은 반응형이고 데스크탑 해상도에서는 멀쩡하지만 모바일 환..
2020.11.19
부드럽게 영역 이동하기 html, css를 활용해 해당 영역으로 부드럽게 이동하는 방법입니다. See the Pen NWrrpOB by junheeleeme (@junheeleeme) on CodePen. html{ scroll-behavior: smooth; } 태그 href 속성에 해당 요소의 id값을 넣어준다.
2020.10.19
태그 "href"속성 Javascript 명령어 뒤로가기 앞으로가기 새로고침 창닫기 전송(Submit)
2020.10.15
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev