차이 없음
ex) 섞어서 편하게 쓸 수 있는 경우들
a= '<div id="divId">' // 태그 안에 들어가야할 " 입력
b= "It's 3 o'clodk" // '로 사용했다면 중간에 끊어짐
ES6부터 사용될 수 있으며 편리한 경우가 많음
const name = 'DW'
const result = `My name is ${name}` //내부에 변수 사용 가능, 기존엔 ''+name+'' 으로 복잡스럽게 했어야함
const result2 = `2+3=${2+3}` //수식 사용 가능
const result3 = `abcde
fghi` //여러줄 사용 가능, 기존엔 'abcde\nfghi'
let str='abcde';
str[0]; // a
str[1]=f; // 변화없음margin : 나를 기준으로 다른 요소들이랑 얼마나 간격을 둘지
padding : 내안의 공간
-> 개발자도구에서 수정 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 { text-align: center; font-size: 45px; } div.header{ border-bottom: 3px solid; text-align:left; } #content { } /*max : 0 px~여기까지 적용*/ /*min : max px~여기까지 적용*/ /*grid layout은 max~480 까지만 적용, 그보다 작아질시 세로 배치*/ @media (min-width: 480px) { /*grid-template-columns 속성 사용시 div 그리드 배치 수월*/ div.main{ display: grid; width:100%; grid-template-columns: 1fr 2fr; } #list { border-right: 3px solid; } } </style> </head> <body> <div class="header"> <h1> <a>WEB</a> </h1> </div> <div class="main"> <div id="list"> <ol> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ol> </div> <div id="content"> <h2>CSS</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </div> </body> </html> | cs |
ex) h1 태그의 경우 가로로 꽉참, a 태그의 경우 일부만 차지함
순정 값들은 바꿀 수 있는데 css display 속성을 사용
위와 같이 설정한 대로 바뀜
| 박스 모델, 미디어쿼리 (0) | 2022.03.30 |
|---|---|
| 상속, 캐스케이딩 (0) | 2022.03.29 |
| 선택자 (0) | 2022.03.27 |
상속 : 자식요소들은 부모요소의 css속성을 상속받는데, 받는거따로 안받는거 따로있다.
1. 받는 경우 ex)
ul{color:gray}
<ul><li></li></ul>
위의 경우 li도 color 속성을 상속받아서 색깔이 동일하게 변함
2. 안받는 경우 ex) border
상속이 유리한경우, 불리한경우에 따라 알아서 지정돼있다.
https://www.w3.org/TR/CSS21/propidx.html
Full property table
www.w3.org
style속성 > id선택자 > class선택자 > 태그선택자
| 박스 모델, 미디어쿼리 (0) | 2022.03.30 |
|---|---|
| 레이아웃 (0) | 2022.03.29 |
| 선택자 (0) | 2022.03.27 |
- 선택자 연습 사이트 : https://flukeout.github.io/
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
- 강의 : https://opentutorials.org/course/2418/13500
선택자 - 생활코딩
인간의 언어는 주어와 서술어로 이루어져 있습니다. 이 두가지는 언어를 구성하는 양대축입니다. 선택자는 인간의 언어로 치면 주어에 해당하는 매우 중요한 요소입니다. 주어를 자유롭게 사용
opentutorials.org
- 치트시트
:not(selector) : selector가 아닌 요소들 선택
apple:not(.small)
[for] : for속성을 가진 요소들 선택
plate[for] : plate중 for속성을 가진 요소들 선택
[for="abc"] : for 속성의 값이 abc인 요소들 선택
[for^="abc"] : for 속성의 값이 abc로 시작하는 요소들 선택
[for$="abc"] : for 속성의 값이 abc로 끝나는 요소들 선택
[for*="abc"] : for 속성의 값에 abc가 포함되면 선택
| 박스 모델, 미디어쿼리 (0) | 2022.03.30 |
|---|---|
| 레이아웃 (0) | 2022.03.29 |
| 상속, 캐스케이딩 (0) | 2022.03.29 |