지식을 훔쳐라 ❕ 👀 지식을 훔쳐라 ❕ 👀

FrontEnd/HTML／CSS

• [CSS] list-style과 list-style-type 차이점

  FrontEnd/HTML／CSS 2022. 6. 20. 08:32

  list-style list-style: 축약형 list-style-image list-style-position list-style-type list-style-type list-style-type: list 요소의 앞에 붙는 서식 타입 /* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: kannada; /* value */ list-style-type: '-'; /* Identif..

  Read More
• [CSS] display: none, opacity: 0, visibility: hidden 차이점

  FrontEnd/HTML／CSS 2022. 6. 20. 08:28

  property occupies space consumes clicks animate() opacity: 0 O O O visibility: hidden O X X display: none X X X

  Read More
• [CSS] Transition Error

  FrontEnd/HTML／CSS 2022. 5. 27. 00:31

  js(자바스크립트)로 버튼을 눌렀을 때 콘텐츠가 스르륵 넘어가는 효과를 주기 위해 transition을 사용하려고 했다. 근데 자꾸 transition이 안먹고 뚝딱 움직이기만 해서 개발자 도구를 찾아보니 속성값이 유효하지 않다는데 문제가 뭔지 알 수가 없었다. 찾아보니 단위를 쓰지 않거나 calc 메서드 내에 연산자 띄어쓰기를 하지 않아도 발생하는 개복치 오류였다.. 단위를 안쓴게 없는데 잘 생각해보니 설마 0에 단위를 안써줘서 그런건가 싶어 코드를 수정했더니... 스르르르르ㅡ르,,,, 효과가 잘 나타남.............................^^ 개복치 오류야 고마워! 덕분에 오늘도 하나 배웠다! 정리 transition 속성 사용 시, 발생하는 invalid property value 오..

  Read More
• [CSS] 글자 수가 많아지면 ...으로 표시

  FrontEnd/HTML／CSS 2022. 4. 27. 22:05

  통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis;// 글자 수가 width 범위를 넘어가면 생략부호로 표시 white-space:nowrap;// 공백 1개만 표시, 한 줄에 모두 표시(줄바꿈 X) } white-space normal(기본값) : 공백이 여러 개여도 하나만 표시, 자동 줄바꿈 nowrap : 공백이 여러 개여도 하나만 표시, 줄바꿈 X pre : 공백 모두 표시, 줄바꿈 X pre-wrap : 공백 모두 표시, 자동 줄바꿈 pre-line : 공백 모두 표시, 자동 줄바꿈 출처: https://jos39.tistory.com/211..

  Read More
• [CSS] table의 border 여백 제거

  FrontEnd/HTML／CSS 2022. 4. 27. 16:11

  td { border: 1px solid var(--border-grey-color); } border가 생기지만 여백이 함께 생긴다. table { border-collapse: collapse; } td { border: 1px solid var(--border-grey-color); } 이때 table의 border-collapse 속성값을 collapse로 지정해주면 여백이 사라짐!

  Read More
• [HTML, CSS] 알게 된 개념들

  FrontEnd/HTML／CSS 2022. 4. 24. 02:30

  font awesome 아이콘 사용을 위한 태그 google font 사용을 위한 태그 video 속성 controls : 동영상을 제어할 수 있는 controller가 만들어짐 autoplay : 웹 페이지가 open 되었을 때 자동으로 동영상 Play video 크기를 반응형으로 제어하고 싶을 경우 : % 이용 width, height : 100%를 주면 가로세로 비율은 달라지지 않은 상태로 전체 width를 먹는 것을 볼 수 있음 만약 화면이 매우 클 때 width 크기를 제한하고 싶을 경우 max-width 속성을 이용 width의 크기가 바뀌어도 제목이 3줄 이상 되지 않도록 하는 속성 -webkit-line-clamp -webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지..

  Read More