타코벨코딩

상속이란 그리고 공용 키워드 알아 두면 좋은 개념들 상속 (inheritance)이란 하위요소가 상위 요소의 스타일 속성값을 물려 받는 것을 의미한다. 👗 자기에게 주어진 스타일이 없을 때 물려 받는 것. 마치자매들이 옷 나눠 입듯이 옷 없으면 언니 옷 물려 입는다. ul{ color: tomato;} -> li 요소를 선택하지 않았다. 그러나 상위 요소 ul의 색깔이 반영되었다! 다 되는 건 아니다. 링크 참조 https://www.w3.org/TR/CSS21/propidx.html 상위 요소로 부터 상속이 이루어지는 속성이 있는 반면 그렇지 않은 속성도 있다. 상속이 되는 것 . color, font-family, font-size, font-weight, text-align, cursor 등 상속이..

z-index 가로 세로만 있는게 아님 z-index ! 속성은 요소의 쌓임 순서(stack order)를 정의 할 수 있다. 정수 값을 지정하여 쌓임 맥락(stacking context) 에서의 레벨을 정의 하는 방식으로 적용 되며 , 위치 지정 요소에 대해 적용할 수 있는 속성이다. 위치 지정 요소 ?(positioned element) position속성이 정의되어 있는 요소를 말한다. 뭐가 어떻게 쌓이냐? 우리가 html으로 문서로 작성해서 요소들을 만들어주면 -> 요소들은 문서의 흐름에따라 차곡차곡 배치된다. 그러나 포지션 속성들을 조작해서 위치를 변경해주는 경우엔 요소들이 동일한 위치에서 겹쳐지는 모습들이 발생한다. 이런 경우 가로 세로 뱡향 없이 쌓이게 된다. 모든 div 태그는 positi..

특정 부분만 스타일하기 [의사 요소 ] 의사요소 (pseudo-elements )는 선택자에 추가하는 키워드로 , 이를 이용하면 선택한 요소의 특정한 부분에 대한 스타일을 정의할 수 있다. 선택자::의사요소 {속성명: 속성값;} li 요소 첫 번째 글자만 크기를 20px로 하겠다. li::first-letter {font-size:20px;} 의사요소 after: 요소의 앞에 의사 요소를 생성 및 추가한다. before 요소의 뒤에서 의사요소를 생성 및 추가한다. first-time 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다. marker 목록 기호의 스타일을 적용한다. placeholder 입력 요소의 플레이스 홀더 스타일을 적용한다. p:first-line. first-letter Pseudo..

의사 클래스 (가상클래스 이다) 선택자에 추가하는 키워드로 , 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 선택자:의사클래스{ 속성명: 속성값;} h1:hover{color:red;} -> h1 요소에 마우스 커서가 올라가면 hover 글자에 빨간색으로 해줘 Hover: 마우스 커서 올리면 active:(마우스 눌렀을 때) focus:마우스클릭후 (text)칠때 disabled: nth-child() 마우스 포인터가 요소에 올라옴 사용자가 요소를 활성화 했다 요소가 포커스를 받고 있다 비활성 상태의 요소 형제 사이에서의 순서에 따라 요소를 선택한다. disabled: 비활성화 상태인데 아무것도 안 건드렸을 때 nth-child() 형제 사이에서의 순서에 따라 요소를 선택한다. 자 ..

선택자란: 어떤 요소에 스타일 줄 것인지 하는 정보 선택자 { 속성명: 속성값 } 선택자의 종류 [기본 그룹 특성 결합 의사 클래스 의사요소] 기본 그룹 저번에 햇고 특성, 결합 선택자 특성 선택자는 주어진 속성의 존재여부나 그 값에 따라 요소를 선택한다. 클래스 속성을 가지고 있는 요소를 선택하기(좌) 클래스가 item인 요소를 선택하기 [class]{ background-color: tomato;} 우 [class]{ background-color: tomato;} [class='item]{background-color:tomato;} 컨셉 결합 선택자는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다. 두가지로 구분 자손 결합자 형제 결합자 div p {color: white..

레이아웃을 유연하게 Flexbox 행 & 열 , Flex-direction Flexbox 란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. 왜 flexbox 를 1차원 모델이라 부르는 이유는, 레이아읏을 다룰 때 한번에 하나의 차원(행, 열)만을 다룬다는 특성 때문입니다. ➡ 행(row) ⬇열 (column) flex 컨테이너라고 한다( 요소들을 포함하기때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display flex; 적용 . flexbox는 기본적 요소들을 으로 행방향이다. ➡ 먼저 알아야 할 것 flexbox 에는 주축 main -axis 과 교차축 croos-axis있다. (매우 매우 중요하다) flex-direction(flex 컨테이너를 위한 ..

위치를 정하자 포지션 position position 은 문서상에 요소를 배치하는 방법을 정의한다. position 요소의 배치 방법을 결정! 할려면 top bottom right left 사용해 최종 위치를 결정한다! [상하좌우 위치 지정은 필요에 따라 선택적으로 사용] 🔥 질문에 많이 나오는 개념 static : 기본값 , 요소를 일반적인 문서 흐름에 따라 배치한다. relative: 일반적인 문서 흐름에 따라 배치하되, 상하 좌우 위치에 값에 따라 오프셋을 적용한다. position : relative란 - 요소를 일반적인 문서 흐름에 따라 배치하되, 상하 좌우 위치 값에 따라 오프셋을 적용한다. [✅오프셋이란? : 위치를 얼마간 이동시키는 것을 의미한다] div { position: relativ..

background 배경 배경은 콘텐츠의 배경을 정의한다. 단축 속성으로 색상,이미지, 이미지가 내가 준 요소 크기보다 작을 경우 이미지가 반복함. background-repeat: no -repeat 반복패턴 . 위에 반복하기 싫다면! background -position 위치에 대한 크기 left bottom or center background-size: 숫자로도 가능, cover ,contain! 이미지가 찌그러지거나 , 잘리지 않는 선에서 최대 사이즈 background: no-repeact url(./cat.img) 이런식으로 한 줄로 사용할 수 있다. 신기! 정리 background 는 콘텐츠의 배경을 정의한다. (이미지) 단축 속성으로써 다양한 하위 속성을 포함한다. 하위 속성을 한 번에 ..

박스크기를 계산하는 방법 box-sizing 박스 영역에 콘텐츠 영역이 있다. [ 여기에는 너비와 높이가 있다] box-sizing 😀 속성은 요소의 너비width와 높이 height 를 계산하는 방법을 지정한다.( 이걸 사용하면 콘텐츠 영역이 줄어든다) 속성값 content-box : 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다. (콘텐츠 영역이 요소가 커진다) [패딩 - 테두리가 덩달아 커진다면 박스 사이즈 사용해야한다] 정리 박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정된다. width100 height 100 box-sizing 속성은 너비와 높이가 포함할 영역을 변경함 으로써 너비와 높이의 계산 방법을 결정 할 수 있다. box-sizing의 기본값은 content-box이..

BOX-Model 박스모델 (컴퓨터화면)브라우저가 요소를 렌더링 할때 , 각각의 요소는 기본적으로 사각형 형태로 영역을 차지한다. 이때 영역을 박스라고 표현한다. CSS는 박스의 크기 위치 속성 (색 , 배경, 테두리)을 결정한다, [하나의 박스는 네개의 영역으로 구성된다] [콘텐츠 영역, 안쪽 여백, 바깥쪽 여백, 경계선 테두리] 📦 박스 각 영역의 크기 정의 콘텐츠 영역 width, height 안쪽 영역 padding | 바깥쪽 여백 margin 테두리 border-width span 에서는 width, height 영역을 인식을 못 한다. 하기 위해서는 display : inline-block으로 적용해야한다. inline-block란 : [요소는 인라인으로 배치하되 블록 요소 속성을 가질수 있다..