Front-End/UI

HTML tag와 속성, CSS 선택자

doriver 2024. 12. 22. 16:33

 

Tag

<h1> , <p> , <a> , <img>

<div> , <ul> , <li> , <table> , <tr>,  <th> , <td>

, .... , <tagName> 

 

 

Attribute

속성 사용예시
href <a href="https://www.w3schools.com"> Visit W3Schools </a>
style <p style="color:red;">This is a red paragraph.</p>
src , width, height <img src="img_girl.jpg" width="500" height="600">
class <div class="city">  ,  <h2 class="city main">
id  <h1 id="myHeader">

 

name 속성

중복 가능: 한 HTML 문서 내에서 동일한 name 값을 가진 요소들이 여러 개 존재할 수 있습니다.
용도:
폼 요소(<input>, <select>, <textarea> 등)에서 사용
서버로 데이터를 전송할 때 동일한 name 값을 가진 여러 값이 배열 형태로 전달됩니다.
name 속성은 <iframe>, <a>, <meta> 등에서도 특정 목적으로 사용됨

 

 

전역 속성( Global Attributes )

모든 HTML 요소에서 공통으로 사용할 수 있는 전역 속성

id 문서 전체에서 유일한 고유 식별자
문서 내에는 주어진 id를 가진 요소가 하나만 존재함
class 요소의 별칭
   

 

CSS 선택자

#id 특정 ID를 가진 요소 선택
.class 특정 클래스를 가진 요소 선택
tag 태그 이름으로 요소 선택
> 바로 아래 자식 요소만 선택


직계 자식만 선택하려면 >를 사용하고, 모든 자손 요소를 선택하려면 띄어쓰기(' ')를 사용