프론트엔드 첫걸음

1. 그리드 기본개념 예시 grid-template-columns 는 4개, grid-template-rows 는 3개 만들어놔서 12개의 그리드가 생겼다. HTML에 테두리가 있는 div가 6개 있어서 6개의 네모칸만 보이는 상태이다. (px 대신 fr 단위를 쓰면 좋다. 전체 n분의 1 범위를 의미한다) 크롬 개발자도구로 확인하면 12개의 칸이 만들어진 것을 확인할 수 있다. 2. 격자무늬로 만들어진 grid에 범위 지정하는 방법 grid column lines & row lines 사용 See the Pen Untitled by JEONG (@cona) on CodePen. grid-column : 1 / 5 (그리드 세로 line을 1~5 까지 차지) grid-row : 2 / 4 (그리드 가로 ..

position:absolute|fixed 속성이 부여되면 flex item에서 빠지게 된다. align-items: flex-start 를 사용해도 된다. https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container

CSS transform 속성으로 요소에 회전(rotate), 좌표이동(translate), 크기조절(scale) 등의 효과 줄 수 있다. translate 대신 margin 등의 레이아웃을 바꿔도 동작하지만 animation효과 위해 layout바꾸는 것은 성능을 저하시킨다. 브라우저가 그림그리는 순서 1. Render Tree만들기(parsing 및 style) 2. Layout잡기 3. Paint 4. composite 처리(transform , opacity 등) margin 변경 하면 2번부터 다시 해야하지만, transform 변경하면 4번부터 다시 하면 됨.따라서 바뀐 layout 부터 렌더링하는것보다 바뀐 transform만 렌더링하는것이 빠르게 동작함 또한 transform 처리는 다른 ..

1. $변수명 2. @mixin 변수명($파라미터) + @include 변수명(내가설정한값) $변수명 및 @mixin 예시 $defaultFontSize : 25px; $defaultFontColor : rgb(41, 41, 41); @mixin flexLeftAlign($direction) { display: flex; flex-direction: $direction; justify-content: center; align-items: flex-start; } .box { margin: 12px; li { @include listBorderStyle(100px); padding: 20px; font-size: $defaultFontSize +5px; color: $defaultFontColor; @in..

1. vs code 확장프로그램에 live sass compiler 검색 -> 설치 (3버전 말고 5버전으로..) 2. vs code 하단에 Watch Sass 클릭하면 scss파일로 저장한것들은 자동으로 css파일로 변환된다. 3. html 파일에 변환된 css파일을 link로 걸어주면 된다. 확장자가 map 인 파일은 크롬개발자도구 디버깅을 위한 파일이다. 코드는 .scss 파일에 짜고, html 파일에는 css파일을 연결시킨다. (브라우저는 scss파일 인식할수 없으니까..) SASS는 변수를 설정할수있고, 변수간 연산이 가능하다. (CSS에도 var, calc로 할수 있지만 변수명앞에 '--' 를 쓴다거나 var이나 calc를 입력해야하는 번거로움이 있다.) nesting , @extend=> c..

shadow DOM의 존재를 알았으니 button을 선택자로 고를 수 있고, 스타일링 할 수도 있다. pseudo 속성에 있는 "-webkit-file-upload-button" 을 pseudo 속성을 나타내는 :: 뒤에 붙여서 아래와 같이 사용할 수 있다. -webkit- 수식어는 크로스 브라우징을 위한 접두어이다. 각각 브라우저마다 shadow DOM 접두어가 다르다. 크로스 브라우징을 위해서 아래 접두어에 맞게 스타일링을 추가해준다. -webkit- : 크롬, 오페라, 사파리, Edge 브라우저 -moz- : 파이어폭스 브라우저 -ms- : 익스플로러 -o- : 오페라 브라우저 보통은 파일업로드 버튼은 input 태그는 display:none 하고 label태그에 대신 스타일을 준다.

그림자 DOM 확인하기 1. 그림자 DOM 표시 설정 그러면 크롬 개발자도구에서 input 요소 내부의 shadow dom 을 확인할 수 있다. type:file인 input 태그는 type:button인 input 태그 + span 태그 가 합쳐진 형태다. 이 숨겨진 돔을 찾아서 "파일선택" 버튼에 스타일을 입힐 수 있다. 나만몰랐냐구

:: Pseudo-element 의 사용 :hover, :focus, :active 등 Pseudo-class 는 해당 요소가 '다른 상태일때' 다른 스타일을 적용할 때 사용 ::first-letter, ::first-line ,::after,::before등 Pseudo-element는 해당 요소의 '일부분' 에 다른 스타일을 적용할 때 사용 변하는 데이터가 들어있는 요소에서 첫 번째 글자만 스타일링 해야하는 경우, 자바스크립트를 사용하지 않아도 된다. 예 ) clear : both 박스 float:left 적용한 박스 아래에 clear: both라고 적힌 빈 div 박스를 만들어 줄 때 (다른 기능없이 clear:both 기능만 하는 div박스를 html로 만드는 대신) pseudo-element로 ..

head에 아래와 같은 코드 있어야 모바일에서 작동할 수 있다. 미디어 쿼리는 CSS 파일 제일 아랫쪽에 작성한다! 똑같은 클래스명으로 똑같은 스타일을 재정의하는(덮어씌우는) 것이기 때문에 맨 마지막에 작성해야한다. @media screen and (max-width : 1200px) { .box { font-size : 40px; } } @media screen and (max-width : 1200px) : "현재 브라우저의 폭이 1200px 이하일 경우에 아래 스타일을 적용한다" 라는 뜻

기존의 레거시 코드를 수정할 때 원본파일을 건들면 안되는 경우라면 1. 같은 클래스명 하단에 쓰기 2. 우선순위 높이기 3. specificity 높이기 셋 중 한가지 방법을 택한다. 1. 같은 클래스 명 하단에 쓰기 .box { background : red; } .box { background : blue; } 같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용하므로 하단에 같은 클래스명으로 css를 수정한다. 를 하단에 사용할 수록 같은 클래스를 하단에 작성한 것과 똑같은 효과이기 때문에 내가 수정한 css 를 아래쪽에 첨부한다. 2. 우선순위 높이기 tag