01 테이블
테이블 - 반응형에서 제약이 있지만, 편리하고 넓이값 높이값을 퍼센트로 줄 수 있기 때문에 용이
| td | td | td | td |
| tr |
한 줄씩을 tr 한 칸씩을 td 라고 부른다 tr을 이루는 것이 table.
h태그는 1번부터 6번까지 사용할 수 있다.
h1 태그는 로고에만 사용함
가장 큰 제목이 로고
align = 가로정렬
valign(vertical align) = 세로정렬
1-1 테이블 병합
colspan: 칸을 합친다.
rowspan: 줄을 합친다.
border: 가장자리
cellspaceing="0": 테두리 두줄로 되어있는 걸 한줄로 합쳐줌
수치가 들어갈 경우 테이블보더와 tr/td 간 두께가 생김
body란?
바디 백그라운드 컬러 변경 2가지 방법
1. <head> 안에 <style> 생성하여 body 백그라운드 컬러로 컬러 설정하거나
2. <body bgcolor=" "> 명령어
예제) 영양구성표만들기
hr: line
td > th 로 변경하면 타이틀로 자동으로 진하게 변경됨
cellpadding: 셀 안쪽 여백 주기
예제) 커피의 종류
img src= ./
alt- 이미지의 설명 , alt 정보 안 넣어줄 시 웹표준에 어긋남, 시각장애인을 위한 이미지설명
이미지 width 값만 넣어주면 비율에 맞게 보여줌
div: 사각형 영역
img 는 인라인 구조, 위쪽과 아래쪽에 여백이 들어감
사진 밑에 글자를 넣고 싶을때 display: block; 으로 정렬
class는 이름을 똑깥이 여러개 사용할 수 있음
똑같은 이름의 class 에 공통적으로 효과를 적용할 수 있다.
span: 특정 영역에 class(이름)을 부여하여 각각의 효과를 적용할 수 있음
<span class="00">
background: 백그라운드 이미지넣을 시 배경색이 깔려있고 이미지가 반복적으로 출력됨
반복을 중지하고 싶다면 끝에 no repeat; 을 적어줌
원하는 위치에 이미지를 넣어주고 싶다면
x축과 y축 치수를 지정해 주면 된다.
repeat-x : 이미지가 가로로 연속됨
repeat-y : 이미지가 세로로 연속됨
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비쥬얼 스튜디오 코드④_테이블 만들기2 , 목록태그 (0) | 2023.05.18 |
|---|---|
| [포토샵] 세로형 카드뉴스 만들기 (0) | 2023.05.18 |
| [포토샵] 머리카락 누끼따기 , 아트보드 활용 (1) | 2023.05.17 |
| 비주얼 스튜디오 코드②_이미지넣기_백그라운드 이용 (0) | 2023.05.16 |
| [포토샵]그라디언트, 사진 합성하기 (0) | 2023.05.16 |