본문 바로가기

IT

줄바꿈 word-break, 글자 흘러넘침 word-wrap 속성 정리 2021. 7. 2. 박스 내에 텍스트를 뿌릴 때에 가끔, 글 길이가 너무 길면 내가 의도했던 디자인과 다르게 보기싫게 글이 박스 밖으로 삐져나올 때가 있다! 그럴 때 써주는 css 속성이 word-break 이다ㅏㅏ word-break 속성 종류 word-break: normal; word-break: break-all; word-break: keep-all; normal ( 기본값 ) 기본 줄 바꿈 규칙 ( 텍스트가 길면, 박스 밖으로 삐져나온다 ) break-all 텍스트가 문자( 글자 하나하나 )단위로 잘려 아래로 줄바꿈된다 ( 글자단위가 의미없다면 주로 이거) keep-all 한중일(CJK) 텍스트에서는 단어단위로 잘려 아래로 줄바꿈된다 ( 단어 단위로 끊어져 있는게 나을 것 같다면 이걸 쓰자ㅏㅏ ) 비슷한 속성으론..
GitHub access token 발행과 소스트리 연결하기 2021. 7. 1. 이제 곧 Basic authentication 방식의 깃헙 인증이 종료될 것이라고 한다ㅏㅏ 때문에, 오늘은 소스트리에 깃헙 엑세스 토큰방식으로 로그인해두기로 했다ㅏㅏㅏ 그러려면 먼저, 깃헙에 로그인하고, 깃헙 링크 : https://github.com/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 내정보에..
사용자의 입력값 그--대로 출력하는 방법 2021. 7. 1. 게시판 구현 중에 태그 내에 인풋값을 저장한 후, 태그 내에 쏴주었는데 글에서 여러번 중복된 띄어쓰기와 엔터값이 출력이 안되는 현상을 발견했다ㅏㅏ 나의 해결방법 태그를 사용해서 사용자가 입력한 값이 그대로 출력되게 하고, ( 무한 띄어쓰기 및 엔터값 출력가능 ) 태그에 먹여져 있는 기본 스타일을 없애주기 위해 태그에 css를 먹여서 커스텀해주면 된댜ㅑㅑ ++ 여담 위 방법을 사용하기 전에, 고대로 태그를 사용해서도 출력해봤는데, 는 온갖 방법을 써도 지워지지 않는 기본 스타일값이 있어서 포기했다ㅏㅏㅏ ㅎ.. 출처 : https://offbyone.tistory.com/326 textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기 HTML에디터가 아닌 일반 textarea 로 입력 받을 글을 페이..
변수 뒤의 ?. optional chaining 정리 2021. 7. 1. 게시판 세부 페이지 구현 중, 반복문으로 게시글들의 정보를 가져온 후, 사용자가 게시글 하나를 클릭하면 모달창으로 해당 세부 페이지를 보여주는 로직을 짰는데 이상하게 계ㅔㅔㅔ속 서버에러가 났다 문제의 에러 코드 server error : Cannot read property 'id' of null 분명 넘겨준 변수에는 배열값이 예쁘게 들어있는데 말이다ㅏㅏㅏ ㅠ 저 에러가 나는 이유는 해당 배열 내에 내가 꺼내고자 하는 값이 할당되어있지 않은 ( == undefined or null ) 변수가 있기 때문이었다ㅏㅏㅏ 더보기 *** 나는 배열의 길이값만큼 반복문을 돌리고, id값이 사용자가 누른 게시물의 id값과 일치하는 각 게시물을 조회해서 들고오는 로직을 짰고, 그 중에서는 사용자가 보지 못하게 거른 몇 ..
validatoin에 쓰는 정규표현식 정리 2021. 6. 30. request가 넘어온 controller 단에서 유효성검사 중에 각 컬럼에 저장하고 싶은 값에 따라 정규표현식을 써주어야 할때가 많다 그 중 자주 쓰이는 몇가지를 적어놓으려고 한다ㅏㅏ ( 이후 계속 추가 될 예정ㅇㅇ ) 해당 유효성검사가 필요하다면, 코드 블럭에서 regix: 이후부터를 사용하면 된다ㅏㅏ ( 나머지 아이들은 주로 같이 쓰여서 함께 들고왔다ㅏㅏ ) 영어만 입력 가능 ( 소문자, 대문자 모두 가능 ) 'title' => 'required|string|regex:/^[a-zA-Z\s]+/|min:1|max:255', 한글만 입력 가능 'title' => 'required|string|regex:/^[가-힣\s]+/|min:1|max:255', 한글, 영어 입력 가능 'title' => 're..
원치않는 #text 노드 해결 2021. 6. 24. 당신이 만약, element.firstChild 를 사용하다 #text 노드를 없애고 싶어 검색 후 이 블로그에 들어왔다면, 잘 들어온 것이다ㅏㅏㅏ 거두절미하고, 해결법부터 말하자면, firstChild 대신에, firstElementChild 를 사용해주면 된다! ** but Internet Explorer 9 이전 버전이슈가 있다고 하니 생각하고 사용하자ㅏㅏㅏ ** firstChild 함수가 우리가 원하는 요소의 첫번째 자식요소를 반환하는 대신에, #text = null; 을 계속 반환했던 이유는 우리가 선택자로 잡아준 태그들 사이사이에 공백이 있었기때문이다ㅏㅏㅏ 때문에 다른 해결 방법으로는, 태그들 사이의 공백을 모두 없애고, ( 물리적으로 하나하나 지우기 or js로 일괄 없애기 ) -> 해당방법..
<input> 태그의 속성 정리 required와 autofocus 2021. 6. 21. 보통 태그에는 사용자의 편의, 그리고 개발자의 편의를 위한 속성들이 몇가지 있다ㅏㅏㅏ 그중에서 내가 가장 자주 쓰는 두가지를 먼저 정리해보쟈ㅑㅑ 해당 속성은 사용자가 input 태그에 꼭 정보입력을 해야만 서버접속이 가능하다 때문에, 사용자가 해당 input 태그를 비워두면, 보통 자동으로 해당 칸을 채워달라는 경고가 나오게 된다ㅏㅏ! 해당 속성은 페이지 로딩이 일어났을 때, 자동으로 해당 input 태그로 포커스가 주어진다ㅏㅏ 때문에 보통 가장 위쪽의 input 태그에 주어진다 ( 사용자가 별도의 클릭없이 위에서부터 차례차례 적어나갈 수 있게 ) 예제 코드는 아래의 링크에 있댜ㅑㅑ 참고 : http://tcpschool.com/html-tag-attrs/input-required 코딩교육 티씨피스쿨 4..
querySelector() 2021. 6. 18. ++ 서론 더보기 쿼리 셀렉터에 대한 제대로 된 이해없이 코드를 치니까 원하는데로 버튼이 안눌리는! 사태가 자주 발생했다 때문에 이번에 내가 자주쓰는 클래스 선택자에 대해 알아보자ㅏㅏ 클래스를 만족하는 첫 번째 요소 검색 아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환 var el = document.querySelector(".myclass"); 위의 경우에, 만약 class="myclass" 를 가진 html 태그들이 많이 있다면, 그중에서 가장 위쪽에 위치한 태그 하나만을 짚어준다 ( 고로, 버튼에 사용하려면 어차피 class 이름을 모두 다르게 해주어야하니 왠만하면 버튼엔 유일한 id를 쓰자ㅏㅏ ) +++ 추가 만약, selector가 ID 선택자인데, 해당 ID..

티스토리툴바