1) 배운내용

가상선택자

리스트

HTML

	<ul>
    	<li>메뉴 1</li>
        <li>메뉴 2</li>
        <li>메뉴 3</li>
        <li>메뉴 4</li>
        <li>메뉴 5</li>
        <li>메뉴 6</li>
    </ul>

CSS

a:link {
	color: red;
}

a:active {
	color: blue;
}

a:hover {
	color: pink;
}

input: focus {
	border: solid 10px red;
}

--- 일정한 규칙

li:first-child {
	color: red;
}

li:last-child {
	color: blue;
}

li:nth-child(2n + 1) {
	color: gray;
}

before 와 after

HTML

	<ul>
    	<li>로그인</li>
        <li>회원가입</li>
        <li>회사소개</li>
        <li>고객센터</li>
    </ul>

CSS

li;before {
	content: "|";
}

li;after {
	content: "***";

• 개발자도구 element에 li

• 태그 글자와 태그 사이 공간 before

• 오로지 CSS에만 적용

• 닫힌태그와 글자사이

• 디자인일 뿐, 정보가 없는 것

• 빈 공간에 디자인 부분을 만들 수 있음

CSS

li::before {
    content: "--";
}
li::after {
    content: url("icon.png");
}

2) 어려운점

• 강의는 맥 환경, 실습환경은 윈도우 큰 차이는 없으나 폴더 경로 지정하고 찾을 때 약간 헷갈렸음

• HTML 구조와 더불어 CSS의 꾸미는 방법이 생각보다 많아서 아무것도 없는 상황에서 홀로 코딩을 할 수 있을지 의문이 듦

• 웹파일 연결 오류

3) 해결방법

• 맥을 빌려서 폴더 경로와 맥 환경을 비교해봄

• 의문을 가질 시간에 한 번 더 익숙해지도록 영상을 복습함

• 호스팅 부분에서 문제가 있음

4) 소감

• CSS 에 익숙해지려는 찰나 갑자기 기억해야할 것들이 늘어남

• 파일을 만들고 연결하는 경로 설정작업과 같이 기본적이지만 중요한 작업을 무시하면 나중에 더 힘들다는 것을 깨달았음

• 무료서비스는 문제가 있는 것인지 우연인지 모르겠지만 확실히 유료서비스가 안정적이라는 생각을 함