열심히 끝까지
디바이스 융합 자바(Java) day29 - 기본광고틀,로렘입숨(더미데이터),CSS(외부스타일시트,내부스타일시트,와일드카드,자식선택자(div>p),가상클래스선택자(링크색지우기+마우스홀더때띄우기),가상.. 본문
디바이스 융합 자바(Java) day29 - 기본광고틀,로렘입숨(더미데이터),CSS(외부스타일시트,내부스타일시트,와일드카드,자식선택자(div>p),가상클래스선택자(링크색지우기+마우스홀더때띄우기),가상..
노유림 2022. 7. 21. 19:31[어제 내용]
HTML 마무리
- 시맨틱 태그
>> 태그가 일정한 의미를 가질 수 있게끔 코딩하는 것(페이지 기술)
>> 어떤 기능을 하는지 한 눈에 보이게 구성하는 것(페이지 리더가 읽을 수 있게)
>> 박스 태그 사용해서
- 웹 탬플릿
[오늘 내용]
로고, 광고(사진), 기사
>> 이 중에서 제일 중요도가 높은 것은?
<추측>
1. 로고
2. 광고(사진)
3. 기사
>> 헤더 - 로고
세션 - 광고, 기사
이때, 묶이는 것들은 <div></div>로 묶을 것
로고 제작 >> 헤더 지정
- 이때, id를 헤더로 지정한다고 상단에 배치되는 것은 아님
> 코드 상 위치가 아래더라도 #header를 맨 위로 올리는 css 적용하면 올라가게 됨
<div id="header">
NAVER
</div>
광고 기본 틀
<a href="광고페이지"><img alt = "광고 사진" src = "이미지파일의 경로, 확장자"></a>
<div class="ad">
<!-- 여러개 걸릴 수 있으니 class -->
<a href="http://www.naver.com"><img alt = "광고 사진" src = "images/지울거.JPG"></a>
<!-- <a href="광고페이지"><img alt = "광고 사진" src = "이미지파일의 경로, 확장자"></a> -->
</div>
기사 >> 로렘입숨(더미데이터) 사용
<div class="article">
<!-- 로렘입숨 : 여러개 걸릴 수 있으니 class -->
<!-- 여기서 <span class = "red"> </span>을 이용해 중요한 단어만 빨간색으로 강조 가능 -->
Lorem <span class = "red">ipsum</span> dolor sit amet, consectetur adipiscing elit, sed do eiusmod <span class = "red">tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
HTML에서는   로 사이띄우기
ctrl + f 키 누르면 단어 찾기 가능 >> 한글, 메모장, 이클립스 등등..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border : 1px solid black;
margin : 5px;
}
#header{
background : lightblue;
}
.red{
color : red;
}
</style>
</head>
<body>
<!-- 로고 가장 중요 => h1
광고(사진) => h2
기사 => h3
(순서가 광고와 기사가 바뀔 수 있음) -->
<div id="header">
NAVER
</div>
<div class="ad">
<!-- 여러개 걸릴 수 있으니 class -->
<a href="http://www.naver.com"><img alt = "광고 사진" src = "images/지울거.JPG"></a>
<!-- <a href="광고페이지"><img alt = "광고 사진" src = "이미지파일의 경로, 확장자"></a> -->
</div>
<div class="article">
<!-- 로렘입숨 : 여러개 걸릴 수 있으니 class -->
Lorem <span class = "red">ipsum</span> dolor sit amet, consectetur adipiscing elit, sed do eiusmod <span class = "red">tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
로렘입숨 데이터
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
>> 웹 탬플릿
- 어떤 템플릿이 좋은 템플릿인가?
> 내일 발표가 끝나면 웹으로 변경하는 작업 진행
1. "반응형" << 매우 중요한 요소
☆ 화면 최적화가 잘 적용되어 있는 반응형 탬플릿이 좋은 탬플릿이다!
> demo라고 해서 미리 보기 가능 > 미리 보기 통해서 확인 가능!
: 폰, 탭, 노트북, pc, .. : 브라우저를 이용하는 기기의 종류가 너무 다양
>> 화면 최적화에 대한 이야기 등장!
시맨틱 태그를 이용해 중요도에 따라 상단 배치도가 달라진다.
>> 사용한 예시 + 읽는 방법 예시
<div id = "wrapper"></div> : 모든 요소를 감싸는 태그
<header id = "header" class="alt"></header> : 헤더 id 지정
<div id = "main"></div> : 메인 요소 감싸는 태그
<footer id = "footer" class = "alt"></footer> : 풋터 id 지정
2. 메인 페이지 + 상세 페이지를 제공
: 현재 템플릿을 구성하는데에 사용된 resource(자원)을
소개해주는 페이지를 제공하는 템플릿
>> 인덱스 페이지와 제네릭 페이지가 열리면?
>> 어떤 것을 적용할 수 있다 라고 표기
>> 리스트, 언오더리스트, 아이콘, 등등 : 각종 리소스 보여줌
- CSS(STYLE에 대한 내용)
: 수업에 한해서 내부스타일시트 적용
: 속성 설정을 제대로 해 놓은 것이 좋음
: 하지만 적용이 안되면 답답해하기에 알려줌
예시-------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 외부스타일시트</title>
<link rel="stylesheet" type="text/css" href="css/NewFile.css">
</head>
<body>
<h1>제목</h1>
<p>Lorem ipsum dolor sit amet, </p>
<p>consectetur adipiscing elit</p>
<p>sed do eiusmod tempor incididunt</p>
</body>
</html>-----------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 내부스타일시트</title>
<style type="text/css">
*{/* *(와일드카드)의 의미 : 모든 요소 */ /* 스타일 내 주석 방법 */
color:blue;
}
.red{
color:red;
}
.blue{
color:blue;
}
.bold{
font-weight:bold;
}
</style>
<!-- CSS에는 우선순위가 존재! 위에서 아래로 내려오면서 line by line으로 진행 > 가장 마지막에 존재하는 친구가 적용 -->
</head>
<body>
<!-- * : 와일드카드 -->
<!-- 모든 요소 -->
<h1>제목</h1>
<p class="bold">Lorem ipsum dolor sit amet, </p>
<p class="red">consectetur adipiscing elit</p>
<p>sed do eiusmod tempor incididunt</p>
</body>
</html>
>>CSS에는 우선순위가 존재! 위에서 아래로 내려오면서 line by line으로 진행
> 가장 마지막에 존재하는 친구가 적용 >>CSS에는 우선순위가 존재! 위에서 아래로 내려오면서 line by line으로 진행
> 가장 마지막에 존재하는 친구가 적용
--------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자</title>
<style type="text/css">
div > p { /*크롤링할 때 많이 본 아이*/
color:blue;
}
/* * : 전체 선택자*/
/* > : 자식 선택자*/
div, li{ /* 여러 그룹 나눈다, 그룹 선택자 */
border:5px solid lightpink;
}
</style>
</head>
<body>
<!-- p태그 다양하게 이용! -->
<p>사과</p>
<div>
<p>바나나</p>
<ul>
<li><p>키위</p></li>
<li><p>포도</p></li>
<li><p>복숭아</p></li>
</ul>
</div>
</body>
</html>-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상 클래스 선택자</title>
<style>
a{
color:black;
}
a:hover{ /*마우스를 가져다댄 상태일 때*/
color:red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">상의</a></li>
<li><a href="#">바지</a></li>
<li><a href="#">치마</a></li>
<li><a href="#">신발</a></li>
</ul>
</body>
</html>-------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상요소 선택자</title>
<style type="text/css">
/*list의 중간 점 요소를 다 넣고싶어졌다..*/
p:before{
content:"●";
}
/*메뉴가 끝나면 메뉴가 끝났다는 말을 출력하고 싶어졌다..*/
.menu:after{
content:"메뉴가 끝났습니다.";
color:red;
}
</style>
</head>
<body>
<!-- 억지스러운 코딩 -->
<div class="menu">
<p>상의</p>
<p>바지</p>
<p>치마</p>
<p>신발</p>
</div>
</body>
</html>----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메뉴 만들기</title>
<style type="text/css">
li{
/*앞에 . 제거*/
list-style-type:none;
}
.gnb li{ /*한줄로 나오게 하는 작업*/
/*CSS 할 때 gnb > li 로 쓰는게 일반적이긴 하다. 강사님께서 gnb li로 쓰는게 익숙*/
display:inline;
}
.gnb li a{ /* a태그는 인라인요소, 인라인요소는 자기공간만을 차지하는 타입-> width타입이 안먹힘*/
/*및줄 제거*/
display:inline-block; /*인라인 요소가 먹히게 적용하는 타입 : a를 블록으로 잠시 변환*/
text-decoration : none;
background:lightpink;
width:100px; /*요소에 적용*/
text-align:center;
}
.gnb li a:hover{
/*및줄 제거*/
text-decoration : underline;
background:lightblue;
}
</style>
</head>
<body>
<ul class="gnb"> <!-- global navigation bar -->
<!-- 블럭요소 -->
<li><a href="#">메일</a></li>
<li><a href="#">카페</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">웹툰</a></li>
</ul>
</body>
</html>-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 - 개인정보처리방침</title>
<style type="text/css">
.agree{
width:500px;
height:100px;
border:2px solid black;
overflow-y:scroll;
}
</style>
</head>
<body>
<h3>서비스 이용약관</h3> <!-- h1.로고 / h2.회원가입 -->
<p class="agree">
개인정보처리방침<br>
1. 안녕하세요<br>
2. 개인정보처리방침입니다<br>
3. 어떻게든 늘려야하는데<br>
4. 왜 안늘려지죠<br>
5. 어떻게 해야하죠<br>
6. 이렇게 계속 늘릴까요?<br>
7. 이렇게 해도 될까요?<br>
8. 너무 힘든데<br>
</p>
</body>
</html>----------------------