1. HTML의 구조

 

앞으로 소스 코드 작성 시 들여 쓰기는 필수 !!

 

 


2. ul, li, ol 실습

재미있는 html

제목입니다.

중제목입니다.

소제목입니다.

소소제목입니다.

소소소제목입니다.
소소소소제목입니다.
네이버 바로가기
  • 돼지고기 300g
  • 당근 1개
  • 감자 1개
  • 양파 1개
  1. 야채와 고기를 볶는다.
  2. 물에 카레가루를 섞는다.
  3. 물이 끓으면 야채와 고기를 넣는다.
  • 대메뉴1
    • 소메뉴1
    • 소메뉴2
    • 소메뉴3
  • 대메뉴2
    • 소메뉴1
    • 소메뉴2
    • 소메뉴3
<!DOCTYPE html>   <!-- dtd 선언 (웹 브라우저야 이것은 html5로 만들었엉 -->
<html lang="ko">
	<head>
		<meta charset="utf-8" />   <!-- 빈요소는 닫기 태그가 없음 (self closing), 문자 인코딩 -->
		<title>재미있는 html</title>
	</head>
	<body>
		<h1>제목입니다.</h1>
		<h2>중제목입니다.</h2>
		<h3>소제목입니다.</h3>
		<h4>소소제목입니다.</h4>
		<h5>소소소제목입니다.</h5>
		<h6>소소소소제목입니다.</h6>
		<a href="https://naver.com" title="네이버 바로가기"> 네이버 바로가기 </a>
		<ul>   <!-- unordered list, 순서 없는 목록, 많이 쓰임 -->
			<li>돼지고기 300g</li>
			<li>당근 1개</li>
			<li>감자 1개</li>
			<li>양파 1개</li>
		</ul>
		<ol>   <!-- ordered list, 순서 있는 목록 -->
			<li>야채와 고기를 볶는다.</li>
			<li>물에 카레가루를 섞는다.</li>
			<li>물이 끓으면 야채와 고기를 넣는다.</li>
		</ol>
		<ul>
			<li>
				대메뉴1
				<ul>
					<li>소메뉴1</li>
					<li>소메뉴2</li>
					<li>소메뉴3</li>
				</ul>
			</li>
			<li>
				대메뉴2
				<ul>
					<li>소메뉴1</li>
					<li>소메뉴2</li>
					<li>소메뉴3</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

 

 

 

3. KT SKYLIFE 사이트 메뉴 ul, li로 나타내기

test
  • 혜택•이벤트
    • 제휴 혜택
      • 제휴 카드
      • 라이프 혜택
    • 이벤트
      • 전체 이벤트
      • 진행중인 이벤트
      • 종료된 이벤트
  • MY SKY
    • TV
      • TV 가입정보
      • TV 요금제 변경
      • TV 부가서비스
    • 인터넷
      • 인터넷 가입정보
      • 인터넷 부가서비스
    • 모바일
      • 모바일 가입정보
      • 모바일 요금제 변경
      • 모바일 부가서비스
      • 모바일 이용량 조회
    • 요금
      • 청구요금내역
      • 요금납부내역
    • 나의 문의내역 
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<ul>
			<li>
				혜택•이벤트
				<ul>
					<li>
						제휴 혜택
						<ul>
							<li>제휴 카드</li>
							<li>라이프 혜택</li>
						</ul>
					</li>
					<li>
						이벤트
						<ul>
							<li>전체 이벤트</li>
							<li>진행중인 이벤트</li>
							<li>종료된 이벤트</li>	
						</ul>
					</li>
				</ul>
			</li>
			<li>
				MY SKY
				<ul>
					<li>
						TV
						<ul>
							<li>TV 가입정보</li>
							<li>TV 요금제 변경</li>
							<li>TV 부가서비스</li>
						</ul>
					</li>
					<li>
						인터넷
						<ul>
							<li>인터넷 가입정보</li>
							<li>인터넷 부가서비스</li>
						</ul>
					</li>
					<li>
						모바일
						<ul>
							<li>모바일 가입정보</li>
							<li>모바일 요금제 변경</li>
							<li>모바일 부가서비스</li>
							<li>모바일 이용량 조회</li>
						</ul>
					</li>
					<li>
						요금
						<ul>
							<li>청구요금내역</li>
							<li>요금납부내역</li>
						</ul>
					</li>
					<li>
						나의 문의내역
					</li>
				</ul>			
			</li>
		</ul>
	</body>
</html>

 

 

 

4. 문자강조태그

문자강조태그

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

그린컴퓨터 아카데미

<!DOCTYPE html> 
<html lang="ko"> 
	<head>
		<meta charset="utf-8" />
		<title>문자강조태그</title>
	</head>
	<body>
		<p><em>그린</em>컴퓨터 아카데미</p>
		<p><strong>그린</strong>컴퓨터 아카데미</p>
		<p><mark>그린</mark>컴퓨터 아카데미</p>
		<p><small>그린</small>컴퓨터 아카데미</p>
		<p><sup>그린</sup>컴퓨터 아카데미</p>
		<p><sub>그린</sub>컴퓨터 아카데미</p>
		<p><ins>그린</ins>컴퓨터 아카데미</p>
		<p><del>그린</del>컴퓨터 아카데미</p>
	</body>
</html>

'Stack > HTML' 카테고리의 다른 글

[HTML] index / list / text / table / image / video 태그  (0) 2022.04.04
[HTML] 5일 만에 끝내는 HTML 기초 5일차  (0) 2022.03.18
[HTML] 5일 만에 끝내는 HTML 기초 4일차  (0) 2022.03.17
[HTML] 5일 만에 끝내는 HTML 기초 3일차  (0) 2022.03.16
[HTML] 5일 만에 끝내는 HTML 기초 2일차  (0) 2022.03.15

티스토리툴바