IT/Web programming

class,id,link 태그를 이용해 html에 css 적용하기

히비스커스레몬 2022. 2. 15. 11:52
반응형

요즘은 메가박스 홈페이지 html.css.js를 보고있다.

css파일이 무슨 3만줄이 넘는다...

근데 아래내용과 검색기능만 있으면 얼추 파악은 되는듯 하다

이정도는 외우자..!

 

1.클래스(class) 선언하여 호출하기

.클래스명{~}으로 호출

클래스명 중복가능 ->복수의 요소에 적용

 

2.아이디(ID) 선언하여 호출하기

#id명{~}으로 호출

아이디명 중복불가능 ->유일한 요소에 적용 (클래스보다 우선순위 높음)

<head>
<meta charset="UTF-8">
<style>
    #apple{
        font-size:30px;
        color:red;
    }
    .banana{
        font-size:20px;
        color:yellow;
    }
</style>
</head>

<body>
<p>안녕하세요</p>
<p id="apple">사과</p>
<p class="banana">바나나</p>

</body>

 

당연히 그룹화도 된다.

<head>
<meta charset="UTF-8">
<style>
    .div_grape{
        font-size:40px;
        color:rebeccapurple;
    }
</style>
</head>

<body>
<div class="div_grape">
    <p id="A">apple</p>
    <p class="B">banana</p>
</div>
</body>

 

3. 외부 css파일 호출하기

<link href='파일위치' rel="stylesheet">를 헤드에 입력

 

 

 

 

 

 

 

반응형