CSS 기본 선택자

easyliving·2022년 12월 5일
0

FRONT_END (HTML/CSS)

목록 보기
11/16

ID / CLASS

		#: id 앞에 붙여줌
        .: class 앞에 붙여줌
        

자식/후손

<body>
		<header>Easy_Living Velog</header>
		<nav>
		 	<ul>
		 		<li>Java</li>
		 		<li>python</li>
		 		<li>html/css</li>
			</ul>
		</nav>
</body>		

		body의 자식 태그는 header/nav 태그
        body의 후손은 header/nav/ul/li 태그 
        

 nav > ul{}
 
 nav li{}
 

			자식 태그 선택: 부모>자식
            후손 태그 선택: 부모 자식 (띄어쓰기 한번)
            

특정 속성 태그 꾸미기

<head>
<style>
[title] {color: green;}
[title='selector'] {color: blue;}
span.easy[title] {color: red;}
</style>	
</head>
<body>
  <div>
    <p>
      <span title="selector">
        <em>selector</em>
      </span>
      <span class="easy" title="easy">easy</span>
      <b>bold</b>
    </p>
  </div>
</body>

		특정 속성을 가진 태그를 선택할 수 있음 
        

동시 선택

<head>
<style>
h1,p{}
</style>
</head>
<body>
  <section>
              <article>
                  <h1>공지사항</h2>			
                  <p>언제쯤 html이 끝날까?</p>
                  <p>언제쯤 tag를 다 외울까?</p>
                  <p>모르겟고, 오늘꺼나 잘하나</p>				
              </article>
              <aside>
                  <ul>
                      <li>이전글</li><li>다음글</li>
                  </ul>
              </aside>
  </section>
</body>

			,를 통해서 동시 선택도 할 수 있다.
            

Link tag

<head>
	<title>css</title>
    <link rel="stylesheet" href="css/css1.css">
</head>
HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시
<link>는 스타일 시트를 연결할 때 제일 많이 사용
위의 간단한 예제는 href 특성에 스타일 시트의 경로를,
rel 특성에 stylesheet을 사용합니다.
rel 은 관계(relationship)를 뜻하며, 
현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명
profile
가끔져요

0개의 댓글