엄지월드

CSS(Cascading Style Sheets) 본문

Front

CSS(Cascading Style Sheets)

킨글 2018. 4. 7. 13:26

가상 클래스 선택자


<style>

a:link{

color:black;

}

a:visited{ // 방문한곳이다. 보안 때문에일부 속성만 사용가능

color:red;

}

a:hover{ // 호버

color:yellow;

}

    a:active{

color:grren;

     }

a:focus{ // 가장 뒤에다가 놓는것이 좋다

color:white;

}

input:focus{ // a 태그 뿐만 아니라 input에서도 사용 가능하다

background-clor:black;

color:white;

}

</style>


상속

<style>

html{color:red;}

body{border:1px solid red;}

</style>


케스케이딩 이란? (적용 우선순위)


- 웹브라우저 < 사용자 < 저자 

-

<style>

li{color:red;}

#idsel{color:blue;}

.classsel{clor:green;}

</style>

<body>

<ul>

<li id="idsel" class="classel" style="color:powderblue">css</li>

</ul>

</body>

=> style selector > id selector > class selector > tag selector 순으로 적용된다.

이유는 점점 정교해지는 순서이다. 만약에 우선순위를 급상승 시키고 싶으면

li{color:red; !important;} 를 해주면 된다.



크기 : font-size

px vs em vs rem

em, rem : 사용자 설정에 따라서 크기가 달라진다. 그래서 오늘날에는 rem을 써야 좋다.


<style>

#px{font-size:16px;}

#rem{font-size:1rem;}

</style>

<body>

<div id="px">PX</div>

<div id="rem">REM</div>

</body>

=> 줌하는거 말고 아예 폰트 사이즈를 변경하면 같이 사이즈가 바뀜



텍스트 정렬

<style>

p{

text-align : justify;

border:1px solid gray;

}

</style>


font-family, font-weight, line-height

<style>

p{

font-size:5rem;

font-family:arial, verdana, "Helvetica Neue"; ==> 우선순위에 따라서 선호하는 걸 먼저 보여준다


font-family: arial, verdana, "Helvetica Neue", serif;  // 잘씀

font-family: arial, verdana, "Helvetica Neue", sans-serif; 

font-family: arial, verdana, "Helvetica Neue", monospace;  // 잘 안씀

}

</style>



font-weight - 가중치, 두꼐

p{

font-weight : bold;

}


line-height - 자간(글자 세로 폭)

p{

line-height : 1.2; 

}

h1{

line-height : 120px; ==> 픽셀 같이 고정된 길이는 피하시고 숫자 1.2와 같은 상대적인 숫자를 사용하시길 바랍니다.

}


font

#type1{

font : bold 5rem/2 arial, verdana, "Helvetica Neue", serif;

}

이거와

#type2{

font-size : 5rem;

font-family : arial, verdana, "Helvetica Neue", serif;

font-weight : bold;

line-height : 2;

}

이렇게 type1과 type2는 같다.


웹 폰트 - 서버에서 폰트를 사용자의 브라우저가 다운로드해서 그 폰트를 사용할 수 있도록 하는 기법(없어도 다운받아서 쓸 수 있도록)

- 용량의 비용만큼 돈을 지불해야 함

- fonts.google.com(구글이 폰트를 제공함) -> 선택 -> embed -> link 복사 -> head 태그 밑에 폰트 주소 삽입

<head>

<link href="https://fonts.googleapis.com/css?family=Gugi|Roboto" rel="stylesheet">

<style>

#font1{

font-family : 'Open Sans Condensed', sans-serif;

}

</head>

<body>

<p id="font1">

Lorem

</p>


inline vs block level

inline - 어울림 ( inline => width와 height이 무시된다 )

block level - 한 줄을 차지

<style>

h1, a{

border : 1px solid red;

h1{ display : inline; }

a{ display : block; }

}

</style>


박스모델


<style>

p{

border-width : 100px;

border-style : solid;

border-color: red;

==> border: 10 px solid red;

}

</style>

<p>

Lorem 

</p>

<style>

p{

border : 10px solid red;

padding : 20px;

margin : 40px;

width : 120px;

}

</style>

</pre>




padding, margin





flex - 레이아웃 조절

참조 : opentutorials/module/2367/13526

<style>

.container{

background-color : powderblue;

height:200px;

display:flex;

flex-direction:row;  /* 혹은 column */

}

.item{

background-color: tomato;

color:white;

border:1px solid white; /* 구분하기 위해 solid white */

}

.item:nth-child(2){

flex-basis : 300px; /* 해당 항목의 크기 */

flex-shrink : 2;  /* 줄어들지 않는것. 1이상로 주면 다시 고통분담 */

}

</style>

 <body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

</div>

 </body>


holy grail layout - 창의 크기에 따라 크기가 줄어드는 것

<div class="container">

<header>

<h1>생활코딩</h1>

</header>

<section class="content">

<nav>

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

</nav>

<main>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the                              industry's standard dummy text ever since the 1500s, when an unknown printer

</main>

<aside>

AD

</aside>

</section>

<footer>

<a href="https://opentutorials.org/course/1">홈페이지</a>

</footer>

</div>


flex를 이용한 중앙 정렬 

<style>

body{

display: flex;

align-items : center;

justify-content : center;

}

.container{

display : flex; /* 이것을 해줘야 한다 */

flex-direction: column; 

}

header{

border-bottom : 1px solid gray;

padding-left : 20px;

}

footer{

border-top : 1px solid gray;

padding : 20px;

text-align : center;

}

.content{

display : flex;

}

.content nav{

border-right: 1px solid gray;

}

.content aside{

border-left: 1px solid gray;

}

nav, aside{

flex-basis : 150px;

flex-shrink : 0; /* 줄어들지 않기 위해 0으로 설정(크기 조정 시 content만 크기 줄어들도록) */ 

}

main{

padding 10px;

}

<style>

<div class="container">

<header>

<h1>생활코딩</h1>

</header>

<section class="content">

<nav>

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

</nav>

<main>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the                               industry's standard dummy text ever since the 1500s, when an unknown printer

</main>

<aside>AD

</aside>

</section>

<footer>

<a href="https://opentutorials.org/course/1">홈페이지</a>

</footer>

</div>


flex 요약 방법

.item{ flex: flex-grow [flex-shrink] [flex-basis]; }  /* 1은 grow, 2는 shrink, 3은 basis가 된다 */



화면은 우리가 나오고 싶은대로 하고 싶으면 order를 씁니다.

nav{

order : 0;

}

main{

order : 1;

}

aside{

order : 2;

}


media쿼리

<meta name="viewport" content="width=device-width, initial-scale=1.0"> // 모바일에서 사용하기 위해 적어줘야 한다. 

그렇지 않으면 모바일에서 media쿼리가 작동하지 않음

@media (max-width:500px){

body{

background-color:red;

}

}

@media (min-width:601px){

body{

background-color:blue;

}

}


media쿼리 실습

 <style>

.container{

display : flex;

flex-direction:column;

}

header{

border-bottom:1px solid gray;

padding-left:20px;

}

footer{

border-top:1px solid gray;

padding:20px;

text-align: center;

}

.content{

display:flex;

}

.content nav{

border-right:1px solid gray;

}

.content aside{

border-left:1px solid gray;

}

@media(max-width:500px){

.content{

flex-direction:column;

}

.content nav, .content aside{

border:none;

flex-basis:auto;

}

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

display:none;

}

}

nav, aside{

flex-basis:150px;

flex-shrink:0;

}

main{

padding:10px;

}

  </style>

  <title>Document</title>

 </head>

 <body>

<div class="container">

<header>

<h1>생활코딩</h1>

</header>

<section class="content">

<nav>

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

</nav>

<main>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus 


</main>

<aside>

AD

</aside>

</section>

<footer>

<a href="https://opentutorials.org/course/1">홈페이지</a>

</footer>

</div>

 </body>


float - holy grail 레이아웃

<style>
*{
box-sizing:border-box; /* 모든 박스 사이즈를 자동으로 잡아준다 */
}
.container{
width:600px;
margin:auto;
border: 1px solid gray;
}
header{
border-bottom: 1px solid gray;
}
nav, article, aside, footer{
}
nav{
float:left;
border-right:1px solid gray;
padding-right:20px;
}
article{
float:left;
width:300px;
border-left:1px solid gray;
margin-left:-1px;
border-right:1px solid gray;
padding-left:20px;
padding-right:20px;
}
aside{
float:left;
width:120px;
border-left:1px solid gray;
margin-left:-1px;
padding-left:20px;
}
footer{
clear:both;
text-align:center;
padding:20px;
border-top:1px solid gray;
border-bottom:1px solid gray;
}
</style>
 </head>
 <body>
 <div class="container">
 <header>
  <h1>
CSS
  </h1>
 </header>

<nav>
  <ul>
<li>position</li>
<li>float</li>
<li>flex</li>
  </ul>
</nav>
<article>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>

</div>

다단 나누기 

<style>

.column{

column-count:4; /* 컬럼의 갯수를 중요시 여긴다면 쓴다 */

text-align:justify; 

column-width:200px; /* 컬럼의 width 를 중요시 여긴다면 쓴다.*/

column-gap: 100px;  /* 컬럼의 갭을 설정한다 */

column-rule-style: dashed; /* 컬럼 선의 종류를 결정한다 */

column-rule-width: 1px; /* 컬럼 선의 폭 */

column-rule-color: red; /* 컬럼 선의 색 */

}

h1{

column-span:all; /* 위치를 상관하지 않고 column에서 위치한다 */

}

</style>

 </head>

 <body>

 <div class="column">

 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


<h1>위치를 상관하지 않고 column에서 위치한다</h1>


Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.


The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.


Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


</div>


배경(background)

  <style>

  div{

    border : 5px solid gray;

    background-color:tomato;

    background-image: url('gogh.png');

    /* background-repeat: no-repeat; */

    background-repeat: repeat-y;

    /* background-attachment:repeat; */

    background-attachment:fixed;

    background-size:500px 100px;

    background-size:cover; /* 사진 크기가 커지면 짤리는 부분이 생길 수 있다 */

    background-size:contain; /* 화면에 맞게 사진 크기를 조절해준다 */

    background-position : right bottom;

    background : tomato url('run.png') no-repeat fixed center;  /* 위에 내용 축약형 */

  }

  </style>

  <body>

    <div class="">

      Hello world

    </div>


필터(filter)

  <style>

    img{

      transition : all 1s; /*모든 효과에 대해서 1초에 걸쳐 장면전환 */

    }

    img:hover{

      -webkit-filter: grayscale(100%) blur(3px);

      -o-filter: grayscale(100%) blur(3px);

      filter: grayscale(100%) blur(3px);

    }

    h1{

      -webkit-filter: blur(3px);

      -o-filter: blur(31px);

      filter: blur(3px);

    }

    /* codepen.io 에 들어가서  filter를 검색한 뒤에 필요한 것을 찾아보세요 */

  </style>

  <body>

    <h1>Mountain</h1>

    <img src="sample.mt.jpg" alt="">

  </body>

'Front' 카테고리의 다른 글

위로 / 아래로 가기 버튼 만들기  (0) 2018.07.27
HTML5 Canvas Tutorial for Beginners - Ep. 3  (0) 2018.06.06
HTML5 새로운 속성, 입력 값 체크  (0) 2018.03.17
웹 페이지 모바일 폭 맞추기  (0) 2018.03.17
검색엔진 최적화  (0) 2018.03.16
'Front' Related Articles more
Comments