<body>
<ul>
<li>
<strong>A</strong>
<figure>
<img src="rabbit.jpg " alt="a에 대한 사진">
<figcaption>A는 첫 번째 알파벳</figcation>
</figure>
</li>
<li>
<strong>B</strong>
<figure>
<img src="rabbit.jpg " alt="b에 대한 사진">
<figcaption>B는 두 번째 알파벳</figcation>
</figure>
</li>
<li>
<strong>C</strong>
<figure>
<img src="rabbit.jpg " alt="c에 대한 사진">
<figcaption>C는 세 번째 알파벳</figcation>
</figure>
</li>
</ul>
</body>
@charset="utf-8";
/*tag reset*/
body, ul, li, figure {padding:0; margin:0;}
ul {list-style: none;}
ul {width: 260px; margin: 30px auto; padding: 20px; border: 2px solid black;}
ul li {margin-top: 20px; background:ORANGE;}
ul li:first-child {margin-top: 0px;}
ul li strong, ul li figure figcaption {float: left; width: 140px;}
ul li strong {text-indent: 10px; font-size: 1.3em; background: greenyellow;}
ul li figure img {float: right; padding: 4px; border: 1px solid black;}
ul li figure figcaption {background: green; color: white;}
ul li:after {content: ""; clear: both; display: block;}
- 처음에 figure 하위 요소에 float를 각각 주게 되면 자식 요소를 잃은 부모요소가
제대로 자신의 높이를 인식하지 못해 주황색 영역이 제대로 요소를 감싸지 못하고 짧아지게 된다.
- 이러한 문제를 해결 하기 위해서
부모 안에 눈에 보이지 않는 가상 요소를 생성하여 clear:both를 하면 된다.
여기서 알아둬야 할 몇가지 포인트들을 살펴보자.
1. inline요소를 float으로 만들면 크기를 인식할 수 있다.
따라서 원래라면 인라인 요소라 크기 조절을 할 수 없었던 strong태그에 width값을 설정할 수 있었다.
float은 content의 크기만큼 작아져서 설정한 방향으로 들어가는 것이기 때문에
block의 속성을 획득하는 것이다.
2. 가상 요소 만들기
주의할 점은 가상 요소는 content속성을 필수로 한다.
그러나 속성값을 적게 된다면 그 내용이 바깥에 보이게 되므로
인용부호만 남겨두고 그 안은 비워둬야 한다.
ul li:after {content: ""; clear: both; display: block;}
그리고 이러한 가상요소는 display가 따로 정해지지 않았기 때문에
display block으로 설정해준다.
: clear: both는 그 요소가 block일 때 제대로 적용되기 때문이다.
- :before
부모의 첫번째 자식 생성
- :after
부모의 마지막 자식 생성
*가상 요소에 들어가는 클론
css3.0은 ie9이상부터 적용된다.
따라서 ie8브라우저까지는 더블클론을 인식하지 못한다.
: 따라서 선생님은 싱글클론을 웹에,
더블클론은 모바일에 적용하는 경우가 많다고 하심.
3. 텍스트는 한줄에 쓰여지고자 하는 성질이 있다.
따라서 strong과 figcaption에 width값을 줬듯이
부모요소에 따로 너비를 지정해주지 않으면
원하는 폭 이상으로 너비가 넘어가게 되어 레이아웃이 틀어지게 된다.
처음에 텍스트를 품고 있는 부모 요소의 가로폭을 원하는만큼 정확히 정해주는 것이 좋다.
그 밖에 알게된 이론들은 다음과 같다.
- 이미지는 inline요소지만 규격이 있기 때문에
크기를 잘 인식할 수 있는 요소이다.
그래서 padding, margin등을 적용할 수 있다.
- text-indent: 문자를 들여쓰는 것, 내어쓰려면 음수값을 쓴다.
block요소 안에서(ex). strong에 float속성적용되어 block특징갖게 된 상황),
왼쪽 정렬일 경우에만 쓸 수 있다.
br태그를 만나면 그 뒤의 문자는 들여쓰기가 되지 않는다.
- line-height: 텍스트 위아래 여백을 포함한 간격이다. (드래그할 때 생기는 파란 영역)
배수, 퍼센트, 정확한 크기를 지정해줄 수 있다.
배수로 정해줄 때는 뒤에 단위를 붙이지 않는다.
0또한 마찬가지다.
-동일한 태그에 중복되는 스타일을 적용하면 우선순위에 따라 적용이 된다.
개발자 도구에서 우선순위에서 밀린 속성은 취소선이 그어지고 적용되지 않는다.
그렇다면 우선순위(특별성)는 어떻게 계산할까?
+#아이디의 갯수 * 100
+.클래스, 가상 클래스의 갯수 * 10
+일반태그, 가상 요소, 가상 자식요소 (::before, ::after)의 갯수 * 1
를 계산하여 더 큰 숫자가 나오는 선택자가 더 우선적으로 적용된다.
특별성이 똑같은 태그가 있다면
늦게 서술한 것이 더 우선으로 적용된다.
*우선순위를 높이는 방법
- 부모요소를 앞에 써준다.
- !important를 사용한다. (남발하면 안됨)
- ;의 의미
: ~에 해당하는 내용은 끝났다.
따라서 속성값 닫기 전에 !important를 쓰고 ;로 닫아준다.
출처
- 2020 국비교육과정 공부내용
'CSS' 카테고리의 다른 글
| [CSS] CSS방법론 - BEM (Block Element Modifier) (0) | 2023.12.25 |
|---|---|
| [CSS] overflow (0) | 2020.08.15 |
| [CSS] 글꼴 (0) | 2020.08.12 |
| [CSS] 간단한 네비게이션바 만들기 (3) display: inline-block이용하기 (0) | 2020.08.12 |
| [CSS] BOX모델 (0) | 2020.08.12 |