강의 내용
Web Cafe 만들면서 CSS 배우기
- 플로트를 사용할 때 생기는 문제점 해결
height: 300px;
border-width: 10px;
border-color: blue;
border-style: solid;
<!-- 단축 속성 이용 -->
<!-- 순서는 바뀌어도 상관 없다. -->
border: width style color;
<!-- / 넣는 이유는 포지션과 사이즈를 구분하기 위해! -->
background: color image repeat position /size attachment;단축속성은 border 이외에도 background, padding, margin 등등.. 있다
마진은 박스가 움직이는게 아니라 빈공간만큼 박스가 늘어나는 것
인라인은 라인하이트에 의해 텍스트가 있어야 영역이 잡힘
배경 - background-position: 어떻게 위치가 정해지는지 알아보기
📌
background-image는
이전에는 이미지를 여러개 삽입하려면 하나의 속성 안에 각각 이미지를 넣었어야 했는데
html5부터 요소 박스에 배경 이미지를 지정하는 속성으로 배경 이미지를 콤마(,)로 구분하여 하나의 요소에 다중 배경 이미지를 지정할 수 있게 되었다.
한 번에 이미지를 넣었을 때 이미지가 표시되는 순서는 내가 예상한 결과는 마지막에 넣은 사진이 맨 위에 표시되는 것 첫번째로 넣은 사진이 제일 위에 표시된다.
배경스타일링 컬러를 설정하려면 맨 마지막에 넣어야 한다
float 속성사용으로 인한 이슈 해결방법 4가지
- clearfix
- 부모 요소 float
- overflow:hidden
- display: flow-root
<ul class="memberOnly"> <li><a href="/">로그인</a></li> <li><a href="/">회원가입</a></li> <li><a href="/">커뮤니티</a></li> </ul>이런식으로
순서없는 리스트(ul)를 사용하여 헤더에
로그인, 회원가입, 커뮤니티로 이동할 수 있는 링크를 만드려고 한다.
이렇게 만들면 버티컬 바를 가상요소로 만들 수 있지만 가상요소는 스크린리더에 읽히기 때문에 다음과 같은 방식으로 바꿔봤다.
<!-- ul.memberOnly>li*3>span.divider[aria-hidden="true"{ㅣ}+a[href="/"] -->
<ul class="memberOnly">
<li>
<a href="/">로그인</a>
</li>
<li>
<span class="divider" aria-hidden="true">ㅣ</span><a href="/">회원가입</a>
</li>
<li>
<span class="divider" aria-hidden="true">ㅣ</span><a href="/">커뮤니티</a>
</li>
</ul>/** list-style-type을 사용하여 마커의 스타일을 번경하거나 없앨 수 있음 */
.memberOnly {
/*에이전트 스타일이 padding-left: 40px으로 세팅되어 있어 없애줘야함 */
padding-left: 0;
list-style-type: none;
text-align: right;
font-size: 0;
/*list-style-position 속성은
두줄일 때 두 번째 줄 들여쓰기와 내어쓰기 여부를 결정 */
}
.memberOnly li {
/* list의 요소는 블록요소로 따라서 각 항목은 새로운 줄에서 시작하고, 전체 너비를 차지한다.
하여 가로로 나열된다. 그래서 display: inline; 사용해서 세로로 나열되는 목록을 생성 */
display: inline;
font-size: 1.6rem;
}다음은 결과인데
내가 원하면 방식으로 정렬했다고 볼 수 있지만 자세히 보면 버티컬 바를 중심으로 좌우 간격이 다른걸 볼 수 있다 그래서 위와 같은 방법은 사용하지 않고
float를 사용하여 정렬할 것이다.
📌 display
display는 HTML 요소의 표현 방식을 지정하는 속성으로, HTML 요소는 각각 기본으로 지정된 display 값이 존재하며, 그 값도 매우 다양합니다.
display 속성 값이 "inline"으로 지정된 요소는 자신의 전후로 줄바꿈을 만들지 않으며, 포함하는 요소가 너비에 의해 자동 줄바꿈됩니다. 요소의 폭은 콘텐츠에 따라 결정되며, width 속성으로 요소의 너비를 직접 지정할 수는 없습니다.
"block"으로 지정된 요소는 기본적으로 부모 요소의 너비 전체를 채우며, 요소 박스 전후로 줄바꿈이 생깁니다. 또한 너비(width)와 높이(height)를 설정할 수 있습니다.
그리고 "inline-block"으로 지정된 요소는 "inline"과 같이 요소 전후로 줄바꿈이 생기지는 않지만, block 요소처럼 width, height 속성으로 요소의 크기를 직접 지정할 수 있습니다.
“flow-root” 값을 사용하면 새롭게 BFC(Block Formatting Context)가 생성되기 때문에 float 속성으로 인해 생기는 레이아웃 문제를 해결할 수도 있습니다.
참고: 강사님 노션
📌 float
부모의 박스 영역만큼 라인박스를 그리고 왼쪽 또는 오른쪽으로 띄워준다.
그리고 블록 요소로 바뀌게 되고 라인박스 기반으로 배치된다.
⚠️float 속성을 가진 요소는 주변 요소들이 해당 요소를 감지하지 못하고 흐르게 되는데, 이로 인해 부모 요소의 높이가 감지하지 못하고 축소된다.
이 문제는 다음과 같은 방법으로 해결할 수 있다.
/* 옛날 방식 */
.memberOnly {
background-color: violet;
padding-left: 0;
list-style-type: none;
}
.memberOnly::after {
content: "";
/* clear: both 블록 요소에게만 사용 인라인 요소에 사용하면 무시되기 때문에
블록 요소로 만들어주기 위해 display: table 사용 */
display: table;
/* clear: both - float의 영향권에서 벗어나게 하려고 사용 */
clear: both;
}
.memberOnly li:first-child {
float: left;
}
.memberOnly li:nth-child(2) {
float: left;
}
.memberOnly li:last-child {
float: left;
}/* display: flow-root를 이용한 방식 */
.memberOnly {
padding-left: 0;
list-style-type: none;
/* 자식 요소들이 부모 요소의 컨텍스트를 무시하지 않고 정상적으로 배치되도록 한다. */
display: flow-root;
}
.memberOnly li:first-child {
float: left;
}
.memberOnly li:nth-child(2) {
float: left;
}
.memberOnly li:last-child {
float: left;
}/* overflow: hidden을 이용한 방식 */
.memberOnly {
padding-left: 0;
list-style-type: none;
overflow: hidden;
}
.memberOnly li:first-child {
float: left;
}
.memberOnly li:nth-child(2) {
float: left;
}
.memberOnly li:last-child {
float: left;
}
⚠️사용하긴 간편해보이지만
overflow: hidden의 단점
자식 요소가 부모 요소의 범위를 벗어나면 자식요소가 잘리게 된다.
/*부모 요소 float 사용*/
.memberOnly {
padding-left: 0;
list-style-type: none;
float: right;
}
.memberOnly li:first-child {
float: left;
}
.memberOnly li:nth-child(2) {
float: left;
}
.memberOnly li:last-child {
float: left;
}
display: flow-root를 쓰지 않고float: right를 써도 내가 원하는 방식으로 리스트가 정렬된다. 🤔 무슨 이유일까?
✅ 부모 요소가 자식 요소들과 함께float되면서 독립적인 박스가 만들어져 문제가 해결된다.
/* 내가 생각했던 잘못된 예 */
.memberOnly {
padding-left: 0;
list-style-type: none;
display: flow-root;
}
.memberOnly li:first-child {
float: left;
}
.memberOnly li:nth-child(2) {
float: left;
}
.memberOnly li:last-child {
float: left;
}이렇게 하면 될 줄 알았는데 아래와 같이 순서가 💫엉망진창💫으로 만들어졌다.
마크업을 수정하면 내가 원하는 대로 만들 수 있지만,
그건 맞지 않는 옷(css)에 내 몸(마크업)을 우겨 넣는 것 이기 때문에 나중에 문제가 생길수도 있으니옷(CSS)을 바꾸는 방법으로 수정해 나가야 한다!!
➕ 추가정보(?)
text-align은 블록속성 안에 있는 인라인 속성을 정렬하는 것 따라서 블록속성에서만 사용가능
background-position에서 위치가 정해지는 방법을 알려주는 이미지
