W3Schools 이 기본 중 기본
선택자 구분
가장 클래스 선택자(Pseudo-Class Selector) :가상 요소 선택자(Pseudo-Element Selector) ::
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /*전체 선택자*/ * { color : red; } /*head body 등 모든 곳의 태그에 스타일 적용*/ /*태그 선택자*/ h1 { color: blue;} /*단일 태그에 스타일 적용*/ h1, p { color: pink;} /*지정한 태그에 스타일 적용*/ /*아이디 선택자*/ #apple { overflow: hidden;} /*id 가 apple 인 태그에 적용*/ /*클래스 선택자*/ .select { color: rebeccapurple;} /*클래스 속성으로 select 가지면 적용*/ p.select2 {color: aqua; } /*지정된 태그 중 클래스 속성으로 select 가지면 적용*/ /*속성 선택자*/ input[type]{background: red;} /*지정된 태그의 속성 중 type 이 명시되면 적용*/ input[type=password]{background: blue;} /*지정된 태그의 속성이 password 로 명시되면 적용*/ /*문자열 속성 선택자*/ img[src$=png]{background: blue;} /*문자열 속성 선택자 5中１*/ img[src^=desktop]{background: blue;} /*문자열 속성 선택자 5中１*/ /*후손 선택자*/ #apple h1 {background : blue;} /*id 가 apple 의 후손 중 h1 에 적용*/ #apple h1, h2 {background: blue;} /*id 가 apple 의 후손 중 h1 와 그냥 h2 에 적용*/ #apple h1, #apple h2 {background: blue;} /*id 가 apple 의 후손 중 h1, h2 에 적용*/ /*자손 선택자*/ #apple > h1 > h2 {color: red;} /*apple 바로 자식에게 적용*/ /*동위 선택자*/ /* #table 엔 tbody 가 자동으로 생성되니 쓰지말자*/ h1 + h2 {color:red;} /*h1 바로 뒤에 h2 가 오면 h2 에 적용*/ h1 ~ h2 {color:red;} /*h1 뒤에오는 모든 h2 에 적용*/ /*반응 선택자*/ #reaction:hover { color:red;} /*마우스 올리면 적용*/ #reaction:active {color:blue;} /*마우스 클릭 시 적용*/ /*상태 선택자*/ #state:enabled {color:navajowhite;} /*사용가능한 input 태그*/ #state:disabled {color:brown;} /*사용불가능한 input 태그*/ #state:checked {color:red;} /*check 상태의 input 태그*/ #state:focus {color:blue;} /*focus 된 input 태그 (페이지당 1개만 가능)*/ /*링크 선택자*/ #letter4:link { color: red;} /*href 속성을 가진 a에 적용*/ #letter4:visited { color: brown;} /*방문한 링크를 가진 a 에 적용*/ /*구조 선택자*/ /*#structure 가 id 인 자손들 중의 이야기임. 부모가 structure 가 아님*/ #structure:nth-child(2n+1) {color:navajowhite;} /*2번째 자손*/ #structure:nth-last-child(2n) {color:blue;} /*뒤에서 2번째 자손*/ #structure:first-child {color:red;} /*첫번째 자손*/ #structure:last-child {color:brown;} /*마지막 자손*/ #structure2:first-of-type {color:navajowhite;} /*처음 오는 태그만 한번 적용*/ #structure2:last-of-type {color:blue;} /*마지막에 오는 태그에 적용*/ #structure2:nth-of-type(2n+1) {color:red;} /*앞에서 수열 번째로 등장하는 태그 적용*/ #structure2:nth-last-of-type(2n) {color:brown;} /*앞에서 수열 번째로 등장하는 태그 적용*/ /*문자 선택자 (아래 6개)*/ #letter::first-letter {font-size:3em;} /*첫번재 글자 선택*/ #letter::first-line {color: red;} /*첫번째 줄 선택*/ /*아래 두개만 content 사용 가능함*/ #letter2::before { content: counter(rint) ".";} /**/ #letter2::after { content: "-" attr(data-page) "page";} #letter2 {counter-increment: rint;} #letter3::selection { background: black; color: red;} /*드래그 시 적용*/ /*부정 선택자*/ p:not([type=password]) { color : red;} /*선택자를 반대로 적용*/ | cs |
스타일 속성
크기단위
상대크기 => 100% = 1em
절대크기 => px
절대크기를 지정한 후에 상대크기를 설정해서 많이 사용함.
0 은 단위 없어도 됨
색상값
rgb(r, g, b) = #aabbcc
용량을 미세하게 줄이는 hex 코드 단위(#aabbcc) 를 많이 씀.
그 밖에 rgba(r, g, b, a), hsl(h, s, l), hsla(h, s, l, a) 도 있지만 Hex 가 제일 많이 쓰임.
URL 단위
1 2 3 4 5 | <style> body { background-image: url('desert.png'); } </style> | cs |
가시 속성
Display
1 2 3 4 5 | <style> body { background-image: url('desert.png'); } </style> | cs |
none => 안보임
block => 상하좌우 속성 적용 가능. 기본으로 다음 줄에 들어감.
inline => 좌우 속성만 적용가능. 현재 줄에 이어서 들어감.
inline-block => 상하좌우 속성 가능. 현재 줄에 이어서 들어감.
Visibility
visible => 태그를 보이게
hidden => 태그는 안보이지만 공간은 잡고 있음
collapse => 태그도 안보이고 공간도 안잡음
Opacity
투명도
0.0 ~ 1.0 까지 값이 들어감.
박스속성
1 2 3 4 5 6 7 8 9 10 11 | <style> body { margin: 0px; margin: 0px, 12px; margin: 0px, 0px, 1px, 0px; margin-bottom: 0px; box-sizing: content-box; box-sizing: border-box; } </style> | cs |
margin 에 값이 하나면 상하좌우, 두개면 상하 좌우, 네개면 top, right, bottom, left
box-sizing 은 content-box 면 content 에 border 가 포함 안됨, border-box 면 border 도 포함됨.
border-box 는 테두리가 크면 내용과 겹치고 그래서 기본값은 content-box 임
테두리 속성
1 2 3 4 5 6 | .box { border-width: initial; border-style: dashed; border-color: black; border: initial dashed black; } | cs |
1 2 3 4 5 6 7 8 9 10 11 | <style> .box { border-width: initial; border-style: dashed; border-color: black; border: initial dashed black; border-radius: 50px; border-radius: 50px 40px; border-radius: 50px 40px 30px 20px; } </style> | cs |
border-width, style, color 는 한번에 적을 수도 있음
border-radius 는 끝이 둥근 사각형을 만드는데 사용
배경속성
1 2 3 4 5 6 7 8 9 10 | <style> body { background-image: url('https://ssl.nx.com/s2/game/maplestory/renewal/common/media/artwork/artwork_95.jpg'); background-size: 20%; background-repeat: no-repeat; background-attachment: scroll; background-position: bottom left; background-color: aliceblue; } </style> | cs |
폰트속성
모서리에 돌기가 있는 글자 => Serif (명조)모서리에 돌기가 없는 글자 => Sans-Serif (고딕)
1 2 3 4 5 6 7 8 9 10 11 | <style> .a { font-size: 32px; font-family: 'Times New Roman', Arial, serif; font-style: italic; font-weight: bold; line-height: 129px; text-align: center; text-decoration: overline; } </style> | cs |
위치속성
자식의 position이 absolute 일 때의 문제
1. 자손이 위치를 잡고 있지 않음
=> 자손에게 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력
2. 자손이 부모 위치를 기준으로 배치되지 않음
=> 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용.
1 2 3 4 5 6 7 8 9 10 | <style> .box { width: 100px; height: 100px; position: absolute; overflow: hidden; overflow-y: scroll; overflow-x: hidden; } </style> | cs |
Float 속성
이미지의 글자와의 배치 및 레이아웃을 만드는데 사용
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 | <head> <title>HTML5 + CSS3 Text</title> <style> body { width: 960px; margin: 0 auto; } #wrap{ overflow: hidden; } #aside{ width: 200px; float: left; } #section{ width: 760px; float: left; } </style> </head> <body> <div id="header"><h1>Header</h1></div> <div id="navigation"><h1>Navigation</h1></div> <div id="wrap"> <div id="aside"> <h1>Aside</h1> <p>Lorem ipsum dollor sit amet, consectetur adipiscing elit.</p> </div> <div id="section"> <h1>Section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"><h1>Footer</h1></div> </body> | cs |
cf. One True Layout 방식
=> 자손의 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용
=> 그럼 위 사진의 왼쪽이 오른쪽으로 바뀜.
Shadow
1 2 3 4 5 6 | <style> div { box-shadow: 10px 10px 30px black; text-shadow: 5px 5px 5px #ff0000; } </style> | cs |
오른쪽 아래 흐림도 색상의 순서로 이어지며, 쉼표로 이어하면 중첩 그림자도 가능
Gradient
해주는 프로그램 이용
Vender Prefix
1 2 3 4 5 6 7 8 9 | <style> div { -ms-transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } </style> | cs |
위처럼 브라우저가 자체적으로 지원하는 기능을 위한 접두사
댓글 없음:
댓글 쓰기