고정 헤더 영역
상세 컨텐츠
본문
우선 아래 이미지를 보자.
같은 버튼이지만, [주의사항 확인하기] 버튼과 [로그인하기] 버튼의 디자인이 다르다.
body에는 다음과 같이 작성해있다.
<body>
<div class="wrap">
<div class="title">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
<button onclick="hello()">주의사항 확인하기</button>
</div>
<p>ID : <input type="text" /></p>
<p></p>PW : <input type="text" /></p>
<button> 로그인 하기 </button>
</div>
</body>
그렇다면, 버튼 2개를 각각 지정해서 디자인 하고 싶을 땐 어떻게 해야할까?
또 클래스를 지정하는 것도 하나의 방법이다. 다만 그렇게 되면 너무 많은 버튼마다 클래스를 지정하기에 사이트가 복잡할 수록 관리하기 어렵다.
그렇기에 wrap이란 클래스 안에 있는 버튼, title이란 클래스 안에 있는 버튼이란 지정을 해주는 것이다.
이렇게 텍스트로만 본다면 잘 이해가 안갈 것이다.
div가 하나의 표라고 본다면, 아래와 같이 구분할 수 있다.
그렇기에 title, wrap 이란 클래스 안에 있는 버튼을 수정하고자 한다면 style을 아래와 같이 적용한다.
클래스 안에 있는 버튼 이란 표현이다.
퍼포먼스 마케터라면 많이 봤을 법한데, GTM으로 트리거 설정할 때 css selector(CSS셀렉터)로 지정하다보면 많이 보는 형태이다.
번외로, 마우스를 올렸을 때 버튼이 변화되는 것처럼 만들고 싶다면?
위와 같이 button:hover 라고 하면 된다. 그리고 그 안에 원하는 스타일을 지정하면 된다.
'7. 봉드로이드_개발공부' 카테고리의 다른 글
| jQuery는 무엇이고, 어떻게 사용하나요? (0) | 2024.10.06 |
|---|---|
| javascript 기본 개념 총 정리! (2) | 2024.10.05 |
| 특정 영역 불투명도 조절하는 방법(linear-gradient) (0) | 2024.10.04 |
| 부트스트랩 사용 방법(사이트 손 쉽게 꾸미기) (0) | 2024.10.04 |
| css 파일 분리는 어떻게 해야하나요? (0) | 2024.10.03 |
