공부 기록일지📚

🚗 background-image :요소의 배경 이미지를 한 개, 혹은 여러 개 지정한다. background-image의 속성값을 여러개 지정할 경우, 가장 상단에 있는 코드가 이미지의 최상단으로 올라오며 코드가 아래있다면 백그라운드 쪽으로 붙는다. 나중에 선언된 코드가 배경으로 깔린다고 생각하면 된다. 그라데이션도 지정도 가능하다. linear-gradient(방향, 시작 색상, 종료 색상) 방향같은 경우는 생략이 가능한데, 기본값은 아래에서 위로 그라데이션이 형성된다. 그라데이션은 linear-gradient 외에도 radial-gradient(원형 그라데이션) , conic-gradient(콘형 그라데이션) 가 있다. .color-container { background-image: url('이미..

기본적으로 CSS는 부모 요소의 속성은 자식 요소에게 상속됩니다. 하지만, css 속성을 적용하다보면 어떤 상속되지 않는 경우도 있는데 이는 CSS 속성 중에서도 "상속이 되는 속성"이 있고 "상속되지 않는 속성"이 따로 있기 때문입니다. 대표적인 상속되는 속성 & 상속되지 않는 속성 상속되는 속성 상속되지 않는 속성 color padding font-family margin font-size 등등 border 등등 부모 요소의 속성값 말고 다른 값을 적용하고 싶다면 css 코드를 부모 요소의 코드보다 아래에 적어주면 됩니다. -> cascading이라는 룰이 존재하여 css 적용의 우선순위를 결정해주기 때문입니다. 간단히 말하면 가장 최근에(위에서부터 아래로 쓴다고 했을 때, 맨 아래 존재하는 코드)작..

선택자(selector) 1.전체 선택자 * { property: value } 2.그룹 선택자 수의 제한이 없다. 아래 예시에서는 두 클래스에게 같은 속성을 부여한다는 소리 .class1, .class2 { property: value } 3.가상 클래스 선택자 : 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. 선택자:가상 클래스 { property: value } 3-1.가상 클래스 선택자 예시🚗 :first-child (형제 요소 중 첫번째만 선택) e.g. p:first-child 라고 지정해서 css 를 먹였는데 적용이 안되는 경우 -> 형제요소 중 첫번째 p태그를 지칭하는 것으로 만일 1번째 형제 요소가 p태그가 아니라 다른 태그라면 css가 당연히 적..

box-sizing의 속성값 content-box (box-sizing의 default value) Content 영역을 기준으로 box의 size 적용 width값이 400px이더라도 padding을 50px로 주면 500px의 width를 가진 box가 된다. 👾 위와 같은 이유로 일반적으로 모든 요소의 box-sizing을 border-box로 맞춰주고 시작하는 경우가 많다. border-box Border 영역을 기준으로 box의 size를 적용 content와 padding을 포함한 box 사이즈가 width 값이 되는 것 Inline요소 vs Block 요소 div, p, span, h1, h2 등 수많은 HTML 태그는 블록요소와 인라인 요소로 분류한다. CSS에서 display 속성은 웹 ..

Selector 선택자 Pseudo Class 가상 선택자 Pseudo Element 가상 요소 Property 프로퍼티 Value 값 declaration 선언 keyword 키워드

CSS으로 레이아웃을 하는 방법에는 여러가지가 있습니다. 그 중에서도 대표적으로 flex, grid 레이아웃 시스템을 예시로 들 수 있습니다. Grid와 Flex의 가장 큰 차이점은 Flex는 한 방향 레이아웃 시스템이며(1차원) Grid는 두 방향(가로-세로)레이아웃 시스템(2차원)이라는 것입니다. 결과적으로 Flex보다 더 다채로운 레이아웃 구성이 가능하게 됩니다. -> 개인적으로 Grid와 Flex의 차이점을 잘 이해하고 필요할 때 둘을 적절히 혼용하는 것이 좋은 거 같습니다. Grid는 Flex와 마찬가지로 컨테이너와 아이템만 있으면 됩니다. 아래는 그리드의 기본적인 HTML 구조입니다. A B C D E F G H I //✅부모 요소인 div.container를 Grid Container(그리드..

CSS3 Flexible Box [배경] 오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구로 float, position 속성을 사용하였다. 무난하지만 어떤 점에서는 제한적이라 확실히 단점이 있습니다. 예를 들어, 아래와 같은 요구 사항을 달성하기 어렵거나 불가능합니다. [float, position이 구현 불가능한 요구 사항] 부모 요소 내부에 포함된 블록 컨텐츠를 세로로 중심부에 맞추기 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 비와 높이를 똑같은 크기로 점유 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택 flexbox는 위와 같은 문제를 해결하고 레이아웃을 만드는데 편의..

🍕HTML recap HTML(Hypertext Markup Language)은 마크업 언어이다. 마크업? 마크업은 말 그대로 표시하는 것이다. 웹 페이지에는 그림도 있고, 글도 있고 표도 있고, 여러가지 요소가 있다. "여기는 글자 영역이고 여기는 이미지 영역이다!" 라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는 것이 HTML 이다. 안녕 -> 등은 엄밀히 말하면 tag가 아닙니다. 우리는 이것들을 요소(element)라고 부른다. tag는 요소를 만들 때 사용하는 이 꺽쇠 기호를 뜻합니다. 🐱‍👤DOM(문서객체모델)? -DOM은 html 단위 하나하나를 '객체로 생각'하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위 어떤 값을 가지고 있을 겁니다...