기로그 기로그

1.SASS란 CSS는 규모가 커지면 복잡해지고 유지관리가 어려워지는데 이때 CSS 전처리기가 도움이 될 수 있다. CSS전처리기는 CSS의 확장된 기능을 제공하여 보다 간단하고 효율적으로 CSS를 작성하게 도와주고 이를 CSS로 변환하여 웹페이지에 적용한다.Sass(Syntactically Awesome Style Sheets)는 css의 대표적인 전처리기로 css를 더 쉽게 작성하고 쉽게 유지보수 할 수 있도록 도와주는 도구이다. SASS와 SCSS Sass는 두 가지 확장자(scss/sass)를 지원한다. Sass가 처음 나왔을 때 sass만 지원하였다. 즉 Sass는 Scss의 문법을 포함하는 상위 집합이라고 할 수 있다. 이 둘의 가장 큰 차이점은 문법에 있다. Sass Sass는 중괄호와 세미..

background속성은 배경에 관련된 스타일과 속성을 설정할 수 있다. 주로 사용되는 속성에 대해서 정리를 해 보았다. 1️⃣background-image 요소에 배경 이미지를 지정한다. 이미지 파일 경로나 url을 사용하여 배경 이미지를 지정할 수 있다. ⚠️background-image 속성 주의사항 url()을 사용하여 이미지를 배경으로 사용하는 경우 웹 접근성에 영향을 미칠 수 있다. 배경 이미지는 스크린 리더기 등의 기술에 읽히지 않기 때문에 배경 이미지 외에 img태그를 추가해 사이즈를 1px로 줄여 숨기는 방식을 사용할 수 있다. 2️⃣background-size 이미지의 사이즈를 조절한다. 값으로 %,px이 올 수 있지만, 보통 cover나 contain속성을 사용한다. 이런 원본이미지가..

컨테이너 속성에 이어 아이템 속성에 대해 공부한 내용들을 정리했다. 1️⃣flex-basis flex로 설정된 컨테이너 안의 초기 아이템 크기를 설정하는데 사용된다. 길이 값(px,%등)을 사용하여 설정할 수 있다. 기본값은 auto이며 이 값은 컨텐츠 크기에 따라 결정된다. flex-direction에 따라 대상이 변한다. row:너비 column:높이 ⚠️flex-basis와 width의 차이점 원래의 width가100px이 넘지 않는 아이템은 100px이 되었고, 100px이 넘는 아이템은 그대로 크기를 유지한다. 참고로 flex-basis를 사용할 때 ,박스의 컨텐츠가 한글이거나 띄어쓰기가 있다면 자동으로 줄바꿈 된다. (flxe의 동작이 아닌 css의 동작이 그렇다고 한다.) 즉, basis는 ..

화면을 구성할 때 flex 속성을 사용하면 유연하게 아이템을 배치할 수 있다. flex는 기본적으로 컨테이너 속성과 아이템 속성 두 가지로 나눠볼 수 있다. 컨테이너 속성 1️⃣display : flex; display의 값을 flex 로 선언해주면 플렉스 박스로 만들어 줄 수 있다. 컨테이너 안의 아이템들은 화면 해상도에 맞는게 유연하게 동작하게 된다. inline-flex값도 존재하지만 거의 사용되지 않는다. 컨테이너의 아이템들이 반응형으로 동작하지 않기 때문이다. 👉🏻flex : 컨테이너가 블록 속성을 갖는다. 👉🏻inline-flex : inline-block과 같은 속성을 갖는다. flex속성을 지정하면 아이템들은 가로 방향으로 배치되고, 따로 길이를 지정하지 않으면 content만큼만 차지하..

position속성 CSS에서 요소들은 문서의 흐름에 따라 배치된다. item1 item2 item3 이러한 흐름에서 벗어나 배치를 하기 위한 속성이 존재한다. 바로 position속성이다. position속성은 요소가 어떤 위치 기준으로 배치되는지를 결정하는 위치지정 컨텍스트(positioning context)를 설정하는 옵션이다. 이 position속성의 값은 크게 5가지가 존재한다. 1.static(기본값) 기본 값으로 문서의 흐름에 따라 요소를 배치한다. top,right,bottom,left,z-index 속성을 적용할 수 없다. 2.absolute 요소를 문서 흐름에서 벗어나 가장 가까운 상위 요소 중 position값이 static이 아닌 첫 번째 요소를 기준으로 위치를 결정한다. 상위에 ..

CSS에서 요소들은 모두 박스로 인식이 된다. 박스는 Content,Padding,Border,Margin으로 구성된다. content영역에 입력한 내용이 들어가고 그 주위를 Padding,Border,Margin이 감싸고 있다. 이러한 박스(요소)들은 마진 상쇄(margin collapsing)의 영향을 받는다. 이는 margin이 겹치는 현상을 말한다. 마진 상쇄가 발생하는 조건 1.인접 형제 요소의 여백이 겹칠때 두 개 이상의 요소가 형제 관계에 있고, 상단 및 하단 마진이 서로 닿아 있는 경우, 마진이 하나로 겹쳐진다. 결합된 마진의 크기는 두 마진 중 더 큰 값으로 결정된다. 2.비어 있는 블록 내용물이 없고 패딩이나 테두리도 없는 요소의 상단 및 하단 마진은 상쇄된다. box-sizing 속성..

기본적인 CSS의 조작방법을 다룬다. CSS는 Properties(속성)와 Values(값)로 이루어진다. 이것을 선택자를 통해서 속성을 변경 할 수 있으며, 여러개의 선택자를 결합자를 이용하여 더욱 자세히 요소를 선택할 수 있게 할 수 있다. 자주 사용되는 선택자와 결합자 속성의 값에는 어떤 종류가 오는지에 대해정리. 선택자 HTML요소를 선택하고 스타일을 적용하는데 사용되는 패턴이다. 클래스,ID,속성 등을 사용하여 요소를 식별하고 선택한다. 🔎대표적인 선택자 1️⃣요소 선택자 HTML요소 이름을 사용해서 선택한다. div p h1 2️⃣클래스 선택자 HTML요소의 ‘class’속성 값을 사용하여 선택한다. ‘ . ’으로 시작한다. .container .wrap 3️⃣ID 선택자 HTML요소의 ‘ID..