CSS 정리 6

Sizing image

.box {
	width: 100px
    hegiht: 200px
}

.img {
	width : 100%
    hegiht : 100%
}

.cover {
	object-fit : cover // ratic so that it neatly fills the box 
}

.contain {
	objet-fit : contain // small enough  to fit instid the box
}

.fill {
	obejct-fit : fill // fill the box, not maintain the aspect ratio.
}

//html code
<div class="wrapper">
  <img src="star.png" alt="star">
  <div></div>
  <div></div>
  <div></div>
</div>

 

Form elements

input[type="text"],
input[type="textarea"] {
	border : 2px solid #000;
    margin :0 0 1em 0;
    padding : 10px
    width : 100%
}

input[type="submit"]{
	border : 3px solid #333;
    background-color : #999
    border-radius: 5px
    padding: 10px 2em
    font-weight: bold;
    color: #fff
}

input[type:"submit"]:hover {
	background-color : #333
}

//html code//
<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

foms elements do not inherit font styling by default. Therefore if you want to be sure that your form fields use the font defined on the body, or on a parent element, you should add this rule to your css.

button,
input,
select,
textarea {
	font-family : inherit;
    font-size : 100%;
    box-sizing : border-box;
    padding : 0;
    margin : 0;
}

textarea {
	overflow : auto;
}

---

A typical HTML code

Example code

A summary of the UK's most famous punk bands

Band	Year formed	No. of Albums	Most famous song
Buzzcocks	1976	9	Ever fallen in love (with someone you shouldn't've)
The Clash	1976	6	London Calling
The Stranglers	1974	17	No More Heroes
Total albums		77

table{
	 table-layout: fixed;
     width : 100%;
     border-collapese :collapse;
     border : 3px solid purple;
}

thead th:nth-child(1) {
	width : 30%
}

thead th:nth-child(2) {
	width : 20%
}
thead th:nth-child(3) {
	width : 15%
}

thead th:nth-child(4) {
	width : 35%
}

zebra striping

:nth-child selector being used to select specific child elements.

We've alos added a repeating background title to all the body rows, which is just a bit of noise to provide some texture.

we've given the entire table a solid background color so that browsers that don't support thie :nth-child selector still have a backgorund for their body rows.

tbody tr:nth-child(odd){
	background-color : ##ff33cc
}

tbody tr:nth-child(even){
	background-color : #e495e4
}