CSS 로 페이지 꾸미기
CSS
HTML로 문서 만들고 나서 이쁘게 꾸미는 마법의 조미료 같은거라고 생각하면 댐
CSS란?
CSS만 써도 꽤 괜찮은 결과물이 나옴
CSS 기본문법
선택자 {
속성이름 : 속성값;
}선택자 : 내가 꾸미고 싶은 대상
{ : 블록의 시작
} : 블록의 끝
속성이름 : 선택한 대상의 꾸미고 싶은 부분
속성 값 : 선택한 부분을 어떻게 바꾸고 싶은지
실생활에 빗댄 예시
이게 쉅시간에 너무 찰떡이라 인상이 엄청 깊었음,,!
ㅇㅇ씨는 CSS성형외과에 가서 앞트임 5px(뒷트임은 생략)
치아미백 서비스까지 받았다.
이때 선택자와 속성이름, 속성값은 무엇인가?
.ㅇㅇ {
앞트임 : 5px;
치아미백 : 'white';
}선택자 : ㅇㅇ( 성형하는 사람이름인데 프라이버시라 가림)
속성이름 : 앞트임, 뒷트임
속성값 : 5px , 'white'
실제 CSS 사용 예시
div {
width : 100px;
color : #FFFFFF;
background-color : red;
}선택자 : div
속성이름 : width, color, background-color
속성값 : 100px, #FFFFFF, red
색을 지정하는건 그 색을 지칭하는 단어가 있으면 그걸 써도 되고, 16진수 색상코드를 써도 된다.
CSS 적용해보기
- HTML에 바로 사용하기
HTML에 바로 사용하면 HTML이 CSS를 사용할 수 있게 Style이라는 태그를 제공해준다.
<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>
<style>
div {
width : 100px;
color : #ffffff;
background-color: red;
}
</style>
</head>이렇게 하면 div부분은 저 스타일로 꾸며진거
어떻게 나오는지 보려면 body에
사이에 아무 글이나 쳐보면 됨.
- 태그에 바로 사용하기.
바로 여기 사용하고 싶다면, 그 태그에 바로 쓸 수도 있다.
<div style= "width : 100px;
color : #ffffff;
background-color : red;"> 적당히 여기에 원하는 내용이 들어가면 빨간배경에 흰글씨가 나옴</div>- CSS 파일로 따로 저장하기.
파일이름.css로 파일을 만들고, 이전 내용을 적어준다.div { width ; 100px; color : #ffffff; background : blue; }
물론 아니다. 연결을 안 시켰으니까.
우리가 원하는 HTML을 열고 head 안에
를 적어준다.
그럼 완성! 이제 준비 끗!
CSS 선택자
- HTML 태그 : h1, h2, p, spam, img 등 태그 전체를 선택
div {
width : 100px;
color : red;
}div도 많이 쓰이는 태그야! 옆에 누가 있는걸 아주 싫어하는 친구
- ID : HTML 문서당 단 한 개! 해당 아이디를 가진 태그만 선택, 선택자 앞에 #를 붙여줘야 함.
HTML에서는~
<h1 id = "human"> 나는 human</h1>
<h1> 나는 human이 아니야, 글씨체가 달라. </h1>CSS에서는~
#human {
font-family: Georgia, "Times New Roman", serif;
font-size : 5rem;
}이렇게 하면 실행하면 같은 HTML태그지만, 나는 human은 css가 적용되고, 안휴먼은 적용되지 않음!
rem : 그 사이트나 HTML에서 기본으로 설정해놓은 크기를 말해.
2 rem은 기본 크기의 2배겠지? 물론 소수점크기도 가능함 1.1rem 이런거.
- class : 해당하는 종류! 해당하는 클래스 전체를 선택한다.
HTML에서는~
<div class= "black">이곳은 검정색일거야.</div>CSS에서는~
.black {
border-style : dotted;
background-color : black;실행하면, class 가 black인 div태그인 저 선택자는 CSS가 잘 적용이 되겠습니다.
box sizing
CSS 에서 어떤 정보가 차지하는 공간을 box라고 하면,
- content : 어떤 정보 그자체가 차지하는 공간, 가로는 width, 세로는 height
- padding : 안쪽여백. 이보다 정확한 표현이 없다. 안쪽여백이 늘어나면 content자리가 점점 줄어듬. 식물 세포벽같은느낌으로
- border : 테두리다. 별 할말 없음
- margin : 바깥 여백, 요소와 요소사이의 간격을 나타냄.
기타 정보
- 가로정렬
일단 기본은 세로정렬이라 가로정렬 하려면 따로 처리를 해줘야한다.
이떄 필요한게 flex
예시를 보자.
.content {
position: absolute;
top: 0;
right: 0;
width: 30vh;
height: 100%;
margin-right: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: .9rem;
}display : flex -> 가로정렬
justify-content : center -> 중앙정렬 ( 이게 오른쪽정렬, 왼쪽정렬할때 그 중앙정렬말하는거, 가로)
align-items : center -> 중앙정렬 (위로정렬, 아래로정렬할대 그 중앙정렬, 세로 )
- 네모칸 동글동글하게 깎기
네모네모빔을 맞은게 디폴트라서 좀 이쁘게 깎으려면 처리를 해줘야한다.
이때 필요한게 border-radius
input {
width: 100%;
height: 100%;
border-radius: 50px;
background: inherit;
border: 1px solid #ffff;
}border-radius 50px : 50픽셀만큼 깎았단거다.
background는 얘네 위에있는애들 그러니까 뭐.. 엄청 올라가면 h1 이런애들이 있을 수도있고, 그 전에 누가 배경 색 설정해놓으면
그거로 따라감
- 그림자 만들기
원래 그림자가 없다. 그림자를 만들려면 빛을 만들어줘야한다. (구라임)
그림자를 만들어주는 사이트가 있다. 들어가서 만들면 어떤 코드를 넣어야 하는지 복사까지 할 수 있다.
이만 복습 끝. 오늘하루도 수고했습니다.
읽어주셔서 감사합니다.
'TIL > [멋쟁이 사자처럼] TIL' 카테고리의 다른 글
| TIL (HTML의 summary tag) (22.03.26) (0) | 2022.03.26 |
|---|---|
| TIL (22.03.26) (0) | 2022.03.26 |
| TIL (22.03.24) (0) | 2022.03.25 |
| TIL (22.03.24) (0) | 2022.03.24 |
| TIL (22.03.17) (0) | 2022.03.17 |