CSS별로 우선순위가 있지만, 이런 경우도 있기 때문에 적어둔다 Method 다음과 같이 a 태그를 사용 중일 때 누간가 전역변수(global variable)로 통째로 스타일 잡아 놓았걸 그대로 전역변수 스타일을 그대로 가져가면서 a 테그에 따로 스타일을 주고 싶을 때가 있다. 그 때는 a 테그에서 text-decoration 를 사용하기 위해서는 someThing 스타일을 에 주면 text-decoration이 적용되지 않는다. 그래서 테그로 직접 text-decoration 를 넣어줘야 적용이 된다. 즉 직접 스타일 주어야한다. text-decoration = a 테그에 직접 To be continue..

너무 초초초 간단스 해가지고 바르 설명 들어가겠다. Usage 여기서 마우스를 가져다가 대면 다음과 같이 바뀌도록 스타일 잡아 봤다. Method 다음과 같이 원하는 클래스에 :hover 를 입력해준다. 그리고 마우스를 가져다 놓았을 때 바뀌고 싶은 색상으로 버튼의 스타일을 잡아주면 된다. jsp파일 인데 이 부분은 class 와 mainButton 이 같다라는 것을 보여주기 위해서 캡쳐 해놓았다. 그럼 20000 To be continue..

바로 들어가보자 Example display: row; 로 하게되면 이 방향으로 진행되게되고 display: flex; 로 하게되면 다음과 같은 방향으로 진행이 된다. To be continue..

바로 들어가보자 Example 이 요소 들을 가운데로 밀고 싶다. 그럴 땐 저 해당된 컨텐츠에 스타일 묶어서 align: items: center; 해주면 된다. 그러면 다음과 같이 모든 요소들이 땡겨 진것을 확인 할 수 있다. To be continue..

간혹 개발을 하다보면 끝 부분에 약간의 여백이 남아있는 것을 확인 할 수 있다. Example 이것을 좀 확대 해보면 저 빨간 줄에 약간의 공백이 있는 것을 확인해 볼 수 있다. 속성은 보통 한줄 끝까지 먹히는 것 으로 알고 있는데, 참,, 무슨 오류인가 싶었다. 개발자모드로 확인해보니.... body에 margin 이 잡혀있었다.. 그래서 margin: 0; 을 해주니까 해결이 되었다.. To be continue..

CSS를 스타일 잡아줄 때 하나하나 세세하게 주는 방법에 대해서 포스팅 하고자한다. 스타일을 하나하나 주어야 하는 이유는 바로 "가독성" 때문이다. Example 다음 과 같은 CSS가 어떻게 쓰여 있는지 알겠는가? #TIp .main_version 이라면 html에 #main_version 이라면 html에 다음 과 같이 사용 해야 스타일이 적용이 된다. 그럼 이제 depth 의 개념에 대해서 들어가보자. 더 구체적으로 .main_version .title { 속성 } 이런식으로 사용 하였을 때, class="main_verison" 안에있는 요소들 중에 class="title" 이라는 녀석에게 스타일을 적용시키겠다. 이런 의미이다. 한번 더 부분의 폰트 색깔을 green 으로 바꾸어 볼까?? 다음과 ..