나의 IT Note

말풍선 그리기 이미지를 사용하여 말풍선을 적용할 수 있지만 말풍선의 데이터에 따라 디자인이 깨지지 않으면서 반영이 되어야 하기에 css를 통해 말풍선을 그리는 게 효과적이다. 보더 컬러를 수정하여 말풍선 색상을 변경할 수 있다. 보더 값을 적절하게 변경하면 여러모양의 말풍선 꼭지점을 만들 수 있다. position 속성의 top left를 사용하여 말풍선의 꼭지점을 원하는 위치로 옮길 수 있다. 말풍선 .speech-bubble { position:relative; width:200px; padding:20px; background-color:#666; border-radius:4px; color:#fff; } .speech-bubble.left:after { content:''; position:abs..

삼각형 그리기 이미지를 사용하여 삼격형을 적용할 수 있지만 컬러나 모양이 변경되는 경우 이미지를 수정해야 하는 번거로움이 있기 때문에 css를 통해 삼격형을 그리는 게 효과적이다. 보더 컬러를 수정하여 삼격형의 색상을 변경할 수 있다. 보더 값을 적절하게 변경하면 여러모양의 삼각형을 만들 수 있다. transform 속성의 rotate를 사용하면 회전 시킬 수 있다. 정삼각형 .triangle { width: 0px; height: 0px; border-bottom: calc( 90px * 1.732 ) solid #666666; border-left: 90px solid transparent; border-right: 90px solid transparent; } 결과물 직각삼각형 .triangle {..

:not() 특정 selector을 제외하고 스타일을 적용하고 싶은 경우 사용 CSS .parents p:not(.fisrt) { background-color: green; color: #fff; } .parents span:not(.fourth) { background-color: gray; color: #fff; } .parents .fifth :not(p) { font-style: italic; text-decoration: underline; } p:not(.fisrt) p 요소 중에 first 클래스를 가지고 있지 않는 요소 선택 span:not(.fourth) span 요소 중에 fourth를 가지고 있지 않는 요소 선택 .fifth :not(p) fifth 클래스를 가진 요소의 자식들 중에..

:first-child 지정 요소가 형제 요소 중 제일 첫 요소인 경우 다른 말로 부모의 자식 요소 중 첫 번째 자식을 선택 CSS .parents p:first-child { background-color: green; color: #fff; } .parents > p:first-child { text-decoration: underline; font-style: italic; } 아래의 예시에서 부모는 .parents가 된다. p:first-child 부모의 자식 요소(=형제 요소) 중 첫 번째 요소가 p(지정 요소)인 경우에 스타일을 적용한다. HTML 1. 첫번째 p요소 2. 두번째 p요소 3. 첫번째 div 요소 3-1. div 내부의 첫번째 p요소 결과 1. 첫번째 p요소 2. 두번째 p요소 ..

:only-child 지정 요소가 부모의 유일한 자식 요소인 경우 다르게 말해서 부모의 자식 요소가 지정 요소 하나만 있는 경우에 적용이 된다. :only-of-type 지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우 부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없다. CSS .parents div:only-child { background-color: green; color: #fff; } .parents p:only-child { background-color: gray; color: #fff; } .parents p:only-of-type { text-decoration: underline; font-style: italic; } HTML 1. parents의 자식이 오직 하..

:nth-child() 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다. 문법(Syntax) :nth-child(n) nth-of-type() 같은 타입의 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다. 문법(Syntax) :nth-of-type(n) 키워드(n) odd 형제 요소중에 홀수번째인 요소 선택(1, 3, 5, 7, …) even 형제 요소중에 짝수번째인 요소 선택(2, 4, 6, 8, …) An + B A와 B는 정수의 입력값(B는 선택), n은 0부터 시작하는 양의 정수가 적용되어 A x n + B로 계산한 값이 대입된다. 예시(A에 3, B에 1을 대입한 3n + 1) A 3 x(곱하기) n 0 1 2 3 4 ... +(더하기) B 1 결과 1 4 7..