CSS 기초 _(수정: 2023.11.17)
2023.11.17 - 1차 수정 / 설명 수정 및 추가
0. css 가 뭔가요?
- Html 에 구성된 요소를 꾸며주는 코드
1. css 코드가 적용되지 않는 경우
- 상위 컴포넌트(부모 관계)에 이미 지정된 내용 존재하는 경우
- 이름이 제대로 명명되지 않은 경우
- !important 코드가 적용되어 '가장 우선순위' 되는 css 속성이 존재하는 경우
1-1. !important
- 작성한 css 가 가장 우선순위로 적용된다.
- 우선 적용을 원하는 속성 뒤에 !important 를 붙여주면 된다. { color: red !important; }
- 남발하면 안된다. 특수한 경우 없이 동일하게 적용되어야 할 내용에만 사용하자.
2. id vs class
- id 는 #idName 처럼, 앞에 # 을 붙이고 id 이름을 적는다.
- class 는 .className 처럼 앞에 . 을 붙이고 class 이름을 적는다.
- id 와 class 의 차이점 https://seo-developer.tistory.com/24
3. class 이름을 짓는 규칙이 따로 있나요?
- 구체적으로 정해진 규칙은 없다.
- 개발하면서 느낀점은, 명확한 기준을 규칙적으로 사용해야 퍼블러셔와 개발자 둘다 편했다.
- 참고 https://bangj.tistory.com/53
4. 예제
vsCode 에서 압축 푼 폴더 째로 넣고 사용하세요!
| html <div id="container"> <div id="board-box"> <div class="main-header"> <h1> 이곳은 헤더영역 입니다 </h1> </div> <div class="main-body"> <div class="title-box"> <h1> 이곳은 바디 영역 입니다 </h1> <div class="content-box"> <div class="sub-title"> CSS를 공부해봅시다 </div> <div class="sub-title apple"> CSS를 공부해봅시다 </div> </div> </div> <div class="list-box"> <div class="content-box"> <ul> <li> 맛있는 사과 </li> <li> 맛있는 도토리 </li> </ul> <ul> <li> 맛있는 사과 </li> <li> 맛있는 도토리 </li> </ul> </div> </div> </div> </div> </div> |
| css body { margin: 0; overflow: hidden; } h1 { font-size: 20px; font-weight: 600; color: darkblue; padding: 20px; margin: 0; } #container { width: 100vw; height: 100vh; } #board-box { width: 80%; height: 100vh; margin: auto; } .main-header { width: 100%; height: 10%; background-color:darkgrey; } .main-body { width: 100%; height: 90%; padding-top: 10px; background-color: aliceblue; } .content-box { width: 90%; margin: 10px auto; border: 1px solid cornflowerblue; } .sub-title { font-size: 20px; font-weight: 600; padding: 0 10px; } .sub-title.apple { color: rgb(127, 136, 255); } .title-box { width: 90%; height: auto; margin: 0 auto; border: 3px solid cornflowerblue; } .list-box { width: 90%; margin: 5px auto; border: 3px solid cornflowerblue; } ul { width: 80%; height: 50px; margin: 10px auto; border: 1px solid cornflowerblue; } ul li:nth-child(1) { color: blue; } ul li:nth-child(2) { color: blueviolet; } |
선택자 |
선택자 종류 |
세부설명 |
|
body |
태그 | body 태그에 해당 css 적용 | |
h1 |
태그 | h1 태그에 해당 css 적용 | |
#container |
id | 단일객체인 id "container" 에 해당 css 적용 | |
#board-box |
id | 단일객체인 id " board-box" 에 해당 css 적용 | |
.main-header |
class | class "main-header" 에 해당 css 적용 | |
.main_body |
class | class "main-body" 에 해당 css 적용 | |
.content-box |
class | class " content-box" 에 해당 css 적용 |
|
.sub-title |
.apple |
class | class " sub-title" 에 해당 css 적용 |
| class + 내부요소 | - class " sub-title apple" 에 해당 css 적용 - class " sub-title" 의 css 와 class " sub-title apple" 의 css 모두 적용 |
||
.title-box |
class | "sub-title" 과 동일한 css 를 공유하지만 ".apple" css 에서 고유한 속성을 추가할 수 있다. |
|
.list-box |
class | class "list-box" 에 해당 css 적용 | |
ul |
태그 | ul 태그에 해당 css 적용 | |
ul li:nth-child(1) |
해당 태그의 N번째 요소 :nth-child(N) |
해당 태그의 N번째 요소에 css 적용 | |
ul li:nth-child(2) |
|||
5. 각 기기별 규격 참고자료
- 참고 https://px-to-rem.netlify.app/