G's days

css word-break /* 키워드 값 */ word-break: normal; word-break: break-all; --> 글자기준으로 줄바꿈 word-break: keep-all; word-break: break-word; /* 사용 안함 */ text-overflow { text-overflow: ellipsis; 함께 써야한다. overflow: hidden; white-space: nowrap; } box-orient, line-clamp p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

style 우선순위 CASE1 html 태그 안 -> html head style태그 안 -> 외부css CASE2 전체경로를 적은 경우 -> 전체경로X CASE3 더 아래에 적은 속성

그림과 텍스트 슬라이드 이동 HTML Best Item 상품1 상품2 상품3 상품4 상품5 CSS .at6{ display:block;border:10px solid pink; } .at6 .at6_big { border:3px solid black; width:100%; height:500px; overflow:hidden; position:relative; } .at6 .at6_big .at6_big_5, .at6 .at6_big_text .at6_big_text_5 { border:3px solid black; width:500%; height:100%; position:absolute;} .at6 .at6_big .at6_big_5 li, .at6 .at6_big_text .at6_big_text..

Answer-------> box-sizing : content-box box-sizing : border-box https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing box-sizing - CSS: Cascading Style Sheets | MDN box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. developer.mozilla.org content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다. border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설..

가운데 정렬 ul 속성에 text-align : center li 속성에 display : inline-block (단, float : left 와 함께 쓰면 안 됨) 참고) block요소를 한 줄로 배치 li 속성에 아래의 둘 중 하나 를 쓴다 1) display : inline-block 2) float : left block, inline, inline-block 이해하기 https://gsdays.tistory.com/48 display 이해하기 종류, 특징 display의 종류 display : block 한줄을 차지함 display : inline 내용이 있는 부분만 보여줌 display : inline-block 상자. 상자만큼 차지함(한줄에 여러 개 배치 가능) * 코드상 띄어쓰기or줄바꿈..

CSS의 기본 중의 기본 selector, property, value가 무엇인지 알아보자. .test { width: 100px; height: 200px; border: 1px solid black; color: #fff; background: black; } 위 코드에서 각각의 단어들이 무엇을 뜻하는지 보자. .test selector width, height, border, color, background property 100px,~ 오른쪽에 있는 것들 value

display의 종류 display : block 한줄을 차지함 display : inline 내용이 있는 부분만 보여줌 display : inline-block 상자. 상자만큼 차지함(한줄에 여러 개 배치 가능) * 코드상 띄어쓰기or줄바꿈하면 화면상 공백생김 완전히 붙이려면 코드상에서 붙여준다 EX) strawberry 그냥궁금증 block요소를 한줄로 배치하고 싶을 때 display : inline-block VS float : left https://gsdays.tistory.com/59 ul속 여러 개의 li를 화면 가운데 정렬 (block요소 가운데 정렬) 1. 가운데 정렬 ul 속성에 text-align : center li 속성에display : inline-block (float : le..

position 사용하기 position:relative; top:0px; left:0px; -> 0px 만큼 이동한다. position의 종류 position : static default. HTML에 적힌 순서대로 나타남 실제로 적지는 않음 position : relative 원래 있어야할 자리에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받음 *z-index를 적용하기 위한 용도로 써주기도 한다. position : absolute 자신이 담겨 있는 (가장가까운상위)박스의 (0,0)에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받지 X (담겨 있는 박스 경계선 안에서 떠있다) position : fixed 스크롤해도 고정됨 상위 태그와..