목록frontend (3)

All Day Tired

text-overflow ellipsis 여러줄 ... 만들기

오늘은 div content가 여러 줄일 때... 이 나올 수 있도록 하는 방법에 대해서 포스팅해볼게요! 학원 html/css 평가에서 여러 줄일 때... 이 나왔었는데 유용할 거 같아서 남겨봅니다. 이런 식으로 마지막 줄에 ...이 나오도록 하는 방법입니다. html구조는 아주 간단히만 할게요. 요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다. 요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다. 이런식으로 긴 content를 가진 div에 css를 넣어줍니다. section #topTextContainer ..
Front/html／css 2022. 2. 1. 20:52
flex 이용해서 div너비 유지(about. flex-basis, flex-grow)

안녕하세요! 두 번째 포스팅입니다! 요즘 JAVA 공부하다 보니 포스팅할 시간이 너무 없었는데 연휴 덕에 겨우 올려봅니다. 제가 html/css 배우면서 유용하겠다 싶었던 내용 중 하나인 flex를 이용해서 여러 div 중 특정 div너비만 다른 div에 비해 일정 비율만큼 넓게 너비를 유지하는데 사용하는 css 내용인데요. 말로 쓰니까 뭔가 이해하기 힘든 느낌이라서 직접 캡쳐한 사진을 보면 이런 식으로 브라우저 크기를 조정해서 3과 5 부분의 너비 비율이 일정해지도록 할 때 유용하게 사용하는 방법입니다! 3 부분은 다른 div보다 2배 넓도록 5 부분은 다른 div보다 4배 넓도록 했습니다! 그럼 먼저 html 코드부터 보겠습니다! 1 2 3 4 5 코드는 아주 간단하게 했습니다. 그럼 css코드도 보..
Front/html／css 2022. 2. 1. 00:44
Web page Clone Coding 01(about. 마진상쇄)

안녕하세요! 웹페이지 클론 코딩을 첫 글로 써보네요! 사실 클론코딩이라고 하기에도 부끄러운 수준이지만... SPA(Single page Application)를 html과 css로만 최대한 비슷하게 따라해보았습니다! 현재 다니고 있는 학원에서 html과 css 진도를 다 나가고 마지막으로 배운 내용을 토대로 선생님께서 가져오신 웹페이지 외형을 똑같이 만들어보자! 이게 주된 목적이었습니다. 제가 선택한 페이지입니다! https://website70258.nicepage.io/Page-2.html Page 2 your favorite food Cafe Food Menu All of our food is prepared by our team of trained kitchen staff from the seal..
Front/html／css 2022. 1. 24. 00:00
Prev 1 Next