코딩 배우기 | Learning Coding | Sorting Your Friends

코딩 배우기 | Learning Coding | Sorting Your Friends

CSS CLASSES AND IDS _ Sorting Your Friends
You've probably got a lot of friends on social networking sites, but they're not all your friends: you've probably got acquaintances, family members, coworkers, classmates, and so on. Let's sort them with CSS!


 Sorting Your Friends | It's a Class Act | Codecademy 
1/8 What you'll be building
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div class="friend" id="best_friend"><p>Arthur</p></div>
<div class="friend"><p>Batmanuel</p></div>
<div class="friend"><p>Captain Liberty</p></div>
<div class="friend"><p>The City</p></div>
<div class="friend"><p>Justice</p></div>
<div class="family"><p>Mom</p></div>
<div class="family"><p>Dad</p></div>
<div class="family"><p>Bro</p></div>
<div class="family"><p>Sis</p></div>
<div class="family"><p>Rex</p></div>
<div class="enemy"><p>Baron Violent</p></div>
<div class="enemy"><p>The Breadmaster</p></div>
<div class="enemy"><p>The Deadly Nose</p></div>
<div class="enemy"><p>Dinosaur Neil</p></div>
<div class="enemy" id="archnemesis"><p>Chairface</p></div>
</body>
</html>
File2 _ stylesheet.css
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}

 div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}

 .friend {
border: 2px dashed green;
}

 .family {
border: 2px dashed blue;
}

 .enemy {
border: 2px dashed red;
}

 #best_friend {
border: 4px solid #00C957;
}

 #archnemesis {
border: 4px solid #cc0000;
}

2/8 Divide and conquer
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;

}

3/8 Style those divs!
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}

4/8 Classify
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="family"></div>
<div class="enemy"></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}

5/8 Use classes to use class
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="family"></div>
<div class="enemy"></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000ff;
}
.enemy {
    border: 2px dashed #ff0000;
}

6/8 No ID, no entry
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend" id="best_friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="enemy"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000ff;
}
.enemy {
    border: 2px dashed #ff0000;
}

7/8 Identify your IDs
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend" id="best_friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="enemy"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000ff;
}
.enemy {
    border: 2px dashed #ff0000;
}
#best_friend {
    border: 4px solid #00c957;
}
#archnemesis {
    border: 4px solid #cc0000;
}

8/8 You've done it!
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend" id="best_friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="enemy"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
File2 _ stylesheet.css
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000ff;
}
.enemy {
    border: 2px dashed #ff0000;
}
#best_friend {
    border: 4px solid #00c957;
}
#archnemesis {
    border: 4px solid #cc0000;
}