오늘의 나는 무엇을 잘했을까?
처음 알게 된 개념들이나, 익숙해 보이긴 하지만 깊게 생각해보지 않은 것들을 잘 배운것 같다,
오늘의 나는 무엇을 배웠을까?
-
CSS 규칙
-
CSS 선택자
-
id 이름은 태그마다 고유해야 한다.
-
class는 중복될 수 있다.
-
특정 태그 하나만 스타일링 → id
-
여러 태그 한번에 스타일링 → class
-
-
CSS 파일
-
link태그로 css파일을 html파일에 불러온다.
-
link태그 속성 rel: relationship 약자, 불러올 파일이 어떤 관계인가? style로 지정해주면 된다.
-
href: 불러올 파일의 경로
-
-
CSS 색상
-
CSS는 빛의 삼원색 (R, G, B)를 사용한다.
-
예시 # 4e 55 ff → R값이 4e, G값이 55, B값이 ff
-
#ff0000 처럼 쓸 수도 있지만, rgb(255, 0, 0)처럼 써도 된다.
-
RGBA: RGB에다 Alpha값을 추가한 것. Alpha 값은 불투명도를 표시한다. rgba(255, 0, 0,
0) 0이면 투명, 1이면 불투명
-
-
단위
-
절대적인 단위: px
-
상대적인 단위: rem, em, %
-
%: 부모 태그에 대한 상대적인 크기, 크기를 조절하고 싶으면 부모의 크기만 바꾸면 되어 편리하다.
-
em: 1em ⇒ 부모태그의 font-size
-
rem: 1rem ⇒ 최상위 태그(html 태그)의 font-size
-
-
-
line-height: 줄 높이
-
line-height: 1 / 글자 크기와 줄 높이가 동일 /
-
line-height: 2 / 줄 높이가 글자 크기의 2배 /
-
-
background 관련
**background-image: url("pizza.png");
background-repeat: no-repeat; //배경 반복 안한다
background-position: center; // 배경 위치 중양정렬
background-size: cover; //배경 사이즈 꽉 차게**- background-size: cover →이미지 비율을 유지하면서 꽉 채우는 것
- background-size: contain →이미지가 잘리지 않는 선에서 꽉 채움-
linear-gradient
-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0));
-
각도, 시작색, 끝 색 순서로 받음
-
-
이미지 위에 그라디언트 입히기
-
background-image: linear_gradient(…), url(”…”);
-
위와 같이 콤마로 구분하여 배경이미지를 누적시킬 수 있다. 순서가 중요하다.
-
-
box-shadow
-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-
가로, 세로, 흐린 정도(blur), 퍼지는 정도(spread), 그림자 색상
-
-
opacity: 투명도
-
요소 전체를 반투명하게 만든다
-
배경만 반투명하게 만들고 싶으면 rgba를 사용하면 된다.
-
-
box-model
- html 각 요소들은 박스에 감싸져 있는 것 처럼 정해진 레이어가 있다. 아래 그림과 같이 margin, border, padding, content 레이어로 구성된 것을 box model이라고 한다.
- html 각 요소들은 박스에 감싸져 있는 것 처럼 정해진 레이어가 있다. 아래 그림과 같이 margin, border, padding, content 레이어로 구성된 것을 box model이라고 한다.
-
margin
- margin은 바깥쪽 여백이다. 좌우 margin은 auto라는 것을 사용해서 자동으로 채울 수 있는데, 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있다. 자동으로 채운다는 것은 width를 다 채운다는 것이다.
-
border-radius
- border 속성이 설정 되어있지 않더라도 설정할 수 있다.
-
box-sizing: border-box
-
각 박스의 width를 정하고 개발자 도구로 길이를 살펴보면 의문이 든다. width: 400px로 정했음에도 불구하고 다음과 같이 440px로 측정되어 있기 때문이다.
-
-
그 이유는 우리가 정한 width는 컨텐츠의 길이이고, 측정할 길이는 padding과 border까지 더한 길이라서 그렇다. 그래서 border까지 포함해서 400px로 만들어 주기 위해 padding과 border 굵기를 빼서 컨텐츠의 width를 360으로 설정해야 한다. 하지만 이런 방식으로는 일일히 계산해야 하는 번거로움이 있다.
그럴때 box-sizing이라는 속성을 border-box로 정해주면, width를 border까지 포함한 하나의 박스로 취급하게 되어 border까지 총 400px로 바로 설정할 수 있어 편리하다. -
전체 선택자를 사용하여 미리 모든 요소의 box-sizing을 border-box로 만들어 놓으면 편하다.
-
* { box-sizing: border-box; }
-
-
white-space: nowrap
- white-space는 줄바꿈, 공백 등을 의미하고 nowrap은 자동 줄바꿈을 안하겠다는 뜻이다. 즉 텍스트가 들어있는 박스가 넘칠 수 있다.
-
margin 상쇄
- 세로 마진은 서로 겹친다. 즉, 위쪽 요소의 margin-bottom이 10px이고 아래쪽 요소의 margin-top이 5px이면 서로 위 아래로 15px의 간격이 있는 것이 아니고, margin들이 상쇄되어 둘 중 더 큰 값이 둘 사이의 간격이 된다. 즉 10px만큼 떨어져 있게 된다. 이러한 특성을 마진 상쇄라고 한다. 마진 상쇄는 부모 자식 요소들간에도 일어나기도 하는데, 부모 요소에 border나 padding이 있어서 경계가 뚜렷한 경우에는 마진 상쇄가 일어나지 않는다.
-
block vs in-line
-
block 태그: 세로로 배치됨, 너비, 높이 지정 가능
-
-
in-line태그: 글 쓰는 가로 방향으로 배치됨, 화면에 꽉 차면 다음줄로 넘어감, 너비나 높이 지정 불가(img태그 예외), 여백은 가로 여백만 가능
-
-
-
inline-block
-
a태그는 inline 태그라서 width, height를 지정할 수 없다. 또한 여백도 가로 여백만 먹히고, 세로 여백은 늘어나는 듯 보이긴 하나 주변 요소들이 아래와 같이 전혀 영향을 받지 않는다.
-
이런 a태그에 너비와 높이, 여백을 주고 싶을 때는 inline-block 값을 주면 된다. inline-block은 배치는 인라인으로 되지만 block처럼 크기와 너비를 할당할 수 있다.
-
-
float
-
float: right, left 등을 지정하면 해당 요소의 인접한 인라인 요소들이 자리를 비켜주게 된다.
-
-
-
-
선택자 붙여 쓰기
p.delay.bookinfo { … }- → p 태그이면서 delay클래스와 bookinfo클래스를 모두 가지는 요소
#shipping.delay.book-info{
…
}→ shipping 아이디, delay와 book-info클래스를 모두 가지는 요소
- 자식 결합자
.book-container > .title {
…
}→ book-container라는 클래스를 가지는 요소의 다이렉트 자식 중 title이라는 클래는 가지는 요소
.book .date {
…
}→ book이라는 클래스를 가지는 태그 안쪽에 속하면서(자식을 포함한 모든 자손 중) date라는 클래스를 가진 요소
- 가상 클래스
a: hover{
…
}→ a태그에 마우스를 호버하였을 때 입힐 스타일 지정
-
가상 클래스 예
-
active: 클릭했을 때
-
hover: 마우스 호버 시
-
visited: 이미 방문한 링크
-
focus: 입력란 등을 클릭하여 커서가 깜빡이는 상태
-
-
css 상속
- css선택자로 어떤 속성을 설정하면, 그 요소의 자식 요소들에게도 해당 속성이 상속되는데, 우선순위가 높지는 않다. 또한 font-family나 color와 같은 상속이 되는 속성이 따로 정해져 있다. 상속되지 않는 속성들이 더 많다. 가령 div태그의 text-align: center와 같은 속성이 div태그 안쪽에 모든 텍스트들에게 상속되는 것 등이 있다.
오늘의 나는 어떤 어려움이 있었을까?
하루에 다뤄야 할 내용들이 좀 많았던 것 같다. 기록을 세세하게 하려고 하다 보니 시간이 많이 지체되었다.
내일의 나는 무엇을 해야할까?
내일부터는 아는 내용들은 최대한 빠르게 넘기고, 내가 이전에 배우면서도 대충 배웠던 부분들을 위주로 기록해야겠다.
