HTML,CSS/개념정리
HTML
Itchild
2024. 4. 14. 15:49
728x90
반응형
<!DOCTYPE html>
<!-- 주석 --> // HTML은 주석을 이렇게 표시한다.
<html> // HTML 파일의 시작을 표시
<head> // 해당 페이지의 주요정보 (머리글)
<meta charset="UTF-8"> // 해당 페이지는 UTF-8 인코딩 형식을 따른다
<title>첫 실습</title> // 페이지 상단의 제목
<style type="text/css"> // 스타일을 설정 해줄 수 있다.
h1 { // h1의 글씨를 red로 하고 뒤 배경을 Lightblue로 해줘
color: red;
background: lightblue;
}
/* 스타일 설정 주석 */
</style>
</head>
<body> // 해당 페이지의 주 내용(본론)
<h1>제목 태그</h1> // h1 이 제일크고 숫자가 커질수록 작아진다.
<h6>제목 태그</h6>
<hr> // 가로 줄 긋기
글 자 <br> // => 공백이라는 표시 // <br> => enter처럼 한칸을 띈다
<작성중> // < => '<' 왼쪽 꺽새 표시
// > => '>' 오른쪽 꺽새 표시
</body>
</html> // HTML 파일의 끝을 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부스타일시트 적용</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>제목 태그</h1>
</body>
</html>
rel 은 relation 의 약자로 '관계' 를 의미한다.
즉 어떠한 파일을 연결할때 이 파일과 현재파일의 관계를 정의하는 것
그래서 = 다음에 불러올 파일을 현 파일과 어떤 관계로 정의 할 것인지 쓴다
(예시에서 rel은 stylesheet 즉 style.css가 스타일을 담당함을 의미)
href은 hyper reference의 약자로 '하이퍼 참조'를 의미
(=하이퍼 링크를 떠올려본다.)
그래서 = 다음에는 참조할 파일명을 이 다음에 쓴다
(예시에서는 style.css 파일을 연결해 사용할 것임을 말하고 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> // 자바 스크립트 형식
alert('알림창!');
// 알림창이 화면에 띄워짐
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소의 특성</title>
</head>
<body>
<div>박스 태그</div>
<div>블록 속성</div>
<div>블록 속성은 한 줄을 전부 차지함</div>
<hr> // 가로 줄 긋기
<span>글 상자 태그</span>
<span>인라인 속성</span>
<span>자기자신태그까지만 공간을 차지함</span>
</body>
</html>1. <div> 태그란?
<div>tag란 division, 분할, 분배, 분류를 뜻합니다. html 안에 존재하는 여러 개의 태그들을 <div>라는 큰 단위로 묶어주는 주머니 역할을 한다. 큰 단위인 <div>로 묶어주면, 나중에 css로 <div>에만 수식을 해도 <div>태그 안에 속해있는 태그들이 모두 같은 명령을 받아 동일하게 적용된다.
만약 코드가 1,000줄이 넘고 코드도 다른 코드 30개들이 있는데 여기에 모두 동일한 효과를 적용시켜야 된다고 하면, 코드 하나하나에 효과를 넣는 게 아니라 <div> 태그로 묶어 나중에 css로 30여 개의 코드에 동일한 효과를 적용시킬 때 사용한다.
<div> 태그는 block level element (블록 라벨 엘리먼트)라 해당하는 코드의 행 전체를 차지한다. 다만, <div> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <div>태그 자체로는 시각적인 변화를 나타낼 수 없다.
2. <span> 태그란?
<span> 태그도 <div>태그와 같이 여러 개의 태그들을 묶어주는 주머니 역할을 한다. <span>태그는 inline element (인라인 엘리먼트)라 자신의 content 만큼 공간을 차지한다. <span> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <span>태그 자체로는 시각적인 변화를 나타낼 수 없다.
3. <p>, <div>, <span>tag의 차이점
<p> : 문단 분량의 content + 상하 margin이 있음
<span> : inline element (인라인 엘리먼트) - 자기 content 만큼의 테두리를 쓰는 애들. content에 해당하는 <span>이라는 텍스트가 자기만큼의 공간을 차지하는 것을 볼 수 있다.
<div> : block level element (블록 라벨 엘리먼트) - 화면 전체를 쓰는 애들. content에 해당하는 <div>라는 텍스트가 행 전체를 차지하고 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그</title>
</head>
<body>
<!-- 내부의 태그 구성을 의미있게 작성하는 것이
매우 중요한 요소가 됨 -->
<div id="header"><!-- 유일함 --> // 유일하게 하나 일때
<h1>사이트의 로고</h1>
</div>
<div class="gnb"><!-- 2개이상 --> // 2개이상은 class붙임
<ul>
<li><a href="https://www.naver.com/">네이버</a></li> // 하이퍼링크를 걸어주는 태그
<li><a href="https://comic.naver.com/index">네이버 웹툰</a></li> // 누르면 그 주소로
</ul>
</div>
<div id="content"> // content 목차는 하나로 유일한것
<div class="article"> // 기사 1
<h2>기사 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="article"> // 기사2
<h2>기사 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
<span>회사소개</span> // 자기 자신 태그 까지만 공간을 차지함
<span>인재채용</span>
<span>이용약관</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지</title>
</head>
<body>
<img alt="짱구" src="images/짱구.jpg"> // 이미지 폴더에 미리 저장해놓은 짱구
<img alt="웹 이미지" src="https://opgg-static.akamaized.net/meta/images/lol/champion/Teemo.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_160&v=1686926528622">
// 웹 링크를 통해 불러올 수 있는 이미지
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표</title>
</head>
<body>
<table border="1">
<tr> // 행을 만드는 태그
<th>이름</th><th>점수</th> // 테이블의 열(타이틀-제목)을 만드는 태그.
</tr>
<tr> // 행을 만드는 태그
<td>티모</td><td>97</td> // td 태그 : 테이블의 열을 만드는 태그.
</tr>
<tr>
<td>아리</td><td>23</td>
</tr>
</table>
</body>
</html><tr> 태그는 테이블에서 셀들로 이루어진 하나의 행(row)을 정의할 때 사용합니다.
<tr> 요소는 하나 이상의 <th> 요소(data cell)나 <td> 요소(header cell)를 포함할 수 있습니다.
table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radio 버튼</title>
</head>
<body>
<form action="test12.html"> // 입력을 다 마치면 test12로 이동한다(전송완료 페이지)
<table border="1"> // 테이블 숫자가 증가 할수록 테두리가 굵어진다.
<tr>
<td>이름</td> // 열을 만드는 태그 // placeholder = 표시 글씨
<td><input type="text" name="name" placeholder="이름을 작성하세요." required></td>
</tr> // input 입력하는 타입이 text이다 name을 작성해라 // required ->작성안하고 넘어갈수 없다.
<tr>
<td>성별</td> //다중체크시 checkbox //아무것도 체크안할시 디폴트 "m"
<td>남 <input type="checkbox" name="gender" value="m" checked> 여 <input type="checkbox" name="gender" value="w"></td>
<!-- 디폴트로 checked 아무것도 선택안하면 그냥 그걸로 넘어가게
checkbox는 둘다를 선택할 수 있다. 데이터가 여러개 전송될 수 있다. -->
</tr>
<tr align="right"> // 오른쪽 정렬
<td colspan="2"><input type="submit" value="데이터 전송"></td>
</tr> // colspan -> column span 약자로, 가로줄을 합치는 개수를 지정
</table> // row span -> 세로줄을 합치는 개수를 지정
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 박스</title>
</head>
<body>
<form action="test12.html"> // 입력완료 하면 test12 로 이동
<select name="product"> // 선택
<option>셔츠</option> // 옵션
<option>바지</option>
<option selected>운동화</option>
<option>구두</option>
<option>모자</option>
</select>
<input type="submit" value="데이터 전송">
</form>
</body>
</html>
"반응형" ★
무료 반응형 웹 템플릿
라이센스 이슈는 없는지 체크해볼것!
사용자가 다양한 디바이스 활용
다양한 기기에서도
화면이 뒤틀리거나 깨짐없이
이용가능해야한다!
무료 템플릿을 찾아 로그인 화면 처럼 바꿔보기 !!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 실습 페이지</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff&display=swap">
<link rel="preconnect" href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff&display=swap" crossorigin>
<link href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff&display=swap" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<form action="test02.html" method="post">
<div class="col-lg-5" style="font-family: '배민 폰트';">
<div class="bg-primary rounded h-100 d-flex align-items-center p-5 wow zoomIn" data-wow-delay="0.9s">
<form>
<div class="row g-3">
<div class="col-xl-12">
<input type="text" class="form-control bg-light border-0" placeholder="아이디 입력" style="height: 55px;">
</div>
<div class="col-12">
<input type="text" class="form-control bg-light border-0" placeholder="비밀번호 입력" style="height: 55px;">
</div>
<div class="col-12">
<select class="form-select bg-light border-0" style="height: 55px;">
<option selected>성별</option>
<option value="1">남</option>
<option value="2">여</option>
</select>
</div>
<div class="col-12">
<button class="btn btn-dark w-100 py-3" type="submit" style="font-family: '배민 폰트';">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>
728x90
반응형