한 줄 정리
border: 선 굵기, 선 스타일, 선 색상 ex) border: 2px soild red
선 스타일 : soild(실선), double(두 줄), dotted(점 선)
border-color: 색상;
border-style: 선 스타일;
border-width: 선 두께;
display: inline (인라인으로 처리한다)
block (블록으로 처리한다)
inline-block (인라인이면서, 블록 속성을 가지게 한다)
none (디스플레이 화면에 나오지 않지만, 개발자 도구에는 존재한다)
list-style : 리스트 모양 (리스트 목록의 앞에 문자를 바꿔준다)
리스트 모양 custom해서 사용하기
.menu2{
list-style: none;
}
.menu2 li::before{
content: '善溢';
}
## CSS 서식관련 속성(목록 스타일)
-목록 스타일은 상단바 네비게이션을 만들 때 주로 사용된다.
-나중에는 list-style-image: url(아이콘 이미지경로)를 사용할 수 도 있고
CSS가상 클래스 :befor를 사용하여 원하는 기호를 사용할 수 도 있다.
<body>
<ol class="menu">
<li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li>
<li>menu-4</li>
<li>menu-5</li>
</ol>
</body>
.menu{
list-style: lower-greek;
list-style: lower-alpha;
}
-목록에서 정하는 것 뿐만 아니라, 내가 원하는 기호로 저장할 수 있다.
.menu2{
list-style: none;
}
/* 가상클래스 befor를 사용하여 원하는 기호를 사용할 수 있다 */
.menu2 li::before{
content: '善溢';
}
.menu2 li::before{
content: '♥';
}
## 블록 레벨 요소 vs 인라인 요소
-블록 레벨 요소
: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (div, h1, p등...)
-인라인 요소
: 자기에게 필요한 만큼의 공간만 차지한다. (span, a등...)
-만약 <a>태그를 생성하게되면 블록이 없는 필요한 만큼의 공간만 차지하는 인라인 요소가된다.
이때 만들어진 <a> 요소가 블록을 형성하게 하고 싶다면 CSS의 disply를 사용하게되면 블록요소로 변경이 가능하다.
그 반대로 블록 요소를 인라인 요소로도 변경은 가능하다.
# disply 속성값
-disply에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
==================================================================
| 속성값 | 의미 |
----------------------------------------------------------------------------------------------------------------
| inline | 인라인으로 처리한다. |
div{
border: 2px solid red;
display: inline;
}
----------------------------------------------------------------------------------------------------------------
| block | 블록 레벨로 처리한다. |
span은 인라인 레벨 요소이지만, block을 적용하니, block 레벨 요소로 변경이 된다.
span{
border-style: solid;
border-radius: 2px;
border-color: blue;
display: block;
}
----------------------------------------------------------------------------------------------------------------
| inline-block | 인라인으로 배치하되 블록 레벨의 요소 속성을 추가할수 있도록 처리한다. |
인라인 요소는 기본적으로 크기를 가질 수 없다.
div{
border: 2px solid red;
width: 300px;
height: 50px;
}
span{
border: 2px solid blue;
width: 300px;
height: 50px;
}
하지만, 여기서 display: inline-block을 넣어주면,
span이 인라인이면서도 블럭 속성을 가지겠다는 의미가 되어서,
div{
border: 2px solid red;
width: 300px;
height: 50px;
}
span{
display: inline-block;
border: 2px solid blue;
width: 300px;
height: 50px;
}
이렇게 결과가 나온다.
----------------------------------------------------------------------------------------------------------------
| none | 디스플레이(표시)하지 않는다. |
화면에는 존재하지 않지만, 개발자 도구에서는 존재한다.
div{
border: 2px solid red;
display: none;
}
==================================================================
# border 속성
-인라인 레벨이나 블럭 레벨의 크기 만큼 테두리를 생성해준다.
-border 속성을 사용하게되면 요소가 차지하고있는 영역에 테두리를 그릴 수 있다.
-border 속성에는 속성값으로 테두리의 모양, 두께, 색상을 지정할 수 있다.
<body>
<div>div는 블럭 레벨 요소입니다.</div>
<span>span 태그는 인라인 요소입니다.</span>
</body>span{
border-style: solid;
border-radius: 2px;
border-color: blue;
}
-위의 코드를 한 줄로 정렬해서 아래처럼 사용이 가능하다.
-순서는 바껴도 상관 없음
div{
border: 2px solid red;
}
border : 선의 굵기 선 스타일 선 색상;
선 스타일 : soild(실선), double(두 줄), dotted(점 선)
##박스 모델
# Box-model
-브라우저가 요소를 랜더링할 때 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게된다.
-이 영역을 박스라고하며 CSS는 박스의 크기, 위치, 속성을 결정할 수 있다.
-border-style : 테두리의 스타일을 지정할 수 있다.
# solid
# dashed
# dotted
# double
# inset
# outset
# groove
-border-color : 테두리의 색상을 지정할 수 있다.
# 키워드
# RGB
# RGBA
# RGB함수
-border-width : 테두리의 굵기를 지정할 수 있다.
# px
.box{
width: 200px;
height: 200px;
border-color: orange;
border-width: 5px;
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: inset;
border-style: outset;
border-style: groove;
}
.box{
width: 200px;
height: 200px;
border: 2px soild dodgerblue;
border-top: 5px dotted red;
border-bottom: 3px dashed blue;
border-right: 2px soild green;
border-left: 4px double orange;
}
.box{
width: 200px;
height: 200px;
border: 2px solid dodgerblue;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.box{
width: 200px;
height: 200px;
border: 2px solid dodgerblue;
border-radius: 50px;
}-한 줄로도 모서리를 둥글게 가능하다.
-radius를 일일이 넣어줄 필요없고, 해당 번호를 기억하자.
.box4{
border-radius: 0px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}.box4{
border-radius: 50px 0px 50px 0px
}
-이런 도형들도 가능해요
<body>
<div class="box1"><strong>box1</strong></div>
<div class="box2"><strong>box2</strong></div>
<div class="box3"><strong>box3</strong></div>
<div class="box4"><strong>box4</strong></div>
<br>
<div class="box5"><strong>box5</strong></div>
<div class="box6"><strong>box6</strong></div>
<div class="box7"><strong>box7</strong></div>
<div class="box8"><strong>box8</strong></div>
</body>div{
width: 200px;
height: 200px;
background-color: dodgerblue;
border: 10px solid orange;
border-radius: 15px;
display: inline-block;
margin: 10px;
text-align: center;
line-height: 200px;
color: white;
}
.box2{
border-radius: 40px;
}
.box3{
border-radius: 200px;
}
.box4{
border-radius: 50px 0px 50px 0px
}
.box5{
border-radius: 200px 0px 0px 0px
}
.box6{
border-radius: 200px 200px 200px 0px;
}
.box7{
border-radius: 200px 0px 200px 0px
}
.box8{
border-radius: 200px 200px 0px 0px;
}
-일일이 도형을 설정해줄 필요 없이, 처음에는 div로 전체 도형 스타일을 설정해준다.
-각각의 세부사항은 class 선택자를 사용해서 변경해준다.
'CSS↗' 카테고리의 다른 글
| CSS 요소의 배경 설정(background) (0) | 2024.04.08 |
|---|---|
| CSS padding, margin / 박스 크기 계산 (0) | 2024.04.08 |
| CSS 텍스트 관련 속성 (0) | 2024.04.05 |
| CSS 선택자 1 (0) | 2024.04.05 |
| CSS란 / HTML에 CSS 입히기 (0) | 2024.04.05 |