1) 영역관련태그
2) 하이퍼링크 태그
3) 폼/이미지 태그
1) 이미지태그
2 form
4) CSS
4-1) CSS 기본형식
4-2) css 작성방식
4-3 ) font_css
4-4) CDN , fontawsesome
5) 아이디 클래스 선택자
1) 영역관련태그
1) HTML4
의미없는 태그(<div>,<span>)으로만 구역을 나눴음
2) <div>
- Block 요소(한줄 차지)로 동작
- 좌우 공간을 모두 차지하고 페이지를 수직으로 분할
- 주로 전체 영역이나 큰 덩어리의 콘텐츠를 나눌 때 사용4
3) <span>
- inline 요소(콘텐츠의 크기만큼 차지)로 동작
- 콘텐츠의 크기만큼만 공간 차지, 웹 페이지를 수평으로 분할
- 주로 짧은 텍스트나 특정 단어를 묶을 때 사용
<!DOCTYPE html>
<html>
<div>
<span>콘텐츠1</span>
<span>콘텐츠2</span>
<span>콘텐츠3</span>
</div>
<div>콘텐츠4</div>
</html>

한계)
의미파악이 어려움 (모든구역이<div>로정의)
유지보수어려움
다양한 기기 지원 어려움
4) HTML5
- 시맨틱(의미있는) 태그의 등장
- 태그명만 보아도 각 구역의 역할을 직관적으로 이해할 수 있음
- 유지보수와 검색 엔진 최적화가 수월해짐
<header></header>
<main>
<article></article>
<article></article>
</main>
<aside></aside>
<footer></footer>
- <header>: 머리글 영역
- <nav> : 메뉴, 외부 페이지 이동
- <main>: 주요 콘텐츠
- <section> : 콘텐츠 영역 나누는 역할
- <article>: 독립적인 글이나 콘텐츠
- <aside>: 부가 정보 영역
- <footer>: 바닥글 영역
2) 하이퍼 링크 태그
( a 태그 )
1) 특징과 기본사용
특징 : 외부사이트연결 , 문서내부에서 이동 가능
속성 :

target 이용
_blank : 새로운 창 (새탭열기)
_self : 현재창(현재창에서열기)
<a href="주소" target="_blank" or "_self">콘텐츠</a>
작성법
문자
<a href="https://www.naver.com">네이버</a>
이미지
<a href="https://www.naver.com">
<img src="../resources/sponge.png" width="200px">
</a>
(HTML 에 나타나는 해당이미지를 클릭하면 링크로 이동하게됨)
2) a태그 경로 표현(1)
1) 다른사이트로 연결
절대경로 사용 , URL 사용
ex)
<!-- 웹 경로로 링크 -->
<p><!-- 문단을 나눈단 뜻 별의미없음-->
<a href="https://www.google.com">구글</a><!-- default(_self): 현재창에서 열기-->
<a href="https://www.naver.com" target="_blank">네이버</a> <!--_blank: 새창으로 열기-->
</p>
<!-- 이미지 경로로 링크-->
<p>
<a href="D:/web/workspace/images/bgsample.jpg" target="_blank"> 이미지</a>
<!-- 이미지 링크 생성(이미지를 만들어줌)-->
<a href="https://www.naver.com" target="_blank"><img src="D:/web/workspace/images/icon.png"></a>
<!--해당이미지를 누르면 naver로 이동
-->
</p>

2) 페이지 내의 특정위치로 연결
- 페이지 내 링크의 이동 대상 요소에 id 속성 추가
- a 태그 href 속성에 #과 함께 이동할 요소 id 작성
주소에 #만 입력하면 항상 페이지 최상단으로 이동
<!-- 문서내부 링크-->
<!-- id속성 : HTML 구성요소(태그) 식별하기위한 속성 , 유일성(아이디값중복X)-->
<ul>
<li><a href="#title">id="title"요소로 이동</a></li>
<li><a href="#images">id="images"요소로 이동</a></li>
<li><a href="#content">id="content"요소로 이동</a></li>
</ul>
<br>
<!-- id간의 간격을 일부러 심하게 두었음-->
<h1 id="title"> 겨울</h1>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p id="images"><img src="images/city1.jpg" width="500"></p>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br>
<p id="content">
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
12월부터 2월까지는 겨울<br>
</p>
3) a태그 경로 표현(2)

1. 하위 계층에 연결
- 하위 계층(폴더)의 파일에 연결
- home/index.html --> about, service 폴더 내
<a href="about/index.html">회사 안내</a>
<a href="about/access.html">오시는길</a>
<a href="service/index.html">서비스 내용</a>
2. 상위 계층에 연결
- service 폴더에 있는 index.html에서
- 최상위(루트) 디렉토리에 있는 index.html이나 about 폴더의 index.html, access.html에 접근하고자 할 때
<a href="../index.html">홈</a>
<a href="../about/index.html">회사 안내</a>
<a href="../about/access.html">오시는 길</a>
3. 동일 계층 연결
파일명만 적거나
앞에 ./ 을 붙여준다
<a href="./access.html">오시는 길</a>
<a href="access.html">오시는 길</a>
4. 루트 상대 경로
- 사이트의 최상단(루트) 디렉토리를 기점으로 경로 지정
- 경로의 선두가 반드시 /로 시작
<a href="/">홈</a>
<a href="/about/index.html">회사 안내</a>
<a href="/about/access.html">오시는 길</a>
4) ifram
하나의 웹페이지 안에 다른웹페이지 삽입 시 유용
주요 속성
- title : 마우스 커서 올렸을 때 툴팁
- src : 웹 페이지 경로
- width : 가로 크기
- height : 세로 크기
<iframe width="400px" height="400px" src="http://me.go.kr/home/web/main.do"></iframe>

3) @@ 폼/이미지 태그
3-1) 이미지 태그
: 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
표현법
<img src="경로" alt="설명 문구" width="너비" height="길이">
속성
src : 이미지경로 지정
alt : 이미지 설명해주는 텍스트속성
width , height : 이미지크기
이미지설명
1) <figure></figure>
- 이미지에 대한 설명 표시
- 테이블에서 학습한 <caption>과 유사한 기능
- <figcaption> 이라는 자식 태그가 필요
예시
<p>
<figure>
<figcaption>꽃이 활짝 피었어요</figcaption>
<img alt="절대경로 꽃1" src="D:/web/workspace/htmldong/html1/images/flower1.jpg" height="200">
</figure>
</p>
<p>
<img alt="상대경로 꽃1" src="./images/flower1.jpg" height="200">
</p>
<p>
<img alt="이미지없음" src="./empty/flower1521.jpg" height="200">
<!-- 해당경로는 아예존재하지않는 경로임-->
</p>

3-2) form
form 개요
1) form 의 역할
사용자로부터 데이터를 입력받을 수 있는 창 구성
<form method="get" or "post" name="이름" action="웹서버 주소" >
<!-- 입력받을 수 있는 창 구성 -->
</form>
2) 속성
method : 웹서버에 데이터를 보내는 방식
- get
- url 에 데이터를 얹어서 보내는방식 ,
- 데이터를 볼 수 있음
- 데이터크기 제한
2.post
- HTTP Request에 데이터를 넣어보냄
- 데이터를 볼 수 없음
- 데이터 제한 X
name : <form>태그의 고유이름 지정(구분위해)
action : 데이터 처리할 프로그램 지정
input 기초
사용자로부터 data를 입력 받기 위한 태그
웹 표준의 Scanner
속성

type : 입력창의타입 : ex)text , checkbox 등
name : input을 구별할수있는명칭
value : input 요소의 기본값
maxlength : 사용자가입력할수있는 글자수제한
placholder : 사용자입력전입력창 표시글
readonly : 읽기전용
required : 필수입력 필드 지정
disabled : 입력 비활성화
<!DOCTYPE html>
<html>
<head>
<title>form관련태그</title>
</head>
<body>
<!-- 1.<input type ="text">태그-->
<p>
<!-- 디폴트:type ="text" 적용 -->
<input> <!-- 기본 입력상자-->
<br>
<input type="text" size="5"> <!--입력상자의 크기 5-->
<br>
<input type="text" maxlength="4"><!--입력값의 크기 4-->
<br>
<input type="text" placeholder="검색어를 입력"><!--입력메시지-->
<br>
<input type="text" required><!-- 필수 입력 사항-->
<br>
<input type="text" value="날씨"><!-- 입력값 미리 설정함-->
<br>
<input type="text" value="변경불가" readonly><!-- 읽기 전용(수정X)-->
<br>
<input type="text" value="변경불가" disabled><!-- 사용불가-->
</p>
</body>
</html>

input 태그 type의 종류
<p>
<!-- input 태그의 type 종류-->
<!--type="password" 비밀번호입력용-->
<caption>password</caption>
<input type="password" placeholder="비밀번호 입력"> <br>
<!-- type="number" : 숫자입력용-->
<caption>number</caption>
<input type="number" min="1" max="12"><br>
<!-- type="email" : 이메일입력용-->
<caption>email</caption>
<input type="email" placeholder="이메일"> <br>
<!-- type="date" : 날짜 입력용-->
<caption>date</caption>
<input type="date"><br>
<caption>color</caption>
<input type="color" name="color" value="색상 값"><br>
<!--type="hidden 화면에보이지않는 값 처리시-->
<caption>hidden</caption>
<input type="hidden" value="절대화면에 보이지않음"><br>
<!-- type="file" : 업로드파일 선택-->
<caption>file</caption>
<input type="file"><br>
<!-- type = "button" : 버튼입력-->
<caption>button</caption>
<input type="button" value="버튼"><br>
<!-- type = "submit" : 폼 내부의 입력값 다른데이터로 전송 시 사용-->
<caption>submit</caption>
<input type="submit" value="submit"><br>
<!-- tpye = "reset" : 폼에 입력된 값을 초기화-->
<caption>reset</caption>
<input type="reset" value="reset">
</p>

radio , checkbox
속성
name : 구분자 명칭 같은그룹은 값이같아야함
value : 전송시 전달할값
checked: 처음에선택될 값(생략해도무관)
<p>
<!-- radio(단일선택) , checkbox(다중선택)-->
<!-- radio : value 속성필요
=> 어떤 radio를 선택했는지 알기 위해 반드시추가
같은name을 가진 radio이어야 단일 선택이 가능함
-->
<input type="radio" name="gender" value="male" checked>남
<input type="radio" name="gender" value="female">여
<input type="radio" name="pass" value="1">합격
<input type="radio" name="pass" value="2">불합격
</p>
<p>
<!-- checkbox : 다중선택-->
<input type="checkbox"> 모두 동의 <br>
<input type="checkbox" name="hobbies" value="1">운동
<input type="checkbox" name="hobbies" value="2"> 여행 <br>
</p>

form태그 하위 기타 태그
select : 여러선택지중에 단일or다중
textarea : 여러행 입력가능
label: 라벨==id
filedset : 입력요소 그룹을 설정
<!-- 폼태그의 하위 기타 태그-->
<!-- 1. select 태그 : 목록선택-->
<caption> 주소를 선택 -> </caption>
<select>
<option value="naver">naver.com</option>
<option value="kakao">kakao.com</option>
<option value="gmail">gmail.com</option>
<!--값 구분을 위해 value사용 권장-->
</select>
<!-- 여러개 option도 선택 가능-->
<caption> 지역을 선택 -> </caption>
<select multiple >
<option value="seoul">서울</option>
<option value="pusan">부산</option>
<option value="incheon">인천</option>
</select>
</p>
<!------------------------------------------------------------------------------------------------->
<!-- textarea : 여러 행 입력 태그-->
<p>
<caption>textarea</caption><br>
<!-- 디폴트 : 2행20열-->
<textarea></textarea><br>
<!-- rows : 행 cols: 열-->
<textarea rows=5 cols="5"></textarea><br>
<!-- values 대신 태그 내부 텍스트가 입력된값 저장-->
<textarea> hello </textarea>
</p>
<!------------------------------------------------------------------------->
<p>
<!-- label 태그 : 라벨붙이기-->
<!--
for 속성 : 입력요소의 id값을 의미
id : 해당페이지의 유일성을 가짐
-->
<caption>label태그</caption><br>
<label for="male">
<input type="radio" name="gender" value="male" id="male">남
</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female">여
</label>
</p>
<!------------------------------------------------------------------------------------------------->
<!-- filedset : 입력요소들을 그룹화-->
<p>
<caption>filedset</caption><br>
<fieldset>
<legend>성별</legend> <!--성별이라는 이름으로 그룹화해줌-->
<label for="male">
<input type="radio" name="gender" value="male" id="male">남
</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female">여
</label>
</fieldset>
</p>

4)@@ CSS @@
문서내용과 꾸미는 부분을 분리
4-1) CSS 기본형식

- 선택자
- 어디에 스타일을 지정할지 작성(위 그림은 h1에적용)
- HTML문서 내에 스타일적용할 요소 선택
2 . 프로퍼티와 값
- 선택자로 선택한 요소에 적용할 스타일
- 프로퍼티(속성) : 설정하고 싶은 스타일의 타입
- 값 : 설정하고 싶은 스타일 종류에 대한 수치 혹은 옵션
- 값이 끝나는 지점마다 반드시 ;(세미콜론) 작성
4-2) CSS 작성 방식
1) inline 방식
- 요소의 시작태그에 style 속성 추가하여 작성
- style 속성을 추가한 해당 태그에만 css 적용
- 우선순위가 가장높음 inline> internal > external
<!DOCTYPE html>
<html>
<head>
<title>inline css</title>
<link rel="stylesheet" href="ex02_external.css"><!--blue-->
<style>
h1{color: green;}
</style>
</head>
<body>
<h1>!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
<h1 style="color: gray;">반갑습니다 유동곤입니다</h1>
<!-- 우선순위가 가장높은 inline(gray)색깔로 될것임-->
</body>
</html>

2) internal 방식
- html 문서 내에서 style태그를 이용해서 css를 적용
- 작성된 선택자에 해당되는 모든 요소에 css 적용
- head 안에 style 태그 사용을 권장
<!DOCTYPE html>
<html>
<head>
<title>internal css</title>
<style>
h1{ color: blue; }
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
3) external 방식
- 외부에 .css 파일 생성
- link 태그를 통해 외부 css 파일을 불러옴
- css파일 ↓
h1{color:blue;}
html 파일 ↓
<!DOCTYPE html>
<html>
<head>
<title>external css</title>
<link rel="stylesheet" href="ex02_external.css">
<style>
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
4-3 ) font_css
<!DOCTYPE html>
<html>
<head>
<title>font 관련 css</title>
<style>
p{
font-family: '맑은 고딕',sans-serif; /*맑은고딕이 없으면 고딕계열을 사용*/
font-family: '궁서',serif; /* '궁서'가 없다면 명조계열을 사용하시오*/
font-size: 32px; /* default : 16px */
font-weight: 900; /* default : 400,100~900 */
font-style: italic; /* italic : 기울임, none : 기울임X */
/*블록요소는 정렬이 됨*/
text-align: center; /*텍스트 정렬 : left , right , center , justify */
text-decoration: underline; /* underLine : 밑줄 , line-thorough : 취소선 , none :선 없애기*/
text-shadow: 5px 5px 1px red; /* shadow : x y blur(모자이크느낌) 색상 */
}
pre {
font-size: 40px;
line-height: 32px; /* 행 높이 : 세로 가운데 정렬에서 주로 활용 */
letter-spacing: -1px; /* 글자 간격 */
color: rgb(0, 0, 0); /*검정색*/
color: rgb(255, 255, 255);/*흰색*/
/* RGB : #RRGGBB 16진수표현 */
color: #000000;
color: #FFFFFF;
color: rgba(0, 0, 0, 0.5); /* alpha(투명도) : 0(투명) ~ 1(불투명) */
}
h1{
/*
브라우저 별로 글자의 외곽선 효과 처리 (표준화 추진중)
벤더 프리픽스 ( vender Prefix) : 속성 앞에 브라우저표현
1) -webkit... - : chrome , safari
2)-moz-... : 파이어폭스
3) -o-.... : 오페라
*/
-webkit-text-stroke-color: rgb(210, 70, 55);
-webkit-text-stroke-width: 1px;
}
a{
text-align: center;
color: green;
/*inline태그는 정렬이 되지않음*/
}
</style>
</head>
<body>
<p> Hello world</p>
<pre>Nice to meet you</pre>
<pre>Yoo good?</pre>
<h1>I'm fine</h1>
<a href="http://www.naver.com" target="_blank">네이버</a>
</body>
</html>


google font 이용
https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap
<!DOCTYPE html>
<html>
<head>
<title>font관련 css</title>
<!--
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap">
<style>
h1{
font-family: 'Noto Sans KR', sans-serif;
}
</style>
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
h1{
font-family: 'Noto Sans KR', sans-serif;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
위에처럼 링크로 접근해도되고
@import로 접근해도 된다!! 두개중 편한방법 사용
<style>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap">
<!------------------------------------------------------------------------------------>
<!--@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');-->
</style>

4-4) CDN , fontawsesome
아이콘 : fontawesome에서 <i> 태그로 제공된다.
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
해당 링크에 들어가 아이콘의 이름
< i class = xxxx> 를 알아낼수있음!!!
ex)
<head>
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
</style>
</head>
<body>
<p>
사진아이콘<i class="fa-solid fa-image"></i>
</p>
</body>
@import는 head 태그 내에서하고 style태그 내에 작성해야한다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<!--
fontawesome CDN 가져오기
1. <link> 태그
2. @import url()
-->
<!-- 1. <link> 태그 -->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-->
<!-- 2. @import url() -->
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
</style>
</head>
<body>
<!-- 아이콘 : fontawesome에서 <i> 태그로 제공된다. -->
<p>
휴지통 <i class="fa-solid fa-trash"></i>
</p>
<p>
<button>
<i class="fa-brands fa-searchengin"></i>
</button>
</p>
<p>
사진아이콘<i class="fa-solid fa-image"></i>
</p>
<p>
<a href="https://twitter.com/i/flow/login"> <!--트위터 아이콘-->
<i class="fa-brands fa-twitter"></i>
</a>
</p>
<p>
<i class="fa-regular fa-envelope"></i>
<i class="fa-regular fa-envelope fa-2x"></i>
<i class="fa-regular fa-envelope fa-3x"></i>
<i class="fa-regular fa-envelope fa-4x"></i>
<i class="fa-regular fa-envelope fa-5x"></i>
</p>
</body>
</html>

5) 아이디 , 클래스 선택자
선택자는 <style> 블럭 안에서!!!
아이디 선택자 : 태그에 id를 설정하고 id값을 선택자로
(한개만 선택가능)
#아이디{설정내용;}
클래스 선택자 : 태그의class설정 후 class값을 선택자로
(한개 이상 선택가능)
.클래스{설정내용;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red-text{
color: #FF0000;
}
.big_text{
font-size: 40px;
}
</style>
</head>
<body>
<!-- class 속성의 값은 하나 이상의 값이 가능
class = "red_text big_text" 태그는
"red-tex 값과 big text 값을 2개 가진다.
class = "red_text" 태그는 red_text 값을 1개가짐
id 속성은 1개의값만 가질 수 있음
HTML의 태그의 속성의 이름은 유일해야함
<T a="1" b="2" a="3"> 오류
class 속성
1. 전역 속성임 (모든태그에 설정가능)
2. 같은 스타일을 가진 경우 같은 class속성 설정가능
3. 하나의 태그는 여러 class 속성을 가질 수 있다.
공백으로 구분
4. style 에서 class 속성의 선택자는 . 이다.
.클래스속성의 값{}
-->
<p class="red-text big_text">hello world</p>
<p class="red-text ">Nice to meet you</p>
<p>일반적인 P태그그</p>
</body>
</html>

'부트캠프(HTML,CSS)' 카테고리의 다른 글
부트캠프33일차 (CSS media, bootstrap) (0) | 2025.03.19 |
---|---|
부트캠프32일차(css(layoutStyle)) (0) | 2025.03.18 |
부트캠프31일차(CSS) (0) | 2025.03.17 |
부트캠프29일차(HTML) (0) | 2025.03.13 |