css 기본 문법.
선택자 {
속성1 : 값;
속성2: 값;
}
--------------------------------------------------------------------------------------------------------
글자와 텍스트 스타일
font-style 속성 중 기울일 때,
italic 과 oblique 가 있는데 얼핏 보면 둘 다 기울여 진 글씨로 보일 것이다.
하지만 italic이 '기울여서 쓴' 서체라면, oblique는 본래 서체를 기울여놓은 것이다.
font-style: italic ;
font-weight 속성은 글자의 굵기를 조절한다.
normal 과 bold 중에 선택하거나 100~900 사이 100단위의 수치를 사용한다.
font-weight: bold ;
font-size 속성은 말 그대로 글자의 크기를 지정한다.
단위로는 px과 %, em, rem이 사용된다.
100%는 1em으로 부모 요소와의 상대적 크기를 나타낸다.
rem은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기이다.
기준이 되는 값은 최상위 요소에서 지정된 font-size값이다.
예를 들어,
html {font-size: 16px;}
body {font-size:2em;}
div.1 {font-size:2rem;}
div.2 {font-size:2em;}
html은 최상위 태그의 폰트 사이즈는 16px이고,
이후에 body 태그의 font-size는 2em 이니까,
body 태그 이후에 나오는 폰트 사이즈는 16px*2 인 32px이 나오는 것이다.
div 요소 하위에 있는 1클래스는 rem을 사용하였기 때문에 최상위 태그,
html의 폰트 사이즈인 16px*2 =32px인 것이다.
text-decoration 속성은 밑줄, 취소선, 물결선 등으로 꾸며준다.
밑줄 : text-decoration: underline;
취소선 : text-decoration: line-through;
물결선 :text-decoration: wavy underline;
text-transform 속성은 알파벳의 대소문자 표시에 사용된다.
앞글자만 대문자 : text-transform: capitalize;
전체 대문자 : text-transform: uppercase;
전체 소문자 : text-transform: lowercase;
text-shadow 속성은 텍스트에 그림자를 준다.
순서대로 x좌표, y좌표, 흐림(선택), 색 형식으로 그림자를 넣을 수 있따.
text-shadow: 2px 2px red;
는 x좌표로 2px, y좌표로 2px, 색상은 red 색상이다.
--------------------------------------------------------------------------------------------------------
문단과 목록 스타일
정렬과 간격
text-align 속성은 텍스트의 정렬 방식을 지정한다.
왼쪽 : left
가운데 : center
오른쪽 : right
왼쪽으로 정렬하면서 마지막 줄을 제외한 줄들의 오른쪽이 나란히 되도록 할 때 : justify
text-align: left;
글자와 글자 사이 : letter-spacing
단어 간격 : word-spacing
줄 높이 : line-height
letter-spacing: 0;
line-height: 1.5em;
들여쓰기 속성 :text-indent
글자 크기와 같이 px,%,em 등의 단위들을 사용할 수 있고 음수를 넣어서 내어쓰기도 가능하다.
p { text-indent: 0.8em; }
list-style 속성으로 ul과 ol 목록의 불릿, 숫자 스타일을 지정할 수 있다.
ul, ol 여부 관계 없이 기호, 서수, 원하는 문자, 이모지, 이미지도 사용 가능.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
list-style - CSS: Cascading Style Sheets | MDN
The list-style CSS shorthand property allows you to set all the list style properties at once.
developer.mozilla.org
에서 다양한 요소 참조.
--------------------------------------------------------------------------------------------------------
색 표현
css에서는 4가지 형식들을 사용하여 색상을 지정할 수 있다.
1. keyword 색상마다 부여된 이름으로 지정.
2. rgb(a) 빨강, 초록 블루 광원으로 색을 혼합하는 방식, 끝에 알파값으로 투명도 조절 가능
3. hex r,g,b ,alpha 값들을 16진수 형태로 나타낸 것.
4. hsl(a) 색상, 채도, 명도값, 알파값을 조합하여 색을 나타낸다.
구글에서
color picker를 검색해서 색상 확인 가능
p{color: red; background-color: 255,255,255;}
--------------------------------------------------------------------------------------------------------
중요) 인라인 요소와 블록 요소
span 요소와 div 요소
span 요소는 기본적으로 inline 요소이다.
div 요소는 기본적으로 block 요소이다.
ex) .span {display:block;} 으로 변경 가능 span요소이지만 block이다.
display:none; 은 화면에서 사라진다. 공간도 차지하지 않는다.
| inline | block | inline-block | |
| 기본 너비 | 컨텐츠 만큼 | 부모의 너비만큼 | 컨텐츠만큼 |
| width, height 속성 | 무시 | 적용 | 적용 |
| 가로공간 차지 | 공유 | 독점 | 공유 |
| margin 속성(바깥쪽 여백) | 가로만 적용 | 모두 적용(상하 상쇄) | 모두 적용 |
| padding 속성(안쪽 여백) | 가로만 적용, 세로는 배경색만 | 모두 적용 | 모두 적용 |
쉽게 설명하자면,
기본 너비부터 inline 요소는 딱 컨텐츠 만큼 공간을 차지한다.
block 요소는 너비를 따로 지정해주지 않으면 꽉 채운 공간을 차지한다.
inline-block 요소는 inline 요소처럼 딱 컨텐츠 만큼 공간을 차지한다.
width , height 속성은 inline 요소에서는 무시한다. why? 이미 딱 컨텐츠만큼 공간을 차지했기 때문.
높이와 너비 속성과는 다르게 margin,padding 속성은 적용되는 이유는 박스 모델에서
content, padding,border,margin은 서로 다른 경계에 있기 때문.
block 요소에서는 모두 적용된다.
why? block 요소는 딱 컨텐츠만큼 공간을 차지한 게 아니라 부모의 너비만큼 차지 했기 때문에.
inline-block 요소는 block 요소처럼 적용 가능하다.
가로공간 차지는 inline 요소는 가로 공간이 공유 된다.
기본값이 inline인 2개의 span 요소를 한 가로 공간에 2개 넣을 수 있다.
예를 들어) 컨텐츠 컨텐츠
block 요소는 가로 공간을 독점한다. 즉 가로 공간에 침범 불가능.
예를 들어) 컨텐츠
컨텐츠
inline-block 요소는 inline 요소처럼 가로 공간이 공유 가능.
margin 속성은 inline 요소는 가로만 적용된다
block 요소는 모두 적용되지만 상하는 상쇄된다. 즉, 겹쳐진다는 뜻
inline-block 요소는 모두 적용된다.
padding속성은 inline 요소는 가로만 적용, 세로는 배경색만 적용된다.
block 요소는 모두 적용된다.
inline-block 요소는 모두 적용된다.
inline 요소와 block 요소는 직접 여러번 시행착오를 겪으면서 이해하는 게 제일 좋다고 판단된다.
추론 : 종합해보면 inline-block 요소는 inline 요소와 block 요소의 하이브리드 요소로,
inline 처럼 콘텐츠 만큼의 영역을 가지고, block 처럼 여백의 크기를 조절 가능하다.
`
css의 display 속성은 기본적으로 inline 속성을 갖지만, 브라우저는 기본적으로 div 등
block 요소로 구분되는 요소들의 display 속성은 block으로 지정한다.
--------------------------------------------------------------------------------------------------------
박스 모델
요소의 크기
inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.
단위로는 부모의 길이에 상대적인 %를 사용할 수 있고
뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh
이들 중 큰 것과 작은 것의 1/100 단위인 vmax vmin도 사용된다.
텍스트가 한 줄일 경우, height 와 line-height를 똑같이 맞추면
세로 방향에서 가운데로 정렬한 것과 같은 모습이 된다.
최대/최소 ,너비/높이 속성
max-width / max-height
min-width / min-height
margin과 padding에는 아래 형식 중 하나로 값을 줄 수 있다.
1. 공통
2. 세로 가로
3. 위 오른쪽 아래 왼쪽 (시계방향)
4. 위 가로 아래
블록 요소의 위, 아래 margin은 전후 블록 요소의 것과 상쇄된다.
주의, margin 과 padding을 0으로 설정했는데도 margin이 남아 있는 경우.
자식 요소가 margin을 가지고 있으면 부모 요소에 넘어서도 영향을 주기도 한다
margin과 padding은 -top, -bottom, -left, -right를 속성명에 붙여 따로 지정할 수 있다.
ex) p {
margin-top: 24px;
}
margin이 위쪽에만 24px 적용시킨다.
--------------------------------------------------------------------------------------------------------
컨텐츠를 가운데로 정렬하고 싶은 경우
margin에서 auto 값은 너비가 지정된 블록 요소의 가로 방향에서 남은 공간을 채운다.
컨텐츠 영역을 화면 가운데로 배치 가능.
ex) div {margin: 24px auto;}
상당으로 24px 적용시킨 후 가운데로 배치.
inline-block 요소일 경우에, margin 요소는 작동하지 않기 때문에
부모 요소는 텍스트의 흐름을 따르기 때문에 가운데로 정렬시킨다.
body {text-align:center;}
css를 적용해서 가운데로 정렬하고 싶은 경우.
div {
position: fixed; absolute 속성도 가능. 단,여러 부모 요소가 있으면 absolute는 더 고려해봐야함!
top: 50%
left: 50%
}
참고
블록 소요소 position이 absolute나 fixed가 되면 가로너비를 가득 채우지 않게 된다.
--------------------------------------------------------------------------------------------------------
border 속성은 요소에 테두리를 줄 수 있다.
ex) div {
border:1px solid black;
}
box-sizing 속성은 너비와 높이 값에 padding과 border 값을 포함시킬지 결정한다.
content-box : 콘텐츠 영역을 기준으로 크기를 정한다.
border-box : 테두리를 기준으로 크기를 정한다.
만약
div {
weight:440px;
padding:24px;
box-sizing:content-box;
} 일 때
컨텐츠 영역을 기준으로 크기를 정하기 때문에 컨텐츠의 크기가 가로 440px까지만 포함하고
border box는 따로 적용된다.
만약
div {
weight:440px;
padding:24px;
box-sizing:border-box;
} 일 때
보더 박스 기준으로 크기를 정하기 때문에 보더 박스 처음부터 끝까지의 가로 길이가 440px만큼이다.
border-radius 속성은 border box를 둥글게 표현할 수 있다.
기준은 11시 > 1시 > 5시 > 9시 순으로 시작한다. 11시부터 시계방향..
div {
border-radius : 12px 24px 48px 96px;
}
일때 11시(12px), 1시(24px), 5시(48px), 9시(96px)
border 속성도 특정 방향으로만 설정 가능하다.
border-top
border-bottom
border-left
border-right
overflow 속성으로 부모 요소보다 높이나 너비 값이 큰 자식 요소를 나타내는 방법을 지정할 수 있다.
overflow-x , overflow-y 속성들로 따로 지정할 수도 있다. overflow에 x축,y축 값을 함께 지정해도 가능.
auto : 컨텐츠의 크기가 주어진 공간을 넘어가는 경우만 스크롤 바가 생김.
hidden : 긴 컨텐츠 부분을 안 보이게 잘라버린다. 컨텐츠가 누락될 수 있기 때문에 주의.
invisible : 컨텐츠가 경계선 밖으로 나오는 한이 있어도 끝까지 보여준다.
한쪽만 visible이면 auto와 같이 작동한다. 둘 다 visible이어야 한다.
scroll : 스크롤바가 생겨서 사용자가 원하면 컨텐츠를 볼 수 있게 한다.
box-shadow 속성으로 박스 요소에 그림자를 줄 수 있다.
inset 여부 offset-x offset-y blur-radius spread-radius color
기본적으로 inset은 none이지만 inset 요소를 넣으면 음각의 그림자를 줄 수 있다.
x축, y축 , 흐릿함, 그림자 확장, 색상,
--------------------------------------------------------------------------------------------------------
배경 꾸미기
배경에 이미지를 넣기 위해서는
background-image:url(./image/image.png); 를 입력해서 삽입할 수 있다.
background-repeat: ; 요소를 입력해서 반복할지 선택할 수 있다.
background-position: ; 요소를 통해 위치도 조절할 수 있다.
background-size: ; 요소를 통해 이미지 크기 조절할 수 있다.
배경에 그라데이션 넣기 위해서는
linear-gradient(red,blue) 요소를 사용한다.
--------------------------------------------------------------------------------------------------------
포지셔닝
position 속성에는
static : 기본값으로. 요소를 문서의 흐름에 맞추어 배치한다.
fixed : 부모 요소가 아닌 viewport를 기준으로 위치를 지정한다. 스크롤 영향을 받지 않는다.
즉, 지정한 위치에 고정해서 배치.
relative : 이전 요소에 자연스럽게 연결해서 배치,위치 지정이 가능하다.
absolute :static이 아닌 첫 부모 요소를 기준으로 위치를 조정할 수 있다.
요소는 페이지의 문서 흐름에서 벗어나, 자리를 차지하지 않게 된다.
sticky : 요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로 제한할 수 있다.
z-index 속성은 static이 아닌 요소들간의 위아래 배치 순서를 지정한다.
auto는 0과 같고, 같은 값의 요소들 중에서는 나중에 배치된 것이 위로 올라온다.
예를 들어
div.1 {
background-color: red;
width: 20px;
height: 20px;
z-index : 1
}
div.2 {
background-color: blue;
width: 20px;
height: 20px;
z-index : 2
}
이렇게 두 개의 요소가 있으면 z-index의 숫자가 놓은 div.2 가 제일 위에 올라온다.
-------------------------------------------------------------------------------------------------------
cursor 속성
말 그대로 마우스 커서의 여러 요소들이다.
cursor: auto;
cursor: default;
cursor: pinter; 등 여러 커서들이 있다.
-------------------------------------------------------------------------------------------------------
요소를 숨기는 세 가지 방법
1. opacity 속성을 0으로 해서 감춘다. but 마우스 클릭 효과는 나타남
2. visibility 속성을 visible 에서 hidden으로 바꾼다. hidden으로 하면 요소도 사라지고
마우스 오버 효과나 포커스, 클릭도 무효된다
3. display 속성을 none으로 하면 효과들에 더해 자리도 차지하지 않는다.
만약 사이에 껴져있는 요소의 display 속성을 none으로 하면 밀려서 원래 존재하지 않는 것처럼 된다.
추론 : display:none; 속성은 주석 /* */ 과 똑같은 기능이지 않은가?
-------------------------------------------------------------------------------------------------------
flex 레이아웃
기본적으로 flex 레이아웃을 쓰기 위해선 display 속성이 flex가 되어야한다.
inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다.
display: flex;
flex-direction 속성을 사용하여 지정한다.
row : 기본값이고 아이템이 가로방향으로 흐른다. 좌>우
row-reverse : 아이템이 가로방향으로 흐른다. 우>좌
column : 아이템이 세로방향으로 흐른다. 상>하
column-reverse: 아이템이 세로방향으로 흐른다. 하>상
flex-wrap 속성을 이용하여 내부 요소의 갯수 길이가
컨테이너를 넘어갈 때 여러 줄에 걸져 나열할지 여부를 정한다.
flex-wrap:wrap 일때 아이템들을 여러 줄로 묶는다.
justify-content는 메인 축에서 아이템들을 정렬할 방식을 정한다.
flex-start(end)는 row(column)-reverse의 영향을 받는 점에서
start(end) 와 다르다.
justify-content:flex-start;는 컨테이너와 아이템이 맨 왼쪽에 딱 달라붙어있다
justify-content:center; 는 컨테이너 가운데 아이템들이 정렬되어있다.
align-items는 교차축(메인 축의 반대) 에서 아이템들을 정렬할 방식을 정한다.
기본값으로 stretch이며,
align-items:stretch; 는 container의 교차축을 채우기 위해서 아이템들을 늘린다.
align-items:flex-start; 는 아이템들을 시작점으로 정렬한다.
align-content는 교차축의 정렬 방법을 설정한다. wrap으로 아이템이 여러 줄이 될때
사용해서 보다 다양한 방식으로 정렬할 수 있다.
justify는 메인축.
align은 교차축.
gap 속성으로는 아이템 간에 간격을 줄 수 있으며 두 개의 값을 넣어서
가로 간격과 세로 간격을 다르게 지정하는 것도 가능하다.
flex 컨테이너 안 아이템의 속성들.
flex-basis는 아이템의 (공간 배분 전) 기본 너비 설정이다.
기본값은 auto 이지만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용된다.
flex-grow는 아이템의 증가 너비 비율을 설정한다.
기본 값은 0으로 숫자가 클 수록 더 많은 너비를 가진다.
만약 3개의 아이템들의 grow 값이 1,2,3 순서면 빈 공간을 가져가는 비율은 1:2:3 이다.
flex-shrink는 전체 공간이 부족할 때 아이템이 감소하는 너비의 비율을 설정한다.
기본값은 1이며, 숫자가 크면 더 많은 너비가 감소한다. 값이 0이면 효과가 없다.
flex 속성으로 한 줄에 나타낼 수 있다.
flex: (flex-grow 값);
flex: (flex-grow 값) (flex-basis 값);
flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);
order 속성
아이템의 순서를 설정한다. 숫자가 클 수록 순서가 밀린다.
음수도 허용!
예를들어 a,b,c,d, 아이템이 있는데
순서대로
oder:1;
oder:2;
oder:3;
oder:4;
숫자값을 받았다면
a가 제일 우선 순위, d가 제일 나중 순위가 된다.
'코딩' 카테고리의 다른 글
| 9.form 태그. (0) | 2022.11.21 |
|---|---|
| 8. 박스모델 복기 (0) | 2022.11.19 |
| 6.CSS-2 (2) | 2022.11.18 |
| 5.html (0) | 2022.11.17 |
| 4.Semantic tag와 non-Semantic tag의 차이 (0) | 2022.11.15 |