2022-05-09
HTML 웹페이지 문서의 구조화 연습, 스타일 적용, CSS규칙 알기
CSS란?
(Cascading Style Sheet) 문서에 색, 모양, 출력 위치 등 외관을 꾸미는 언어. 웹 문서의 내용과 상관없이 디자인만 변경할 수 있으며, 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
-
문서를 구조화 시킬 때 비슷한 속성들은 한 번 더 묶어주는 것이 좋다. 이미지는 이미지끼리, 텍스트는 텍스트끼리...
-
훗날 콘텐츠를 옮겨야 할 경우 그 수고를 줄이도록 구성한다.
-
CSS 스타일 시트는 대소문자 구분이 없다.
-
외부 CSS 시트를 가지고 올때는
@charset "utf-8";를 가장 먼저 써야한다 -
스타일 속성 지정 조건은 여러가지 형식이 있다
input[type=button] {background-color:red;}
그룹화
<nav> : 네비게이터. 요소를 연결 시켜주는 태그
<article></article> : 해당 페이지에서 다른 페이지로, 혹은 다른 곳에서 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다. 떼었다 붙였다 할 수 있는 포스트잇 같음. 보조 기술 사용자를 위한 의미있는 태그 중 하나.
CSS 규칙
1. 스타일 상속 : 따로 있었다면 중복으로 쓰여질 코드를 줄여준다
2. 캐스케이딩(Cascading) : 위에서 아래로 흐르는, 상속 또는 종속하는. 따로 존재하는 여러 스타일시트 태그를 합쳐서 적용시킨다.
3. 오버라이딩(Overriding) : 덮어쓰기 느낌. 동일한 CSS 프로퍼티에 대해 서로 다른 스타일이 설정 되었을 경우 우선 순위가 높은 스타일을 적용하는 규칙
‼ 같은 프로퍼티에 대해 서로 다른 스타일이 설정 되었을 경우 충돌이 일어난다. 그 경우 아래의 규칙에 의해 결정된다.
1) 얼마나 중요한가 (importance, 중요도)
2) 명시한 대상의 우선 순위 (Specificity, 명시도)
inline > id > class > tag
3) 이 모든 것을 거쳐도 같은 중요도를 가졌다면
가장 마지막에 작성한 코드(source order)가 적용된다.
- 스타일 상속
- 캐스케이딩(Cascading)
- 오버라이딩(Overriding)
- 여러 스타일 시트를 충돌시키고 결과를 통해 우선 순위를 확인해본다.
도움되는 사이트
Placeholder : https://placeholder.com/
무려 크기를 직접 설정 가능한 빈 이미지를 가져올 수 있다
어려웠던 점 또는 해결 못한 것들
캐스케이딩과 오버라이딩의 개념 이해가 부족하다.
nav와 article 등 의미있는 태그를 적재적소에 배치하기가 어렵다.
+8일차 쯤에 보니 이게 왜 어려웠지..? 이것저것 알아보면서 개념 정리를 더 하고오니 태그들은 늘 정해진 자리가 있는 것 같다.
해결방법
태그에 익숙해지기 위해선 많이 써보는 방법 밖에 없다
오버라이딩은 검색하니 내용이 딥해졌다... :) 매서드라는 새로운 단어가 등장한다. 우선 진도를 진행시켜보고 다시 이해하기 위해 돌아오는 것이 좋겠다.
소감
개념적이거나 원리 이해가 오히려 머신러닝 때 보다 잘 되지 않는다.ㅠㅠ 하지만 눈에 보이는 결과물이 있으니 CSS가 재밌긴 하다.
