##1.학습한 내용
어제 학습하였던 css 내용을 추가하여 가상 선택자라는 개념이 등장하였다.
가상선택자 : 사용자가 웹 요소를 클릭하거나 마우스 포인터로 올려놓는 등 특정 동작을 할때 스타일이 바뀌도록 만들고 싶다면 가상 선택자를 선택하여 스타일을 적용할수 잇다.
추가 학습으로 가상 클래스 선택자외에 연결 선택자등의 내용도 있는데, 주말에 추가 정리를 하려고 한다.
추가적으로 폴더지정 img, css, js 등의 폴더를 다로 지정하는 법과 더불어 dathome이라고 하는 호스팅 업체에서 무료 도메인을 생성하였다. (본격적으로 홈페이지를 만들기 위한 과정)
<!--
<a href="https://www.naver.com">
네이버
</a>
<input type="text">
-->
<!--
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
<li>메뉴 6</li>
</ul>
-->
<!--
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>회사소개</li>
<li>고객센터</li>
</ul>
-->
</body>
</html>
css부분
/*
a:link {
color: red;
}
a:active {
color: blue;
}
a:hover {
color: pink;
}
input:focus {
border: solid 20px red;
}
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(2n) {
color: gray;
}
/* 홀수2n+1,짝수2n도 지정할수 있다. */
/*
li:before {
content: "***";
}
li:after {
content: "아이즈원";
}
정확한 정체는 디자인일 뿐이다. 글자가 아님
<!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</p>
<div class="date-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</p>
<div class="date-wrap">
<span class="source">채원</span>
<span c1ass="date">1개월 전</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>
.living-lists {
list-style: none;
}
.living-lists .living-item a {
color: #000000;
text-decoration: none;
}
.living-lists .living-item .living-info .type {
color: #c08d31;
font-weight: 700;
font-size: 12px;
}
.living-lists .living-item .living-info .title{
font-size: 13px;
color: #000000;
}
.living-lists .living-item .living-info .paragraph{
font-size: 13px;
color: #404040;
line-height: 20px;
}
.living-lists .living-item .living-info .date-wrap .source,
.living-lists .living-item .living-info .date-wrap .date {
font-size: 12px;
color: #505050;
}
.living-lists .living-item .living-info .date-wrap .date{
color: grey;
}
.living-lists .living-item .living-info .date-wrap .date:before{
content: '-';
}
.living-lists .living-item:hover{
background-color: pink;
}
.living-lists .living-item a:hover .living-info .title{
text-decoration: underline;
}
2. 학습한 내용중 어려웠던 점 또는 해결못한 것들
차차 HTML과 css 문법에 익숙해지고 있는데, 문제점은 velog나 github에서 코드가 돌아가는 것을 따로 구현을 못하고 있다. 강의 2번 수강과 실습을 한다고 컴퓨터 sublime text 터미널 창에서는 모두 구현을 하고 있으나, 각각 요소들을 주석처리를 빼서 어떤식으로 동작하는지 직접 제시를 하는것이 필요할듯하다. github에 정리를 하고 여기에는 링크를 올리는 식으로 정리를 하여야할것 같다.
그리고 학습적으로 진행이 안되엇던 부분은 파일질라라고 하는 자유 소프트웨어 FTP 클라이언트를 통하여 호스팅 업체 서버에 접속을 하여 나만의 사이트를 구현을 하였는데, 첫번째 문제는 FTP 접속설정을 허용하여 수업도중에는 사이트 개설을 했으나, 후에 복습할때 접속을 하니 안되어 사이트에 1대1 문의를 남겼는데, IP 차단때문에 안될수 있다고 하여 직접 가르쳐주고 직원이 IP 차단을 풀었다고 하였으나, 서버에 접속을 할수가 없었다.
그리고 부모,자식 요소에 대한 것들을 한번더 유전이라는 개념을 가지고 확실히 숙지하여야 할것 같다.
3. 해결방법 작성
기타 검색을 통해 여러방법을 시도했으나 접속이 불가능하여 내일 오전 1대1 문의를 통해 다시 질의를 하려고 한다.
그리고 앞서 언급하였던 부분은 주말에 진도 안나갈때 필히 피드백을 하여야 할것이다. 지금 가지고 있는 책과 순서가 맞지않지만, 우선적으로는 수업진도와 순서를 맞추고 책으로는 부족한 내용을 보완하는 식으로 학습을 진행 하여야 할것같다.
4.학습 소감
실질적으로 홈페이지를 만들어 본 경험이 없었는데, 아직까지 제대로 된 동작을 하진 않지만, 텍스트와 이미지가 뜨는걸 보니 수많은 홈페이지들이 어떻게 구동되고 클라이언트 눈에 보여지는지 알아가고 있다는 생각에 비록, 눈과 몸은 피곤하지만 흥미롭다. 개인적인 학습목표가 설정되었는데, AI스쿨 일반과정의 최종 목표인 쇼핑몰 홈페이지 개설과는 별개로 좋아하는 걸그룹 팬페이지를 꼭! 만들고자 한다. 일과 놀이는 분명 성격이 다르고 전자는 많은 사람들에게 고통을 주지만, 반대로 돈이라는 것을 주기 때문에 자본주의 바다에 살고 있는 대다수의 우리들은 전부 강제로 참고 버티며 일을 하고 있다. 지금 진행하고 있는 이 과정들도 분명 '업'으로 삼게된다면 향후 많은 고통들이 수반될텐데, 업으로 삼기전에 배우는 과정만이라도 놀이로 승화시켜서 즐기고자 한다. 오늘은 한달과정이 끝나고 새로운 7월의 시작이며, 벌써 내일이면 웹 프로그래밍 과정 1주과정도 끝이 난다. 시간이 빠른만큼 부지런하게 움직여야겠다.
(p.s) FileZilla 접속이 안되어 아직은 엉망인 페이지이지만, 해결 즉시 주말동안 여태껏 배웠던 모든 요소들을 접목하여 최대한 예쁘게 꾸며볼 예정이다.
