학습 내용
CSS 가상선택자
1
-
active : 마우스를 클릭한 채 누르고 있을 때 색깔이 변하게 하는 것
a:link {color: red;} - 기본 색깔 설정
a:active {color: blue;} - 마우스를 누르고 있으면 나오는 색 -
hover : 마우스를 갖다대면 색깔이 변하는 것
-
focus : 클릭을 했을 때 설정 값이 적용
html : - 입력창
CSS : input:focus {border: solid 10px red;} - 입력창을 클릭하면 10픽셀의 빨간 테두리가 나타남 -
first-child,last-child : 같은 항목이 여러개일 때 각각 개별적으로 지정해준다. (first는 맨 첫번째, last는 마지막)
-nth-child(n) : n번째 항목을 지정하여 디자인
-nth-child(2n+1) : 홀수번째ex) li:nth-child(2n+1) {color: yellow;}
Before/after 가상선택자
-
before : 열린 태그와 글자 사이에 디자인을 삽입 가능
-
after : 닫힌 태그와 글자 사이에 디자인을 삽입
CSS:li:before {content: "|";}
li:after {content: "---";}
표기 :
프로젝트 폴더 구성
보통 이미지는 이미지 폴더, CSS는 CSS 폴더에 보관하기 때문에 HTML 파일에서 각각 폴더에 연결해줘야한다.
-
CSS 적용 : html 파일을 기준으로 폴더명/파일명으로 입력
link rel="stylesheet" type="text/css" href="css/style.css" -
CSS에 image 삽입 : CSS 파일을 기준으로 폴더를 나갔다 이미지 파일이 있는 폴더로 가야함 - 폴더를 나가는 명령어 : ../
background-image: url(../img/icon.png)
- 현재 파일이 있는 위치를 기준으로 찾아가야함
dothome에 업로드
- dothome에서 도메인 만들기
- filezilla에서 도메인으로 내가 한 자료 업로드하기
CSS 실습
카카오톡 친구목록
- ul, li, a, div span 등을 사용하여 프로필 사진, 이름, 상태메세지 제작
- div 안에 이름과 상메 묶기
- css 파일과 연결
- 각 항목에 Class 부여
- CSS에서 글자색 바꾸기/밑줄 없애기
- img를 class를 통해 테두리와 라운드 효과 적용
- 이름과 상메의 폰트와 글자색, 글자크기 설정
- 홈페이지의 검사를 통해 내 실수나 누락을 확인할 수 있고 때로는 파일 연동 부분에서 문제가 생길 수 있다.
네이버 리빙 화면 설계
학습 중 어려웠던 점
이번 시간은 반복하는 파트가 많아서 이해하기 쉬운 느낌이었다. 그러나 아직 웹으로 나의 결과물을 보내는 시스템의 이해가 어려웠다.
해결방법
앞으로 관련 수업이 있을 것 같은데 그때 다시 집중해서 듣기
학습소감
css를 적용하며 점점 태가 나오는 것을 보니 더욱 흥미가 생긴다.
