CSS
css를 본격적으로 활용하기 시작하면서 더욱 이해도와 숙련도가 낮다는 것을 알게되었다.
css는 웹에 있어서 정말 중요한 요소임에도 이해도가 없으니 더 익히려는 노력을 해야겠다.
#1 css 적용했음에도 변하지 않을때
1)기본케이스
css는 기본적으로 부모요소를 따른다고 한다.
간단해 보일지 모르겠지만 이것은 정말 중요하다.
가령
<html>
<body>
<div class=“baby”></div>
</body>
</html>
라고 했을때 css의 선택자로 baby에 적용시킬 것을 썼음에도 적용이 안되었다면
body태그에서 무언가 적용이 되어있어서 막힌것이고
body태그를 건드려도 변화가 없다면 더욱 상단인 html태그에 의해 무언가 막힌것이라고
해석하면 되겠다.
이게 가장 기본이고
2)응용케이스
만약 1.html이라는 파일에서 2.html이라는 파일을
iframe태그로 불러와서 사용중이라면
2.html을 수정할때의 순서는 1)기본케이스를 빗대어서 설명할경우
2.html의 div.baby < 2.html의 body < 2.html의 html < 1.html의 iframe < …
이런식으로 진행이 된다는 점을 알아야한다.
#2 %원리
width: 100%;
이런식의 %를 사용하는 css를 많이 보게 된다.
이 %원리도 사실상 #1의 설명과 같은 궤를 같이 한다.
최 하위 태그가 100%면 그 최 하위 태그를 감싸고있는 태그가 40px일 경우
최 하위 태그도 40px이 되는것이고
최 하위 태그가 100% < 하위 태그가 80% < 중위 태그가 60% < 상위 태그가 10px이였다면
계산법은 이러하다
10px * 0.6 * 0.8 * 1
이 경우 즉, 4.8px이 적용되는 것이다.
#3 셋트 css도 있다.
css 초보도 아닌 입문에 가까운 실력이라 다 알수는 없겠으나
css에는 짝궁이 있기도 하다.
이를테면
flex-direction과
justify-content이다.
flex-direction으로 가로, 세로 중에서 선택하게 되고
justfy-content는 flex-direction에서 설정된 방향을 기준으로
거진 20가지 기능이 있는것같아서 적지는 않겠다
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
여기를 참고하면 된다.
#4 css를 적용할때 확인하는 방법
보통은 background-color를 먹이고 그 색상이 차지하는 영역과 모습을 확인하면서
진행한다.
'Web > Css' 카테고리의 다른 글
| (*매우중요) CSS - block요소, inline요소 (1) | 2023.01.07 |
|---|---|
| (*매우중요) CSS - box model(박스 모델) (0) | 2023.01.07 |
| CSS - 정렬 (0) | 2022.12.30 |
| CSS - border-box, content-box 실무에서는 어떤걸 적용하는가 (0) | 2022.12.30 |
| css - Transition (0) | 2022.11.18 |
