CSS를 공부하면서 느꼈다
굉장히 건방진 얘기지만 나중에 숙련자가 된다면
초심을 잃지 않을까 ... 내 성격을 알기에 현타가 올때 내 블로그 글들을 하나씩 보며 초심을 다잡고자 공부한 내용을 기록해본다
앞으로 알아가고자 하는 기초 목록
1. CSS 의미, 정의
2. CSS selector (선택자)
3. CSS 흔히 쓰이는 스타일링
4. CSS에서 헷갈릴수 있는 것
5. CSS Flex box
CSS의 약자 Cascading Style Sheet
Style Sheet
Style을 세부적이게 정리한 문서 한장
Cascading
연속된,연속화,직렬 이라는 뜻으로
예를들어 스타일링을 작성한 문서가 있고 스타일링을 작성하지 않아도 브라우저에서 기본적으로 보여지는 ui가 있다 그 ui는 브라우저 상에서 기본적으로 작성된 style sheet이 있기 때문이다
1. 브라우저 상에서 button이 표시될때 브라우저는 스타일링을 작성한 문서에 style sheet에 기재된 button이 있는지 확인한다
2. 없다면 다시 브라우저에 기본적으로 작성된 style sheet으로 떨어져 확인을 해서 button에 대한 스타일링이 있는지 확인후 있다면 브라우저에 있는 기본적인 스타일링을 가져와서 브라우저에서 정의한 기본값으로 보여지는 것이다
이런식으로 cascading은 정의된 내용이 세부적이게 정리되어 있다면 해당 요소를 쓰고 정의된 내용이 없다면 다음 정보를 찾기위해 넘어가는 방식이라고 알기쉽게 생각하자
웹사이트를 스타일링 할때 크게 나뉘는 세가지
- Author style
내가 작성하는 Style Sheet
내가 웹사이트를 만들때 css파일
- User Style
사용자가 스타일링 하는 Style
브라우저 상에서 유저가 다크,라이트 모드를 쓸건지 글자크기를 조정하는 등 사용자의 취향에 맞게 브라우저에서 스타일링을 변경 할 수 있다
- Browser
브라우저상에서 기본적으로 지정된 Style
그래서 앞서말한 Cascading은
1.본인이 정리한 Style이 제일 높은 우선순위를 가진다
2.사용자가 지정한 Style로 이동
3.사용자가 지정한 스타일링이 없다면 브라우저에서 기본적으로 지정한 Style로 넘어가게 된다
마치 물이 위에서 아래로 떨어지는것처럼 경로가 지정되어 있는 느낌적인 느낌이다
CSS Selector (선택자)
웹페이지를 Markup할때 body안에서도 커다란 섹션부터 나뉘는것을 시작으로 하여 작은섹션까지 박스로 나뉘어서 세분화 하여 마크업을 해야하는 이유중 한가지는 CSS로 스타일링을 할때 Labeling이 쉽기 때문이다
이를 통하여 스타일링을 하고싶은 각 요소들을 쉽게 Labeleing하여 선택 할 수 있다
selectors
HTML에 어떤 tag들을 고를건지 규정하는 문법이다
(*) 별모양
Universal
모든 Tag들을 선택
* {
color: blue;
}type
Tag의 이름을 쓰면 Tag를 선택 한 것이다
h1 {
background-image: url('');
}ID (#id)
해쉬 마크를 이용해서 id이름을 작성하면 해당하는 id만 선택한다
#menu_box {
background-color: green;
}class (.class)
class를 선택할때 (.)을 이용한다
.box_warap {
background-color: blue;
}state
button위에 마우스를 hover했을때 색깔을 따로 변경 할 수 있다
button:hover {
color:red;
}Attribute[] 속성값 선택
속성값만 따로 선택하여 변경 할 수 있다
속성값이 href(하이퍼 레퍼런스가)있는 요소들만 color를 변경해본 예시이다
a[href] {
color: purple;
}링크 중 google.com만 color를 변경 할 시
a[href="google.com"] {
color: purple;
}링크 중 google로 시작하는 요소만 color를 변경 할 시
, 반대로 끝나는 요소만 선택할시 ^대신 ($)사인을 이용하면 된다
a[href^="google"] {
color: purple;
}
기본적으로 우선순위가 높은 selector방식에 대해서 알 필요가 있다
내가 선택한 태그 가까이 설정한 아이들이 우선순위가 높아지는것을 확인 할 수 있다
