chocoboy

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 으로 바꾸어 볼까?? 다음과 ..

까먹을까봐 또 미리미리 포스팅하려고 하는 언덕위의 제임스 입니다...... body { font-family : KoPubDotum Bold; // 어떤 폰트를 사용할 것 인가? background-color: #2a2a2a; // 배경 색깔은 어떤거로 사용 할 것인가? } .backimg{ // 배경 이미지 height: 800px; // 배경 이미지의 높이는? background: url(../../img/main2.png); // 배경 이미지 가져오기 background-size: cover; // 배경 이미지 확대/ 축소 기능 position: relative; // z-index의 기준을 잡는 기준점 / z-index 사용시 필수요소임 z-index: 1; // 요소의 몇번째 층으로 사용할 것인..

바로 드가자. 배경 화면을 확인해보자. 방법 분명 다음과 같이 배경화면이 있다. 최대로 축소 했을때 배경화면이다. 조금 두번 확대 했을 때 3번 더 확대 했을 때이다. 다음과 같이 background-size: cover; 배경화면이 자체적으로 커지는 것을 말한다. To be continue..

처음에는 아무 생각 없이 Margin 으로만 가운데를 맞춰보려고 했는데 생각해보니까, 32인치 / 27인치 / 24인치 / 이 이하 등등.. 도 있다는 점을 내가 간과했다. 그래서 만약 24인치 위주로 Margin값을 세팅했다면 27인치 / 32인치 등의 모니터에서 제대로 안보이게 될 것이다. 방법 다음 처럼 페이지를 맨뒤로 뺏을 때 가운데에 오도록하려면 body { margin: 0 auto; } 다음을 꼭 선언해주고 HTML이든, CSS든 스타일 잡아주어야한다.... To be continue..

안녕하세요. 요근레, 퍼블리시 할일 들이 많아지네요. 그래서 이참에 퍼블리시에 대해서 제대로 알고가려고 하나하나 작성합니다. z-index 👌 z-index는 position : [속성]; 이 필수로 적용되어야 합니다. 그래야 position: 속성을 받은 요소들끼리 z-index 비교하여 앞 뒤를 정하게 됩니다. z-index는 층을 의미합니다. 예를 들어, 다음을 예시를 뜯어보면 다음과 같이 세 가지 요소로 나뉘어진걸 우리는 확인해 볼 수 있습니다. 요소들은 배경 / 글자 / 버튼 이렇게 세가지 요소들이 있다는 것을 저희는 다시 한번 확인 해 볼 수 있죠.. 하지만 만약 배경 레이어가 더 위에 있게 된다면? 다음과 같이 아무것도 없게 보이게 됩니다. 왜냐하면, 배경화면이 가리고 있기 때문이죠. 배경 ..