본문 바로가기

FrontEnd/CSS

 (5)
[css]text - shadow generator 스트로크를 구현 해 보셨나요..?포토샵이나 피그마에서 작업할때는 진짜 세상 쉬운 아무것도 아닌! 작업 이긴 하다만...이거를 CSS로 구현할려면 진짜 대환장할 일 이다.아마 CSS로는 이미지 편집툴 들 처럼 세세하게 설정할수가 없어서 그런거같은데...   간단히 3픽셀 정도의 테두리를 만들고 싶다면, 이미지 편집툴에선 색상을 정하고 딸깍 한번이면 되지만!CSS 에서는 코드가 이마마마마큼 길어진다 text-shadow: rgb(233, 233, 233) 3px 0px 0px, rgb(233, 233, 233) 2.83487px 0.981584px 0px, rgb(233, 233, 233) 2.35766px 1.85511px 0px, rgb(233, 233, 233) 1.62091px 2.52441..
HTML / CSS 리팩토링 하기 HTML/ CSS 과제 리팩토링 총평 https://github.com/KDT1-FE/KDT8-M1/pull/27 멘토님: 짧은 시간동안 고생 많으셨습니다! BEM을 사용하고, Block 단위를 명확하게 나눠 재사용성을 높이는 방법을 연습해보시고, 멘토님께 질문 드릴때도 Block 단위 를 명확하게 하면, 요소의 구성은 같지만제가 아직 BEM 사용법이 미숙하여 이것저것 섞어 사용했는데, 한가지 클래스 스타일로 통일하여 짓는것이 읽는 사람도 관리하는 사람도 편하다는것을 느꼈습니다. 크기가 다른 것들은 CSS를 다시 작성할 필요없이 클래스 하나로 제어하기 쉽다고 하셨습니다. 일관된 스타일로 코드를 작성하시는 걸 습관화하시면 좋을듯 합니다! 코드리뷰 내용 진짜 엄청 세세하게 알려주셔서 배운내용이 많은데요! 그..
카카오 프렌즈 샵 클론코딩하기 👀 자신이 원하는 사이트 레이아웃 클론 🐧 KaKao Shop Clone Coding 🐧 깃 허브 주소 : https://github.com/PenguinKKIM/kakao-shop-clone 필수 요구사항 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! 카카오 프렌즈 샵을 클론코딩 했습니다. https://store.kakao.com/kakaofriends 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. https://magical-arithmetic-952b0e.netlify.app/ 카카오톡 스토어 카카오프렌즈..
[20240214] Flex flex 의 정의 1차원의 레이아웃 : 한개의 축만 사용한다 flex와 inline-flex flex bolck 레벨의 컨테이너를 만듦. 레이아웃 을 짜는데 주로 사용한다. 웹페에지의 주요 구성 요소를 짜는데 씀 inline-flex inline 레벨의 컨테이너를 만듦 : 문서의 흐름의따라 글자처럼 배치된다 텍스트나 인라인 요소의 사이에 위치하게된다. 주변에 텍스트와 같이 배치되는 버튼 에 사용한다 주로 사용하는 일은 없음 flex-shrink 부모 container에 자식 item 들이 얼마나 줄어들지 비율을 정해 줌. 기본값 은 1 이다 : 화면이 줄어 듦에 따라 같이 줄어든다 줄어들게 하지 않으려면 값을 0으로 바꿔주면된다. flex의 단축속성 flex : , , /* Two values: flex..
부모요소에 padding 과 absolute 얼마 전에 absolute에 대한 질문을 받아보다가 알게 된 것 Penguin 이 HTML의 결과물은 이렇게 된다 부모 container에 padding 20px 때문에 안에 쏙 들어가 있다. 자식 container에 padding을 주고 싶어서 이 상태에서 padding을 주게 되면, .sub-container1{ width: 100%; height: 10vh; background-color: cornflowerblue; padding: 20px; } 요래 20px 만큼 튀어 나가게 된다. 이 상태에서 해결하기 위해서는 box-sizing: border-box; 한 줄만 추가하면 깔끔하게 해결된다. 만약 자식 container의 위치를 밑으로 내리고 싶다고 할 때, (여러 가지 방법이 있겠지만) 부모요..

티스토리툴바