✔ TODAY

오늘은 css의 기초를 완강하였다. 카카오친구리스트와 네이버메인페이지 실습을 하였고, 복습겸으로 취향에 맞게 커스텀했다.😎

---

✔ 학습한 내용

1.가상선택자

선택한 요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 것.

1) 행동관련

a:link{ color: red;}
/*방문한 적이 없는 링크에 대해서 디자인을 적용할때 사용*/

a:active{color: blue;}
/*마우스를 클릭했을때의 상태를 정의*/

a:hover{ color: pink;}
/* 마우스 올렸을때 */

input:focus{border: solid red 10;}
/* input 입력창의 {선 굵기}*/

2) 규칙관련

li:first-child{color: red;}
/*리스트 첫번째 줄 색상을 */
li:last-child{color: blue;}
/*리스트 마지막 줄 색상을*/
li:nth-child(2){color: gray;}
/*리스트 2번째 줄 색상을*/
li:nth-child(2n+1){color: pink;}
/*리스트 홀수 줄 색상을*/
li:nth-child(2n){color: green}
/*리스트 짝수 줄 색상을*/

3)before & after

li:before{ content: "+++";}
/*마크와 테그사이(비포) 콘텐츠속성사용해서*/
li:after{content: "---"}
/*글자와 닫힌테그사이에 존재 글자를 중심으로 앞뒤 강재적으로 삽입을 시킬수 있음/*/

프로젝트폴더 생성

• 프로젝트폴더설정
  폴더경로주의하기 - 파일위치에따라 입력값이 달라짐.

• 한프로젝트에 묶고 안에 파일형태별로 분류하기

• 닷홈 > 웹호스트> 무료호스트
  ftp-결과물을 서버에 올릴때 올리는 터널역활을 하는 것

• 파일질라-무료 FTP 클라이언트

  💥 생성한 웹호스트와 파일질라가 연결이 안되서... 구글링 방법(방화벽, 연결시간, 관리자설정 등) 다해도 해결이 되었음.
  같이 수업듣는 분들의 조언으로 닷홈에 1:1문의를 했는데 원인이
  = 1) 웹호스팅설정에 FTP연결허용을 설정하지 않았음.
  2) 수 많은 시도로(...) IP가 차단되서ㅜㅜ 다행히 회사측에서 바로 풀어주셨다.

css실습

css 실습은 수업용실습/ 복습용실습 2가지를 작성했다. 결과물은 캡쳐로, 코드는 깃허브링크를 올린다.

1) 카카오친구 리스트

카카오친구리스트html

카카오친구리스트css

카카오친구커스텀html
카카오친구커스텀css

body에 아래와 같은 css 속성을 줘서 배경화면을 꾸몄다.

background-image: url(#); 
background-repeat: no-repeat; 
background-position: center; 

html에서 따로 색상을 부여하기보단
'캐스케이팅'을 복습하기 위해서
class에서 name에 색상> id로 각각 색상을 줌*

.friend_lists .friend_list a .friend_infor .friend_name{
	fount-size: 17px;
	color: #000000;

#sakuname{color: #f3c5cf;}
#jwname{color: #d9598c;}
#cyname{color: #A7E0E1;}

실제 데이터처럼보이기 위해서 float 속성을 사용.

.friend_lists .friend_list a .friend_thumbail {
	border: solid 2px gray;
	border-radius: 20px;
	float: left;

수업외 복습으로 새롭게 알게된 속성
float 그림과 글이 같이 있을 경우, 그림의 위치를 설정하는것(?)
네이버 복습 중 알게된 속성인데, 아직 구글링만으로는 자세한 개념이해가 부족해 추가학습필요!

2) 네이버 메인

네이버수업실습html
네이버수업실습.css

💥주의
css속송값을 작성할 때, 띄어쓰기를 잘 하자.

.living-lists.living-item a {
	color: #000000;
	text-decoration: none;

제대로 css가 적용이 안되서...절망했었으나,
'.'하고 띄여쓰기를 제대로 안했던 거였음.

네이버복습커스텀.html
네이버복습커스텀.css

수업내용을 토대로 최대한 네이버메인과 동일하게 만들기위해 노력했다.

• 네이버메인페이지 실제코드를 보며 작성했다.
• li 사이에 br를 삽입한건 보기 좋게하기위해서..

위의 수업실습과 달리 썸네일을 왼쪽으로 둘 수 있는 방법을 찾다가 알게된 속성 float > 카카오 리스트 복습때도 적용.

---

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• html에 css이 적용이 잘 안되었던 대부분의 이유는 오타, 띄여쓰기 등 아직 문법을 보는 게 익숙하지 않아 시간이 많이 소요된다.
• 프로필사진과 썸네일을 원하는 위치와 글자와의 간격을 원하는 곳에 설정하지 못 했다.
• 가상선택자 효과를 원하는데로 제대로 보지 못 했다.
  -원하는 구성과 이미지는 많은데, 능력부족이... 힘들었다.

---

✔ 해결방법 작성

• 시간을 들이며, 하나하나 보니 문제점을 확인 할 수 있었다. 코딩리뷰가 필요한 이유...

• 이미지를 최대한 원하는 곳에 두기 위해서 해당사이트의 실제css확인했다. 그래서 알맞은 속성하나를 찾았다.

• 가상선택자 효과문제는 개발일지쓰기 직전에 알았다. 선택자와 가상선택자를 잘 구분하지 못 했던 것...(구매한 교재를 통해 개념을 좀 더 구조화 할 것 !)

  ---

✔ 학습 소감

실습하다가 덕심이 일어나서... 덕분에 알찬 복습을 할 수 있었다. 역시 덕질은 좋다. 앞으로도 덕질을 활용하여 연습을 해야겠다. (덕분에 오늘 하루종일..실습만...)
수업에서 배운 사이트코드보는 법을 통해 사이트네 원하는 색상을 뽑을 수 있게되어 , 실 생활에 유용할 듯!