짧은코딩

text-overflow text-overflow는 글을 썼는데 줄이 넘치면 생략해주는 속성이다. -적용하기 위한 조건 1. 고정된 width 혹은 height가 있어야 한다. 2. overflow:hidden; 속성을 사용해서 영역을 감춰야 한다. 3. 아래줄로 내려가는 것을 막기 위해 white-space: nowrap 같은 속성을 줘야 한다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80px; 이런식으로 사용 가능하다. 이미지 어둡게 만들기 filter: brightness(60%); 위 사진처럼 이미지를 어둡게 하기 위해서는 filter를 사용하면된다.

box-shadow 그림자 속성을 줄 수 있다. 이 사진 밑쪽 처럼 그림자를 줄 수 있다. 원하는 방향 어디든 줄 수 있다. box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.4); 이렇게 사용할 수 있다. -참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow box-shadow - CSS: Cascading Style Sheets | MDN box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 developer.mozilla.org overflow-x overfol..

box-sizing 박스를 만들고 200px의 너비를 준다. 그리고 padding-left 50px를 준다. 이런식으로 구성이될 것이다. 그러면 결국 명령을 다 수행 시켜야해서 50px가 늘어나서 박스의 너비는 250px가 된다. 그래서 box-sizing이 없으면 ellipsis가 안보이게 된다. 결국 box-sizing: border-box를 해서 css에게 padding을 줘도 신경쓰지말고 box 사이즈를 늘리지 말라고 말한 것이다. 즉, 사진처럼 박스 총 너비는 늘려주지 않은 것이다.

-깃허브 https://github.com/5hyun/youtube-site GitHub - 5hyun/youtube-site Contribute to 5hyun/youtube-site development by creating an account on GitHub. github.com -깃허브로 연결한 사이트 https://5hyun.github.io/youtube-site/ Youtube Mobile subscribe 5hyun.github.io -코드를 만들 때 헷갈린점 1. 우선 드림 코딩님 처럼 색이나 여백 사이즈, 글자 크기 등을 지정하고 하는게 편한 것을 확실히 알았다. 2. 버튼에 대한 코드가 헷갈렸다. button, button:focus { border: none; cursor: poi..

유튜브 페이지 만들기 1일 -참고 영상 https://www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=16 -완성해야 할 페이지 우선 작은 화면부터 만들고 큰 화면으로 전환한다. html Youtube #DreamCoding #DreamCiders #Ellie Clne Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 드림코딩과 함께하는 프론트엔드 실전 입문편 1M views 1 month ago 드림코딩 by 엘리 1M subcribers subscribe Up next 살라 득점왕 가능성은? 리..

안보고 만들어 봤는데 몇몇 부분에서 실수를 했다. 그것들을 정리하려고 한다. .navbar { display: flex; justify-content: space-between; padding: 8px 12px; background-color: var(--background-color); align-items: center; } 전체에 align-items: center;을 해야 반응형 창을 만들 때 영향을 안준다. const toggleBtn = document.querySelector(".nav__toggleBtn"); const menu = document.querySelector(".nav__menu"); const icon = document.querySelector(".nav__icon"); ..

반응형 페이지 창이 작아지면 메뉴를 아래로 내려야한다. CSS @media screen and (max-width: 768px) { } 우선 반응형을 만들어야해서 미디어쿼리를 사용한다. -로고 .navbar { flex-direction: column; align-items: flex-start; padding: 8px 24p; } navbar의 중심축을 column으로 바꿔준다. 그리고 로고는 왼쪽으로 하고 싶어서 반대축인 flex-start를 flex-start로 바꿔준다. 화면에 여유를 주기 위해서 패딩을 넣는다. -메뉴 .navbar__menu { flex-direction: column; align-items: center; width: 100%; } 마찬가지로 중심축을 column으로 바꾼다...

https://www.youtube.com/watch?v=X91jsJyZofw&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=14 유튜브 드림 코딩님의 영상으로 공부했다. 이런 헤더를 만드는 영상이다. 레이아웃 구조를 먼저 파악하기 너비가 넓은 왼쪽과 좁은 오른쪽 메뉴가 있다. -왼쪽 메뉴 이렇게 3개의 박스로 이루어졌다는 것을 파악할 수 있어야한다. 그리고 이것을 보고 flex박스를 생각해야한다. -오른쪽 메뉴 미디어쿼리를 이용하면 된다. 박스는 총 3개로 이루어져있다. 그리고 felx 박스의 정렬은 column으로 하면된다. HTML 1. 커다란 nav 박스를 1개 만들고 그 안에 3개의 박스를 만든다. -로고 참고 사이트 https://fontawesome.com..

Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere 이 코드에서 사진의 크기를 통일 시키려고 했다. -CSS img { wid..

Table 부트스트랩 content의 Table에서 가져온 코드 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 이걸 넣으면 이런 코드가 나오게된다. -class를 지우면 원래는 이렇게 나온다. -table-striped 이렇게 회색처럼 나온다. -table-hover 테이블에 마우스를 올리면 회색으로 바뀐다. Color .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .tex..