웹페이지 스터디 첫째 주 (1차시, 2차시) 정리
<DAY1>
◇ 강조 태그 - 글씨체 강조 효과
- <b>, <strong> : 굵게
- <i,em> : 기울임꼴
- <mark> : 형광펜 처리
- <small> : 작게
cf) 또 다른 글씨체 기울임 효과
style= "font-style: italic;"
<DAY2>
■ 테이블 태그
- <table> : 표 만드는 태그 (1)
- <thead> : 테이블 제목부분 (2-1)
- <tbody> : 테이블 내용부분 (2-2)
- <td> : 표에 데이터 입력 (3)
- <tr> : 행 (가로줄) (2)
- <th> : 열 (세로줄) 제목 (3)
1. rowspan : 행 (가로줄) 병합 시 사용
<td rowspan="2">위 아래 두 줄 합쳐짐</td>
2. colspan : 열 (세로줄) 병합 시 사용
<td colspan="2">colspan좌우 두 줄 합쳐짐</td>
◇ 테이블 안의 내용, 중앙정렬하고 싶을 때
1. 일일이 설정하거나
<td><div style="margin:0 auto;">한글</div></td>
2. 테이블 자체에 중앙정렬 걸어주기
<table style="border:1px solid black; margin:auto; text-align:center;">
- 그 外
[ CSS 응용 ] DIV 중앙정렬 방법 총정리
| 개요 사이트를 디자인 하다보면 여러가지 정렬방식들이 기초적인 text-align속성과 position속성으로 정렬을 할 수 있다고 설명을 해드린적이 있습니다. 그렇다면 이번엔 조금 더 들어가 Div객체를
saimplay.tistory.com
◇ table 선 만들기
1. table 가장 큰 외곽에 선 만들고 싶을 때
: body 안에!
<table style="border:1px solid black;"> ... </table>
2. table,td, th 항목 하나하나 다 선 만들고 싶을 때
: head 안에!
<style type="text/css">
table, td, th {
border: 1px solid black;
}
</style>
◇ table border 테두리선 사이 간격 삭제
: table 안에
border-collapse:collapse;
■ 블록 태그
- 박스 형태
- 크기, 여백 지정 可
- 여백 상관 없이 자동으로 단락 나눠짐
1. <div> : 작업 영역 설정 시 사용
<div style="width:600px; height:200px; background:skyblue;">작업 영역 설정 시 사용</div>
2. <nav> : 네비게이션 역할을 하는 링크 그룹 담을 때 사용
<nav>
<a href="/nav/">NAV</a> |
<a href="/link/">LINK</a> |
<a href="/group/">GROUP</a>.
</nav>
=> 출력 결과 : NAV | LINK | GROUP.
■ 인라인 태그
- 한 줄로 나열
- 여백이 남는만큼만 일렬로 나열됨
- 크기, 여백 지정 불가능.
1. <span> : div 태그 내에서 기능 추가 시 사용
<div style="width:600px; height:200px; background:skyblue;">
이럴수가 <span style="background-color:beige;"> 저럴수가</span>
</div>
■ 블록-인라인 태그
- <iframe> : 페이지 안에 다른 페이지 내용 삽입하고 싶을 때 사용
<iframe src="https://naver.com" frameborder="0">
</iframe>
■ CSS 방식
| inline 방식 | internal 방식 | external 방식 | |
| 형식 | style="속성1:값; 속성2:값;" | <style></style> | css파일 만들어 css파일 link함 (디자인-데이터 완전 분리) |
| 예 | <p style="color:coral; margin-left:0;"> inline방식</p> |
<head> <style> p { margin-left:20px; } </style> </head> |
<link href="css파일" type="text/css" rel="stylesheet"/> |
- CSS 속성
1. margin : 외부에 여백 만듦
2. padding : 내부에 여백 만듦