1. html태그에 직접 style로 지정하기
<body>
<h1 style="color:red">Hello world</h1>
</body
2. head에서 선택자 지정 스타일 지정하기
게임으로 배우는 선택자
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS3 Selector | PoiemaWeb
CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용
poiemaweb.com
선택자들에는 많은 종류가 있는데, 세가지만 알아보겠다.
선택자는 "주어" 에 해당한다 : 원하는 효과를 주고자 하는 대상을 선택하는것.
- 태그 선택자 TAG명{...}
<html>
<head>
<style>
h2{color : blue}
</style>
</head>
<body>
<h2>Hello World</h2>
</body>
</html>- 클래스 선택자 .class{...}
<html>
<head>
<style>
.deactive{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 class="deactive"> 클래스 선택자</h1>
<ul>
<li class="deactive">JS</li>
<li>hello</li>
<li class="deactive">JAVA</li>
</ul>
</body>
</html>- 아이디 선택자 #id{...}
<html>
<head>
<style>
#select{
font-size:50px;
}
</style>
</head>
<body>
<ul>
<li id="select">CSS</li>
</ul>
</body>
</html>- 부모/자식 선택자
부모 and 자식
ul li{
color:red;
}ul 밑에있는 li에 적용하는 방식
부모와 자식
<html>
<head>
<style>
ul li{
color:red;
}
<!--부모와 자식의 관계-->
#lecture>li{
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>ol>li 로 적용하면 border가 다 적용되는데 왜냐면 ol이 두개기 때문.
따라서 적용할 ol에 id를 "lecture"로 주어서 상속했다.
대등한관계로 따로 적용
ul,ol{
background-color: powderblue;
}3. 속성값 정리
div와 같은 영역 박스도 높이/너비가 정해지면 background가 보인다.
버튼위에 마우스가 올려져있을때(hover)
button : hover{
color : red
}
padding은 컨텐츠 안의 공간
margin은 컨텐츠 밖의 공간
border은 컨텐츠 테두리
.div{
border : 6px dashed red;
margin : 10px 10px 10px 10px;
padding :10px;
}
4. Display, Position
- div와 span 비교
div는 block형, span은 inline형이지만, display 속성값을 바꿔서
위와 같이 수정할수도있다.
- position 비교
.contatiner{
background : yellow;
left: 20px;
top: 20px;
position : relative;
}
.contatiner{
background : yellow;
left: 20px;
top: 20px;
position : absolute;
}
.contatiner{
background : yellow;
left: 20px;
top: 20px;
position : fixed;
}
.contatiner{
background : yellow;
left: 20px;
top: 20px;
position : sticky;
}
5. FlexBox
Position float Table로는 수직적으로 가운데 정렬하는것 어려웠음.
Flex 선요약.
하나는 중심축, 하나는 반대축이 있다. 이 축은 수평이냐 수직이냐에 따라서 바뀔수있다.
대략적인 flex 관련 속성값들을 알아보겠다.
justify-content : 중심축을 기준으로 아이템을 어떻게 배치하는가?
align-content : 반대축을 아이템을 배치
align-items : 반대쪽에서 아이템을 배치하는 방법
order: css순서를 order에 따라서 적용
flex-grow : 예시에서 2 1 1로 할당했기때문에 2:1:1로 크기가 할당된것을 볼 수 있다.
flex-shrink는 줄어드는것. 같은 원리다.
flex-basis는 아이템이 얼마나 공간을 차지하는지 세부적으로. 기본값은 auto;
align-slef : 아이템 하나만 따로 특별하게 컨테이너 밖으로 배치하고싶을때.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
출처 : www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9
'웹(Web) > 프론트엔드(Frontend)' 카테고리의 다른 글
| JavaScript 정리1(변수, 연산자, 반복문, 조건문, 함수) (0) | 2021.03.14 |
|---|---|
| 모션그래픽 p5.js(Processing 같은원리) (1) | 2021.03.01 |
| css 색 디자인color tool (0) | 2021.02.21 |
| HTML Box/Item & Block/Inline 정리 (0) | 2021.02.21 |
| HTML 태그 정리 (0) | 2021.02.17 |