210628
CSS
CSS 문법 구성
선택자{속성:값;}HTML 문법과 비교
<요소 속성="값">
CSS 선택자 우선순위
인라인(1000) > 아이디(100) > 클래스(10) > 엘리먼트(1)
인라인 스타일은 HTML내에서 요소의 속성으로 style="color:yellow" 등을 적용하는 경우임
가장 높은 우선순위이지만 웹표준에서 사용하는 것을 지양 함
| 속성 | 값 |
|---|---|
| color(글자색) | black, blue, #ff00ff |
| font-size(글씨크기) | 16px = 100% = 1em(body 기본 글씨크기) |
| font-family(글꼴) | dotum,"돋움",sans-serif(한글이거나 여러 영단어로 된 글꼴은 ""로 묶어줌, 한글폰트만 입력하면 적용안되는 경우가 있어서 영어와 중복입력하기도 함, 여러개 입력 시 앞의 것 적용 안됐을 경우 뒤의 것으로 적용 됨) |
| font-weight(글씨굵기) | bold, normal |
| font-style(글자스타일) | italic, normal |
| line-height(글자아래위여백) | 300%(글자크기에 배율 곱하고 글자크기 뺀 후 2나누면 여백크기) |
| font관련 속성은 묶어쓰는 것을 지양 함 | 묶어쓰려면 : font=weight font-style font-variant font-size line-height font-family 순서로 사용 |
| text-indent(첫 줄 들여쓰기/내어쓰기) | 50px, -50px |
| text-decoration(줄 긋기) | underline 밑줄, overline 윗줄, line-through 취소선, none 있던 줄 제거 |
| text-align(가로정렬) | left right center justify양쪽정렬 |
| letter-spacing(자간) | 50px |
| word-spacing(단어사이간격) | 50px |
| vertical-align(세로정렬) | top, middle, bottom(기본값) |
| font-variant | small-caps(소문자를 작은 대문자로) |
| text-transform | uppercase(대문자), lowercase(소문자), capitalize(첫 글자 대문자) |
| white-space | pre(공백표시, HTML pre엘리먼트와 동일) |
| white-space | nowrap(자동줄바꿈 안함) |
210629
| 속성 | 값 |
|---|---|
| background(모아쓰기, 권장) | 배경색_url(이미지경로)_반복여부_가로위치_세로위치_고정여부 순 |
| background-color(배경색) | black, #ccc |
| background-image(배경이미지) | url(파일경로) |
| background-repeat(배경이미지 반복) | repeat(기본값), repeat-x(가로반복), repeat-y, no-repeat |
| background-position(배경이미지 위치) | left/center/right/50% top/center/bottom/50% (가로-세로, %사용 권장) |
| background-attachment(배경이미지 고정) | scroll(기본값), fixed(고정) |
- background 관련 CSS는 아래와 같이 몰아 쓸 수 있으며 이를 권장함
body{background: #ccc url(images/smile.jpg) no-repeat 100% 100% fixed;}-
background image는 리소스 절약을 위해 여러 이미지가 모여있는 sprite이미지를 사용함. 이미지 크기를 width와 height로 지정해준 후, background-position에서 사용할 이미지의 시작좌표만큼 뺌.
-
인라인 요소를 블록레벨 요소로 바꾸는 CSS코드
display: block;- 블록레벨요소를 인라인요소로 바꾸는 CSS코드
display: inline;- 규격있는 요소 가로붙이기 하는 CSS코드
display: inline-block;- HTML에서 마크업한 요소 안보이게 할 때 사용하는 CSS코드
/*내용만 스킵*/
text-indent: -9999px; overflow: hidden;/* 요소 공간까지 스킵*/
position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-geight:0;text-indent:=9999px;overflow:hidden;visibility:hidden;- 코드가 아닌 이름으로 사용할 수 있는 색상들
white, black, blue, red, yellow, pruple, orange, green, lime, navy(#000080), gray(#808080), silver(#C0C0C0), aqua(#00FFFF, 사이안), teal(#008080, 청록색), olive(#00FF00), maroon(#800000, 밤색), fuchsia(FF00FF, 퓨셔, 마젠타)
210630
| 속성 | 값 |
|---|---|
| list-style | none(블릿없음) |
| list-style-position(리스트 들여쓰기) | inside(들여쓰기), outside(기본값) |
| list-style-type(블릿타입) | none, disc, circle, square, upper-alpha, lower-alpha, upper-roman, lower-roman |
| list-style-image | url(파일경로)(백그라운드 이미지 형태를 권장) |
| 선택자 | 설명 |
|---|---|
| a:link | 링크 걸렸을 때 |
| a:visited | 방문한 후 |
| a:dover | 마우스 올렸을 때 |
| a:active | 누르고 있을 때 |
| a:focus | 탭해서 갔을 때 |
- 가상클래스의 우선순위는 10점. 함께 쓸 때 순서 중요.
| 속성 | 값 |
|---|---|
| overflow | hidden(넘친내용 안보임) |
| overflow | scroll(스크롤 생성) |
| overflow | auto(넘칠경우 스크롤 생성) |
| overflow | visible(넘친내용 보임, 기본값 |
| 속성 | 값 |
|---|---|
| border(모아쓰기, 권장) | width_style_color 순 |
| border-top, border-bottom, border-left, border-right(한방향 모아쓰기) | width_style_color 순 |
| border-width, border-style, border-color, border-top-width, border-top-style, ... | 방향 별 폭, 스타일, 색 각개지정 |
| border-style |
solid(실선,기본값),double(두줄),dashed(파선),dotted(점선) none,hidden(보더생략) groove,ridge,inset,outset(크롬에서는 차이 없음) |
- border 관련 CSS는 아래와 같이 몰아 쓸 수 있으며 이를 권장함
h2{width:500px; height:100px; background-color: aqua;
border:10px solid red;}210701
CSS 자식선택자
부모>자식{}, 부모>자식>자식{}
특정 부모의 아래에 있는 태그만 선택자로 하고싶을 때 사용
끊어진 테이블 연결하는 CSS코드
border-collapse: collapse;210702
박스모델
- CSS 전체선택자 * : 우선순위 0점
- HTML엘리먼트에 있는 기본 여백 제거하는 코드(유용하긴 하나, 실무에서는 엘리먼트가 너무 많기 때문에 각자 지정해서 여백제거 것을 권장)
*{padding:0; margin:0;}-
박스모델의 실제 크기 : 내용물(width)+안쪽여백(padding)+테두리선(border)+바깥쪽여백(margin)
-
따라서, 내용물 크기를 초기에 설정한 후 추가한 padding,border,margin에 따라 내용물 크기를 소거해줘야 초기 설정한 크기를 유지할 수 있음
-
margin 특징 두 가지 : 마진끼리 아래위로 맞물릴 경우 큰 값 하나만 처리. 화면 위쪽 끝이 맞물려있을 경우 margin이 적용되지 않음.(이 경우 wrap에 padding을 주는 방법으로)
-
박스 가운데정렬 : div에 width지정 후 margin:0 auto;
margin, padding 모아쓰기 공통사항
padding = padding-top + padding-right + padding-bottom + padding-left
padding:20px; top,right,bottom,left
padding:20px 10px; top bottom, right left
padding:20px 10px 5px; top, right left, bottom
padding:20px 10px 5px 0; top, right, bottom, left(시계방향)memo
과제하면서 네이게이션 바 가운데정렬할 때 left:50% margin-left:50% 사용했는데 쌤은 어떻게하는지 보기!! -> 그냥 text-align: center;로 하심. 여백으로 하는거 보고싶었는데 ㅠ
포샵, 일러, XD 작업은 내용이 너무 많아 간단하게 결과물만 기록!
Advanced thinking should be put into advanced code.