TIL day 03
🐣 이론
CSS
- class는 grouping, id는 idetification을 하기 위함
- 사용자가 지정하기 전까지는 user agent stylesheet속성을 적용한다.
개발자도구의 user agent stylesheet 속성들 => 브라우저에 정의되어 있는 기본 default 속성
Grid layout
display: grid;로 선언- grid templete이 제공하는 다양한 기능으로 화면을 꾸밀 수 있다.
user agent stylesheet
- 위에 작성한 것처럼 태그마다 기본적으로 들어가 있는 스타일이 있다.
이는 다른 태그와 기본적으로 구분하기위해 들어가 있으며 초기화하지 않으면 기본값이 적용된다.
모르는 개념이 있으면 html, css, js의 cheat sheet를 활용하자
🐥 실습
viewport
<meta name="viewport" content="width = device-width, initial-scale=1.0" />
- name: viewport를 지정한다는 것을 의미
- width: viewport-width를 device-width에 맞춰줌
- initial-scale: 초기화면 배율을 1.0(=100%)으로 맞춘다는 뜻
transition
- 바꾸고 싶은 속성, 애니메이션 시간, [애니메이션 종류]
- 속성에는 각자 적용하고 싶은 것을 따로 적거나 all을 사용
transition: background-color 1s, color 3s; /* 따로 적용 */
transition: all 1s; /* 공통 적용 */
media query
- 특정 조건에서 적용되는 css코드를 작성하기 위해 사용. 반응형 웹 디자인을 위해 사용한다. (device간 가시성)
- viewport 정의가 필수적이다.
- 조건
- min-width : 최소 너비
- max-width : 최대 너비
- min-height : 최소 높이
- max-height : 최대 높이
- aspect-ratio : 가로세로비
- orientation : 방향
@media (조건) and (조건) {
/* style */
}
- 그리고 media query에서 외부에서 사용한 css속성을 정의하지 않으면 외부 속성이 적용된다.
⭐ 따라서 적용하고 싶지 않은 속성이 있으면 반드시 재정의 해줘야한다.
좌우 중앙 정렬
- text-align: inline속성을 가지고 있는 태그들을 정렬시킨다. (img, a, span등)
margin: 0 auto;: block속성의 태그들을 정렬 할때 사용.
CSS 적용 순서
- 하나의 content를 꾸미는 여러개의 CSS속성이 존재하면 명시도에 따라서 적용되는 것과 적용되지 않는 것이 있음.
- inline style > internal style > id > class > type순으로 적용됌(이것도 명시도와 관련됌)
example: <h1 id="id" class="class">style</h1>
1. <h1 style="color: blue" id>inline style</h1>
2. <head>
<style>
h1 {
color:blue;
}
</style>
</head>
/* 3 */
#id {
color: blue;
}
/* 4 */
.class {
color: blue;
}
/* 5 */
h1 {
color: blue;
}
- 가장 나중에 위치할 수록 적용
/* 빨간색 적용 */
h1 {
color: black;
}
h1 {
color: red;
}
- 자세히 명시될 수록 적용(명시도)
/* 검은색 적용 */
#id .class h1 {
color: black;
}
h1 {
color: red;
}
- 명시도는 각각 아래의 값으로 계산한다.
1. id: (1, 0, 0)
2. class: (0, 1, 0)
3. tag: (0, 0, 1)
- 각각의 선택자의 명시도를 계산해서 명시도가 더 높은 선택자의 스타일을 적용
- 명시도가 같다면 나중에 작성된 스타일을 적용
white space
- 태그들 사이에 존재하는 미세한 공백
정확히는 윗줄과 아랫줄사이에 존재하는 enter가 font size만큼 글자폭을 가지고 있어서 발생하는 문제
margin, padding: 0로 해결이 되지 않는다.
<div>1<div> <!-- 이 부분의 enter때문에 발생 -->
<div>2<div>
해결방법
- 꼼수
<div>div1</div
><div>div2</div
><div>div3></div
...
개발자도구의 user agent stylesheet 속성들 => 브라우저에 정의되어 있는 기본 default 속성
display: grid;로 선언이는 다른 태그와 기본적으로 구분하기위해 들어가 있으며 초기화하지 않으면 기본값이 적용된다.
모르는 개념이 있으면 html, css, js의 cheat sheet를 활용하자
viewport
<meta name="viewport" content="width = device-width, initial-scale=1.0" />- name: viewport를 지정한다는 것을 의미
- width: viewport-width를 device-width에 맞춰줌
- initial-scale: 초기화면 배율을 1.0(=100%)으로 맞춘다는 뜻
transition
- 바꾸고 싶은 속성, 애니메이션 시간, [애니메이션 종류]
- 속성에는 각자 적용하고 싶은 것을 따로 적거나 all을 사용
transition: background-color 1s, color 3s; /* 따로 적용 */
transition: all 1s; /* 공통 적용 */media query
- 특정 조건에서 적용되는 css코드를 작성하기 위해 사용. 반응형 웹 디자인을 위해 사용한다. (device간 가시성)
- viewport 정의가 필수적이다.
- 조건
- min-width : 최소 너비
- max-width : 최대 너비
- min-height : 최소 높이
- max-height : 최대 높이
- aspect-ratio : 가로세로비
- orientation : 방향
@media (조건) and (조건) {
/* style */
}- 그리고 media query에서 외부에서 사용한 css속성을 정의하지 않으면 외부 속성이 적용된다.
⭐ 따라서 적용하고 싶지 않은 속성이 있으면 반드시 재정의 해줘야한다.
좌우 중앙 정렬
- text-align: inline속성을 가지고 있는 태그들을 정렬시킨다. (img, a, span등)
margin: 0 auto;: block속성의 태그들을 정렬 할때 사용.
CSS 적용 순서
- 하나의 content를 꾸미는 여러개의 CSS속성이 존재하면 명시도에 따라서 적용되는 것과 적용되지 않는 것이 있음.
- inline style > internal style > id > class > type순으로 적용됌(이것도 명시도와 관련됌)
example:<h1 id="id" class="class">style</h1>
1. <h1 style="color: blue" id>inline style</h1>2. <head>
<style>
h1 {
color:blue;
}
</style>
</head>/* 3 */
#id {
color: blue;
}
/* 4 */
.class {
color: blue;
}
/* 5 */
h1 {
color: blue;
}- 가장 나중에 위치할 수록 적용
/* 빨간색 적용 */
h1 {
color: black;
}
h1 {
color: red;
}- 자세히 명시될 수록 적용(명시도)
/* 검은색 적용 */
#id .class h1 {
color: black;
}
h1 {
color: red;
}- 명시도는 각각 아래의 값으로 계산한다.
1. id: (1, 0, 0)
2. class: (0, 1, 0)
3. tag: (0, 0, 1) - 각각의 선택자의 명시도를 계산해서 명시도가 더 높은 선택자의 스타일을 적용
- 명시도가 같다면 나중에 작성된 스타일을 적용
white space
- 태그들 사이에 존재하는 미세한 공백
정확히는 윗줄과 아랫줄사이에 존재하는 enter가 font size만큼 글자폭을 가지고 있어서 발생하는 문제
margin, padding: 0로 해결이 되지 않는다.
<div>1<div> <!-- 이 부분의 enter때문에 발생 -->
<div>2<div>해결방법
- 꼼수
<div>div1</div
><div>div2</div
><div>div3></div
...이런 방식으로 이어나가면 enter가 없는 것으로 인식해서 공백이 사라진다.
-
font-size:0- 앞서 설명했던 것처럼 enter가 font-size만큼 글자폭을 가지고 있기 때문에 발생하므로 container의
font-size를 0으로 만들면 공백이 사라진다.
- 앞서 설명했던 것처럼 enter가 font-size만큼 글자폭을 가지고 있기 때문에 발생하므로 container의
-
display: flex->justtify-content- 우선 제일 사용하기 좋은 방법이라 생각된다.
float로 정렬을 하여 사용하는 방법도 있지만 flex display가 현재 더 많이 사용하는 세련된 방식이기 때문이다.
.container { display: flex; justify-content: /* option */; } - 우선 제일 사용하기 좋은 방법이라 생각된다.
Author And Source
이 문제에 관하여(TIL day 03), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@circlewee/Elice-SW-engineer-TIL-day-03저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
