◐
test3.html
인라인레벨은 : 패딩을 설정못합니다.
블랙레벨은 : 패딩 설정가능합니다.
#
마우스올려놓으면 작업처리
<!DOCTYPE html> <!-- html5 -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 연습 </title>
<style>
/*태그 선택자 */
body{
width: 960px ;
margin: 0px;
padding: 0px;
margin: 0 auto; /* 중앙 정렬 */
}
/* .은 클래스에 대한 모든것에 스타일을 준다. */
/*class에 적용, class 명이 container 인곳에 적용*/
.container{
border : 1px solid blue;
width: 700px;
height: 700px;
padding: 5px 7px 5px 10px;
/*margin,padding 은
위(1) 오른쪽(2) 아래쪽(3) 왼쪽(4) 시계방향순서 적용 */
/* padding: 5px 10px; 위/아래(5px), 오른족/왼쪽(10px) */
margin-top: 50px ;/* 위쪽만 */
background-color: blanchedalmond;
}
/* 태그선택자 */
ul, li{
margin: 0px;
padding: 0px;
list-style: none; /* 점 없애기*/
}
a{
/*text-align: 가운데 정렬*/
color: black;
text-decoration: none; /*글자에 밑줄 또는 윗줄, 취소선 등을 긋기
밑줄 없애기 위해 none */
display: block; /*블록레벨 태그로 변환*/
padding: 10px 10px;
width: 150px;
text-align: center;
}
a :visited{ /*방문후 색갈을 검은색으로 처리*/
color: black;
text-decoration: none;
}
a:hover{ /* 마우스를 올려놓으면 작업하게 하는 것 */
color: crimson;
background-color: yellow;
}
img{
margin : 0px;
padding : 0px;
border: 0px; /* 0 or none테두리를 안주겠다 라는것*/
}
/*'태그선택자'라고 합니다. ,(콤마) 사용한 모두에게 적용한다.*/
</style>
</head>
<body>
<!-- div.container>h1
<div class="container">
<h1 style="color: aquamarine;"></h1> 권장하지 않는 방법이지만, 이렇게도 할수도 있습니다.-->
<!-- 메소드처럼 사용하기위해서..
</div>
.-->
<!-- div.container>h1{My Web} -->
<div class="container">
<h1 style="color: blueviolet;">My Web</h1>
<!-- ul>li*3 -->
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
</ul>
<!-- ul>li*3{test1}
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
-->
<!-- div.imBox>img*2 --> <!-- . 은 class-->
<div class="imgBox"> <!-- 여러번쓸수있는 스타일리스트. -->
<img src="../images/flower_small1.jpg" alt="꽃이미지1">
<img src="../images/flower_small2.jpg" alt="꽃이미지2">
</div>
<!-- div#imBox>img*2 --> <!-- #은 id-->
<div id="imBox"> <!-- 파이널메소드 : 여기서쓰고 다른데서못쓴다.못고치는것 -->
<img src="" alt="">
<img src="" alt=""></div>
<!-- div.linkBox>a*3 -->
<div id="linkBox">
<a href="https://www.choongang.co.kr" target="_blank">중앙정보</a>
<a href="../images/flower_big1.jpg" target="_blank">
<img src="../images/flower_small1.jpg" alt="작은이미지">
</a>
<a href="test2.html" target="_blank">test2문서</a>
</div>
</div>
<!-- id : 하나만 쓸수있습니다.
--class : 여러개 쓸수 있다.(자바로치면 메소드끌어다 쓴다입니다.)
-->
</body>
</html>
3개에서 테스트해바야합니다.
크롬
엣지
사파리
◐
test4-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>관람안내</title>
<style>
/* 전체 선택자, 페이지에 있는 모든 요소에 대해 스타일 적용 */
* {
margin: 0px;
padding: 0px;
}
body{
width: 960px; /* 크기는 12로 나누어 떨어지는 값을 주는 것이 좋습니다. */
margin: 0px auto ; /* 위아래(0px), 왼쪽과 오른쪽은(가운데정렬)*/
}
ul, li{
margin: 0px;
padding: 0px;
list-style: none; /* 목록의 기호 */
}
a{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
a:visited{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
img{
margin: 0px;
padding: 0px;
border:none;
}
</style>
</head>
<body>
</body>
</html>
◐
css - basic.css
자주사용하는 스타일을 css에 넣는다.
/* 전체 선택자, 페이지에 있는 모든 요소에 대해 스타일 적용 */
* {
margin: 0px;
padding: 0px;
}
body{
width: 960px; /* 크기는 12로 나누어 떨어지는 값을 주는 것이 좋습니다. */
margin: 0px auto ; /* 위아래(0px), 왼쪽과 오른쪽은(가운데정렬)*/
}
ol, ul, li{
margin: 0px;
padding: 0px;
list-style: none; /* 목록의 기호 */
}
a{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
a:visited{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
img{
margin: 0px;
padding: 0px;
border:none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
test4-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>관람안내</title>
<!-- 외부 파일을 링크 자바에서는 improt를 사용-->
<link href="../css/basic.css" rel="stylesheet" type="text/css" />
<!--
rel : 내가 연동해서 가져오는 것이 무엇인지 알려주는 것.
type : 잘안쓴다.
-->
<!-- css는 style위에다가 배치한다.-->
<!-- 기본구조를 먼저 잡습니다.-->
<!-- 1.전체박스,
2.탑nav 작은박스
3.그다음
4.그다음 부위
-->
<style>
</style>
</head>
<body>
<h1>테스트</h1>
<a href="test2.html">테스트 문서</a>
<ul>
<li>메뉴</li>
<li>메뉴</li>
</ul>
</body>
</html>
◐
#
1.adobe color
2. 컬러피커
3. https://www.colorzilla.com/
#
css리셋
ㅡㅡㅡ
◐
basic.css
/* 전체 선택자, 페이지에 있는 모든 요소에 대해 스타일 적용 */
* {
margin: 0px;
padding: 0px;
}
body{
width: 960px; /* 크기는 12로 나누어 떨어지는 값을 주는 것이 좋습니다. */
margin: 0px auto ; /* 위아래(0px), 왼쪽과 오른쪽은(가운데정렬)*/
}
ol, ul, li{
margin: 0px;
padding: 0px;
list-style: none; /* 목록의 기호 */
}
a{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
a:visited{
text-decoration: none; ; /* 밑줄제거 */
color: black;
}
img{
margin: 0px;
padding: 0px;
border:none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
test4-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>관람안내</title>
<!-- 외부 파일을 링크 자바에서는 improt를 사용-->
<link href="../css/basic.css" rel="stylesheet" type="text/css" />
<!--
rel : (속성값) 내가 연동해서 가져오는 것이 무엇인지 알려주는 것.
type : 잘안쓴다.
-->
<!-- css는 style위에다가 배치한다.-->
<!-- 기본구조를 먼저 잡습니다.-->
<!-- 1.전체박스,
2.탑nav 작은박스
3.그다음
4.그다음 부위
-->
<style>
/* 전체 상자 */
.container{
width: 100%;
height: 100vh; /*vh : 뷰포인트 보이는 만큼 맞추세요*/
margin: 0px;
padding: 0px;
}
/* 상단 네비게이션 부분 */
.topNav{
width: 100%;
height: 40px;
line-height: 40px; /* 수직 가운데(height) 만큼 , 출력 */
text-align: center; /* 글자 가운데 정렬*/
margin-bottom: 10px; /* 아래쪽 여백 */
/*background-color: aqua; /* 지울부분*/
}
.topNav li{ /* .topNav 밑의 후손, > 자식 : .topNav>li, nav */
display: inline-block; /* 인라인레벨속성으로 옆으로가고, block레벨의 속성을 갖는다.*/
}
.topNav li>a{ /* li는 topNav의 후손, a는 li의 자손*/
display: block; /*화면보여질때, */
padding: 2px 10px ; /* 글자와테두리사이의간격 */
font-weight: bold;
font-size: 1.2rem; /*rem : html 글자크기의 1.2배*/
}
.topNav li>a:hover{ /* 글자 위에 마우스 올라 왔을 때 */
color :white; /* 글자색 */
background-color: blue; /* 배경색*/
border-radius: 10px; /*모서리 부분 설정*/
}
hr{ /* hr ??? */
margin-top: 5px;
margin-bottom: 30px;
border-color: blueviolet;
width: 100%;
}
.info{
margin-bottom: 30px;
}
.box{
width: 80%; /* 부모의 90퍼센트*/
height: 100px;
border: 1px solid green;
background-color: rgb(214, 252, 157);
padding-left: 20px;
padding-top: 10px;
margin-left: 20px;
}
.box1{ /* */
height: 40px;
line-height: 40px;
}
.coinfo{
width: 50%;
height: 50vh; /*vh : 뷰포인트 보이는 만큼 맞추세요*/
margin: 0px;
padding: 0px;
}
.coinfo li{ /* .topNav 밑의 후손, > 자식 : .topNav>li, nav */
display: inline-block; /* 인라인레벨속성으로 옆으로가고, block레벨의 속성을 갖는다.*/
margin-bottom: 20px ;
width: 25%;
}
</style>
</head>
<body>
<!-- 전체 상자 .container-->
<div class="container">
<!-- 윗쪽 네비게이션 nav.topNav-->
<nav class="topNav"> <!-- 목록나타낼떄 : navigation(nav)사용 -->
<!-- ul>li*6>a -->
<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>
<li><a href="#">공지사항 |</a></li>
</ul>
</nav>
<!-- 페이지 안내, section.content-->
<div class="content">
<h1>+ 방문안내</h1>
<hr> <!-- 수옆ㅇ선-->
<!--
section : 영역을 표시
시멘틱태그 상자로써서 여기는 어떤것을 쓸것을 알려준다.
-->
<!-- 관람 안내, article.info -->
<article class="info">
<h3>1. 관람안내</h3>
<div class="box">
월.화.목.금 : 10 ~ 18:00 <br> <!-- 상자안에 담는 이유 : 유지보수가 용이-->
수.토 : 10: 00 ~ 21 : 00<br>
일.공휴일: 10 ~ 19: 00<br>
</div>
</article>
<!-- 야간 안내, article.info -->
<article class="info">
<h3>2. 야간개장</h3>
<div class="box">
월.화.목.금 : 10 ~ 18:00 <br> <!-- 상자안에 담는 이유 : 유지보수가 용이-->
수.토 : 10: 00 ~ 21 : 00<br>
일.공휴일: 10 ~ 19: 00<br>
</div>
</article>
<!-- 관람료 안내, article.info -->
<article class="info">
<h3>3. 관람료 안내</h3>
<div class="box box1"> <!-- 스타일 개별적으로 넣는 법 : box box1(띄어쓰기하고 box1넣기)-->
※ 무료 <br> <!-- 상자안에 담는 이유 : 유지보수가 용이-->
</div>
</article>
</div>
<!-- 회사 정보 footer.footer-->
<footer class ="coinfo">
<nav class="topNav"> <!-- 목록나타낼떄 : navigation(nav)사용 -->
<!-- ul>li*6>a -->
<ul>
<li><a href="#">박물관 소개 </a></li> <!-- #을 주는 것 : 아직 결정되지않음을 표시-->
<li><a href="#">방문안내 </a></li>
<li><a href="#">관람안내 |</a></li>
<li><a href="#">관람안내 |</a></li>
</ul>
</nav>
</footer>
<!-- 전체 상자의 끝 -->
</div>
</body>
</html>
#시멘틱태그 : 그 내용에 의미를 부여하는 태그
보통5가지인데, 최근에 1개가 mian이 추가된다.
section 영역이라는 뜻 : 정해진것은 아니지만,
aside: 부수적인것
div로 처리해도된다.그렇지만, aside로 처리해준다.
header
nav
aside
footer 아래주소
1.div태그 ㅡ ‘일반’상자의개념
2.span태그 :줄바꿈안댐, 일정한부분 부수적으로 준다. ex) <li><a>관람안내<span>|</span></a></li>
3.p태그 <br><br>
4.시멘틱테크(상자개념) ex) header, nav, section, article, aside(사이드메뉴),footer
ㅡ 전부 상자의 개념 :이름표를 붙임
ㅡ 기능의 이름을 붙은 상자(div랑 같지만, 번역기(번역기표준)가 인식할때,
이것을 본다.)
nav, footer 을
header안에
footer
◐
test5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>책마을 연습</title>
<link href="../css/basic.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
h1{
}
.wrap{
width: 100%; /* 100% - 부모 크기의100%만큼,
100vw :보여주는 화면의 크기
100vh : 보여주는 화면의 높이
margin 상하좌우다*/
height : 100vh;
margin:0px;
padding: 0px;;
}
.wrap li{
width: 200px;;
/* border: 1px solid black; */
margin-left: 50px;
text-align: center;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.wrap li:first-child{
border-top: 1px solid black;
background-color: aquamarine;
}
.wrap li:nth-child(2n){ /*짝수 자식*/
background-color: chartreuse;
}
.wrap li:nth-child(2n+1){ /*홀수 자식*/
background-color: rgb(34, 90, 164);
}
.wrap li:nth-child(3){
background-color: red;
}
.warp li>a{
display: block;
padding: 10px;
}
/*
inline : 줄바꿈 x
inline-block : 옆으로 가게하고싶을때, block타입상태에서...
block : 줄바꿈 o
none :
flex : 반응형으로 만드는 것
*/
</style>
</head>
<body>
<h1>테스트</h1>
<div class="wrap">
<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>
<li><a href="#">오시는길</a></li>
</ul>
</div>
</body>
</html>
#
구글폰트
'4.VisualStudioCode > 2).VisualStudioCode_개념 및 실습' 카테고리의 다른 글
| VisualStudioCode_Day_06 (1) | 2024.02.23 |
|---|---|
| VisualStudioCode_Day_05 (0) | 2024.02.23 |
| VisualStudioCode_Day_04 (0) | 2024.02.21 |
| VisualStudioCode_Day_02 (0) | 2024.02.21 |
| VisualStudioCode_Day_01 (0) | 2024.02.21 |