CSS의 기본
2024.01.06 - [data lab] - CSS의 첫 시작, 기본 중의 기본 태그 모음 알아보기 (HTML CSS)
2024.01.11 - [data lab] - CSS 속성과 속성값 설명 CSS 태그 모음
CSS 속성과 속성값 설명 CSS 태그 모음
글꼴 관련 스타일 font-family 속성은 을 지정한다. 기본형 : font family: | [, ] ex) body { font-family: "맑은 고딕", 돋움, 굴림 } 기본형 기호 : | 의 중간이 뚫려있는, 마치 : 처럼 생긴 기호가 있는데, 일단
successdatalab.com
이어서, 블록 레벨 요소란, 태그를 사용해 요소를 삽입햇을 때 혼자 한 줄을 몽땅 차지하는 것을 가리킨다.
따라서 블록 레벨 요소의 좌측 혹은 우측에는 다른 요소가 올 수 없다.
예를 들어 h1, div, p 등이 있다.
인라인 레벨 요소는 한 줄을 차지하지 않는다. 예를 들어 span, img, strong 등이 있다.
박스 모델 요소라 함은, 블록 레벨 요소와 같이 박스 형태를 말한다.
박스모델에서 컨텐츠 영역 크기를 정할 때 너비는 wiodth, 높이는 height속성을 사용한다.
그에따른 속성값의 종류는 크기, 백분율, auto가있다.
auto는 컨텐츠의 양에 따라 박스 모델의 크기가 정해지며 기본값이다.
백분율은 부모요소를 기준으로 박스모델의 크기를 지정한다.
ex)
.box {
width : 400px;
height : 100px;
}
box-sizing 속성은 <박스 모델의 크기를 계산>한다.
해당 속성값은 테두리까지 포함해서 너빗값을 지정하는 border-box 와 콘텐츠 영역만 지정하는 (기본값) content-box 가 있다.
box-shadow 속성은 박스 모델에 그림자 효과를 준다.
기본형 : box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset;
이며, inset은 표시하게되면 안쪽 그림자로 그린다. 흐림정도는 0이면 진한그림자, 커질수록 부드러워진다.
border-style 속성은 테두리 스타일을 지정한다.
none(기본값), hidden, solid, dotted, dashed, double, groove, inseet, outset, ridge가 있다.
border-width 속성은 테두리 두께를 지정한다.
기본형 border-width : <크기> thin | medium | thick
border-color 속성은 테두리 색상을 지정한다.
border-top-color 처럼 중간에 테두리 방향을 넣어주면 하나하나 다르게 지정할 수도 있다.
border 속성은 모든걸 아우른다.
style, width, color 모두 border 속성안에서 전부 지정할 수 있다.
border-radius 속성은 둥근 테두리를 만든다.
기본형 border-radius: <크기> | <백분율> 각각의 꼭짓점은 border-top-left-radius 처럼, 네 꼭짓점 모두 표현 가능하다.
참고로 순서는
안쪽부터 content - padding - border - margin 이다. 그 중 margin에 대해 알아보겠다. margin 또한 박스모델의 top, right, bottom, left 처럼 방향이 있다. margin-left 와 같은 방식으로 지정해주면 된다.
margin 속성은 요소 주변의 여백을 설정한다.
margin : <크기> | <백분율> | <auto>
margin 속성을 이용해 웹 문서 가운데 정렬하기
컨텐츠의 너빗값이 절댓값으로 정해져있으면, margin 20px auto; 이런식으로 작성하게 되면 위아래 마진은 20px 로 고정되고 좌우 마진은 자동으로 설정된다고 한다. 근데 이해 안된다. 앞에 두개가 왜 top 이랑 bottom이지?
margin 속성은 박스가 위아래로 중첩돼있을 때, 두개가 맞닿으면 더 큰쪽의 값만 남고 중첩된다.
padding 속성은 콘텐츠 테두리 사이의 여백을 설정한다.
얘 또한 padding-bottom 처럼 설정 가능하다.
display 속성을 사용해 배치 방법 결정할 수 있다.
속성값은
block-인라인 요소를 블록레벨 요소로 만든다,
inline-블록레벨 요소를 인라인 요소로 만든다,
inline-block-둘의 속성을 모두 가진다? 아하 블록레벨 요소로 수평으로 나열된 버튼같은거 만들 때 쓰는구나,
none 등이 있다.
기본형 display : 속성값;
궁금한점 !!
box-sizing 속성은 *{ box-sizing : border-box; } 이런식으로 쓰나?
float 속성을 사용해 왼쪽이나 오른쪽으로 배치할 수 있다.
속성값 : left, right, none 말그대로 그 위치에 배치한다는거다. 블록레벨요소도 수평으로 여러개 배치할 수 있게.
float 속성을 해지하는 속성은 clear이다.
속성값으로는 right, left, both가 있다. 밑의 사진은
position 속성은 웹 요소의 위치를 지정한다.
속성값으로는 static-기본값. 문서의 흐름에 맞춰 배치, relative-위치값 지정 가능한 static, absolute-relative 값 사용한 상위요소 기준 위치 지정, fixed-브라우저 창을 기준으로 위치 지정
left, right, top, bottom '속성'은 웹 요소의 위치를 정한다. 각각 의미는, 해당 속성에서 얼마나 떨어져있는지를 의미한다.
ex) top : 30px ; == 위에서 30픽셀 떨어져있다는 의미.
'data lab' 카테고리의 다른 글
| 파이썬 기본 - list , dictionary 자료형 (2) | 2024.03.21 |
|---|---|
| 파이썬 dictionary 자료형 딕셔너리 (0) | 2024.03.21 |
| CSS 속성과 속성값 설명 CSS 태그 모음 (0) | 2024.01.11 |
| CSS 텍스트 관련 속성 모음 (0) | 2024.01.09 |
| CSS의 첫 시작, 기본 중의 기본 태그 모음 알아보기 (HTML CSS) (0) | 2024.01.06 |