티스토리 html블럭 플러그인 이미지태그 alt 속성이 가끔씩 제대로 안먹힌다 🤨
결과화면 빼버려야게써
1. 페이지 전체 마크업 - 내가 한 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>실습</title>
</head>
<body>
<h1>ORGANIC</h1>
<h2>오가닉</h2>
<h4>러프한 소재와 함께 자연 공간을 풍부하게 경험할 수 있는 오가닉한 스타일</h4>
<img src="green_img.gif" alt="편안함과 따뜻함이 묻어있는 오가닉 디자인" title="오가닉 디자인 포스터"/></br>
<div id="concept">
<img src="title03_01.gif" alt="컨셉설명" title="컨셉설명"/></br>
<p>
내추럴 컨셉을 표방하는 오가닉 네이처는 예스럽지만 세련된 느낌의 공간으로 중년층의 라이프 스타일과 취향을
반영한 스타일입니다. 전체적으로 밝은 아이보리와 베이지, 브라운 컬러를 사용하며 생활에 지친 사람들에게
삶과 힐링을 제공하는 인테리어입니다.
</p>
<p>
자연 친화적인 공간 연출</bt>
자재: 티크나 윌넛 수풍의 바닥재, 텍스처가 살아있는 벽지, 나뭇결의 거친 느낌을 강조한 도어</br>
소품: 자연소재 그대로의 스톨, 나뭇가지 형태의 플로어램프, 한국적 자아의 툇마루 공간,
모던하게 재해석한 사방탁자
</p>
<p>
책임 디자이너</br>
김미화</br>
<img src="photo.gif" alt="책임 디자이너 김미화" title="책임 디자이너 김미화"/></br>
</p>
</div>
<div id="life style">
<img src="title03_02.gif" alt="라이프스타일" title="라이프스타일"/></br>
<img src="title04.gif" alt="그린 라이프 스타일" title="그린 라이프스타일"/></br>
<p>
물질적인 풍요를 바라기 보다 현재 상황에 만족하고 감사함을 가지며 소외된 계층에 관심을 가지고
더불어 잘사는 사회를 만들기 위해 작은 공백이라도 나눔을 실천하려고 노력합니다. 그린라이프
스타일의 사람들은 자연의 느낌을 좋아하지만 그렇다고 도시에서 멀리 떨어진 곳에서 살려고 하지는
않습니다. 대신 자연의 아름다움을 담은 주거 공간에서의 삶을 살고자 합니다.
</p>
</div>
<div id="style view">
<p>
<img src="title03_03.gif" alt="스타일뷰" title="스타일뷰"/></br>
<img src="view_img01.gif" alt="keyword 오가닉키워드" title="오가닉키워드"/></br>
Keyword 오가닉키워드</br>
<img src="detail_view.gif" alt="자세히보기" title="자세히보기"/><br>
<img src="view_img02.gif" alt="keyword 오가닉이미지맵" title="오가닉이미지맵"/></br>
imageMap 오가닉이미지맵</br>
<img src="detail_view.gif" alt="자세히보기" title="자세히보기"/><br>
<img src="view_img03.gif" alt="MaterialPhoto 오가닉마감재" title="오가닉마감재"/></br>
MaterialPhoto 오가닉마감재</br>
<img src="detail_view.gif" alt="자세히보기" title="자세히보기"/>
</p>
</div>
</body>
</html>
2. 페이지 전체 마크업 - 쌤이 하신 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>오가닉</title>
</head>
<body>
<div id="wrap">
<!-- 제목 -->
<div>
<h1>ORGANIC</h1>
<h2>오가닉</h2>
<p>러프한 소재와 함께 자연 공간을 풍부하게 경험할 수 있는 오가닉한 스타일</p>
</div>
<!-- 제목 /-->
<!-- 그린스타일 -->
<div>
<div>
<img src="./homecc/green_img.gif" alt="그린스타일이미지" title="오가닉 디자인 포스터" /></br>
</div>
<div>
<h3><img src="./homecc/title03_01.gif" alt="컨셉설명" title="컨셉설명"/></br></h3>
<p>내추럴 컨셉을 표방하는 오가닉 네이처는 예스럽지만 세련된 느낌의 공간으로 중년층의 라이프 스타일과 취향을
반영한 스타일입니다. 전체적으로 밝은 아이보리와 베이지, 브라운 컬러를 사용하며 생활에 지친 사람들에게
삶과 힐링을 제공하는 인테리어입니다.</p>
<ul>
<li>자연 친화적인 공간 연출</li>
<li>자재: 티크나 윌넛 수풍의 바닥재, 텍스처가 살아있는 벽지, 나뭇결의 거친 느낌을 강조한 도어</li>
<li>소품: 자연소재 그대로의 스톨, 나뭇가지 형태의 플로어램프,
한국적 자아의 툇마루 공간, 모던하게 재해석한 사방탁자</li>
</ul>
<div>
<div>책임 디자이너</br>김미화</div>
<div><img src="./homecc/photo.gif" alt="흑백여자사진" title="책임 디자이너 김미화"/></div>
</div>
<h3><img src="./homecc/title03_02.gif" alt="라이프스타일" title="라이프스타일"/></h3>
<h4><img src="./homecc/title04.gif" alt="자연이 느껴지는 그린 라이프 스타일" title="그린 라이프스타일"/></h4>
<p>물질적인 풍요를 바라기 보다 현재 상황에 만족하고 감사함을 가지며 소외된 계층에 관심을 가지고
더불어 잘사는 사회를 만들기 위해 작은 공백이라도 나눔을 실천하려고 노력합니다. 그린라이프
스타일의 사람들은 자연의 느낌을 좋아하지만 그렇다고 도시에서 멀리 떨어진 곳에서 살려고 하지는
않습니다. 대신 자연의 아름다움을 담은 주거 공간에서의 삶을 살고자 합니다.</p>
</div>
</div>
<!-- 그린스타일 /-->
<!-- 스타일 뷰 -->
<div>
<h3><img src="./homecc/title03_03.gif" alt="스타일뷰" title="스타일뷰"/></h3>
<ul>
<li>
<img src="./homecc/view_img01.gif" alt="확트인 거실" title="오가닉키워드"/>
<div>Keyword 오가닉키워드 <a href="#"><img src="./homecc/detail_view.gif"
alt="자세히보기" title="자세히보기"/></a></div> <!-- #: 임시링크 -->
</li>
<li>
<img src="./homecc/view_img02.gif" alt="keyword 오가닉이미지맵" title="오가닉이미지맵"/>
<div>imageMap 오가닉이미지맵 <a href="#"><img src="./homecc/detail_view.gif"
alt="자세히보기" title="자세히보기"/></a></div> <!-- #: 임시링크 -->
</li>
<li>
<img src="./homecc/view_img03.gif" alt="MaterialPhoto 오가닉마감재" title="오가닉마감재"/>
<div>MaterialPhoto 오가닉마감재 <a href="#"><img src="./homecc/detail_view.gif"
alt="자세히보기" title="자세히보기"/></a></div> <!-- #: 임시링크 -->
</li>
</ul>
</div>
<!-- 스타일 뷰 /-->
</div>
</body>
</html>
CSS 배우게 되면 ~~ 페이지 꾸밀 수 있음 ~~
3. 테이블태그 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>테이블 태그 연습</title>
</head>
<body>
<div id="wrap">
<div>
<h1>교내장학 - 기타장학(학생 신청 장학)
</div>
<div>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>장학명</th>
<th>신청시기</th>
<th>신청방법</th>
<th>제출서류</th>
</tr>
<tr>
<td>복지장학</td>
<td rowspan="4">12월 / 6월</td>
<td rowspan="5">uwins - 장학신청</br></br>(매학기 신청)</td>
<td>장애인증명서/가족관계증명서</td>
</tr>
<tr>
<td>공무원본인장학</td>
<td>재직증명서</td>
</tr>
<tr>
<td>행복나눔명예장학</td>
<td>신청서</td>
</tr>
<tr>
<td>행복나눔장학</td>
<td>신청서</td>
</tr>
<tr>
<td>가족장학</td>
<td>5월 / 11월</td>
<td>가족관계증명서</td>
</tr>
<tr>
<td>국가유공자본인장학</td>
<td rowspan="3">입학금</br>납부 전</td>
<td rowspan="2">학생복지팀 제출</td>
<td>교욱지원대상자증명서</td>
</tr>
<tr>
<td>국가유공자자녀장학</td>
<td>대학수업료등 면제대상자증명서</td>
</tr>
<tr>
<td>교직원자녀장학 (교직원이 신청)</td>
<td>UWIN-원스탑</td>
<td>신청서, 재직증명서, 가족관계증명서</td>
</tr>
</table>
</div>
</div>
</body>
</html>
4) 페이지 전체 마크업 2 - 내가 한 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>이자녹스</title>
</head>
<body>
<div id="wrap">
<!-- 제목 -->
<div>
<h1><img src="./isaknox/top_logo.gif" alt="이자녹스 탑 로고"/></h1>
<div>
<a href="#"> 햄버거버튼</a>
<a href="#"> 검색버튼</a>
<a href="#"> 쇼핑몰버튼</a>
</div>
<div>
<a href="#"> 로그인버튼</a>
<a href="#"> 회원가입버튼</a>
</div>
</div>
<!-- 제목 /-->
<!-- 본문 -->
<div>
<div>
<img src="./isaknox/visual.gif" alt="메인배너"/>
</div>
<h2><img src="./isaknox/so_title.gif" alt="이자녹스 작은 로고" /></h2>
<div>
<ul>
<li>Brand</li>
<li>Product</li>
<li>Store</li>
<li>Customer Center</li>
</ul>
</div>
<div>
<h3>NEW PRODUCT</h3>
<div>
<img src="./isaknox/product01.gif" alt="첫번째 상품"/>
<div>
X2D2</br>링클 포커스 세럼 wrinkle</br>focus serum
</div>
</div>
<div>
<img src="./isaknox/product02.gif" alt="두번째 상품"/>
<div>
X2D2</br>링클 포커스 세럼 wrinkle</br>focus serum
</div>
</div>
<div>
<img src="./isaknox/product03.gif" alt="세번째 상품"/>
<div>
X2D2</br>링클 포커스 세럼 wrinkle</br>focus serum
</div>
</div>
<div>
<img src="./isaknox/product04.gif" alt="네번째 상품"/>
<div>
X2D2</br>링클 포커스 세럼 wrinkle</br>focus serum
</div>
</div>
</div>
<div>
<div>
<img src="./isaknox/main_banner01.gif" alt="메인 배너1"/>
</div>
<div>
<img src="./isaknox/main_banner02.gif" alt="메인 배너2"/>
</div>
<div>
<img src="./isaknox/main_banner03.gif" alt="메인 배너3"/>
</div>
<div>
<img src="./isaknox/main_banner04.gif" alt="메인 배너4"/>
</div>
</div>
<div>
<img src="./isaknox/f_icon.gif" alt="페이스북 아이콘"/>
<div>
<a href="#"> Contact us</a>
<a href="#"> 이용약관</a>
<a href="#"> 개인정보 취급방침</a>
</div>
<div>
<select>
<option>familysite</option>
<option>관련사이트1</option>
<option>관련사이트2</option>
</select>
</div>
</div>
<div>
<div>
<p> (주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 </br>
/ 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD. </br>
2015 ALL RIGHT RESERVED.
</div>
<div>
<img src="./isaknox/bottom_logo.gif" alt="밑 로고"/>
</div>
</div>
</div>
<!-- 본문 /-->
</div>
</body>
</html>
5) 페이지 전체 마크업 2 - 쌤이 하신 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>이자녹스</title>
</head>
<body>
<div id="wrap">
<!-- 상단영역 -->
<div id="header>
<div class="inner_container">
<ul>
<li><a href="#">햄버거메뉴</a></li>
<li><a href="#">검색</a></li>
<li><a href="#">쇼핑몰</a></li>
</ul>
<h1><img src="./isaknox/top_logo.gif" alt="isakonox"/></h1>
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div>
</div>
<!-- 상단영역 /-->
<!-- 본문영역 -->
<div id="container">
<!-- 비주얼영역 -->
<div id="visual">
<div class="inner_container">
<img src="./isaknox/visual.gif" alt="모델과 화장품 이미지"/>
</div>
<!-- 비주얼영역 /-->
<!-- 제품링크영역 -->
<div id="productLink" class="inner_container">
<h2><img src="./isaknox/so_title.gif" alt="isaknox" /></h2>
<ul>
<li><a href="#">Brand</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Customer Center</a></li>
</ul>
</div>
<!-- 제품링크영역 /-->
<!-- 신상품영역 -->
<div id="newProduct" class="inner_container">
<h2>NEW PRODUCT</h2>
<ul>
<li>
<img src="./isaknox/product01.gif" alt="제품사진1"/>
<div>
X2D2</br>
링클 포커스 세럼</br>
wrinklefocus serum
</div>
</li>
<li>
<img src="./isaknox/product02.gif" alt="제품사진2"/>
<div>
X2D2</br>
링클 포커스 세럼</br>
wrinklefocus serum
</div>
</li>
<li>
<img src="./isaknox/product03.gif" alt="제품사진3"/>
<div>
X2D2</br>
링클 포커스 세럼</br>
wrinklefocus serum
</div>
</li>
<li>
<img src="./isaknox/product04.gif" alt="제품사진4"/>
<div>
X2D2</br>
링클 포커스 세럼</br>
wrinklefocus serum
</div>
</li>
</ul>
</div>
<!-- 신상품영역 /-->
<!-- 배너영역 -->
<div id="banner" class="inner_container">
<div>
<img src="./isaknox/main_banner01.gif" alt="배너1"/>
</div>
<div>
<img src="./isaknox/main_banner02.gif" alt="배너2"/>
</div>
<div>
<img src="./isaknox/main_banner03.gif" alt="배너3"/>
</div>
<div>
<img src="./isaknox/main_banner04.gif" alt="배너4"/>
</div>
</div>
<!-- 배너영역 /-->
</div>
<!-- 본문영역 /-->
<!-- 하단영역 -->
<div id="footer" class="inner_container">
<div>
<a href="#"><img src="./isaknox/f_icon.gif" alt="페이스북 바로가기"/></a>
<ul>
<li><a href="#"> Contact us</a></li>
<li><a href="#"> 이용약관</a></li>
<li><a href="#"> 개인정보 취급방침</a></li>
</ul>
<select>
<option>familysite</option>
<option>관련사이트1</option>
<option>관련사이트2</option>
</select>
</div>
<div>
<p> (주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용
/ 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD.
2015 ALL RIGHT RESERVED.</p>
<img src="./isaknox/bottom_logo.gif" alt="LG생활건강"/>
</div>
</div>
<!-- 하단영역 /-->
</div>
</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 기초 3일차 (0) | 2022.03.16 |
| [HTML] 5일 만에 끝내는 HTML 기초 2일차 (0) | 2022.03.15 |
| [HTML] 5일 만에 끝내는 HTML 기초 1일차 (0) | 2022.03.14 |