css

개발관련/HTML&CSS

CSS, SCSS, Styled-components 다 써보고 후기

CSS 공부 경로: 기초라 가장 먼저 배움 (선택권이 없음) 단점: 하다보면 페이지가 미친듯이 길어짐 처음에 시작할 때는 잘 모르고 클래스명 생각나는대로 맘대로 막 지어버리기도 하는데 후술할 다른 것들을 한번 접해보면 이름 짓기의 중요성을 깨닫게 된다. 사실 클래스명을 규칙있게 지을 때 내 기준에서는 편했다. (만든 것들이 한 페이지 안에서 한눈에 보이니까) 사실 내 기준에서는 주석을 잘 달아주면 그나마 편하게 쓸 수 있다고 생각한다. 아래 다른것들만 계속 쓰다보면 가끔 CSS가 그립다 SASS(SCSS) 공부 경로: css를 마구 하다가 뭐???? 훨씬 더 어썸한게 있다고? 하면서 검색하다가 codepen 사이트 구경하다보면 외국인들이 죄다 쓰길래 이게 뭐임? 하면서 자연스럽게 공부하게 됨 단점: 폴더..

개발관련/HTML&CSS

[CSS] 마우스 드래그 할 때 생기는 파란 영역 없애기

사이트 만들고 이것저것 기능 눌러보다보면 드래그가 이렇게 되는 경우가 있음 초 간단하다 3초도 안걸리는 본론 해당 CSS 클래스에 user-select: none; 을 추가해주면 없어진다.

이것저것/도전

어째 코딩보다 이미지편집이 더 빡셈

슬라이드에 추가할 이미지를 만들어야해서 (사서고생중) 오늘은 체감상 코딩을 한거같지가 않ㅅ읍니다 게다가 낮 12시까지 누워서 쉬었는데 오히려 눈도 퀭해지고 몸이 더 힘든 이유는 뭘까요 남들 쉬는거같이 쉬었는데 왜그러지 집똥컴에서 포토샵보다 피그마 켜는게 더 안무거워서 앵간하면 피그마로 처리해버렸음 하지만 누끼따는거는 ....별수없다.... 반남몰은 혹시 웹개발자 안뽑음???? ,,,,,,취직시켜줘,,,....... 애니메이션은 gsap 라이브러리를 이용하였습니다 (== 별거 아니라는 뜻) 라이브러리는 공식문서 api를 잘 읽...는 것 보다 demo랑 남들이 구현해놓은거 열심히 분석하면 코린이도 능숙하게 잘 쓸수있습니다 원래 잘 읽어서 써야 하는게 맞는데 개오래걸리고 영어고자면 힘듦 그다음에 자바스크립트..

이것저것/도전

글을 못쓰는대신 열심히 뭘 하고 있었냐면

나는 왜하필 서브메뉴 많은 사이트 골라서 오른쪽어깨근육통과 스트레스와 고통을 ... 놀라운건 배웠던 제이쿼리는 단 하나도 안썼음 진짜 아직 시작인데도 엄청나게 고생하긴했는데 새로운 html 태그도 알았고 웹 프레임워크도 적용해보고 flex / grid / float 다 섞어 써보고 재밌는경험이었네요 근데 몸이 죽을라하는데 완성하기전에 병 하나 생기는거 아닌지? https://github.com/Yeonji-Noob/Website_project GitHub - Yeonji-Noob/Website_project: 웹사이트 제작(리디자인) 개인 프로젝트입니다. 웹사이트 제작(리디자인) 개인 프로젝트입니다. . Contribute to Yeonji-Noob/Website_project development by..

이것저것/일상

와 grid 레이아웃 처음써봄 (갑자기 CSS이야기)

학원에서 배운대로 float 레이아웃을 한달가량 쓰다가 레이아웃 잡기 어렵구나 하고 CSS 혐오자 됐었는데 최근에 flex 레이아웃으로 신세계를 경험했고 (근데 계속 써보니 단점이 있긴 하더라) 그러다가 프로젝트 만들면서 오늘 grid 레이아웃을 처음 제대로 써봤음 학원에서 안배운건 아닙니다 그냥 이론만 하고 슉 넘어가고 실습을 계속 float로 해서 그렇지 div 박스로 더 감싸야하나? 같은 쓸데없는 고민 안하게 됨 저만 이제 알았을 수 있?는데 바보같이 이것저것 너무 할게 많아서 CSS 레이아웃 공부 등한시한 자신을 반성.... float만 많이 구경했을때 진작 혼자라도 마구마구 써볼걸 그게 후회됩니다 계속해서 새로운 시도를 하는 사람이 되자

개발관련/JavaScript

[Javascript강좌] 무한 루프 전광판을 만들어보자!(스압주의)

문제의 시작(한탄하는 서론) 시작은 학원에서 매주 과제 평가를 하는데, 어제 사이트 일부 만들기(동작까지)를 했었고 나는...나는...헤더 맨 윗부분에 ★전광판효과★를 간지나게 넣어보려고 했었다... 왼쪽으로 계속 무한히 텍스트가 움직이는 그런 것을 구현하고 싶었다 뭔 고민을 글케 함? 걍 html에다가 marquee 태그 쓰면 되잖아요? 근데 그게 문제가 있었음 그래서 여튼 저것도 문제였고 딴것도 문제였고 시간은 없고 예상 못한 곳에서 문제 터지고 개난리가 남 주석도 못달고 CSS도 개판이 남 아니 아 화나네 또 디자인+코딩 (사이트맵, 헤더, 네비, 로그인화면, 회원가입화면) (데스크탑과 모바일 둘 다 구현 ㅋㅋㅋㅋㅋㅋㅋㅋ) 이게 솔직히 하루안에 타임어택이 말이나 되는거임 대체? 웹디자인기능사 시험 ..

이것저것/도전

웹디자인기능사 준비중

필기는 합격했었고 실기 신청만 기다리는 중 인터넷의 여러 고마운 분들이 자료를 올려주셔서 따라서 해보고 있음 html & CSS 오랜만에 해보니까 허리가 휜다 하면서 알게 된 사실 적어놓음 1. flex 레이아웃 사용 float: left를 이용한 배치보다 flex레이아웃을 쓰는게 더 빨리, 편하게 레이아웃을 잡을 수 있음 진짜 편하게 레이아웃 잡을 수 있음 나도 그래서 시험은 flex로 연습을 계속 할 예정 float 쓰면 clearfix도 만들어야되고 clear:both도 걸어야 하고 여간 귀찮은게 아니다 하지만 그동안 float만 연습했었지....ㅋㅋ........ 왜 그토록 스트레스를 받았어야 했을까 float는 버튼같은거 오른쪽 정렬할때 잠깐 쓰기 2. CSS 작성시 가독성 원래는 그냥 클래스명..

개발관련/HTML&CSS

[CSS] HTML 컬러 이름과 코드 (사이트 추천)

HTML color codes and names https://www.computerhope.com/htmcolor.htm#color-codes HTML Color Codes and Names HTML color codes, color names, and color chart with all hexadecimal, RGB, HSL, color ranges, and swatches. www.computerhope.com 색 이름 막 치다가 문득 생각났는데 당연히 누가 표로 정리해놨겠지 했는데 역시나 있었고 괜찮게 정리를 해놔서 나도 기억하려고 포스팅함 들어가보면 각 색에 대한 상세 설명과 아이콘 적용, 텍스트 적용된 상태까지 보여줌 더 좋은 점은 조화가 되거나 유사색까지 쫙 알려줘서 색때문에 덜 헤멜 수 ..