whatisthis?
html_pr04) style.css Code Review 본문
https://mywebproject.tistory.com/82
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap");
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #1f2d3d;
}
body::after {
content: "kimbug©";
display: block;
margin-top: 50px;
color: #fff;
font-size: 12px;
font-weight: 600;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
padding: 12px 56px;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}
.header h1 {
position: relative;
top: 1px;
}
.header h1 img {
display: block;
width: auto;
height: 30px;
}
.header a {
display: block;
text-decoration: none;
font-size: 0.875rem;
color: #313338;
}
.header a:hover {
opacity: 0.5;
}
.header a:visited {
color: inherit;
}
Analysis
- 선택자 *
* {
margin: 0;
box-sizing: border-box;
}
선택자 * 는 html 문서 내 모든 요소를 나타내는 CSS level 1의 선택자이다.
>> 선택자에 대한 내용은 아래 포스팅에서 다루도록 하겠다. (REF: https://www.nextree.co.kr/p8468/)
https://mywebproject.tistory.com/101
CSS) CSS Selector(선택자)
REF: https://www.nextree.co.kr/p8468/ CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든..
mywebproject.tistory.com
위 포스팅에서 따로 정리해두었다!
html {
font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
html 요소(최상위요소)
html 선택자랑 * 선택자의 차이는?
| html 선택자 | 태그(요소) 선택자. html 요소에만 스타일 적용. |
| * 선택자 (= asterisk) |
공통선택자. 모든 태그에 스타일 적용 - head, style, body, title, html 등 모두 다 선택. 공통선택자는 모든 요소 및 그 하위 요소를 선택하여 스타일 지정함. -> 클래스 / 아이디와 상관없이 모~든 요소. |
+) 자식 요소 선택자 = >기호
*는 선택자라기보다는 와일드카드(*)라고 생각하면 편함.
예를들면, parent라는 클래스에 있는 모든 하위 요소들에 스타일을 적용하고 싶다면?
.parent > * {
color: red;
}위와 같이 사용할 수 있음.
| The Universal Selector In CSS, you generally want to be as specific as possible, so using the universal selector is often not the best approach to take. The Universal Selector * is going to apply the specific styles to every single element within the entire DOM, regardless of its tag. Additionally, the universal approach can interfere with default inheritance as more specific styles may still be overridden by the * style. The HTML Selector The html selector will only apply to the single <html> element that is present. This will still allow inheritance and specificity to function as expected (as it's merely targeting a single parent element and not all of the children individually). |
보통은 > *로는 margin, box-sizing을 쓰고
html선택자로는 font나 line-height(줄간격), 폰트색(color)등을 지정하는듯.
--- 나중에 css part에서 자세히 ---
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #1f2d3d;
}
flex에 관련된 내용은 아래에 포스팅하였다.
https://mywebproject.tistory.com/69
CSS3 - flex (positioning)
https://beautifulcss.com/archives/2812 Beautiful CSS » 포지셔닝 : Flexbox 이 게시물은 2020년 10월 25일 수정판입니다. Image from Introducing Flexbox Fridays 이야기에 앞서 Flexbox Layout은, 새롭게 CS..
mywebproject.tistory.com
-Flexbox로 레이아웃을 잡으면 모바일을 포함한 하이브리드 앱으로 만들때도 별도의 추가작업이 필요하지 않음.
Flexbox는, 유연한 요소(내용물)
그리고 그 요소를 담을 그릇으로 이루어짐.
1. 그릇에 해당하는 부모 요소(=컨테이너) 에 display: flex 를 입력해주어
flexbox임을 선언함.
2. 자식요소를 어떻게 배열할지 (방향성) flex-direction을 입력해줌.
3. 자식요소를 감싸주는 wrap의 여부를 flex-wrap으로. (아이템의 줄 넘김)
4. 아이템간의 여백 or 정렬을 설정해주는 jusify-content
5. 수직방향으로의 정렬을 설정해주는 align-items
** justify-content의 수직버전이라 생각하면 쉽다.
body::after {
content: "kimbug©";
display: block;
margin-top: 50px;
color: #fff;
font-size: 12px;
font-weight: 600;
}https://mywebproject.tistory.com/86
html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)
가상 요소(Pseudo-Element) 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함. ::first-line 요소의
mywebproject.tistory.com
html의 가상요소/가상클래스에 대한 내용은 위 포스팅에 작성해두었다.
가상 요소(Pseudo-Element)
가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함.
--> 위 예제에서는 가상요소중 하나인 ::after을 이용했다.
| ::after | 요소의 컨텐츠 끝부분 |
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
padding: 12px 56px;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}header이라는 클래스를 가진 요소, 즉 div 태그에 해당하는 스타일이다.
위에서 body태그에 flex를 부여해주었는데,
flex-direction: column;
justify-content: center;였고, 이번 header클래스(div태그)에 해당하는 flex 속성은 다음과 같다.
justify-content: space-between;
** 아이템간의 여백 or 정렬을 설정해주는 jusify-content
| center | 아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴 |
| space-between | 아이템을 컨테이너의 양쪽 끝에 맞춰 정렬 |
** 자식요소를 어떻게 배열할지 (방향성)
| column | 수직방향(열. 세로) / 상-하 |
-> body선택자에서의 flex box가 틀과 같은 역할이므로, flex-direction를 지정해준다.
아래 div에서의 flex box는 하위요소, 즉 아이템(item)에 해당하므로
.header h1 {
position: relative;
top: 1px;
}
.header h1 img {
display: block;
width: auto;
height: 30px;
}
.header a {
display: block;
text-decoration: none;
font-size: 0.875rem;
color: #313338;
}
.header a:hover {
opacity: 0.5;
}
.header a:visited {
color: inherit;
}
header 클래스의 h1태그 -> .header h1
header 클래스의 h1태그이자 img태그 -> .header h1 img
+) :hover과 :visited는 가상클래스.
가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다.
가상 클래스
선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.
대표적인 가상 클래스 예.
| :link | 방문 안한 링크 |
| :visited | 방문한 링크 |
| :active | 링크 누를때 |
| :hover | 링크에 마우스 올릴때 |
| :focus | 요소가 포커스될때 (키보드 or 문자입력양식) |
| :first-child | 요소의 첫번째 자식요소 |
| :first-line | 블록 요소 문단의 첫번째 줄 |
| :first-letter | 블록 요소 첫줄에 첫번째 문자 |
| :before | 요소 내용 앞에 추가할 태그 지정 (content 속성 필요) |
| :after | 요소 내용 뒤에 추가할 태그 지정 (content 속성 필요) |
REFERENCE
https://github.com/rohjs/bugless-101/blob/practice/html-practice/03-feature-box/styles.css
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'PRACTICE > REVERSE-ENGINEERING' 카테고리의 다른 글
| html_pr06) style.css Code Review (0) | 2021.10.25 |
|---|---|
| html_pr05) style.css Code Review (0) | 2021.10.23 |
| html_pr03) style.css Code Review (0) | 2021.10.21 |
| html_pr02) style.css Code Review (0) | 2021.10.19 |
| html_pr01) style.css Code Review (0) | 2021.10.19 |
