티스토리 뷰
CSS란?
- Cascading Style Sheets로 HTML과 함께 웹 표준의 기본
- Cascading 뜻 ?
- 캐스케이딩 스타일 시트(CSS)뜻 ? "위에서 아래로 흐르는 스타일 시트"
- 텍스트 색사이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당
- http://www.csszengarden.com/
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
Cascading
- 사용자가 지정하지 않는다면 Browser가 지정한 style로 지정됨
- Casacding을 끊어내는 것 -> !important
- 가능하면 !important을 쓰지 않는게 좋음 , Box대로 나누어야지 labeling이 쉬움
1. Author style
2. User Style - 사용자가 지정한 것
3. Browser - Browser가 지정한 Style
selectors
| Selectors | ||
| Universial | * | 모든 Tag 고르기 |
| type | Tag | Tag를 고르는것 ex) <div> |
| ID | #id | id만 고르기 |
| Class | .class | |
| State | : | |
| Attribute | [] | |
margin -> 공식문서
component 한줄로 만들기
div{display : flex;}
줄바꿈 방지
div{white-space : nowrap;}- normal : 기본값으로 글자 줄이 자동으로 바뀜, 콘텐츠가 너비를 초과할 경우 다음줄로 바뀜
- nowrap : 줄바꿈이 실행되지 않음
- pre : 줄바꿈과 기타 공백이 유지됨
- inherit : 부묘 요소로부터 값을 상속 받음
font 관련
div{font-size : 1.1em;}
div{font-weight : 300;}
css 사용예제 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Demo</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li> Second </li>
</ol>
<h1 id = "special">Hello </h1>
<button> Button 1 </button>
<button> Button 2 </button>
<div class = "red">
<button></button>
</div>
<div class = "blue"> </div>
<a href = "naver.com">Naver </a>
<a href = "google.com"> Google </a>
<a> Empty </a>
</body>
</html>
/* selector { property : value ;} */
* { color : green;}
li{ color : blue;}
#special { color : pink; }
.red { width : 100px; height : 100px; background : yellow;}
button:hover { color : red ; background : beige;}
a[href="naver.com"] {color : red;}
a[href^="google.com"]{color : purple;}
css 사용예제 2
.red {
width : 100px;
height : 100px;
background : yellow;
padding : 30px;
padding-left : 100px;
margin : 20px;
border-width : 2px;
border-style : solid;
}
css 사용예제 3 - Display
(1) step1
- 기본적으로 span은 inline Style
- 하지만 css에서 display를 block으로 바꿔주면 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Js Bin</title>
</head>
<body>
<!-- Block Level -->
<div></div>
<div></div>
<div></div>
<!-- Inline Level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
/* selector { property : value ; } */
div, span{ width : 80px; height : 80px; margin : 20px;}
div{ background : red;}
span { background : Blue;}
(2) step2
- display 속성 : inline / block / inline-block으로 변경
div{
background : red;
display : inline-block;
}
span {
background : Blue;
display : block;
}
css 사용예제 4 - Position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Js Bin</title>
</head>
<body>
<article class = "container">
<div></div>
<div class = "box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
position은 static으로 저장되어 있음 , relative로 변화하면 변화됨
.container {
background : yellow;
left : 20px;
top : 20px;
position : relative;
}
- 원래 있어야할 자리에서 relative를 쓰면 움직일 수 있음
- position : absolute;를 쓰게 되면 가장 가까운 박스로 위치 변경이 이루어짐
- position : fixed ; 웹 페이지 안에서 바뀌어가는것
.container {
background : yellow;
left : 20px;
top : 20px;
position : relative;
}
.box{
background : blue;
left : 20px;
top : 20px;
position : relative;
}FlexBox 사용하기
float?
- 이미지와 텍스트를 어떤식으로 배치할까 하는 목적 ex) float : left / float : center / float : right
FlexBox 속성
1. Container - 박스에 있는 속성값이 존재
(1) display
- 보통 display : flex;로 설정
- flex 레이아웃을 설정하기 위해 기본적으로 있어야 하는 속성
- display 직계 자손에게만 적용 (손자x, 하려면 :nth-child(1)) 추가 필요
- 종류 : flex , inline-flex
(2) flex-direction
- 방향 - 기본값은 왼쪽에서 오른쪽
- 종류 : row , row-reverse, column, column-reverse
(3) flex-wrap
- 줄바꿈 속성
- 기본값 nowrap
- 종류 : nowrap, wrap, wrap-reverse
wrap으로 하게 되면? 크기가 커지면 밑으로 내려감
(4) flex-flow
(5) justify-content
(6) align-items
- center - 열 맞추기
(7) lign-content
2. item
- order
- flex-grow
- flex-shrink
- flex
- align-self
FlexBox 특징
- Main Axis와 Cross Axis가 존재
100% vs 100px vs 100vh
값의미기본값
참고사이트
Color Tools
- 사이트
CSS-Tricks
css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
단축키
JAVASCRIPT 스타일과 스타일시트
- 스타일 주석 하는 방법 /* */
1. 내부 스타일 시트
- 안쓸거니깐 설명 간략하게 적겠음
- <head> <style> section { width : 500px; padding :15; border : 5px solid gray } </style> </head>
2. 외부 스타일 시트
- 웹 스타일을 만들때 하나의 웹 문서로 끝나는 경우는 거의 없음
- 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할때마다 파일에서 가져와 사용함
- <link rel = "stylesheet" href = "외부 스타일 파일 경로">
- h2와 p에 이러한 스타일을 적용하겠다~
h2{
font-size : 20px;
color : orange;
}
p{
color : blue;
}
* 특정 부분에 요소 적용
- 간단한 스타일 정보일경우 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
- css파일을 만들어서
- head에 연결 => <link rel = "stylesheet" href = "css/style.css">
- <h1 class = "pinktext"> 이쁜 사람 목록</h1>
.pinktext{
color : pink;
}* 특정 클래스에 스타일 적용
- <p> 특정 클래스에 스타일 <span class = "pinktext"> 적용 </span> <br>
* id 스타일 적용
- #아이디명 {스타일}
- id 선택자도 클래스 선택자와 마찬가지로 웹 문서안의 특정 부분에 스타일을 지정할때 사용
- 클래스 선택자와 id 선택자의 가장 큰 차이?
--> 클래스 선택자가 문서 안에서 여러번 적용할 수 있는 스타일이지만, id 선택자는 문서 안에서 한번만 적용할 수 있음 즉! 중복해서 사용할수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바 스크립트 프로그램에서 웹 요소들을 구별
#container {
width :600px;
padding : 15px;
border : 1px dotted gray;
}
<출처>
1. flexbox - thrillfighter.tistory.com/489
2. heropy.blog/2018/11/24/css-flexible-box/
3. 엘리 드림코딩
4.
'Programming > HTML+css' 카테고리의 다른 글
| [HTML] HTML 기본 코드/요소 (0) | 2022.09.02 |
|---|