웹 프로그래밍 #4 [21.7.1]

Jeongmin Heo·2021년 7월 1일

웹 프로그래밍

목록 보기

4/50

💻 학습 내용

💡 css 가상 선택자

- 사용자들이 선택한 요소에 어떠한 행동과 규칙을 반영해서 디자인이 적용되는 방식

종류

link : 방문한 적이 없는 링크에 대해서 디자인을 적용
a:link{
	color: red;
}
active: 링크를 눌러져서 방문이 되어졌을 때 디자인을 적용
a:active {
	color: blue;
}
hover : 마우스를 올렸을 때 디자인을 적용
a:hover{
	color: pink;
}
last-child : 마지막 순서 태그 디자인 변경
li:last-child{
	color: blue;
}
nth-child(n): 소괄호 n번째에 디자인 적용
li:nth-child(2){
	color: gray;
}
nth-child(2n+1): 소괄호 홀(2n+1)짝수(2n)에 css를 적용
li:nth-child(2n+1) {
	color: gray;
}
boefore: 글자와 태그 사이의 공간
li:before{
	content: "|";
}
after :닫힌 태그와 글자 사이에
정보가 없는 디자인이다
li:after{
	content: "---";
}

💡 css 사용해서 디자인 해보기

<head> 부분에서 <link>태그로 css와 연결
경로 작성할 때 폴더명/파일이름.확장자
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

💛 카카오톡 친구 목록 실습

<body> 부분에서 <ul><li><a><img><div>태그에 고유의 값 속성을 지정하는 class=" " 작성함

<body>
  <ul class ="friends-lists">
   <li class="friends-list">
	<a href="#">
	  <img class ="friend-thumbnail"
           src="https://via.placeholder.com/50">
		<div class ="friend-info">
		  <h3 class="friend-name">김민호</h3>
		  <span class="friend-intro">Minho Kim</span>
		</div>
	</a>
   </li>
  </ul>
</body>

css에서 class명을 입력하여 디자인 적용하기

class 속성을 호출 하려면 .class이름 작성

부모 태그에 작성된 class 부터 자식 태그 class 를 작성하면
세부적으로 디자인 적용이 가능함

태그의 고유 디자인 값을 변경도 할 수 있음
(ex, a태그 고유 디자인 값인 underline을 삭제 가능)
  .friends-lists .friends-list a {
	color: #000000;
	text-decoration: none;
}

카카오톡 친구목록 실습