속성-display
요소의 rendering box 유형을 결정
- display : value;
display :none;
display:inline;
display:block;
display:inline-block;
display:list-item;
display:flex;
display:inline-flex;
display:table;
display:table-cell;< 속성 값 >
- none : 요소가 렌더링 되지 않음
- inline : inline level 요소처럼 렌더링
- block: block level 요소처럼 렌더링
- inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐
- height 나 width 등과 같은 박스모델 속성을 적용할 수 있다
- 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재
- inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.
display와 box model의 관계
| display | width | height | margin | padding | border |
|---|---|---|---|---|---|
| block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
| inline | X | X | 좌/우 | 좌/우 | 좌/우 |
| inline-block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
좌/우의 경우 상하도 되나 실제로는 사용하지 않는다.
<div>
<div style="display:none">box1</div>
<span>span</span>
<ul>
<li>li</li>
</ul>
</div>
<div>
<div style="display:inline">box2</div>
</div>
<div>
<div style="display:block">box3</div>
</div>
<div>
<div style="display:inline-block">box4</div>
</div>시행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-13.html
- box1
display:none이 선언된 box1은 디스플레이에서 보이지 않는다- span - li
-
span은 span만의 inline영역을 가지고 있다.
-
ui는 block의 영역을 가지고 있다.
-
-
li는 block영역을 가지고 있다.
-
box2 : inline으로 선언된 box2는 box2만의 inline영역을 가지고 있으며 auto로 영역크기가 지정되어있다.
-
box3 : block으로 선언되어있으며 영역크기가 지정되어있다.
-
box4 : line-block으로 지정되어있고 inline 과는 다르게 크기값이 지정되어있다
inline, inline-block
inline, inline-block
- inline과 inline-block은 다른 값과는 다르게 박스 모델이 옆에 배치된다.
- 두 요소를 코드로 입력할때
<div style="display:inline-blcok">box</div><div style="display:inline-blcok">box</div>
<div style="display:inline">box</div><div style="display:inline">box</div>개행이나 띄어쓰기 없이 연결하면 실제 박스도 여백공간없이 이어진다.
속성-visibility,float
실행 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-15.html
visibility 속성
요소의 화면 표시 여부를 지정하는 속성입니다.
기본 값 : visible
visibility: visible | hidden | collapse | initial | inherit;| visible | 화면에 표시 |
|---|---|
| hidden | 화면에 표시되지 않음(공간은 차지함) |
| collapse | 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) |
visibility: visible; /* 보임 기본값 */
visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */display: none과 차이점
- display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
- visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)
- 참고 :
속성-float
float 속성
요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.
기본 값 : none
float: none | left | right | initial | inherit;| none | float 시키지 않음(기본값) |
|---|---|
| left | 좌측으로 float 시킴 |
| right | 우측으로 float 시킴 |
- 요소를 보통의 흐름에서 벗어나 띄어지게 함
- 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음
- 대부분 요소의 display 값을 block으로 변경함
- 예외 inline-table, flex는 예외이다
float는 한글로 치면 일종의 글위의 요소 같은느낌으로 개별적으로 떠서 원래있던 요소 위에 겹쳐지게 된다.
자식요소인데도 부모요소 안에 생성되는게 아니라 밖으로 위로 떠서 빠져나온다,
<div style="float:left;">Box1</div>
<div style="float:left;">Box2</div>
이 경우 p요소가 들어가 p가 키워둔 부모요소의 크기때문에 부모요소 안에 존재하게된다
각각 왼쪽 오른쪽으로 선언되었기때문에 p요소안에 왼쪽 오른쪽으로 자리를 잠고 텍스트가 float요소의 아래가 아니라 주변에 위치하여 감싸주는것처럼 보이게 된다.
<div style="float:left;">Box1</div>
<div style="float:right;">Box2</div>
<span style="float:left;">inline1</span> inline1의 값은 span으로 선언되어 inline2와 동일하게 보여야 하지만 float를 선언하면 display:block으로 인식돼 보이게 된다
<span style="float:left;">inline1</span>
<span>inline2</span>clear,position
Clear
실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-16.html
clear 속성
요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.
기본 값 : none
clear: none | left | right | both | initial | inherit;| none | 양쪽으로 floating 요소를 허용(기본값) |
|---|---|
| left | 왼쪽으로 floating 요소를 허용하지 않음 |
| right | 오른쪽으로 floating 요소를 허용하지 않음 |
| both | 양쪽으로 floating 요소를 허용하지 않음 |
block-level 요소만 적용 가능
clear는 앞에 floatine요소가 있다고 하더라도 겹쳐지지 않고 자신을 존중하여 표현하는 요소이다.
none;의 경우 아무것도 나타나지 않고
left의 경우 float:left가 선언된 다음값 바로 밑에 나타난다
right도 마찬가지
both를 선언하면 전에 left right어떤 float값이 있더라도 겹쳐지거나 둘러싸지 않고 바로 그 밑줄에 출력된다
float가 선언되어 부모요소에서 뜨게된 경우 다음요소에 clear를 선언하며 부모요소 밖에서 float요소가 겹쳐지거나 둘러 싸는등 영향을 주지 않도록 한다
span같은 inline요소에 경우 반드시 display:block;을 선언해주어야 한다
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/clear
position
실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-17.html
position 속성
요소의 위치를 정하는 방법을 지정하는 속성입니다.
기본 값 : static
position: static | absolute | fixed | relative | sticky | initial | inherit;| static | Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값) |
|---|---|
| absolute | 부모 요소의 위치를 기준으로 offset 에 따라 배치된다.부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다.* |
| 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다.Normal-flow의 흐름에서 벗어난다. | |
| fixed | 뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. |
| 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다.부모의 위치에 영향을 받지 않는다. | |
| relative | 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. |
| 부모의 position 속성에 영향을 받지 않는다.Normal -flow의 흐름에 따른다.주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다 |
- Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.
offset(top/left/bottom/right)
실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-18.html
위좌하우 위치 값을 지정한다. - 기준은 부모요소이다
top|bottom|left|right: auto|length|initial|inherit;top: 50%;
left: 10px;
bottom: -10px;
right: auto;
- offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right
(좌우) 는 width값에 대하여 계산되어집니다.
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/position
-
static- 기본값, 설정해준 그 위치에 그대로 있는다
-
relative - 고정적인 자리를 선택해주면 그 자리에 고정되어있는데 offset값을 설정하지 않으면 static과 똑같다.
- 고정적 값을 설정해줘도 원래 있어야 할 공간은 비워둔채 고정되어있다.
- 부모값이 static이 아니어야 한다.
-
absolute - relative와달리 원래 있어야할 값에서 삭제된다. inline속성이라도 무조건 block으로 변경된다.
- 부모영역에 반드시 relative가 선언되어있어야 부모영역을 기준으로 이동한다.
- 아닌경우 조상요소 조상요소에도 relative가 없는 경우 body를 기준으로 한다
-
fixed - 화면안에서 고정된 값을 가진다 스크롤을 움직여도 항상 화면에 고정된 노출값을 가진다-
부모위치와 상관없이 브라우저를 기준으로 자리가 지정된다.
-
offset의 좌표 padding과 content값을 기준으로 함 border와 margin은 포함되지 않음
Z-index
실행결과 :
https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-19.html
https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-20.html
z-index 속성
기본 값 : auto
요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.
z-index: auto | number | initial | inherit;| auto | 쌓임 순서를 부모와 동일하게 설정(기본값) |
|---|---|
| number | 해당 수치로 쌓임 순서를 설정(음수 허용) |
z-index: 1;- position 값이 static이 아닌 경우 지정가능(position이 반드시 지정되어있어야 함)
- 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
- 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
- 큰 값이 가장 위쪽(음수 사용 가능)
z-index란 커질수록 겹쳐졌을때 앞으로 나오는것을 뜻한다 맨앞으로 같은뜻이다.
자식요소보다 부모요소의 z-index값이 우선시 한다
5주차 과제
실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/6-2.html
1. 툴팁 너비는 최소 150px이어야 합니다.
2. 툴팁 내 텍스트와 border 색은 검은색입니다.
3. 툴팁 내 텍스트 font weight는 400입니다.
4. 툴팁 내 텍스트 font size는 0.875rem입니다.
스타일을 제대로 수정했으면 이렇게 툴팁이 보여야 합니다.
스타일의 비교
.tooltip {
/* 처음엔 툴팁이 숨어있습니다. */
display: none;
background: white;
border: 1px solid;
}
/*
마우스를 오버했을 때, 툴팁을 보여줍니다.
*/
.tooltip-trigger:hover .tooltip {
display: block;
}
p {
max-width: 300px;
}
.tooltip-trigger {
font-weight: bold;
color: seagreen;
text-decoration: none;
}
</style>.tooltip {
/* 처음엔 툴팁이 숨어있습니다. */
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}
/*
마우스를 오버했을 때, 툴팁을 보여줍니다.
*/
.tooltip-trigger:hover .tooltip {
display: block;
position: absolute;
min-width: 150px;
}
p {
max-width: 300px;
}
.tooltip-trigger {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:block;
}
</style>.tooltip {
/* 처음엔 툴팁이 숨어있습니다. */
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}- 과제의 조건2에 따라 툴팁안에 요소의 글 색상을
color: black으로 선언했습니다 - 과제의 조건2에 따라 border의 색상을
border: 1px solid black;로 선언했습니다. - 과제의 조건3에 따라 font의 굵기를
font-weight: 400;으로 선언했습니다. - 과제의 조건4에 따라 font의 크기를
font-size: 0.875rem;으로 선언했습니다. - 과제의 예시값과 비슷하게 보이게 하기위해
padding: 3px;을 선언했습니다.- 아래의 여백값이 적어보여
padding-bottom: 8x;을 선언했습니다. - padding-bottom선언시 padding값과 padding-battom의 값이 합쳐지지않고 나중에 선언된 padding-bottom의 값이 유지됩니다.
- 아래의 여백값이 적어보여
.tooltip-trigger:hover .tooltip {
display: block;
position: absolute;
min-width: 150px;
}- 과제의 조건1에 따라
min-width: 150px;을 선언했습니다.- 부모요소에서
max-width: 300px;이 선언되어있기때문에 툴팁에 content에 많은 값이 들어가면 최대 300px까지 가로값이 넓어지며 그 이상은 다음줄로 넘어갑니다.
- 부모요소에서
- 툴팁이 텍스트에 감싸지거나 텍스트를 밀어내지 않고 그 위에 올라가게 하기 위해
position: absolute;를 선언했습니다.
.tooltip-trigger {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:inline-block;
}
</style>- 그래픽 유저 인터페이스를 개행하기 위해
display:inline-block;을 선언하였습니다. inline-block은 개행후 같은줄에 텍스트가 연속적으로 출력됩니다.
결과
과제에서 요청한 스타일로 결과가 출력됨을 확인할수 있습니다.
심화학습
결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/6-20.html
- 다른 position의 값과 clear, float를 활용하여 어떻게 출력되는지 비교해보고자 합니다.
inline-block
/*inline-block을 선언하고자 하는 요소입니다--*/
.tooltip1 {
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}
.tooltip-trigger1:hover .tooltip1 {
display: inline-block;
position: absolute;
min-width: 150px;
}
.tooltip-trigger1 {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:inline-block;
}출력결과
- inline-block선언시 툴팁은 아래쪽이 아니라 오른쪽에 같은 줄에 선언됨을 확인할수 있습니다.
inline
/*inline-block을 선언하고자 하는 요소입니다--*/
.tooltip2 {
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}
.tooltip-trigger2:hover .tooltip2 {
display: inline;
position: absolute;
min-width: 150px;
}
.tooltip-trigger2 {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:inline-block;
}출력결과
- inline-block과 마찬가지로 오른쪽 같은 줄에 툴팁이 나타남을 확인할수 있습니다.
- 이 한 경우에서는 inline-block과 inline은 큰 차이를 보이지 않습니다.
float:left
/*float:left을 선언하고자 하는 요소입니다--*/
.tooltip3 {
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}
.tooltip-trigger3:hover .tooltip3 {
display: block;
float: left;
width: 60px;
}
.tooltip-trigger3 {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:none;
}- float값이 강조되게 하기위해 width의 값을 60px로 조절했습니다.
- 툴팁을 텍스트가 감싸게 하기위해 display:none;을 선언했습니다.
출력결과
- float-left선언시 툴팁은 다른값을 오른쪽으로 밀어내고 나머지 텍스트 값이 감싸지는 것을 확인할수 있습니다
clear:both
<p>
말풍선 또는 툴팁(tooltip)은 공통<br>
<a href="/" class="tooltip-trigger3">
그래픽 유저 인터페이스
<span class="tooltip3">
툴팁은 float-left 아래는 clear:both가 선언되어있습니다
</span>
</a><span style="clear:both; display:block;">
요소로, 마우스 포인터라 불리는 커서와 함께 동작한다. 사용자가 커서로 항목을 클릭하지 않고 가리키면 조그마한 상자가 항목 위에 나타나서 보충 설명을 보여준다.</span>
</p>- float left를 똑같이 선언했던 요소를 사용하였습니다.
- 툴팁의 아래값에 span태그를 추가하였습니다.
<span style="clear:both; display:block;">span에 clear:both를 선언하기 위해 display:block도 함께 선언해주었습니다.
출력결과
- span태그로 clear:both를 선언한 값들이 툴팁을 감싸지 않고 밀어내져 아래에 위치하는 것을 확인할수 있습니다.
position:relative
/*position:relative 선언하고자 하는 요소입니다--*/
.tooltip4 {
display: none;
background: white;
border: 1px solid black;
color: black;
font-weight: 400;
font-size: 0.875rem;
padding: 3px;
padding-bottom: 8px;
}
.tooltip-trigger4:hover .tooltip4 {
display: block;
position:relative;
min-width: 150px;
}
.tooltip-trigger4 {
font-weight: bold;
color: seagreen;
text-decoration: none;
display:inline-block;
}출력결과
- 툴팁이 아래 텍스트를 밀어냄을 확인할수 있습니다.
- float:left, clear:both의 선언과 다른점은 relative는 값이 선언되어있는 ‘그래픽 유저 인터페이스’라는 텍스트를 밀어내지 않고 아래에 위치하게 되는 점입니다.
