학습한 내용
가상선택자
(1) 행동
[html]
<a href="https://www.naver.com/">네이버</a>
<input type="text">[css]
a:link {
color: red;
}
a:active {
color: blue;
}
a:hover {
color: pink;
}
input:focus {
border: solid 10px red;
}
- 가상선택자 : 선택한 요소에 행동, 규칙에 따라 디자인을 적용하는 방식
- 선택자 지정 : a, id, class 등 사용 가능
- link: 방문한 적이 없는 링크에 대해서 디자인을 적용할 때 사용하는 가상선택자
- active: 마우스를 누르고 있을 때의 디자인을 적용할 때 사용하는 가상선택자
- hover: 커서를 갖다 대었을 때의 디자인을 적용할 때 사용하는 가상선택자
- focus: input 태그를 입력했을 때 나타나는 블록을 누르면 나타나는 디자인을 적용할 때 사용하는 가상선택자
(2) 규칙
[html]
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
<li>메뉴6</li>
</ul>[css]
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(2) {
color: gray;
}
li:nth-child(2n + 1) {
color: green;
}
li:first-child: li 중 첫 번째에게 적용 (반대 개념 : last-child)- nth-child(2) : 2번째의 영역에 디자인 적용
- nth-child(2n + 1) : 홀수 번째 영역에 디자인 적용 (2n : 짝수 번째)
(3) before/after
[html]
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>회사소개</li>
<li>고객센터</li>
</ul>[css]
li:before {
content: "|";
}
li:after {
content: "---";
}
- before : 글자와 열린 태그 사이 공간, 그 공간에 content 속성값을 삽입하는 가상선택자
- after : 닫힌 태그와 글자 사이 공간, 그 공간에 content 속성값을 삽입하는 가상선택자
※ 삽입되는 속성값은 정보가 아닌 디자인이다.
웹 호스팅하기
- https://www.dothome.co.kr/ 에서 웹 호스팅
- FileZilla로 Sublime Text와 연결
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
<div></div>
<img src="img/icon.png">
</body>
</html>[css]
h1 {
color: red;
}
div {
width: 300px;
height: 300px;
background-image: url(../img/icon.png);
}
- (link tag) css 파일 경로 : html 기준으로 경로를 찾음 -> css/style.css
- background-image 파일 경로 : css 기준으로 경로를 찾음 -> ../img/icon.png
※ ../ : 해당 폴더에서 나와 더 상위 폴더로 간다. (css -> project_1) - img 파일 경로 : html 기준으로 경로를 찾음, img/icon.png
※ 자바스크립트 사용할 때는 js 폴더 만들어서 사용
카카오톡 친구 리스트 실습 2
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul class="friends-lists">
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" class="friend-thumbnail">
<div class="friend-info">
<h3 class="friend-name">김민호</h3>
<span class="friend-intro">Minho Kim</span>
</div>
</a>
</li>
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" class="friend-thumbnail">
<div class="friend-info">
<h3 class="friend-name">박지연</h3>
<span class="friend-intro">다정한 사람</span>
</div>
</a>
</li>
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" class="friend-thumbnail">
<div class="friend-info">
<h3 class="friend-name">한성은</h3>
<span class="friend-intro">헤헷</span>
</div>
</a>
</li>
</ul>
</body>
</html>[css]
.friends-lists {
list-style: none;
}
.friends-lists .friends-list a {
color: #000000;
text-decoration: none;
}
.friends-lists .friends-list a .friend-thumbnail {
border: solid 2px gray;
border-radius: 20px;
}
.friends-lists .friends-list a .friend-info .friend-name {
font-size: 20px;
color: #000000;
}
.friends-lists .friends-list a .friend-info .friend-intro {
font-size: 15px;
color: #c8c8c8;
}
/* Custom - Cascading */
.friends-lists .friends-list a .friend-info .friend-name {
font-size: 30px;
color: blue;
}
- ul 태그에 의한 . 없애기 :
.friends-lists {list-style: none;} - color : #000000 : a 태그 기본값 파란색 글씨-> 블랙으로 변경
text-decoration: none;: a 태그 때문에 생기는 언더바 제거.friends-lists .friends-list a .friend-thumbnail: img 설정
※ border-radius: 50% : 이미지 경계를 원형으로 디자인- #c8c8c8 : 회색
※ 캐스캐이딩을 이용해 덮어씌울 수 있다(custom)
Naver 실습 2
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul class="living-lists">
<li class="living-item">
<a href="#">
<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
<div class="living-info">
<span class="type">리빙</span>
<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
<div class="data-wrap">
<span class="source">유닠</span>
<span class="date">3개월 전</span>
</div>
</div>
</a>
</li>
<li class="living-item">
<a href="#">
<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
<div class="living-info">
<span class="type">리빙</span>
<h3 class="title">아이 있는 집 주방 1년 간의 소소한 변화</h3>
<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
<div class="data-wrap">
<span class="source">miju</span>
<span class="date">1개월 전</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>[css]
.living-lists {
list-style: none;
}
.living-lists .living-item a {
color: #000000;
text-decoration: none;
}
.living-lists .living-item a .living-info .type {
color: #c08d31;
font-weight: 700;
font-size: 12px;
}
.living-lists .living-item a .living-info .title {
font-size: 13px;
color: #000000;
}
.living-lists .living-item a .living-info .paragraph {
font-size: 13px;
color: #404040;
line-height: 20px;
}
.living-lists .living-item a .living-info .data-wrap .source,
.living-lists .living-item a .living-info .data-wrap .date {
font-size: 12px;
color: #505050;
}
/* 캐스캐이딩 */
.living-lists .living-item a .living-info .data-wrap .date {
color: grey;
}
.living-lists .living-item a .living-info .data-wrap .date:before {
content: "- ";
}
.living-lists .living-item a:hover .living-info .title{
text-decoration: underline;
}
.living-lists .living-item:hover {
background-color: pink;
}
- font-weight:폰트굵기
- line-height：글자 간 위 아래 간격
.living-lists .living-item a:hover .living-info .title
= a 태그 영역에 가져다 댔을 때 title에 언더바를 생성
= 마우스를 올린 영역에 있는 타이틀에 언더바 생성
학습한 내용 중 어려웠던 점 또는 해결 못한 것들
강의를 보고 따라하는 것은 문제가 없었으나 브라우저에서 검사를 통해 직접 html과 css를 확인할 때 어려움을 겪었다.
해결 방법 작성
네이버에서 직접 html과 css 항목을 수정해보면서 필요한 정보를 빠르게 찾을 수 있도록 노력하였다.
학습 소감
점점 결과물이 시각적으로 나타나서 하나하나 완성할 때마다 뿌듯함을 느끼고 있다.
