210701

학습한 내용

*css
a:link {
color: red;
}

a:active {
color: blue;
} 마우스를 클릭했을 때 변하는 색

a:hover{
color: pink;
} 마우스를 글자 위에 올리면 변하는 색

li:nth-child(2n+1) {color: gray} 홀수번째의 글씨에 색을 칠하고 싶을때

li:before { content: "\\" } 글자 앞에
after { content: "---" } 글자 뒤에

\\나 ---는 글자가 아닌 이미지로 들어가는 개념.

css 와 img 파일을 project 파일 안에 생성해서 구분해주기
html와 css 를 연결할 때
<link rel="stylesheet" type="text/css" href="css/stlye.css">
폴더 지정하여 해당 css 파일 연결하기

background-image: url(../img/icon.png);
../ 해당 폴더에서 밖으로 나오는 방법

dothome.co.kr 가입 후

	<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="freind-intro">Minho kim</span>
			</div>
	</li>
</ul>

참고사이트 https://placeholder.com/

*css

.friends-lists { list-style: none; }

.friends-lists .friends-list a{
color: #000000;
text-decoration: none; }

border-radius: 50% <- 원형 테두리

Tip ★
1. / Custom / 아래의 속성은 디자인을 덮음.
2. 웹사이트의 검사- styles 부분에 css 적용된 거 체크박스 확인 가능함.
3. css 의 전체가 적용 안되었다면 link 태그 부분을 체크하기.

소감

아주 간단한 부분도 손에 익을 수 있도록 여러번 해주셔서 쉽게 배우고 있습니다. 아직 손에 익지 않지만 웹사이트를 볼 때 검사를 통해 어떤 코드를 썼는 지 궁금해 하는 단계가 된 것 같습니다.