ABOUT ME

    -
    • CSS - 기초(2) / 선택자
      프로그래밍/HTML & CSS 2021. 9. 16.
      반응형

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

* {
	font-size: 15px;
	font-family: 맑은 고딕, 돋움;
}

/*태그선택자*/
p {background: yellow;}
label {color:blue; font-weight: bold;}

/* id 선택자 */
#box {width: 300px; padding: 10px; border: 3px dashed gray;}

/* 클래스 선택자 */
.red{ color: red; }
.underline { text-decoration: underline; } 

</style>
</head>
<body>

<h3>Selector : 기본 셀렉터</h3>

<div>
	<div id="box">
		<label>프로그래밍</label>
		<span class="red">자바</span>
		<span>C언어</span>
		<span class="red underline">코틀린</span>
		<p>
			<label>데이터베이스</label>
			<span class="red">오라클</span>
			<span class="underline">mysql</span>
			<span>빅데이터</span>
		</p>
	</div>
	<div>
		<label>웹</label>
		<span>HTML</span>
		<span>CSS</span>
		<span>javascript</span>
		<p>
			<label>웹프로그램</label>
			<span>JSP</span>
			<span>PHP</span>
			<span>ASP.NET</span>
		</p>
	</div>
</div>


</body>
</html>

      - 선택자는 3가지 종류가 있다.

      - 선택자는 style 태그로 임베디드 이다. 미리 정의한다는 뜻

       

      1. 태그 선택자 => 말 그대로 태그에 속성을 주는 것 ex)p {}, label {}

      2. id 선택자 => id값을 지정하여 일치하는 요소를 딱 선택

      이 값은 중복이 불가능한 유일한 값 ex) #myId {}

      3. 클래스 선택자 => 아이디랑은 비슷하지만 값이 중복이 된다.

      ex) .myClass{}

       

       

      다중 조건 선택자

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* OR 선택자 */
label, span { color:blue; font-weight: bold; }

/* AND 선택자 */
div.box {
	width: 300px; height: 50px;
	border: 3px dashed gray;
}



</style>
</head>
<body>


<h3> 다중 조건 선택자 </h3>

<p class="box">스타일이 적용 되지 않는다.</p>
<div>스타일이 적용되지 않는다.</div>
<div class="box"></div>
<hr>

<div>
	<p>과목</p>
	<label>웹</label>
	<span>HTML</span>
	<span>CSS</span>
	<span>자바스크립트</span>
</div>






</body>
</html>

      - 한마디로 OR 냐 AND냐의 차이

       

      AND 선택자 = div.box{} div태그의 box 클래스만 적용

      OR 선택자 = label, span {} 라벨이나 스판에 적용하겠다

       

       

      어트리뷰트 셀렉터 (태그나 속성 찾기)

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
p { height: 20px; }

/* name=subject 인 요소 */
input[name=subject] { background: yellow; }

/* name 속성을 가진 요소 */
input[name] { border: 1px solid blue; }

/* name 속성값이 a로 시작하는 요소 */
input[name^="a"] { border-right: 3px solid red; }

/* title 속성값이 "버튼"으로 끝나는 요소 */
input[title$="버튼"] { background: green; }

/* name 속성값에 "x"를 포함하는 요소 */
input[name*="ㅌ"] { border-left: 3px solid orange; }

/* title 속성값에 "내용" 이라는 단어(띄어쓰기로 구분)가 존재하는 요소 */
input[title~="내용"] { background: gray; }

/* lang 속성 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */
p[lang|="en"] { color : red; }

</style>

</head>
<body>

<h3>어트리뷰트 셀렉터(Attribute Selector) : 주어진 어트리뷰트의 존재여부나 그 값에 따라 요소를 선택</h3>

<form>
	<p> <input type="text" name="subject" title="과목 입력"> </p>
	<p> <input type="text" name="ax1" title="1장 제목 입력"> </p>
	<p> <input type="text" name="as2" title="1장 내용 입력"> </p>
	<p> <input type="text" name="bs1" title="2장 제목 입력"> </p>
	<p> <input type="text" name="bx2" title="2장 내용 입력"> </p>
	<p> <input type="file" name="selectFile"> </p>
	<p>
			<input type="button" value="입력완료" title="입력 버튼">
			<input type="reset" value="입력취소" title="취소 버튼">
	</p>
</form>

<div style="margin-top: 30px;">
  <p lang="en">JAVA</p>
  <p lang="en-us">JAVA</p>
  <p lang="en-gb">JAVA</p>
  <p lang="us">JAVA</p>
  <p lang="no">JAVA</p>
</div>

</body>
</html>

      - 내가 원하는 놈에게만 적용하고 싶을때 사용한다.

      위에서 했던 선택자는 조금 범위가 세세하기 못하기 때문에 상세하게 알려줄 필요가 있을때는

      이렇게 input을 활용한다.

       

      input[name=subject] {} = 바디에서 name이 subject인 요소에만 적용하겠다.

       

      input[name] = 그냥 name 속성 가지고 있는 놈들 모두 적용 하겠다.

       

      input[name^="a"] = name 중에서 a로 시작하는 놈들만 적용하겠다 (정규식과 비슷하게 시작은 ^ 끝은 $이다.)

      그리고 여기서 쌍 따옴표는 생략 가능하다 그냥 a만 써도 됨.

       

      input[title$="버튼"] = title 중에서 버튼으로 끝나는 애들만 적용 하겠다.

       

      input[name*="x"] = name 중에서 x를 포함한 모든 놈들한테 적용 하겠다.

       

      input[title~="내용"] = title 애들 중에서 "내용" 이라는 단어가 포함된 애들한테 적용 하겠다.

      (띄어쓰기 구분함.)

       

      input[lang|="en"] = lang 속성값이 en과 똑같거나 en으로 시작하는 애들한테만 적용 하겠다.

       

       

       

      결합자 관련

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* 인접 형제 결합자(+) */
label + span { background: yellow; }

/* 일반 형제 결합자(~) */
label ~ span { color: blue; font-weight: 600; }

/* 자식 결합자(>) */
.subject > label { color:tomato; font-weight: bold; }

/* 자손(후손) 결합자(공백) */
.subject label { background: #ccc; }

</style>

</head>
<body>

<h3>Selector : 결합자(Combinator)</h3>

<div class="box">
	<div class="subject">
		<label>프로그래밍</label>
		<span>자바</span>
		<span>C언어</span>
		<span>코틀린</span>
		<p>
			<label>데이터베이스</label>
			<span>오라클</span>
			<span>mysql</span>
			<span>빅데이터</span>
		</p>
	</div>
	<div class="subject">
		<label>웹</label>
		<span>HTML</span>
		<span>CSS</span>
		<span>javascript</span>
		<p>
			<label>웹프로그램</label>
			<span>JSP</span>
			<span>PHP</span>
			<span>ASP.NET</span>
		</p>
	</div>
</div>


</body>
</html>

      label + span = 라벨 밑으로(자식) 가까운 스판만 적용하겠다.

      (그냥 첫번째 span놈만 적용된다 생각하면 된다.) 

      그래서 라벨에서 젤 가까운 스판인 자바 오라클 HTML JSP만 적용이 된다.

       

      label ~ span = 라벨 밑에 있는 span 다 적용 시키겠다.

       

      .subject > label = 자식 결합자 / 서브젝트 클래스 영향 받으면서 자식 중에서 label인 애들만 적용

      label의 자식  label은 적용 안된다. 손자말고 자식까지만

       

      .subject label = 얘는 손자까지 다 적용 서브젝트 영향 받는 모든 라벨들 다 적용

      반응형
      저작자표시

      '프로그래밍 > HTML & CSS' 카테고리의 다른 글

      CSS - 기초(4)  (0) 2021.09.18
      CSS - 기초(3) 가상 클래스 / 링크 셀렉터  (0) 2021.09.16
      CSS - 상속과 우선순위  (0) 2021.09.16
      CSS - 단위  (0) 2021.09.16
      CSS 기초(1) / 외부css 파일 가져오기  (0) 2021.09.16

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바