천천히 알아가는 세상

안녕하세요. 이번에는 CSS에서 글자가 칸을 넘어갈 때 ... 으로 보이는 방법에 대해서 알아보겠습니다. 앞에 tbody > tr 이거는 사용하던 코드를 가져온 거라서 있는 것이므로 신경 쓰지 않으셔도 됩니다. css 작성할 때 overflow, text-overflow, white-space 등 작성을 해주면 되는데, 이때, width 값도 필요합니다. /* 노래 제목 */ tbody > tr > td:nth-child(4) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 300px; width: 100%; } 결과 참고 사이트 https://nh0404.tis..

안녕하세요 이번에는 Bootstrap에 대해서 알아보겠습니다. 부트스트랩 (Bootstrap) 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크입니다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. 공식 사이트 링크 사용 방법 대부분 부트스트랩을 사용할 때는 CDN 링크를 불러와서 사용합니다. 여기서는 CDN 링크를 불러오는 방법으로 진행합니다. 구글에 bootstrap라고 입력 후 Getting started로 접속합니다. 사이트로 접속하면 Guide에 대한 문서를 볼 수 있습니다. 여러 내용 중에서 2번 항목을 찾습니다. CDN links 관..

안녕하세요 이번에는 CSS의 display 속성에 대하여 알아보겠습니다. display 속성에 따라서 한 줄을 차지하거나 글자 크기만 차지하거나 여러 가지 형태가 가능합니다. 1. inline span 태그처럼 내용에 따라서 크기가 결정, 크기 조절 불가 span-inline1 d-inline1 div 태그의 기본 속성은 block이지만 css로 inline 속성을 부여한 상태라서 아래 이미지와 같이 div 태그도 span 태그처럼 태그 내부 요소의 크기만큼 자리를 차지합니다. 또한 inline 속성이라 다음 줄로 안 넘어가고 한 줄에 연속으로 입력이 됩니다. 2. block div 태그처럼 한 줄을 차지하는 속성, 크기 조절 가능 d-block2 d-block3 d-block4 div 태그는 기본적으로..

안녕하세요. 이번에는 transform에 대하여 알아보겠습니다. 해당 글에서는 간단한 예시 코드만 보여드릴 예정이라 자세한 내용은 아래 링크를 통해서 접속하시면 자세한 내용을 확인하실 수 있습니다. mdn web docs 페이지 바로가기 transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 해당 코드 외에도 다른 여러 가지 속성을 설정할 수 있습니다. skew rotate scale 2. transform 속성 transform-origin: center; 해당 개체의 기준점을 변경 함 transform: rotate(-90deg); 기준점을 기준으로 개체를 돌림 ..

안녕하세요. 이번에는 css의 z-index 기능에 대하여 알아보겠습니다. z-index 태그를 화면에 표시할 때 순서를 바꿀수 있는 속성이며, 태그의 position 값이 relative, absolute 인 경우에만 적용 가능합니다. z-index 값을 설정하지 않으면 기본 코드에 따라서 배치가 됩니다. 만약 부모의 z-index가 1이고 자식이 10이여도 부모를 따라가기 때문에 자식도 1을 받는다. 노란색 원에 z-index: 10 값을 지정하여 초록색 원 밑에 있어야할 노란색 원이 위로 배치된 모습입니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 초록색 원보다 위에 존재합니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 ..