[CSS] elements

5519 단어 ElementsCSSCSS

1. style

<head>
  <style>
    .style_tag {
    margin: 10px 20px;
    padding: 10px 20px;
    display: block;
     ∙
     ∙
     ∙
  </style>
</head>

css 파일을 만들지 않고 html 파일안에 작성하려면 <head> 안에 <style>을 이용하여 작성

<div class="style_tag" style="margin: 0px;"> </div>

아니면, tag에 style="css_tag:값;"으로 작성

2. link

css파일을 사용하려면 html파일과 연결해야 되는데, 이때 link tag를 사용
<link rel="stylesheet" href="파일명.css">

3. width, height

width(너비) 와 height(높이)는 요소의 크기를 결정하는 태그
.style_tag {
width: 300px;
height: 40%; }
이렇게 사용가능

4. margin, padding

margin 은 요소가 포함되지 않는 바깥쪽 여백, padding 은 요소가 포함되어 있는 바깥쪽 여백

값을 10px; 하나만 입력하면 상하좌우 10px;
값을 10px 15px; 두개 입력하면 상하 10px, 좌우 15px;
값을 10px 15px 20px 25px; 네개 입력하면 상 10px, 우 15px, 하 20px, 좌 25px;

margin과 padding 동일

5. text-align

text-align은 text 를 정렬할 때 사용
left, right, center, justify 등이 있다

text-align: left; 왼쪽 정렬
text-align: right; 오른쪽 정렬
text-align: center; 중앙 정렬
text-align: justify; 좌우 거리 일정하게 정렬

6. font

크기 조절은 font-size: 20px;

글꼴 수정은 
link tag 활용해서 폰트 url을 연결 시킨 후,
font-family: '폰트명'

7. background-color

바깥쪽 배경 색상 지정 background-color: grey;

8. text-decoration, list-style

text-decoration: none; 글자에 대한 꾸밈을 없애거나 지정 
list-style:none; 리스트에 대한 꾸밈을 없애거나 지정

9. position

position: absolute; box의 배치 위치를 지정
static 은 기본값
relative 는 현재 위치한 곳에서 떨어뜨릴 때 사용
absolute 는 현재 위치한 컨테이너의 첫번째 요소 위치부터 떨어뜨릴 때 사용
fixed 는 페이지의 위치를 지정 할 때 사용

10. display

display: block; 요소를 배치할 때 레이아웃을 지정
block 한줄을 다 차지하는 레이아웃
inline 속한 박스의 크기 만큼 자리를 차지하는 레이아웃
flex 요소를 유연하게 배치 가능 

11. flexbox

display: flex;로 지정하고, 설정하면 원하는대로 배치 가능
justify-content 현재 설정된 방향에서 요소들 배치 (가운데 정렬, 일정한 간격으로 정렬등)
align-items 현재 설정된 방향 반대방향에서 요소들 배치(요소의 현재 위치에서 배치 조정)
align-content 현재 설정된 방향 반대방향에서 box안에 요소들 배치(처음, 중간, 양쪽 끝 등)
flex-direction 요소들의 배치를 가로, 세로를 변경 할 수 있음
flex-wrap 요소 배치보다 화면이 작아졌을때 다음 줄로 넘길 수 있음
flex-flow flex-direction flex-wrap 순으로 하나의 명령으로 설정 가능

12. animation, @keyframes

animation:name 2s infinite; 요소에 움직이는 효과를 주고 싶을 때 사용
이름, 움직이는 속도, 한번 움직일지 영원히 움직일지 등을 지정

@keyframes name {
0% {width:0%; }
100% {width:50%; }
} 
keyframes은 처음에는 어떤 상태였던게, 나중에 어떻게 될것이다 라고 지정 가능 
form to 를 사용해서도 지정 가능

13. @media

@media (max-width: 1024px;) {
조건들 }
미디어 쿼리는 화면의 크기에 따라서 배치를 바꾸거나, 크기를 바꾸거나, display를 none으로 하는 등의 설정을 할 수 있다

좋은 웹페이지 즐겨찾기