목차
- inline과 block태그의 차이(div, span)
- 제목태그와 목록태그(h1, ul, li)
- 입력양식태그(form, input)
- 여백과 면적의 차이(margin, padding)
- 태그의 높이와 너비 지정을 이용한 버튼만들기(width, height)
- 이미지 불러오기, 링크 걸기(img, a)
1. inline과 block태그의 차이
(div, span)
2. 제목태그와 목록태그
(h1, ul, li)
<!doctype html>
<html lang="ko">
<head></head>
<body>
<style>
/* li태그의 점을 없앰 */
li {
list-style:none;
}
/* 블록태그전체 css */
.blockTag{
background-color: yellowgreen;
border: 1px solid black;
}
/* 블록태그의 자식선택자 */
/* 선택자와 선택자를 ">"로 구분 */
/* 계층구조에서 바로 아래에 오는 자식요소만을 선택 */
.blockTag > div {
background:tomato;
border: 1px solid black;
}
/* 인라인태그의 자손선택자 */
/* 선택자와 선택자를 공백으로 구분 */
/* 계층구조에서 하위에 오는 모든 자손 */
.inlineTag span{
background: skyblue;
border: 1px solid black;
}
</style>
<!-- 제목태그 -->
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<!-- 목록태그(순서X) -->
<ul>
<li>목록 1</li>
<li>목록 2</li>
<li>목록 3</li>
</ul>
<!-- div는 블록태그 -->
<div class="blockTag">
<div>block 1</div>
<div>block 2</div>
<div>block 3</div>
</div>
<!-- span은 인라인태그 -->
<div class="inlineTag">
<span>inline 1</span>
<span>inline 2</span>
<span>inline 3</span>
</div>
</body>
</html>3. 입력양식태그
(form, input)
4. 여백과 면적의 차이
(margin, padding)
5. 태그의 높이와 너비 지정을 이용한 버튼만들기
(width, height)
6. 이미지 불러오기, 링크 걸기
(img, a)
<!doctype html>
<html lang="ko">
<head></head>
<body>
<style>
/* 목록태그에 점을 없앰 */
li {
list-style: none;
}
/* 버튼만들기 css */
.colorBtn {
/* 폭, 높이 설정 */
width: 100px;
height: 36px;
/* 배경색 */
background-color: green;
/* 글자색 */
color: white;
/* 텍스트 정렬(센터) */
text-align: center;
/* 텍스트 위치(높이) */
line-height: 36px;
/* 커서갖다대면 커서모양변경 */
cursor: pointer;
/* 모서리 둥글게 */
border-radius: 15px;
}
</style>
<!-- form : 입력양식태그 -->
<form>
<!-- 한줄로 말고 세로로 나눠서 출력 되게 -->
<ul>
<!-- text : 텍스트입력 -->
<li><input type="text"></li>
<li><input type="password"></li>
<!-- submit : 서버에 데이터 전송 -->
<!-- <li><input type="submit"></li> -->
<!-- checkBox, radio는 -->
<!-- label로 감싸서 한덩어리라는걸 명시해야함. -->
<!-- 그 다음 name이라는 요소로 묶어주고 -->
<!-- 그런 뒤에 id는 각자 이름에 맞게 지어줌 -->
<!-- radio -->
<!-- 하나만 선택 가능 -->
<li>
<label><input type="radio" name="fruit" id="orange">오렌지</label>
<label><input type="radio" name="fruit" id="apple">사과</label>
<label><input type="radio" name="fruit" id="strawberry">딸기</label>
</li>
<!-- checkBox -->
<!-- 여러개 선택 가능 -->
<li>
<label><input type="checkbox" name="fruit" id="orange">오렌지</label>
<label><input type="checkbox" name="fruit" id="apple">사과</label>
<label><input type="checkbox" name="fruit" id="strawberry">딸기</label>
</li>
<!-- 아래 버튼3개는 브라우져마다 다르므로 잘 안쓰임 -->
<!-- input타입 button -->
<li><input type="button" value="버튼입니다"></li>
<!-- input타입 submit -->
<!-- submit버튼은 경고없이 바로 서버로 쏴줌 -->
<!-- 따라서 예를들어 div를 이용해서 만듬 -->
<li><input type="submit" value="저장하기"></li>
<!-- button만드는 방법2 -->
<li><button>버튼입니다2</button></li>
<!-- button css로 만들기 -->
<li><div class="colorBtn">버튼입니다</div></li>
</ul>
</form>
<!-- a태그 -->
<a href="https://www.naver.com">네이버 바로가기</a>
<!-- img태그 -->
<img src="image/dice1.jpg">
</body>
</html>
안녕하세요!!