Hello_coding

들어가기에 앞서 . . ❓ css방법론을 사용하는 이유는 ❓ - 코드의 재사용성을 위하여 - 유지보수를 좀 더 효율적으로 하기 위해 - 확장을 가능하게 하기위해 - 클래스명으로 무슨의미인지 예측 가능하게 하기 위해 🚀 OOCSS (Object Oriented CSS) ? -이름에서도 알 수 있듯이 객체지향에 따라 고안된 설계방식 , 레고처럼 여러가지 모듈을 만들어 조합하는 방법론이다 . 특징 1. 구조와 외형을 분리 - 구조 : width , height , border ,margin 등.. - 외형 : color , font-color , background-color , border 등 .. .btn { width: 200px; height: 80px; font-size: 30px; } .btn-cl..

🚀 grid ? 가로, 세로를 정렬하는 레이아웃 시스템 - 그리드를 사용전 , 알아야할 내용! 그리드 라인 : 그리드 셀을 구분하는 선 , 가로 세로 번호가 매겨진 선을 잘 보고 따라옵시다! 1. template 열,행의 넓이, 높이를 설정한다. ( 우리가 표를 작성할때 몇행, 몇열로 작성할 지 정하는것 처럼!) grid-template-columns // 열의 넓이 결정 gird-template-rows // 행의 높이 결정 // repeat (적용할 트랙의 갯수 , 반복수치) 2. gap : 말 그대로 간격을 뜻한다 row - gap : 행사이 간격 column-gap : 열사이 간격 grid-gap : 행,열사이 간격 gap : 행,열사이 간격 (IE 지원하지 않음) [예제] - 0.5배로 보세요...

🚀 flex ? 컨텐츠를 정렬하거나 공간을 나눌 수 있는 css 속성의 집합 (옛날에는 전설의 테이블 코딩으로 레이아웃을 잡았었다고 한다 . . . !? flex를 배우는 나 행복하다 . . .) 특징 - flex는 가로방향으로 배치된다. - inline요소처럼 자신이 가진 내용물의 width만큼 차지한다. - flex로 배치시 height가 컨테이너 높이만큼 알아서 늘어난다. 🥸 flex-direction - 메인축의 정렬 방향을 결정한다. (이 메인축의 정렬방법에 따라 justify-content와 align-item의 정렬축도 결정된다! ) 1) row로 설정한다면 가로(행)로 배치가 된다. .container { display: flex; flex-direction : row; } 2) colum..

🚀 float : 둥둥떠있다는뜻 그림과 글이 자연스럽게 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생하였다. HTML 삽입 미리보기할 수 없는 소스 - float : right로 준 결과 사진이 오른쪽으로 배열되고 , 글이 자연스럽게 흐르는것을 볼 수 있다. 🥸 float를 쓰면 inline요소로 작용하고 , 그 다음요소는 inline-block요소로 바뀐다. 아래 예제를 통해 알 수 있다. See the Pen Untitled by mandelina (@mandelina) on CodePen. 분명 block요소인 div 2개에 대해서 1번째요소에게 float 속성을 적용시키면 "해당 text"만큼의 공간만을 차지하고 오른쪽으로 배치되는 것을 알 수 있다 . 🥸 자식요소들이 모두 float속성을 ..

🚀position ? 웹페이지에서 만들었던 html태그 , id , class 박스 등의 위치를 지정해주는 속성이다. 1) absolute / static / absolute - static : 기본값 , html태그 순으로 위치가 지정된다. (굳이 쓸 필요는 없지만 , 부모 객체에서 다른 position 속성값이 주어졌을때 무시하기위해 사용함.) box1 , box2 , box3를 static으로 놓았을 경우 -absolute : 기준점이 html위치에 있다. ( 왼쪽 제일 상단을 기준으로 하며 움직인다.) box3 box1 box2 box2는 absolute로 주어졌기때문에 다른 박스를 무시하고 젤 위쪽 상단을 기준으로 top : 40px; 만큼 간 것을 알 수있고, box3 역시 왼쪽 상단을 기준으..

방법 1. margin : 0 , auto 를 주면 중앙정렬이 가능하다. 상하 / 좌우 block요소인 div가 한줄을 다 차지하고 있다 - 이 부분이 auto로 설정할 수 있는 영역 See the Pen Untitled by mandelina (@mandelina) on CodePen. 방법2. text-align : center 이용하기 이는 1) 자식인 inline요소 2) 자식인 block요소 3) 자식인 inline-block요소 4) text 에서 적용가능하다. See the Pen Untitled by mandelina (@mandelina) on CodePen. 방법3. relative , transform: translateX(-50%)와 left(50%) 이용 자기자신의 margin에 ..

두 속성 모두 영역이 보이지 않게 숨기는 속성이다. overflow : hidden vs display : none 의 차이점은 접근성이다. 즉, 스크린리더가 읽게 할 것이냐, 읽지 않게 할 것이냐이다. display : none 스크린 리더가 읽지 않게 한다. overflow : hidden 스크린 리더가 읽는다. 즉, 스크린리더가 읽어줘야 할 내용은 overflow : hidden으로 , 읽지 않아도 되는 내용은 display : none 으로 처리해준다.

- 이미지를 div태그에 넣었을때 자세히 보면 밑에 흰색의 공간이 보인다. (body에 blue를 div에 white를 주었다.) Q . 저 공간은 무엇일까? 는 inline 요소이다 따라서 inline의 기준점인 base line 기준으로 배치가 되어 저런 현상이 나타난다. 다음 그림을 보면 이해가 더 쉬울것이다. 텍스트를 보면 빨간 base line 기준으로 하여 배치된것을 볼 수 있다. 이미지 또한 마찬가지다. 따라서 저렇게 빈공간이 남게 되는 것이다. 그럼 저공간은 무엇일까 ? 바로 descender height라고 하는 공간이다. T와 e같은경우 base line을 기준으로 쓰여있지만 y와 p는 삐져나오는 부분이 있다. 이 경우를 고려하여 descender height 가 있는 것이다. 그렇다면..

CSS 🚀 단위 단위는 절대길이와 상대길이 단위로 나뉜다. 1. 절대길이단위 - px picture + Element 의 약자 , 화소를 의미한다. 절대 길이 단위로 css에서 가장 많이 쓰이는 기본단위이다. (초기 기본 px 크기는 16px) 2.상대길이단위 - em 배수의 단위 . 부모 요소의 글자크기 기준으로 배한다. ex) 부모요소 font-size : 16px ➜ 1em : 16px , 2em : 32px . . . - rem root + em이라 생각하면 된다. 최상위요소 (html)의 글자 크기를 기준으로 배한다. - % 부모요소를 기준으로 하는 백분율 단위이다. - vw , vh v(width) : 화면의 너비 기준으로하는 백분율 단위 v(hight) : 화면의 높이 기준으로하는 백분율 단..

🚀 inline vs block inline block 컨텐츠 부분만큼만 영역을 차지한다. 한줄을 모두 차지한다. 높이와 너비가 조절이 불가능하다. (css로 적용안됨) 높이,너비 모두 조정 가능하다. padding , border 속성 사용 o / margin 좌우만 가능하다. padding , border , margin 모두 사용가능하며 해당 속성들이 다른요소를 밀어낸다. Q. 만약 inline요소처럼 가로로 배치되면서 높이와 너비를 설정해주고 싶다면? A. inline-block 사용하자! 🚀 마진 겹침 현상 (margin collapsing) 1. 요소와 요소 사이에 margin-top OR margin-bottom의 공간이 있을경우 더 높은 값의 마진이 적용 See the Pen Untitle..