> attributes 속성
element 에 대한 부가적인 정보를 제공
element 의 시작태그에 작성
하나의 element 에 여러 개의 attributes 가 작성될 수 있음
name 과 value 를 쌍으로 작성 (값은 작은/큰 따옴표 안에 작성, 값은 생략 가능) → name = "value"
(값에 작은 따옴표가 있으면 값을 큰 따옴표 안에, 값에 큰 따옴표가 있으면 값을 작은 따옴표 안에 작성)
→ HTML Attribute Reference 참고 (각 태그에 작성가능한 attributes 확인 가능)
예1)
<a href="https://www.w3schools.com">Visit W3Schools</a>
예2)
<img src="img_girl.jpg">
-> 빈 요소 (시작태그만 존재)
예3)
<img src="img_girl.jpg" width="500" height="600">
-> 빈 요소, attributes 3개(src, width, height)
> href
hyperlink (하이퍼링크) 표시, 다른 페이지로 연결됨
<a href="연결될 페이지 주소">
→ <a> 태그, hyperlink (하이퍼링크) 표시, 다른 페이지로 연결됨
> width and height
element 의 너비와 높이를 설정
<img src="파일명" width="가로 크기" height="세로 크기">
→ <img> 태그 (empty element), 이미지의 가로세로 크기 설정
> alt
element 표시에 실패할 경우 대체 텍스트 표시됨
(시각장애인 스크린 리더기에 읽히는 용도로도 사용됨)
<img src="파일명" alt="이미지 로딩에 실패한 경우 표시할 텍스트" width="가로" height="세로">
→ <img> 태그, 이미지 표시에 실패할 경우 대체 텍스트 표시됨
> title
element 에 대한 추가 정보가 나타나도록 설정
<h2 title="마우스 커서를 올리면 표시할 tooltip">
→ <h2> 태그, element 에 마우스 커서를 올리면 tooltip 표시됨
> style attribute
폰트, 색상, 크기 등의 style 을 element 에 추가
style 을 설정하지 않으면 각 element 의 기본 style 로 표시됨
attribute 값이 property : value 쌍으로 작성됨 (CSS)
(attribute 와 property 모두 '속성' 으로 번역됨을 주의)
→ CSS Reference 참고
1. color
<p style="color:red;">
→ 태그<p>, 글씨 색상을 빨간색으로 표시
2. font-size
<p style="font-size:50px;">
→ 태그<p>, 글씨 크기를 50px로 표시
<p style="font-size:300%;">
→ 태그<p>, 해당 element 의 부모 element(ex. body) 크기의 3배로 표시
3. background-color
<h1 style="background-color:pink;">
→ 태그<h1>, 글씨 배경 색상을 분홍색으로 표시
<h1><span style="background-color:orange;">텍스트</h1>
→ 태그<span>, 텍스트 부분만 배경 색상을 주황색으로 표시
→ span? inline element 이기 때문!
<body style="background-color:tomato;">
→ 태그<body>, 페이지에 표시되는 부분 전체의 배경 색상을 토마토 색상으로 표시
4. font-family
<p style="font-family:verdana;">
→ 태그<p>, 글씨의 폰트를 verdana 로 표시
5. text-align
<p style="text-align:center;">
→ 태그<p>, 텍스트를 중앙으로 정렬
<p style="text-align:right;">
→ 태그<p>, 텍스트를 오른쪽으로 정렬
<body style="text-align:center;">
→ 태그<body>, 페이지에 표시되는 모든 텍스트를 중앙으로 정렬
* 여러가지 style 설정
<p style="color:blue;font-size:50px;">
→ 태그<p>, 글씨 색상으로 파란색으로, 크기를 50으로 표시 (한번에 여러가지 설정, 세미콜론으로 구분)
* 색상 지정 방식
1. 색상 이름으로 지정 - HTML 은 140개의 color name 지원
ex. color:tomato
2. rgb 함수 - red, green, blue 3가지 색의 혼합으로 색상을 정의, 각 색의 범위는 0~255
ex. color:rgb(255, 99, 71)
3. 16진법 - rgb 함수를 16진법으로 표현, 앞에 '#' 을 붙임
(대소문자 구분 X, 같은 글자가 연속되면 하나는 생략 가능)
ex. color:#ff6347
ex. color:#000000 = color:#000
> block & inline
element 는 크게 block element 와 inline element 로 구분됨
1. block
가장 넓은 너비를 차지, 따로 작성하면 새로운 줄에 배치
ex. <h1>~<h6>, <p> 등
※ 기본 style 이 없는 대표적인 block element - div
2. inline
가능한 좁은 너비를 차지, 따로 작성해도 같은 줄에 배치
ex. <a>, <img>, <span> 등
※ 기본 style 이 없는 대표적인 inline element - span
→ div 와 span 비교
1) background-color
div - element 두개 생성 → 간격이 없음, 기본 style 이 없기 때문
span - element 두개 생성 → inline element 이기 때문에 원래 간격 없으며 같은 줄에 배치됨.
(하지만 태그 a 와 비교하면 a는 기본 style (밑줄) 이 있기 때문에 기본 style 이 없는 span과 차이를 보임)
2) text alignment (center)
div - 영역이 background-color 가 칠해지는 한 줄 전체이므로, 해당 영역의 중앙으로 정렬됨
span - 영역이 background-color 가 칠해지는 텍스트 부분 뿐이므로, 영역의 중앙으로 정렬되어도 변화 없음
<!DOCTYPE html>
<html>
<head>
<title>block and inline</title>
</head>
<body>
<div style="background-color:green;">
<span style="background-color:yellow;">this is example.</span>
</div>
</body>
</html>위와 같이 div 안에 span 이 있을 때, span 의 텍스트를 중앙으로 정렬하고 싶다면, text-align 을 span이 아닌 div에 작성해야 함
text-align property 는 content 뿐만 아니라 block 안의 inline element 도 정렬함
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
| day06 - link, pseudo class, combinator (0) | 2021.10.23 |
|---|---|
| day05 - font (0) | 2021.10.22 |
| day04 - box model (0) | 2021.10.20 |
| day03 - CSS, selector, combinator (0) | 2021.10.16 |
| day01 - HTML, element, vscode (0) | 2021.10.10 |
