CSS : display & border

CSS : display & border

---

display 속성

• display 속성은 요소를 블록 요소와 인라인 요소중 어느 쪽으로 처리할지 정의한다.
• display에는 미리 정의되어 있는 키워드를 속성 값으로 지정한다. (block, inline, inline-block, none)
  • none은 사용했을때 안 보이게 되는데 사라진 게 아니라 보이지 않게 하는 것이다.
  • inline-block은 블록요소 속성 값이 너비와 높이를 지정해줄 수 있지만 인라인 요소에서는 콘텐츠 부분만 차지하기 때문에 높이와 너비를 지정해줄 수 없다. 그때, inline-block을 사용하면 높이와 너비를 지정할 수 있게 된다.

/* 블록 레벨 요소인 div요소를 인라인으로 하고 싶을때 */
div {
    display: inline;
}
/* 인라인 요소인 span요소를 블록 레벨로 처리하고 싶을때 */
span {
    display: block;
}
/* 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가하고 싶을때 */
span {
    display: inline-block;
}

/* 디스플레이에 표시하지 않고 싶을때 */
div {
    display: none;
}

HTML : 블록(Block)요소 와 인라인(Inline)요소

 

 

 

---

 

 

border 속성 : 단축 속성이다.

---

• border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
• border 속성에는 속성 값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데 이러한 속성을 '단축 속성'이라 한다.
  • { border: (두께) 모양, 색상 } 순으로 입력하면 된다.

/* 두께가 1px인 직선 모양 (solid)의 연두색 테두리 */
span {
    border: 1px solid greenyellow;
}

 

 

 

---

 

 

border 하위 속성

---

• border 속성에 지정하는 값들은 따로따로 지정할 수 있다.

 

 

 

---

 

 

border-color :  테두리의 색상을 지정한다.

---

• color 입력 방식과 동일하다.
• 하단 링크의 color 참고

div {
    border-color: greenyellow;
}
article {
    border-color: #adff2f;
}

footer {
    border-color: rgb(173, 255, 47);
}

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

 

 

 

---

 

 

border-width : 네 면의 테두리의 너비를 지정한다.

---

• thin, medium, think 등의 키워드를 사용하거나 px, em, rem 등의 단위를 사용하여 지정한다.

.div1 {
    border-width: thin;
    border-style: solid;
}
.div2 {
    border-width: medium;
    border-style: solid;
}

.div3 {
    border-width: thick;
    border-style: solid;
}

 

 

 

---

 

 

예제 : think, medium, thick 순

---

안녕하세요 thin 으로 지정 했어요

예제예요 medium 으로 지정 했어요

야호~ thick 으로 지정 했어요

 

 

 

---

 

 

border-style : 테두리의 스타일을 지정한다.

---

/* 테두리를 표시하지 않는다. */
.none {
    border-style: none;
}

/* 테두리를 표시하지 않는다. 주변 요소가 테두리를 가지더라도 표시되지 않는다. */
.hidden {
    border-style: hidden;
}

/* 테두리를 둥근 점으로 여러개 그린다. */
.dotted {
    border-style: dotted;
}

/* 테두리를 직사각형으로 여러개를 그린다. */
.dasahed {
    border-style: dashed;
}

/* 테두리를 하나의 직선으로 그린다. */
.solid {
    border-style: solid;
}

/* 테두리를 두 개의 평행한 직선으로 그린다. */
.double {
    border-style: double;
}

/* 테두리가 파인 것 처럼 그린다. ridge의 반대 이다. */
.groove {
    border-style: groove;
}

/* 테두리가 튀어나온 것처럼 그린다. groove의 반대 이다. */
.ridge {
    border-style: inset;
}

/* 요소가 튀어나온 것 처럼 그린다. */
.outset {
    border-style: outset;
}

 

---

 

예제 : border-style 

---

안녕하세요 border-style : none 입니다.

안녕하세요 border-style : hidden 입니다.

안녕하세요 border-style : dotted 입니다.

안녕하세요 border-style : dasahed 입니다.

안녕하세요 border-style : solid 입니다.

안녕하세요 border-style : double 입니다.

안녕하세요 border-style : groove 입니다.

안녕하세요 border-style : ridge 입니다.

안녕하세요 border-style : inset 입니다.

안녕하세요 border-style : outset 입니다.

 

 

 

---