Day50 CSS

CSS(Cascading Style Sheets)

html은 데이터를 구분하기 위해 사용 했다면 css는 html을 꾸며주는 역할.

●Style tag

style tag는 head tag 안에 넣는다.
width,height,background-clolor,display,font-size,color

●선택자

선택자.

엘리먼트 선택.

#header에서 #뿐만 아니라 #header가 선택자.

Class

하나의 클래스로 여러 태그에 적용
class선택자는 .class로 연결
.header 모든 엘리먼트 중에 클래스가 header를 선택.

클래스와 매우 유사하지만 하나의 태그에만 적용하는 것을 권유
id선택자는 #id로 연결. .# 등을 선택자라고 한다.

id>class

class와 id는 역할은 없지만 이름을 부여. 어느 엘리먼트에든 들어갈 수 있는 속성이다.

전체선택자

*{}
다른 선택자 스타일보다 우선순위가 낮다

태그 선택자

태그이름{}
특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

선택자{속성명:속성값;}

●디스플레이속성

wrap은 div엘리먼트, header는 span엘리먼트로 설정한 뒤

#wrap{
 width: 400px;
 height: 400px;
 background: blue;
 }

#header{
 background:red;
 }

display:inline은 block속성을 inline속성으로 변경

inline으로 바뀌었기 때문에 넓이와 높이는 적용되지 않는다.

#wrap{
 width:400px;
 height:400px;
 display:inline;
 background:blue
 }

display:block은 inline속성을 block속성으로 변경

block속성으로 변경되기에 넓이와 높이를 입력해줘야한다.

#header{
 width:200px;
 height:200px;
 background:red
 }

display:inline-block은 block 속성을 inline속성으로 변경이다. inline과 차이점은 inline에서 불가능한 width,height,margin,padding을 줄 수 있다.

#wrap{
	widht:400px;
    height:400px;
    display:inline-block;
    background:blue
    }

#header{
	backgroundL:red
    }

none 불필요한 요소를 감춰서 완전히 사용자에게 보일 필요가 없을 때 사용
block 한 행에 하나의 요소가 위치하며 기본 속성으로는 가로 영역을 다 차지한다.width, height, padding, margin 속성을 사용해 크기와 여백을 설정할 수 있습니다.
inline HTML 요소의 순서에 따라 왼쪽에서 오른쪽으로 채워지면서 요소가 배치. 요소 안의 콘텐츠 내용만큼 너비 결정.th, height, padding, margin 속성 값을모두 무시
inline-block inline 속성과 block 속성을 모두 가집니다.

요소에 width, height, padding, margin 속성을 사용해 크기와 여백을 설정할 수 있지만, inline 속성에 따라 왼쪽에서부터 오른쪽으로 요소들이 채워지면서 배치됩니다. float:left or float:right를 통해 속성을 설정

CSS를 적용하는 3가지 방법

1.head안에 style엘리먼트

<html>
     <style>
            div{ background-color: blue;}
     </style>
    </head>
    <body>
        <div>5</div>

	</body>
</html>

2.body에 inlline style을 통해사용.

<html>
	<head>
	</head>
	<body>
		<div style="background:blue">1</div>
    </body>
</html>

3.외부파일 이용 link엘리먼트 제일 많이 사용

주소에는 .을 사용하여 내 기준부터 작성한다. 상대경로:어떤 파일 기준으로-절대경로:처음부터 끝까지 다 적는.

-inline 스타일이 제일 먼저 실행된다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public/css/index.css" type="text/css">
</head>
<body>
    <div id="header">5</div>

</body>
</html>

stylesheet는 css파일을 가져온다는 내용.

type:tetx/css는 네트워크 내용

내부스타일: head 태그 안에 style 태그를 적용하여 사용. 문서에 있는 모든 태그의 스타일을 한 번에 관리.
외부스타일:css파일과 html파일을 생성한다. css파일을 따로 관리하여 까끔하게 관리.link사용
인라인스타일:body 안 쪽의 태그들 안에 바로 적용. 태그들 각기 스타일을 적용할 때 사용.

●pading-위치를 내부적으로 띄울 때

border 안쪽에서 떨어진.
20px 0 0 0. 12시방향 3시방향 6시방향 9시방향을 기준으로 맞춘다.
그대로 늘리면 전체적으로 늘어나기에

140px 0 0 0을 맞춰서 조정하려면 100px 20px 20px 0으로 맞춘다.

이를 보완하기 위해 box-sizing:border-box을 사용한다.

Border

Padding

●margin -위치를 외부적으로 띄울 때

border 기준으로 꼭지점에서 떨어진.

Margin

margin:20px 0 0 0이면 12시 방향으로 20px 떨어지지만

margin:20px 은 모든 방향으로 20px 떨어진다.

padding은 큰 틀을 만들 때 사용하고
margin은 작은 것을 만들 때 사용한다.
h1에는 기본적으로 margin이 들어가 있다.
ul,li에는 기본적으로 padding이 들어가 있다.
img는 닫는 태그가 필요 없다.<img src="" />
#header>h1은 헤더 엘리먼트 안에 h1 안에서만 변화를 주겠다.
a,b는 a와b 둘 다 실행
list-style은 리스트 모양

●속성float(속성값은 left와 right)

1.강제로 이동시킨다.

2.inline-block 속성이 들어간다.

3.하위엘리먼트를 강제로 끌어올린다. 블럭이던지 라인이던지

기본값

#header{
   border: 1px solid red;
   margin: 0;
}

#swap{
    border: 1px solid blue;
    margin: 0;
}

#header{
   border: 1px solid red;
   margin: 0;
   float: left;
}

#swap{
    border: 1px solid blue;
    margin: 0;

}

#header{
   border: 1px solid red;
   margin: 0;
   float: left;
}

#swap{
    border: 1px solid blue;
    margin: 0;
    float: left;
}

이미지 파일에서 float:left 활용

블럭속성에서 float:left를 적용했으면 바로 다음에서 float:right를 적용해야한다.
가운데 정렬은 넓이가 꼭 지정되있어야한다. margin: 0 auto를 넣으면 가운데 정렬

0은 위 아래는 아무것도 하지 않고 auto는 브라우저 기준으로 양옆 자동정렬

가장 중요한 점.

1)머리 속에 코드 결과를 그려보고 결과물 확인하기.

2)div style = "background:red" 같은 코드를 볼 때 style=""은 div안 속성, div는 html 속성, "background:red"는 css문법

=은 html 구분값, :은 css 구분값 이 처럼 하나 하나 의미를 생각하면서 공부 할 것.

'TIL' 카테고리의 다른 글

Day52(PNG vs SVG,<a>태그 밑줄없애기, 색상 변경하기,CSS Unit,translate3d() 메소드) (0)	2023.03.28
Day51(HTML,CSS) (0)	2023.03.27
Day49(HTML) (0)	2023.03.26
Day48(프로젝트 발표) (0)	2023.03.24
Day47(프로젝트 마지막 날) (1)	2023.03.24

what is your dream?

Day50 CSS

'TIL' 카테고리의 다른 글

티스토리툴바

Day50 CSS

'TIL' 카테고리의 다른 글

'TIL' Related Articles

티스토리툴바