| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
Tags
- github clone
- DataGrip
- 단축키
- php
- csv
- Visual Studio Code
- PHPStorm
- Python
- visualstudio code
- vscode
- error
- clone
- error 해결
- MySQL
- import data
- localhost
- database
- OrCAD 다운로드
- cmd
- 에러
- 오류
- run sql script
- jupyter
- github token
- console창
- 따옴표 삭제
- 파이썬
- 클론
- 데이터베이스
- 깃 토큰
Archives
- Today
- Total
개발 노트
8/25 css, class 선택자, id 선택자, 박스모델 본문
프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/웹표준 기술
8/25 css, class 선택자, id 선택자, 박스모델
hayoung.dev 2022. 8. 31. 20:32[04]
date.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<h3>조회기간 선택</h3>
<label><input type="date" id="start"></label>
<label><input type="date" id="end"></label>
</form>
</body>
</html>출력 결과 : 이런 양식으로 시작일자와 끝날 일자를 넣어줄 수 있다.
meter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
<label>점유율 0.8</label>
<!-- 전체크기 1을 기준으로 0.8만큼 차지합니다. 기준을 안주어주면 1임.-->
<meter value="0.8"></meter>
</li>
<li>
<label>사용량 64%</label>
<!-- 전체 100 중에서 64만큼 차지합니다. -->
<meter min="0" max="100" value="64"></meter>
</li>
<li>
<lable>트래픽 초과</lable>
<!-- 전체 크기는 1024~10240까지이고, 높다고 설정한 8192보다 현재 값 9216이 더 큽니다.
범위에서 low, high를 추가로 지정해주면 그 범위를 벗어났을 때 노란색으로 뜬다.-->
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
</li>
<li>
<lable>트래픽 초과2</lable>
<!-- 이렇게 하면 범위 안이므로 초록색으로 뜬다. -->
<meter min="1024" max="10240" low="2048" high="8192" value="3216"></meter>
</li>
<li>
<label>적절한 트래픽</label>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다. -->
<meter value="0.5" optimum="0.8"></meter>
</li>
</ul>
</body>
</html>
출력 결과
radio_check.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-color:#FFE08C;
}
form fieldset{
margin-bottom:25px;
}
form legend {
font-size:15px;
font-weight:600; /* 글자 두꺼워짐. */
}
form label.reg {
font-size:14px;
color:#390;
font-weight:bold;
width:110px;
float:left;
text-align:right; /* 텍스트를 오른쪽으로 정렬 */
margin-right:10px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>신청과목</legend>
<p>이 달에 신청할 과목을 선택하세요.(1과목만 가능)</p>
<label><input type="radio" name="subject" value="speaking">회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writting">작문</label>
</fieldset>
<fieldset>
<legend>메일링</legend>
<p>메일로 받고 싶은 뉴스 주제를 선택해 주세요.(복수 선택 가능)</p>
<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
</fieldset>
</form>
</body>
</html>radio 타입은 한개만 선택 가능하다.
checkbox 타입은 여러개 선택할 수 있다.
출력 결과
support.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto; /* 웹으로 보든 앱으로 보든 가운데로 올 수 있게 함. */
}
ul {
list-style-type:none;
}
li {
line-height:30px;
}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
<!-- <input>태그 앞 뒤에 <label>과 </label> 태그로 묶어도 됩니다 -->
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snumber">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label>
<input type="radio" name="field" value="an"> 웹 퍼블리싱
</label>
</li>
<li>
<label>
<input type="radio" name="field" value="pd"> 웹 애플리케이션 개발
</label>
</li>
<li>
<label>
<input type="radio" name="field" value="eng"> 개발 환경 개선
</label>
</li>
</ul>
<h4>지원 동기</h4>
<label>
<!-- 60개 글자의 5개의 줄인 메모카드 -->
<textarea cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
<!-- 다음과 같이 작성해도 됩니다.
<button type="submit">접수하기</button>
<button type="reset">다시 쓰기</button>
-->
</div>
</form>
</div>
</body>
</html>div : 디자인 하려는 목적으로 덩어리를 만드는 것.
form : 접수하기를 눌렀을 때 넣어준 값을 가져가야 하기 때문에 form을 사용한다. 디자인만 할 것이기 때문에 action이 없음.
autofocus: 새로고침 했을 때 커서가 여기에 있는 것.
"웹 퍼블리싱"을 누르면 value의 "an" 값이 field 파라미터 변수에 들어가는 것임.
출력 결과
[5단원]
CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. (중요)
style.css 파일을 만들어놓고
<link rel="stylesheet" href="style.css">
처럼 파일을 불러와서 사용할 수 있다. (중요)
전체 선택자는 *
class, id 선택자 (중요 : 별표 치기)
[05]
cascading1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
font-style:italic; /* 글자 스타일 */
color:blue; /* 글자색 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<img src="images/rio.png" alt="브라질 리우데자네이루">
<p>시드니(Sydney), 호주</p>
<p>리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>italic : 누워있는 글자
출력 결과
cascading2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1 {
color:blue; /* 글자색 */
}
#habor {
border:1px solid gray; /* 테두리 - 1픽셀짜리 회색 실선 */
padding:10px; /* 패딩 여백 - 테두리와 내용 사이의 여백 */
color:green; /* 글자색 */
}
.heading {
color:red; /* 글자색 */
}
</style>
</head>
<body>
<h1 class="heading" id="habor">세계 3대 미항</h1>
<img src="images/rio.png" alt="브라질 리우데자네이루">
<p>시드니(Sydney), 호주</p>
<p>리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>중요도는 id, class, 태그 순이다.
출력 결과
class_selector1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.bluetext {
color:blue; /* 글자색 */
}
p{
font-size: 12px; /* 글자 크기 */
margin-left: 20px; /* 왼쪽 마진 여백 */
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2 class="bluetext">블루베리와 항산화 효능</h2>
<p class="bluetext">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. </p>
<h2>블루베리와 노화</h2>
<p> USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써
노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다. </p>
</body>
</html>
출력 결과
class_selector3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type ="text/css">
h2.bluetext {
color:blue; /* 글자색 */
}
.redtext {
color:red /* 글자색 */
}
p {
font-size:12px; /* 글자 크기 */
margin-left:20px; /* 왼쪽 마진 여백 */
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2 class="bluetext">블루베리와 항산화 효능</h2>
<p class="bluetext">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. </p>
<h2>블루베리와 노화</h2>
<p> <span class="redtext"> USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 실험실에서 </span>신경과학자들은 쥐들에게 블루베리를 먹임으로써
노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다. </p>
<h2>블루베리와 노화</h2>
</body>
</html>
출력 결과
id_selector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container {
/* 너비와 높이를 주어줘야 배경색이 나타난다. */
background: #ff6a00; /* 배경색 */
width: 400px; /* 너비 */
height: 200px; /* 높이 */
margin: 20 auto; /* 가로로 중앙에 배치. 하지만 적용이 되지 않음(chrome->검사 통해 확인 가능) */
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
출력 결과
external1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
color: blue;
list-style-type: square;
}
</style>
</head>
<body>
<img src="images/sydney.png" alt="시드니 오페라 하우스">
<h1>세계 3대 미항</h1>
<ul>
<li>시드니(Sydney), 호주</li>
<li>리우데자네이루(Rio de Janeiro), 브라질</li>
<li>나폴리(Naples), 이탈리아</li>
</ul>
</body>
</html>출력 결과
style.css
ul{
color: blue;
list-style-type: square;
}
external3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일시트</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="images/sydney.png" alt="시드니 오페라 하우스">
<h1>세계 3대 미항</h1>
<ul>
<li>시드니(Sydney), 호주</li>
<li>리우데자네이루(Rio de Janeiro), 브라질</li>
<li>나폴리(Naples), 이탈리아</li>
</ul>
</body>
</html>href :참조할 레퍼런스 rel : 관계
css 파일을 외부에서 따로 만들고(style.css) 링크를 걸어주면 디자인이 적용된다.
출력 결과
[6단원]
[06]
bullet.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.sqbullet {
list-style-type:square; /* 채운 사각형 */
}
.nobullet{
list-style-type:none; /* 불릿 없애기 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<!-- 채운 사각형으로 불릿 바꾸기 -->
<ul class="sqbullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<!-- 불릿 없애기 -->
<ul class="nobullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>출력 결과
color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1 {
color:rgb(0,200,0);
}
h2 {color:blue;} /* 색상 이름 사용 - 파랑 */
.accent {color:#f00;} /* 16진수 사용 - 빨강, #ff0000으로도 사용 */
img {
float:right; /* 오른쪽 정렬 */
margin-right:10px; /* 오른쪽 마진 여백 */
}
</style>
</head>
<body>
<h1>세계 10대 슈퍼푸드</h1>
<img src="images/galic.jpg">
<h2>마늘(Garlic)</h2>
<p>일해백리(一害百利)는 마늘의 별명이다. 한가지 해가 있고 백가지 이로움이 있다는 뜻이다.
그 한 가지 해란, 아린 맛으로 인해 위에 부담을 준다는 것이다. </p>
<p>마늘 특유의 아린 맛은 <span class="accent">알리신</span>이라는 성분 때문으로,
살균 및 항균 작용을 하며
마늘에 들어 있는 아연이 피로 회복에 도움을 준다.</p>
</body>
</html>
출력 결과
font.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p.txt {
font: italic 12px/24px 돋움; /* 글꼴 스타일, 크기, 줄간격, 글꼴 */
}
</style>
</head>
<body>
<p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기,
그리고 글자색을 선택하는 것이 중요합니다. </p>
<p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다. </p>
<p style="font:caption"> [font:caption] 캡션에 어울리는 글꼴 스타일</p>
<p style="font:icon"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
<p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font:message-box"> [font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
<p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
<p style="font:status-bar"> [font:status-bar] 상태표시줄에 어울리는 글꼴 스타일</p>
</body>
</body>
</html>각각 디자인 요소가 달라질 때는 body에서 직접 주는 것이 좋음.
공통적으로 적용할 땐 head의 style에서 줌.
출력 결과
font_size.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
font-size:3em; /* 글자 크기 */
}
p {
font-size:1em; /* 글자 크기 */
}
</style>
</head>
<body>
<div>3em의 크기를 가진 제목</div>
<p>1em의 크기를 가진 단락</p>
</body>
</html>
1em : 보통 글씨체보다 약간 큼.
출력 결과
font_style.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {font-style:italic;} /* 이탤릭체로 */
p#txt {font-style:normal;} /* p 요소 중 id=txt인 부분은 보통체로 */
p#txt3 {font-style:oblique;}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<p>시드니(Sydney), 호주</p>
<p id="txt3">리우데자네이루(Rio de Janeiro), 브라질</p>
<p id="txt">나폴리(Naples), 이탈리아</p>
</body>
</html>출력 결과
letter_spacing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1 {font-size:40px;} /* 글자 크기 */
.letter1 {
letter-spacing: 0.2em; /* 자간 */
}
.letter2{
letter-spacing:0.5em; /* 자간 */
}
</style>
</head>
<body>
<h1>HTML5</h1>
<h1 class="letter1">HTML5</h1>
<h1 class="letter2">HTML5</h1>
</body>
</html>letter-spacing은 글자 하나하나 사이의 간격
출력 결과
line_height.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
font-size:15px;
border:1px solid red;
padding:10px;
}
.big-line {
line-height:2; /* 글자 크기 2배만큼의 줄간격 */
}
.small-line {
line-height: 0.7; /* 글자 크기 0.7배만큼의 줄간격 */
}
</style>
</head>
<body>
<h2>블루베리(Blueberry)</h2>
<p>블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
<p class="small-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
<p class="big-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
</body>
</html>출력 결과
link1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
list-style-type:none; /* 불릿 없앰 */
}
li {
display:inline; /* 인라인 레벨 요소로 만듦. 한 줄로 표현한다. */
float:left; /* 왼쪽으로 배치 */
margin:10px 15px; /* 마진 */
padding:10px; /* 패딩 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">도서</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">질문답변</a></li>
<li><a href="#">동영상강의</a></li>
</ul>
</body>
</html>출력 결과
link2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
list-style-type:none; /* 불릿 없앰 */
}
li {
display:inline; /* 인라인레벨 요소로 만듦 - 가로로 배치 */
float:left; /* 왼쪽으로 붙여서 배치 */
margin:10px 15px; /* 항목 간의 마진 */
padding:10px; /* 항목 내의 패딩 */
}
a:link{
text-decoration:none; /* 밑줄 없앰 */
color:black; /* 글자색 */
}
a:visited { /* 한 번 방문하면 오렌지색으로 변함 */
color: orange;
}
a:hover { /* 마우스를 가져다대면 배경색이 노란색으로 변함 */
background-color:yellow; /* 배경색 */
}
a:active { /* 누르는 순간이 활성화이다. 그때의 배경은 검정, 글자색은 하얀색으로 변함 */
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">도서</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">질문답변</a></li>
<li><a href="#">동영상강의</a></li>
</ul>
</body>
</html>출력 결과 (한 번 방문 후)
ordered.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.book1 {
list-style-type:lower-alpha; /* 소문자 알파벳 */
}
.book2 {
list-style-type: upper-roman; /* 대문자 로마 숫자 */
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ol class="book1">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
</body>
</html>출력 결과
text_overflow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.content {
border:1px solid #ccc; /* 테두리 */
width:300px; /* 단락의 너비 */
white-space:nowrap; /* 줄바꿈 없음 */
overflow:hidden; /* 테두리에서 넘치는 부분 감춤. 글자가 없어진 것이 아님.*/
text-overflow:ellipsis; /* 말줄임표 ...이 표시됨.*/
}
.content:hover {
overflow:visible; /*넘치는 부분을 마우스를 가져가면 보여줌*/
}
</style>
</head>
<body>
<h2>귀리(Oat) </h2>
<p class="content">귀리는 베타글루칸(항암 및 면역증강작용을 가지고 있는 불소화성 다당류) 성분을 포함하고 있다.</p>
</body>
</html>출력 결과 (마우스를 안가져간 경우)
(마우스를 가져간 경우)
text_shadow1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1 {
font-size:100px; /* 글자 크기 */
font-family:"Arial Rounded MT"; /* 글꼴 */
}
.shadow1{
color:orange; /* 글자색 */
text-shadow:1px 1px; /* 텍스트 그림자 */
}
.shadow2 {
text-shadow: 5px 5px 3px #f00; /* 텍스트 그림자. 사이즈는 순서대로 오른쪽으로, 밑으로, 뒤로 */
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>
</html>출력 결과
list-position.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 바꾸기</title>
<style>
.inside {
list-style-position:inside;
}
</style>
</head>
<body>
<h3> list-style-position을 지정하지 않음</h3>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<h3> list-style-position : inside</h3> <!-- 탭 키를 쓴 것처럼 한 단락 안쪽에 작성됨. -->
<ul class=inside>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>출력 결과
market.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
.accent {
color: blue; /* 글자색 */
}
.smalltext {
font-size: 0.7em; /* 글자 크기 */
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg"
alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>alt : 그림이 안나타나면 alt로 알려줌.
출력 결과
박스 모델은 마진, 테두리, 패딩, 콘텐츠 영역 으로 구성된다. (중요 : 별표 3개)
마진(margin) : 여러 박스 모델 사이의 여백
테두리(border) : 박스의 테두리
패딩(padding) : 박스와 콘텐츠 영역 사이의 여백
콘텐츠 : 실제 콘텐츠 영역
반응형
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20 > 웹표준 기술' 카테고리의 다른 글
| 8/30 html layout 참조 사이트, var, let, const, boolean, eval (0) | 2022.09.05 |
|---|---|
| 8/29 속성 선택자, 가상 클래스 (0) | 2022.09.02 |
| 8/26 rgb/rgba 표기법, 블록, 인라인 레벨 요소, 박스모델, layout, float, 시맨틱 태그 (0) | 2022.09.01 |
| 8/24 3, 4단원 html 태그들 (0) | 2022.08.28 |
| 8/23 tomcat 설치, html 태그, utf-8 설정 (0) | 2022.08.25 |
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/웹표준 기술' Related Articles
more
